| 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 |