| 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 10 matching lines...) Expand all Loading... |
| 21 | 21 |
| 22 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ | 22 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
| 23 h2 { | 23 h2 { |
| 24 align-items: center; | 24 align-items: center; |
| 25 align-self: flex-start; | 25 align-self: flex-start; |
| 26 color: var(--paper-grey-600); | 26 color: var(--paper-grey-600); |
| 27 display: flex; | 27 display: flex; |
| 28 font-size: inherit; | 28 font-size: inherit; |
| 29 font-weight: 500; | 29 font-weight: 500; |
| 30 margin: 0; | 30 margin: 0; |
| 31 padding-bottom: 12px; |
| 31 padding-top: 24px; | 32 padding-top: 24px; |
| 32 padding-bottom: 12px; | |
| 33 } | 33 } |
| 34 | 34 |
| 35 iron-icon[icon='cr:check'], | 35 iron-icon[icon='cr:check'], |
| 36 iron-icon[icon='settings:done'] { | 36 iron-icon[icon='settings:done'] { |
| 37 --iron-icon-fill-color: var(--google-green-500); | 37 --iron-icon-fill-color: var(--google-green-500); |
| 38 } | 38 } |
| 39 | 39 |
| 40 paper-button { | 40 paper-button { |
| 41 height: 36px; | 41 height: 36px; |
| 42 margin: 0; | 42 margin: 0; |
| (...skipping 166 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 209 .list-item > label span[disabled] { | 209 .list-item > label span[disabled] { |
| 210 opacity: var(--settings-disabled-opacity); | 210 opacity: var(--settings-disabled-opacity); |
| 211 } | 211 } |
| 212 | 212 |
| 213 .list-item > paper-icon-item { | 213 .list-item > paper-icon-item { |
| 214 padding: 0; | 214 padding: 0; |
| 215 } | 215 } |
| 216 | 216 |
| 217 /* This button has no ink ripple. */ | 217 /* This button has no ink ripple. */ |
| 218 .list-button[is='action-link'] { | 218 .list-button[is='action-link'] { |
| 219 min-height: inherit; | 219 align-items: center; |
| 220 display: flex; | 220 display: flex; |
| 221 align-items: center; | |
| 222 flex: 1; | 221 flex: 1; |
| 223 font-weight: 500; | 222 font-weight: 500; |
| 223 min-height: inherit; |
| 224 } | 224 } |
| 225 | 225 |
| 226 /* A row with two lines of text. Often the lower line will be .secondary. | 226 /* A row with two lines of text. Often the lower line will be .secondary. |
| 227 */ | 227 */ |
| 228 .two-line { | 228 .two-line { |
| 229 min-height: var(--settings-row-two-line-min-height); | 229 min-height: var(--settings-row-two-line-min-height); |
| 230 } | 230 } |
| 231 | 231 |
| 232 /* A settings-box is a horizontal row of text or controls within a | 232 /* A settings-box is a horizontal row of text or controls within a |
| 233 * setting section (page or subpage). */ | 233 * setting section (page or subpage). */ |
| (...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 298 } | 298 } |
| 299 | 299 |
| 300 /* The start (left in LTR) part (horizontally) of a row. */ | 300 /* The start (left in LTR) part (horizontally) of a row. */ |
| 301 .settings-box .start { | 301 .settings-box .start { |
| 302 align-items: center; | 302 align-items: center; |
| 303 flex: auto; | 303 flex: auto; |
| 304 } | 304 } |
| 305 | 305 |
| 306 [scrollable] .no-outline { | 306 [scrollable] .no-outline { |
| 307 background: none; | 307 background: none; |
| 308 cursor: initial; |
| 308 outline: none; | 309 outline: none; |
| 309 cursor: initial; | |
| 310 } | 310 } |
| 311 | 311 |
| 312 /* The secondary-action wraps a clickable sub-area of a .settings-box. | 312 /* The secondary-action wraps a clickable sub-area of a .settings-box. |
| 313 * An example is the |sign out| button on the People settings. | 313 * An example is the |sign out| button on the People settings. |
| 314 * Here is an example with and without a secondary action box: | 314 * Here is an example with and without a secondary action box: |
| 315 * | 315 * |
| 316 * +-------------------------------------------------------+ | 316 * +-------------------------------------------------------+ |
| 317 * | Main action area .settings-box | .secondary-action | | 317 * | Main action area .settings-box | .secondary-action | |
| 318 * +-------------------------------------------------------+ | 318 * +-------------------------------------------------------+ |
| 319 * | Another setting-box without a secondary-action | | 319 * | Another setting-box without a secondary-action | |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 382 transform: rotate(-135deg); | 382 transform: rotate(-135deg); |
| 383 } | 383 } |
| 384 | 384 |
| 385 .column-header { | 385 .column-header { |
| 386 color: var(--paper-grey-600); | 386 color: var(--paper-grey-600); |
| 387 font-weight: 500; | 387 font-weight: 500; |
| 388 } | 388 } |
| 389 </style> | 389 </style> |
| 390 </template> | 390 </template> |
| 391 </dom-module> | 391 </dom-module> |
| OLD | NEW |