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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/settings/device_page/night_light_slider.html

Issue 2950673002: [MD Settings][Night Light] CL8: Add the ripple focus effect to the slider knobs (Closed)
Patch Set: Nit Created 3 years, 6 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 | « chrome/browser/resources/settings/device_page/compiled_resources2.gyp ('k') | chrome/browser/resources/settings/device_page/night_light_slider.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html><head> 1 <html><head>
2 <link rel="import" href="chrome://resources/html/polymer.html"> 2 <link rel="import" href="chrome://resources/html/polymer.html">
3 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior /iron-a11y-keys-behavior.html"> 3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior /iron-a11y-keys-behavior.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-i nky-focus-behavior.html">
5 <link rel="import" href="../prefs/prefs_behavior.html"> 5 <link rel="import" href="../prefs/prefs_behavior.html">
6 </head><body><dom-module id="night-light-slider"> 6 </head><body><dom-module id="night-light-slider">
7 <template> 7 <template>
8 <style> 8 <style>
9 :host { 9 :host {
10 cursor: default; 10 cursor: default;
11 text-align: center; 11 text-align: center;
12 user-select: none; 12 user-select: none;
13 } 13 }
14 14
15 #sliderContainer { 15 #sliderContainer {
16 display: inline-block; 16 display: inline-block;
17 position: relative; 17 position: relative;
18 user-select: none; 18 user-select: none;
19 width: 570px; 19 width: 570px;
20 } 20 }
21 21
22 #sliderBar { 22 #sliderBar {
23 background-color: #ccc; 23 background-color: #ccc;
24 background-size: 100%; 24 background-size: 100%;
25 display: inline-block; 25 display: inline-block;
26 height: 2px; 26 height: 2px;
27 position: relative; 27 position: relative;
28 width: inherit; 28 width: inherit;
29 } 29 }
30 30
31 .knob { 31 .knob {
32 background: rgb(51, 103, 214); 32 height: 32px;
33 margin-left: -16px;
34 margin-top: -15px;
35 position: absolute;
36 width: 32px;
37 }
38
39 .knob:focus {
40 outline: none;
41 }
42
43 .knob-inner {
44 background: var(--google-blue-700);
33 border-radius: 6px; 45 border-radius: 6px;
34 height: 12px; 46 height: 12px;
35 left: 0; 47 left: 0;
36 margin-left: -6px; 48 margin-left: 10px;
37 margin-top: -5px; 49 margin-top: 10px;
38 position: absolute; 50 position: absolute;
39 width: 12px; 51 width: 12px;
40 z-index: 3; 52 z-index: 3;
41 } 53 }
42 54
43 .knob:focus {
44 box-shadow: 0 0 5pt 5pt rgb(204, 217, 245);
45 outline: none;
46 }
47
48 .expanded-knob { 55 .expanded-knob {
49 transform: scale(1.5); 56 transform: scale(1.5);
50 z-index: 3; 57 z-index: 3;
51 } 58 }
52 59
53 #progressContainer { 60 #progressContainer {
54 height: 100%; 61 height: 100%;
55 overflow: hidden; 62 overflow: hidden;
56 position: absolute; 63 position: absolute;
57 width: 100%; 64 width: 100%;
58 } 65 }
59 66
60 .progress { 67 .progress {
61 background: rgb(51, 103, 214); 68 background: var(--google-blue-700);
62 height: 100%; 69 height: 100%;
63 position: absolute; 70 position: absolute;
64 z-index: 1; 71 z-index: 1;
65 } 72 }
66 73
67 #labelContainer { 74 #labelContainer {
68 height: 2em; 75 height: 2em;
69 } 76 }
70 77
71 .label { 78 .label {
72 background: rgb(51, 103, 214); 79 background: var(--google-blue-700);
73 border-radius: 14px; 80 border-radius: 14px;
74 color: white; 81 color: white;
75 font-family: Roboto-Bold; 82 font-family: Roboto-Bold;
76 font-size: 12px; 83 font-size: 12px;
77 left: 0; 84 left: 0;
78 line-height: 1.5em; 85 line-height: 1.5em;
79 margin-left: -2.5em; 86 margin-left: -2.5em;
80 position: absolute; 87 position: absolute;
81 text-align: center; 88 text-align: center;
82 vertical-align: middle; 89 vertical-align: middle;
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
116 #legendContainer > div { 123 #legendContainer > div {
117 color: rgb(100, 100, 100); 124 color: rgb(100, 100, 100);
118 font-family: Roboto-Regular; 125 font-family: Roboto-Regular;
119 font-size: 12px; 126 font-size: 12px;
120 margin-left: -2.5em; 127 margin-left: -2.5em;
121 position: absolute; 128 position: absolute;
122 text-align: center; 129 text-align: center;
123 top: 5px; 130 top: 5px;
124 width: 5em; 131 width: 5em;
125 } 132 }
133
134 paper-ripple {
135 color: var(--google-blue-700);
136 }
126 </style> 137 </style>
127 138
128 <div id="sliderContainer"> 139 <div id="sliderContainer">
129 <div id="labelContainer"> 140 <div id="labelContainer">
130 <div id="startLabel" class="label" 141 <div id="startLabel" class="label"
131 aria-label="$i18n{displayNightLightStartTime}"> 142 aria-label="$i18n{displayNightLightStartTime}">
132 [[startTime_]] 143 [[startTime_]]
133 </div> 144 </div>
134 <div id="endLabel" class="label" 145 <div id="endLabel" class="label"
135 aria-label="$i18n{displayNightLightStopTime}"> 146 aria-label="$i18n{displayNightLightStopTime}">
136 [[endTime_]] 147 [[endTime_]]
137 </div> 148 </div>
138 </div> 149 </div>
139 <div id="sliderBar"> 150 <div id="sliderBar">
140 <div id="progressContainer"> 151 <div id="progressContainer">
141 <div id="endProgress" class="progress"></div> 152 <div id="endProgress" class="progress"></div>
142 <div id="startProgress" class="progress"></div> 153 <div id="startProgress" class="progress"></div>
143 </div> 154 </div>
144 <div id="markersContainer"> 155 <div id="markersContainer">
145 </div> 156 </div>
146 <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_" 157 <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_"
147 on-up="endDrag_" on-track="continueDrag_"></div> 158 on-up="endDrag_" on-track="continueDrag_" on-focus="onFocus_"
159 on-blur="onBlur_">
160 <div class="knob-inner" tabindex="-1"></div>
161 </div>
148 <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_" 162 <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_"
149 on-up="endDrag_" on-track="continueDrag_"></div> 163 on-up="endDrag_" on-track="continueDrag_" on-focus="onFocus_"
164 on-blur="onBlur_">
165 <div class="knob-inner" tabindex="-1"></div>
166 </div>
150 </div> 167 </div>
151 <div id="legendContainer"> 168 <div id="legendContainer">
152 <div style="left: 0%;">[[getLocaleTimeString_(18, 0)]]</div> 169 <div style="left: 0%;">[[getLocaleTimeString_(18, 0)]]</div>
153 <div style="left: 25%;">[[getLocaleTimeString_(0, 0)]]</div> 170 <div style="left: 25%;">[[getLocaleTimeString_(0, 0)]]</div>
154 <div style="left: 50%;">[[getLocaleTimeString_(6, 0)]]</div> 171 <div style="left: 50%;">[[getLocaleTimeString_(6, 0)]]</div>
155 <div style="left: 75%;">[[getLocaleTimeString_(12, 0)]]</div> 172 <div style="left: 75%;">[[getLocaleTimeString_(12, 0)]]</div>
156 <div style="left: 100%;">[[getLocaleTimeString_(18, 0)]]</div> 173 <div style="left: 100%;">[[getLocaleTimeString_(18, 0)]]</div>
157 </div> 174 </div>
175 <div id="dummyRippleContainer" hidden></div>
158 </div> 176 </div>
159 177
160 </template> 178 </template>
161 </dom-module> 179 </dom-module>
162 <script src="night_light_slider.js"></script></body></html> 180 <script src="night_light_slider.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/settings/device_page/compiled_resources2.gyp ('k') | chrome/browser/resources/settings/device_page/night_light_slider.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698