| 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 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { | 8 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { |
| 9 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 9 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
| 10 } | 10 } |
| (...skipping 302 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 313 align-items: center; | 313 align-items: center; |
| 314 flex: auto; | 314 flex: auto; |
| 315 } | 315 } |
| 316 | 316 |
| 317 .no-outline, | 317 .no-outline, |
| 318 [scrollable] .no-outline { | 318 [scrollable] .no-outline { |
| 319 background: none; | 319 background: none; |
| 320 outline: none; | 320 outline: none; |
| 321 } | 321 } |
| 322 | 322 |
| 323 /* TODO(dschuyler): replace with .separator. | |
| 324 * The secondary-action wraps a clickable sub-area of a .settings-box. | |
| 325 * Here is an example with and without a secondary action box: | |
| 326 * | |
| 327 * +-------------------------------------------------------+ | |
| 328 * | Main action area .settings-box | .secondary-action | | |
| 329 * +-------------------------------------------------------+ | |
| 330 * | Another setting-box without a secondary-action | | |
| 331 * +-------------------------------------------------------+ */ | |
| 332 :-webkit-any(.settings-box, .list-item) .secondary-action { | |
| 333 -webkit-border-start: var(--settings-separator-line); | |
| 334 -webkit-margin-start: 20px; | |
| 335 -webkit-padding-start: 20px; | |
| 336 align-items: center; | |
| 337 display: flex; | |
| 338 flex-shrink: 0; | |
| 339 height: 36px; | |
| 340 } | |
| 341 | |
| 342 :-webkit-any(.settings-box, .list-item).two-line .secondary-action { | |
| 343 height: 46px; | |
| 344 } | |
| 345 | |
| 346 /* Helper for a list frame to automatically avoid the separator line. */ | 323 /* Helper for a list frame to automatically avoid the separator line. */ |
| 347 .vertical-list > *:not(:first-of-type) { | 324 .vertical-list > *:not(:first-of-type) { |
| 348 border-top: var(--settings-separator-line); | 325 border-top: var(--settings-separator-line); |
| 349 } | 326 } |
| 350 | 327 |
| 351 /* The separator a vertical line like a horizontal rule <hr> tag, but goes | 328 /* The separator a vertical line like a horizontal rule <hr> tag, but goes |
| 352 * the other way. An example is near the |sign out| button on the People | 329 * the other way. An example is near the |sign out| button on the People |
| 353 * settings. */ | 330 * settings. */ |
| 354 :-webkit-any(.settings-box, .list-item) .separator { | 331 :-webkit-any(.settings-box, .list-item) .separator { |
| 355 -webkit-border-start: var(--settings-separator-line); | 332 -webkit-border-start: var(--settings-separator-line); |
| (...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 415 transform: rotate(-135deg); | 392 transform: rotate(-135deg); |
| 416 } | 393 } |
| 417 | 394 |
| 418 .column-header { | 395 .column-header { |
| 419 color: var(--paper-grey-600); | 396 color: var(--paper-grey-600); |
| 420 font-weight: 500; | 397 font-weight: 500; |
| 421 } | 398 } |
| 422 </style> | 399 </style> |
| 423 </template> | 400 </template> |
| 424 </dom-module> | 401 </dom-module> |
| OLD | NEW |