| OLD | NEW |
| 1 <link rel="import" href="/settings_vars_css.html"> | 1 <link rel="import" href="/settings_vars_css.html"> |
| 2 | 2 |
| 3 <dom-module id="md-select"> | 3 <dom-module id="md-select"> |
| 4 <template> | 4 <template> |
| 5 <style> | 5 <style> |
| 6 .md-select { | 6 .md-select { |
| 7 -webkit-appearance: none; | 7 -webkit-appearance: none; |
| 8 background: url(images/arrow_down.svg) 97% 70% no-repeat; | 8 background: url(images/arrow_down.svg) 97% 70% no-repeat; |
| 9 background-size: 0.9em; | 9 background-size: 0.9em; |
| 10 border-bottom: 1px solid var(--paper-grey-300); | 10 border-bottom: 1px solid var(--paper-grey-300); |
| 11 border-left: none; | 11 border-left: none; |
| 12 /* Override Mac's default border-radius */ |
| 13 border-radius: 0; |
| 12 border-right: none; | 14 border-right: none; |
| 13 border-top: none; | 15 border-top: none; |
| 14 color: var(--primary-text-color); | 16 color: var(--primary-text-color); |
| 15 cursor: pointer; | 17 cursor: pointer; |
| 16 font-family: inherit; | 18 font-family: inherit; |
| 17 font-size: inherit; | 19 font-size: inherit; |
| 18 outline: none; | 20 outline: none; |
| 19 padding: 3px 0; | 21 padding: 3px 0; |
| 20 width: 200px; | 22 width: 200px; |
| 21 } | 23 } |
| 22 | 24 |
| 23 :host-context([dir=rtl]) .md-select { | 25 :host-context([dir=rtl]) .md-select { |
| 24 background-position-x: 3%; | 26 background-position-x: 3%; |
| 25 } | 27 } |
| 26 | 28 |
| 27 .md-select-underline { | 29 .md-select-underline { |
| 28 border-top: 2px solid var(--paper-indigo-500); | 30 border-top: 2px solid var(--google-blue-500); |
| 29 display: block; | 31 display: block; |
| 30 position: relative; | 32 position: relative; |
| 31 top: -1px; | 33 top: -1px; |
| 32 transform: scale3d(0, 1, 1); | 34 transform: scale3d(0, 1, 1); |
| 33 transition: transform 200ms ease-in; | 35 transition: transform 200ms ease-in; |
| 34 width: 100%; | 36 width: 100%; |
| 35 } | 37 } |
| 36 | 38 |
| 37 .md-select:focus + .md-select-underline { | 39 .md-select:focus + .md-select-underline { |
| 38 transform: scale3d(1, 1, 1); | 40 transform: scale3d(1, 1, 1); |
| 39 transition: transform 200ms ease-out; | 41 transition: transform 200ms ease-out; |
| 40 } | 42 } |
| 41 | 43 |
| 42 .md-select-wrapper { | 44 .md-select-wrapper { |
| 43 display: inline-block; | 45 display: inline-block; |
| 44 } | 46 } |
| 45 </style> | 47 </style> |
| 46 </template> | 48 </template> |
| 47 </dom-module> | 49 </dom-module> |
| OLD | NEW |