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

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

Issue 2811403002: WebUI: Fix md-select disabled look after adding left/right padding. (Closed)
Patch Set: Created 3 years, 8 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-select-underline { 8 .md-select-underline {
9 --md-side-padding: 12px; 9 --md-side-padding: 12px;
10 } 10 }
(...skipping 16 matching lines...) Expand all
27 font-family: inherit; 27 font-family: inherit;
28 font-size: inherit; 28 font-size: inherit;
29 outline: none; 29 outline: none;
30 padding-bottom: 4px; 30 padding-bottom: 4px;
31 padding-top: 3px; 31 padding-top: 3px;
32 width: calc(var(--md-select-width, 200px) + 2 * var(--md-side-padding)); 32 width: calc(var(--md-select-width, 200px) + 2 * var(--md-side-padding));
33 } 33 }
34 34
35 /* Mirroring paper-dropdown-menu disabled style. */ 35 /* Mirroring paper-dropdown-menu disabled style. */
36 .md-select[disabled] { 36 .md-select[disabled] {
37 border-bottom: 1px dashed var(--secondary-text-color);
38 color: var(--secondary-text-color);
39 opacity: 0.65;
40 pointer-events: none; 37 pointer-events: none;
41 } 38 }
42 39
40 .md-select[disabled],
41 .md-select[disabled] + .md-select-underline {
42 color: var(--secondary-text-color);
43 opacity: 0.65;
44 }
45
43 :host-context([dir=rtl]) .md-select { 46 :host-context([dir=rtl]) .md-select {
44 background-position-x: calc(var(--md-side-padding) + 3%); 47 background-position-x: calc(var(--md-side-padding) + 3%);
45 } 48 }
46 49
47 /* Persistent underline */ 50 /* Persistent underline */
48 .md-select-underline { 51 .md-select-underline {
49 -webkit-margin-end: 0; 52 -webkit-margin-end: 0;
50 -webkit-margin-start: var(--md-side-padding); 53 -webkit-margin-start: var(--md-side-padding);
51 border-top: 1px solid var(--paper-grey-300); 54 border-top: 1px solid var(--paper-grey-300);
52 display: block; 55 display: block;
(...skipping 17 matching lines...) Expand all
70 .md-select-underline::after { 73 .md-select-underline::after {
71 position: relative; 74 position: relative;
72 top: -1px; 75 top: -1px;
73 } 76 }
74 77
75 .md-select:focus + .md-select-underline::after { 78 .md-select:focus + .md-select-underline::after {
76 transform: scale3d(1, 1, 1); 79 transform: scale3d(1, 1, 1);
77 transition: transform 200ms ease-out; 80 transition: transform 200ms ease-out;
78 } 81 }
79 82
83 .md-select[disabled] + .md-select-underline {
84 border-top: 1px dashed var(--secondary-text-color);
85 }
86
80 .md-select-wrapper { 87 .md-select-wrapper {
81 display: inline-block; 88 display: inline-block;
82 max-width: 100%; 89 max-width: 100%;
83 } 90 }
84 </style> 91 </style>
85 </template> 92 </template>
86 </dom-module> 93 </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