Chromium Code Reviews| 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 --md-arrow-width: 0.9em; | 7 --md-arrow-width: 0.9em; |
| 8 -webkit-appearance: none; | 8 -webkit-appearance: none; |
| 9 /* Ensure that the text does not overlap with the down arrow. */ | 9 /* Ensure that the text does not overlap with the down arrow. */ |
| 10 -webkit-padding-end: calc(var(--md-arrow-width) * 1.8); | 10 -webkit-padding-end: calc(var(--md-arrow-width) * 1.8); |
| 11 background: url(images/arrow_down.svg) 97% center no-repeat; | 11 background: url(images/arrow_down.svg) 97% center no-repeat; |
| 12 background-size: var(--md-arrow-width); | 12 background-size: var(--md-arrow-width); |
| 13 border-bottom: 1px solid var(--paper-grey-300); | 13 border-bottom: 1px solid var(--paper-grey-300); |
| 14 border-left: none; | 14 border-left: none; |
| 15 /* Override Mac's default border-radius */ | 15 /* Override Mac's default border-radius */ |
| 16 border-radius: 0; | 16 border-radius: 0; |
| 17 border-right: none; | 17 border-right: none; |
| 18 border-top: none; | 18 border-top: none; |
| 19 color: var(--primary-text-color); | 19 color: var(--primary-text-color); |
| 20 cursor: pointer; | 20 cursor: pointer; |
| 21 font-family: inherit; | 21 font-family: inherit; |
| 22 font-size: inherit; | 22 font-size: inherit; |
| 23 outline: none; | 23 outline: none; |
| 24 padding-bottom: 3px; | 24 padding-bottom: 3px; |
| 25 padding-top: 3px; | 25 padding-top: 3px; |
| 26 width: 200px; | 26 width: 200px; |
| 27 } | 27 } |
| 28 | 28 |
| 29 /* Mirroring paper-dropdown-menu disabled style */ | |
|
dschuyler
2016/10/11 00:12:41
nit: period at the end
style. */
dpapad
2016/10/11 00:31:48
Done.
| |
| 30 .md-select[disabled] { | |
| 31 border-bottom: 1px dashed var(--secondary-text-color); | |
| 32 color: var(--secondary-text-color); | |
| 33 opacity: 0.33; | |
| 34 pointer-events: none; | |
| 35 } | |
| 36 | |
| 29 :host-context([dir=rtl]) .md-select { | 37 :host-context([dir=rtl]) .md-select { |
| 30 background-position-x: 3%; | 38 background-position-x: 3%; |
| 31 } | 39 } |
| 32 | 40 |
| 33 .md-select-underline { | 41 .md-select-underline { |
| 34 border-top: 2px solid var(--google-blue-500); | 42 border-top: 2px solid var(--google-blue-500); |
| 35 display: block; | 43 display: block; |
| 36 position: relative; | 44 position: relative; |
| 37 top: -1px; | 45 top: -1px; |
| 38 transform: scale3d(0, 1, 1); | 46 transform: scale3d(0, 1, 1); |
| 39 transition: transform 200ms ease-in; | 47 transition: transform 200ms ease-in; |
| 40 width: 100%; | 48 width: 100%; |
| 41 } | 49 } |
| 42 | 50 |
| 43 .md-select:focus + .md-select-underline { | 51 .md-select:focus + .md-select-underline { |
| 44 transform: scale3d(1, 1, 1); | 52 transform: scale3d(1, 1, 1); |
| 45 transition: transform 200ms ease-out; | 53 transition: transform 200ms ease-out; |
| 46 } | 54 } |
| 47 | 55 |
| 48 .md-select-wrapper { | 56 .md-select-wrapper { |
| 49 display: inline-block; | 57 display: inline-block; |
| 50 } | 58 } |
| 51 </style> | 59 </style> |
| 52 </template> | 60 </template> |
| 53 </dom-module> | 61 </dom-module> |
| OLD | NEW |