ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="../shared_vars_css.html">

<!-- Common input styling for Material Design WebUI. -->
<dom-module id="cr-input-style">
  <template>
    <style>
      :host {
        --cr-input-error-color: var(--google-red-600);
        --cr-input-focus-color: var(--google-blue-600);
        display: block;
        /* Avoid showing outline when focus() programmatically called multiple
           times in a row. */
        outline: none;
      }

      /* Label styling below. */
      #label {
        @apply --cr-form-field-label;
      }

      :host([focused_]:not([readonly]):not([invalid])) #label {
        color: var(--cr-input-focus-color);
      }

      /* Input styling below. */
      #input-container {
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        width: var(--cr-input-width, 100%);

        @apply --cr-input-container;
      }

      #input {
        -webkit-appearance: none;
        background-color: var(--cr-input-background-color,
            var(--google-grey-refresh-100));
        border: none;
        box-sizing: border-box;
        caret-color: var(--cr-input-focus-color);
        color: var(--cr-input-color, var(--google-grey-900));
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        outline: none;
        text-align: inherit;
        text-overflow: ellipsis;
        width: 100%;

        /**
         * When using mixins, avoid using padding shorthand. Using both the
         * shorthand and top/bottom/start/end can lead to style override issues.
         * This is only noticable when the |optimize_webui=true| build argument
         * is used.
         *
         * See https://crbug.com/846254 and associated CL for more information.
         */
        -webkit-padding-end: 8px;
        -webkit-padding-start: 8px;
        padding-bottom: 6px;
        padding-top: 6px;

        @apply --cr-input-input;
      }

      /* Underline styling below. */
      #underline {
        border-bottom: 2px solid var(--cr-input-focus-color);
        bottom: 0;
        box-sizing: border-box;
        left: 0;
        margin: auto;
        opacity: 0;
        position: absolute;
        right: 0;
        transition: opacity 120ms ease-out, width 0 linear 180ms;
        width: 0;
      }

      :host([invalid]) #underline,
      :host([focused_]:not([readonly])) #underline {
        opacity: 1;
        transition: width 180ms ease-out, opacity 120ms ease-in;
        width: 100%;
      }
    </style>
  </template>
</dom-module>