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

Side by Side Diff: chrome/browser/resources/settings/md_select_css.html

Issue 2400483002: MD Settings: Adjust <select> focus color and bottom border radius. (Closed)
Patch Set: Created 4 years, 2 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="/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 -webkit-appearance: none; 7 -webkit-appearance: none;
8 background: url(images/arrow_down.svg) 97% 70% no-repeat; 8 background: url(images/arrow_down.svg) 97% 70% no-repeat;
9 background-size: 0.9em; 9 background-size: 0.9em;
10 border-bottom: 1px solid var(--paper-grey-300); 10 border-bottom: 1px solid var(--paper-grey-300);
11 border-left: none; 11 border-left: none;
12 /* Override Mac's default border-radius */
13 border-radius: 0;
12 border-right: none; 14 border-right: none;
13 border-top: none; 15 border-top: none;
14 color: var(--primary-text-color); 16 color: var(--primary-text-color);
15 cursor: pointer; 17 cursor: pointer;
16 font-family: inherit; 18 font-family: inherit;
17 font-size: inherit; 19 font-size: inherit;
18 outline: none; 20 outline: none;
19 padding: 3px 0; 21 padding: 3px 0;
20 width: 200px; 22 width: 200px;
21 } 23 }
22 24
23 :host-context([dir=rtl]) .md-select { 25 :host-context([dir=rtl]) .md-select {
24 background-position-x: 3%; 26 background-position-x: 3%;
25 } 27 }
26 28
27 .md-select-underline { 29 .md-select-underline {
28 border-top: 2px solid var(--paper-indigo-500); 30 border-top: 2px solid var(--google-blue-500);
29 display: block; 31 display: block;
30 position: relative; 32 position: relative;
31 top: -1px; 33 top: -1px;
32 transform: scale3d(0, 1, 1); 34 transform: scale3d(0, 1, 1);
33 transition: transform 200ms ease-in; 35 transition: transform 200ms ease-in;
34 width: 100%; 36 width: 100%;
35 } 37 }
36 38
37 .md-select:focus + .md-select-underline { 39 .md-select:focus + .md-select-underline {
38 transform: scale3d(1, 1, 1); 40 transform: scale3d(1, 1, 1);
39 transition: transform 200ms ease-out; 41 transition: transform 200ms ease-out;
40 } 42 }
41 43
42 .md-select-wrapper { 44 .md-select-wrapper {
43 display: inline-block; 45 display: inline-block;
44 } 46 }
45 </style> 47 </style>
46 </template> 48 </template>
47 </dom-module> 49 </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