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

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

Issue 2815113002: MD Settings: Fix alignment issues after adding left/right padding to md-select. (Closed)
Patch Set: Specify width 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 }
11 11
12 .md-select { 12 .md-select {
13 --md-arrow-width: 0.9em; 13 --md-arrow-width: 0.9em;
14 -webkit-appearance: none; 14 -webkit-appearance: none;
15 -webkit-margin-end: calc(-1 * var(--md-side-padding));
15 /* Ensure that the text does not overlap with the down arrow. */ 16 /* Ensure that the text does not overlap with the down arrow. */
16 -webkit-padding-end: calc(var(--md-side-padding) + 17 -webkit-padding-end: calc(var(--md-side-padding) +
17 var(--md-arrow-width) * 1.8); 18 var(--md-arrow-width) * 1.8);
18 -webkit-padding-start: var(--md-side-padding); 19 -webkit-padding-start: var(--md-side-padding);
19 background: url( 20 background: url(
20 chrome://resources/images/arrow_down.svg) 21 chrome://resources/images/arrow_down.svg)
21 calc(97% - var(--md-side-padding)) center no-repeat; 22 calc(97% - var(--md-side-padding)) center no-repeat;
22 background-size: var(--md-arrow-width); 23 background-size: var(--md-arrow-width);
23 border: none; 24 border: none;
24 color: var(--primary-text-color); 25 color: var(--primary-text-color);
25 cursor: pointer; 26 cursor: pointer;
26 font-family: inherit; 27 font-family: inherit;
27 font-size: inherit; 28 font-size: inherit;
28 outline: none; 29 outline: none;
29 padding-bottom: 4px; 30 padding-bottom: 4px;
30 padding-top: 3px; 31 padding-top: 3px;
31 width: var(--md-select-width, 200px); 32 width: calc(var(--md-select-width, 200px) + 2 * var(--md-side-padding));
32 } 33 }
33 34
34 /* Mirroring paper-dropdown-menu disabled style. */ 35 /* Mirroring paper-dropdown-menu disabled style. */
35 .md-select[disabled] { 36 .md-select[disabled] {
36 border-bottom: 1px dashed var(--secondary-text-color); 37 border-bottom: 1px dashed var(--secondary-text-color);
37 color: var(--secondary-text-color); 38 color: var(--secondary-text-color);
38 opacity: 0.65; 39 opacity: 0.65;
39 pointer-events: none; 40 pointer-events: none;
40 } 41 }
41 42
42 :host-context([dir=rtl]) .md-select { 43 :host-context([dir=rtl]) .md-select {
43 background-position-x: calc(var(--md-side-padding) + 3%); 44 background-position-x: calc(var(--md-side-padding) + 3%);
44 } 45 }
45 46
46 /* Persistent underline */ 47 /* Persistent underline */
47 .md-select-underline { 48 .md-select-underline {
49 -webkit-margin-end: 0;
50 -webkit-margin-start: var(--md-side-padding);
48 border-top: 1px solid var(--paper-grey-300); 51 border-top: 1px solid var(--paper-grey-300);
49 display: block; 52 display: block;
50 margin: 0 var(--md-side-padding); 53 margin-bottom: 0;
54 margin-top: 0;
51 } 55 }
52 56
53 /* Focus underline */ 57 /* Focus underline */
54 .md-select-underline::after { 58 .md-select-underline::after {
55 border-top: 2px solid var(--google-blue-500); 59 border-top: 2px solid var(--google-blue-500);
56 content: ''; 60 content: '';
57 display: block; 61 display: block;
58 transform: scale3d(0, 1, 1); 62 transform: scale3d(0, 1, 1);
59 transition: transform 200ms ease-in; 63 transition: transform 200ms ease-in;
60 } 64 }
(...skipping 12 matching lines...) Expand all
73 transition: transform 200ms ease-out; 77 transition: transform 200ms ease-out;
74 } 78 }
75 79
76 .md-select-wrapper { 80 .md-select-wrapper {
77 display: inline-block; 81 display: inline-block;
78 max-width: 100%; 82 max-width: 100%;
79 } 83 }
80 </style> 84 </style>
81 </template> 85 </template>
82 </dom-module> 86 </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