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 .md-select[disabled] { | |
|
dschuyler
2016/10/10 23:56:26
Please make a comment about where these values
cam
dpapad
2016/10/11 00:05:11
Done.
| |
| 30 border-bottom: 1px dashed #737373; | |
|
dschuyler
2016/10/10 23:56:26
Maybe the 737373 could be replace with a var()
may
dpapad
2016/10/11 00:05:11
Done, thanks for the suggestion, I was suspecting
| |
| 31 color: #737373; | |
| 32 opacity: 0.33; | |
| 33 pointer-events: none; | |
| 34 } | |
| 35 | |
| 29 :host-context([dir=rtl]) .md-select { | 36 :host-context([dir=rtl]) .md-select { |
| 30 background-position-x: 3%; | 37 background-position-x: 3%; |
| 31 } | 38 } |
| 32 | 39 |
| 33 .md-select-underline { | 40 .md-select-underline { |
| 34 border-top: 2px solid var(--google-blue-500); | 41 border-top: 2px solid var(--google-blue-500); |
| 35 display: block; | 42 display: block; |
| 36 position: relative; | 43 position: relative; |
| 37 top: -1px; | 44 top: -1px; |
| 38 transform: scale3d(0, 1, 1); | 45 transform: scale3d(0, 1, 1); |
| 39 transition: transform 200ms ease-in; | 46 transition: transform 200ms ease-in; |
| 40 width: 100%; | 47 width: 100%; |
| 41 } | 48 } |
| 42 | 49 |
| 43 .md-select:focus + .md-select-underline { | 50 .md-select:focus + .md-select-underline { |
| 44 transform: scale3d(1, 1, 1); | 51 transform: scale3d(1, 1, 1); |
| 45 transition: transform 200ms ease-out; | 52 transition: transform 200ms ease-out; |
| 46 } | 53 } |
| 47 | 54 |
| 48 .md-select-wrapper { | 55 .md-select-wrapper { |
| 49 display: inline-block; | 56 display: inline-block; |
| 50 } | 57 } |
| 51 </style> | 58 </style> |
| 52 </template> | 59 </template> |
| 53 </dom-module> | 60 </dom-module> |
| OLD | NEW |