Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(229)

Side by Side Diff: ui/webui/resources/html/md_select_css.html

Issue 2753983002: MD Settings: change disabled select visuals. (Closed)
Patch Set: Created 3 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <link rel="import" href="chrome://resources/html/polymer.html"> 1 <link rel="import" href="chrome://resources/html/polymer.html">
2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html "> 2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html ">
3 3
4 <dom-module id="md-select"> 4 <dom-module id="md-select">
5 <template> 5 <template>
6 <style> 6 <style>
7 .md-select { 7 .md-select {
8 --md-arrow-width: 0.9em; 8 --md-arrow-width: 0.9em;
9 -webkit-appearance: none; 9 -webkit-appearance: none;
10 /* Ensure that the text does not overlap with the down arrow. */ 10 /* Ensure that the text does not overlap with the down arrow. */
(...skipping 14 matching lines...) Expand all
25 outline: none; 25 outline: none;
26 padding-bottom: 3px; 26 padding-bottom: 3px;
27 padding-top: 3px; 27 padding-top: 3px;
28 width: var(--md-select-width, 200px); 28 width: var(--md-select-width, 200px);
29 } 29 }
30 30
31 /* Mirroring paper-dropdown-menu disabled style. */ 31 /* Mirroring paper-dropdown-menu disabled style. */
32 .md-select[disabled] { 32 .md-select[disabled] {
33 border-bottom: 1px dashed var(--secondary-text-color); 33 border-bottom: 1px dashed var(--secondary-text-color);
34 color: var(--secondary-text-color); 34 color: var(--secondary-text-color);
35 opacity: 0.33; 35 opacity: 0.65;
36 pointer-events: none; 36 pointer-events: none;
37 } 37 }
38 38
39 :host-context([dir=rtl]) .md-select { 39 :host-context([dir=rtl]) .md-select {
40 background-position-x: 3%; 40 background-position-x: 3%;
41 } 41 }
42 42
43 .md-select-underline { 43 .md-select-underline {
44 border-top: 2px solid var(--google-blue-500); 44 border-top: 2px solid var(--google-blue-500);
45 display: block; 45 display: block;
46 position: relative; 46 position: relative;
47 top: -1px; 47 top: -1px;
48 transform: scale3d(0, 1, 1); 48 transform: scale3d(0, 1, 1);
49 transition: transform 200ms ease-in; 49 transition: transform 200ms ease-in;
50 width: 100%; 50 width: 100%;
51 } 51 }
52 52
53 .md-select:focus + .md-select-underline { 53 .md-select:focus + .md-select-underline {
54 transform: scale3d(1, 1, 1); 54 transform: scale3d(1, 1, 1);
55 transition: transform 200ms ease-out; 55 transition: transform 200ms ease-out;
56 } 56 }
57 57
58 .md-select-wrapper { 58 .md-select-wrapper {
59 display: inline-block; 59 display: inline-block;
60 max-width: 100%; 60 max-width: 100%;
61 } 61 }
62 </style> 62 </style>
63 </template> 63 </template>
64 </dom-module> 64 </dom-module>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698