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