| OLD | NEW |
|---|
| 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/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"> | 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 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | 6 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> |
| 7 </head><body><dom-module id="night-light-slider"> | 7 </head><body><dom-module id="night-light-slider"> |
| 8 <template> | 8 <template> |
| 9 <style> | 9 <style> |
| 10 :host { | 10 :host { |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 47 border-radius: 6px; | 47 border-radius: 6px; |
| 48 height: 12px; | 48 height: 12px; |
| 49 left: 0; | 49 left: 0; |
| 50 margin-left: 10px; | 50 margin-left: 10px; |
| 51 margin-top: 10px; | 51 margin-top: 10px; |
| 52 position: absolute; | 52 position: absolute; |
| 53 width: 12px; | 53 width: 12px; |
| 54 z-index: 3; | 54 z-index: 3; |
| 55 } | 55 } |
| 56 | 56 |
| 57 .knob-inner:focus { |
| 58 outline: none; |
| 59 } |
| 60 |
| 57 .expanded-knob { | 61 .expanded-knob { |
| 58 transform: scale(1.5); | 62 transform: scale(1.25); |
| 59 z-index: 3; | 63 z-index: 3; |
| 60 } | 64 } |
| 61 | 65 |
| 62 #progressContainer { | 66 #progressContainer { |
| 63 height: 100%; | 67 height: 100%; |
| 64 overflow: hidden; | 68 overflow: hidden; |
| 65 position: absolute; | 69 position: absolute; |
| 66 width: 100%; | 70 width: 100%; |
| 67 } | 71 } |
| 68 | 72 |
| 69 .progress { | 73 .progress { |
| 70 background: var(--google-blue-700); | 74 background: var(--google-blue-700); |
| 71 height: 100%; | 75 height: 100%; |
| 72 position: absolute; | 76 position: absolute; |
| 73 z-index: 1; | 77 z-index: 1; |
| 74 } | 78 } |
| 75 | 79 |
| 76 #labelContainer { | 80 #labelContainer { |
| 77 height: 2em; | 81 height: 1.75em; |
| 78 } | 82 } |
| 79 | 83 |
| 80 .label { | 84 .label { |
| 81 background: var(--google-blue-700); | 85 background: var(--google-blue-700); |
| 82 border-radius: 14px; | 86 border-radius: 14px; |
| 83 color: white; | 87 color: white; |
| 84 font-size: 12px; | 88 font-size: 12px; |
| 85 left: 0; | 89 left: 0; |
| 86 line-height: 1.5em; | 90 line-height: 1.5em; |
| 87 margin-left: -2.5em; | 91 margin-left: -2.5em; |
| 88 position: absolute; | 92 position: absolute; |
| 89 text-align: center; | 93 text-align: center; |
| 94 transition: margin-top 200ms cubic-bezier(0, 0, 0.2, 1); |
| 90 vertical-align: middle; | 95 vertical-align: middle; |
| 91 width: 5em; | 96 width: 5em; |
| 92 } | 97 } |
| 93 | 98 |
| 94 .end-label-overlap { | 99 .end-label-overlap { |
| 95 margin-top: -2em; | 100 margin-top: -2em; |
| 96 } | 101 } |
| 97 | 102 |
| 98 #markersContainer { | 103 #markersContainer { |
| 99 display: flex; | 104 display: flex; |
| (...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 181 <div style="[[getLegendStyle_(100, isRTL_)]]"> | 186 <div style="[[getLegendStyle_(100, isRTL_)]]"> |
| 182 [[getLocaleTimeString_(18, 0)]] | 187 [[getLocaleTimeString_(18, 0)]] |
| 183 </div> | 188 </div> |
| 184 </div> | 189 </div> |
| 185 <div id="dummyRippleContainer" hidden></div> | 190 <div id="dummyRippleContainer" hidden></div> |
| 186 </div> | 191 </div> |
| 187 | 192 |
| 188 </template> | 193 </template> |
| 189 </dom-module> | 194 </dom-module> |
| 190 <script src="night_light_slider.js"></script></body></html> | 195 <script src="night_light_slider.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2969473004:
[Night Light] CL11: Enhancements (Closed)
