OLD | NEW |
1 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> | 1 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
2 <link rel="import" href="/settings_vars_css.html"> | 2 <link rel="import" href="/settings_vars_css.html"> |
3 | 3 |
4 <!-- Common styles for Material Design settings. --> | 4 <!-- Common styles for Material Design settings. --> |
5 <dom-module id="settings-shared"> | 5 <dom-module id="settings-shared"> |
6 <template> | 6 <template> |
7 <style include="cr-shared-style"> | 7 <style include="cr-shared-style"> |
8 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ | 8 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
9 h2 { | 9 h2 { |
10 align-items: center; | 10 align-items: center; |
(...skipping 144 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
155 .settings-box .secondary-button, | 155 .settings-box .secondary-button, |
156 .settings-box .secondary-button { | 156 .settings-box .secondary-button { |
157 margin-left: -12px; | 157 margin-left: -12px; |
158 margin-right: -12px; | 158 margin-right: -12px; |
159 padding-left: 12px; | 159 padding-left: 12px; |
160 padding-right: 12px; | 160 padding-right: 12px; |
161 } | 161 } |
162 | 162 |
163 paper-checkbox { | 163 paper-checkbox { |
164 --paper-checkbox-checked-color: var(--google-blue-500); | 164 --paper-checkbox-checked-color: var(--google-blue-500); |
165 --paper-checkbox-label-spacing: var(--checkbox-spacing); | 165 --paper-checkbox-label-spacing: var(--settings-checkbox-spacing); |
166 --paper-checkbox-size: var(--checkbox-size); | 166 --paper-checkbox-size: var(--settings-checkbox-size); |
167 --paper-checkbox-unchecked-color: var(--paper-grey-600); | 167 --paper-checkbox-unchecked-color: var(--paper-grey-600); |
168 -webkit-margin-start: var(--checkbox-margin-start); | 168 -webkit-margin-start: var(--settings-checkbox-margin-start); |
169 } | 169 } |
170 | 170 |
171 paper-radio-button { | 171 paper-radio-button { |
172 --paper-radio-button-checked-color: var(--google-blue-500); | 172 --paper-radio-button-checked-color: var(--google-blue-500); |
173 --paper-radio-button-label-spacing: 18px; | 173 --paper-radio-button-label-spacing: 18px; |
174 --paper-radio-button-unchecked-color: var(--paper-grey-600); | 174 --paper-radio-button-unchecked-color: var(--paper-grey-600); |
175 -webkit-margin-start: 2px; | 175 -webkit-margin-start: 2px; |
176 align-items: center; | 176 align-items: center; |
177 display: flex; | 177 display: flex; |
178 min-height: var(--settings-row-min-height); | 178 min-height: var(--settings-row-min-height); |
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
255 font-weight: 500; | 255 font-weight: 500; |
256 } | 256 } |
257 | 257 |
258 /* A settings-box is a horizontal row of text or controls within a | 258 /* A settings-box is a horizontal row of text or controls within a |
259 * setting section (page or subpage). */ | 259 * setting section (page or subpage). */ |
260 .settings-box { | 260 .settings-box { |
261 align-items: center; | 261 align-items: center; |
262 border-top: var(--settings-separator-line); | 262 border-top: var(--settings-separator-line); |
263 display: flex; | 263 display: flex; |
264 min-height: var(--settings-row-min-height); | 264 min-height: var(--settings-row-min-height); |
265 padding: 0 20px; | 265 padding: 0 var(--settings-box-row-padding); |
266 } | 266 } |
267 | 267 |
268 /* We use an explicit tag to remove the top border, rather than a | 268 /* We use an explicit tag to remove the top border, rather than a |
269 * :first-of-type modifier. This is a conscious choice, please consult | 269 * :first-of-type modifier. This is a conscious choice, please consult |
270 * with dbeam@ or dschuyler@ prior to changing it. */ | 270 * with dbeam@ or dschuyler@ prior to changing it. */ |
271 .settings-box.first, | 271 .settings-box.first, |
272 .settings-box.continuation { | 272 .settings-box.continuation { |
273 border-top: none; | 273 border-top: none; |
274 } | 274 } |
275 | 275 |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
331 padding: 8px; | 331 padding: 8px; |
332 } | 332 } |
333 | 333 |
334 /* Helper for a list frame to automatically avoid the separator line. */ | 334 /* Helper for a list frame to automatically avoid the separator line. */ |
335 .vertical-list > *:not(:first-of-type) { | 335 .vertical-list > *:not(:first-of-type) { |
336 border-top: var(--settings-separator-line); | 336 border-top: var(--settings-separator-line); |
337 } | 337 } |
338 | 338 |
339 .settings-checkbox-spacer { | 339 .settings-checkbox-spacer { |
340 -webkit-margin-start: calc( | 340 -webkit-margin-start: calc( |
341 var(--checkbox-margin-start) + | 341 var(--settings-checkbox-margin-start) + |
342 var(--checkbox-size) + | 342 var(--settings-checkbox-size) + |
343 var(--checkbox-spacing)); | 343 var(--settings-checkbox-spacing)); |
344 } | 344 } |
345 | 345 |
346 /* Keep the slider color consistent throughout the range. */ | 346 /* Keep the slider color consistent throughout the range. */ |
347 cr-slider.always-on { | 347 cr-slider.always-on { |
348 --paper-slider-knob-start-border-color: var(--google-blue-700); | 348 --paper-slider-knob-start-border-color: var(--google-blue-700); |
349 --paper-slider-knob-start-color: var(--google-blue-700); | 349 --paper-slider-knob-start-color: var(--google-blue-700); |
350 --paper-slider-pin-start-color: var(--google-blue-700); | 350 --paper-slider-pin-start-color: var(--google-blue-700); |
351 } | 351 } |
352 | 352 |
353 .favicon-image { | 353 .favicon-image { |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
386 /* Turns the arrow direction downwards, when the bubble is placed above | 386 /* Turns the arrow direction downwards, when the bubble is placed above |
387 * the anchor element */ | 387 * the anchor element */ |
388 .search-bubble-innards.above::after { | 388 .search-bubble-innards.above::after { |
389 -webkit-transform: rotate(-135deg); | 389 -webkit-transform: rotate(-135deg); |
390 bottom: -5px; | 390 bottom: -5px; |
391 top: auto; | 391 top: auto; |
392 } | 392 } |
393 </style> | 393 </style> |
394 </template> | 394 </template> |
395 </dom-module> | 395 </dom-module> |
OLD | NEW |