| 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 /* Included here so we don't have to include "iron-positioning" in every | 8 /* Included here so we don't have to include "iron-positioning" in every |
| 9 * stylesheet. See crbug.com/498405. */ | 9 * stylesheet. See crbug.com/498405. */ |
| 10 [hidden] { | 10 [hidden] { |
| (...skipping 287 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 298 | 298 |
| 299 /* The secondary-action wraps a clickable sub-area of a .settings-box. | 299 /* The secondary-action wraps a clickable sub-area of a .settings-box. |
| 300 * An example is the |sign out| button on the People settings. | 300 * An example is the |sign out| button on the People settings. |
| 301 * Here is an example with and without a secondary action box: | 301 * Here is an example with and without a secondary action box: |
| 302 * | 302 * |
| 303 * +-------------------------------------------------------+ | 303 * +-------------------------------------------------------+ |
| 304 * | Main action area .settings-box | .secondary-action | | 304 * | Main action area .settings-box | .secondary-action | |
| 305 * +-------------------------------------------------------+ | 305 * +-------------------------------------------------------+ |
| 306 * | Another setting-box without a secondary-action | | 306 * | Another setting-box without a secondary-action | |
| 307 * +-------------------------------------------------------+ */ | 307 * +-------------------------------------------------------+ */ |
| 308 .settings-box .secondary-action { | 308 :-webkit-any(.settings-box, .list-item) .secondary-action { |
| 309 -webkit-border-start: var(--settings-separator-line); | 309 -webkit-border-start: var(--settings-separator-line); |
| 310 -webkit-margin-start: 20px; | 310 -webkit-margin-start: 20px; |
| 311 -webkit-padding-start: 20px; | 311 -webkit-padding-start: 20px; |
| 312 align-items: center; | 312 align-items: center; |
| 313 display: flex; | 313 display: flex; |
| 314 flex-shrink: 0; | 314 flex-shrink: 0; |
| 315 height: var(--settings-row-min-height); | 315 height: var(--settings-row-min-height); |
| 316 } | 316 } |
| 317 | 317 |
| 318 /* Helper for a list frame to automatically avoid the separator line. */ | 318 /* Helper for a list frame to automatically avoid the separator line. */ |
| (...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 364 /* Turns the arrow direction downwards, when the bubble is placed above | 364 /* Turns the arrow direction downwards, when the bubble is placed above |
| 365 * the anchor element */ | 365 * the anchor element */ |
| 366 .search-bubble-innards.above::after { | 366 .search-bubble-innards.above::after { |
| 367 bottom: -5px; | 367 bottom: -5px; |
| 368 top: auto; | 368 top: auto; |
| 369 transform: rotate(-135deg); | 369 transform: rotate(-135deg); |
| 370 } | 370 } |
| 371 </style> | 371 </style> |
| 372 </template> | 372 </template> |
| 373 </dom-module> | 373 </dom-module> |
| OLD | NEW |