| <link rel="import" href="../../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; |
| |
| /** |
| * 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. |
| */ |
| padding-bottom: var(--cr-input-padding-bottom, 6px); |
| padding-inline-end: var(--cr-input-padding-end, 8px); |
| padding-inline-start: var(--cr-input-padding-start, 8px); |
| padding-top: var(--cr-input-padding-top, 6px); |
| |
| text-align: inherit; |
| text-overflow: ellipsis; |
| width: 100%; |
| |
| @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> |