| 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 button[is='paper-icon-button-light'] { | 8 button[is='paper-icon-button-light'] { |
| 9 -webkit-margin-end: -8px; /* Allow ripple to overlap the end. */ | 9 -webkit-margin-end: -8px; /* Allow ripple to overlap the end. */ |
| 10 -webkit-margin-start: 16px; | 10 -webkit-margin-start: 16px; |
| (...skipping 257 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 268 } | 268 } |
| 269 | 269 |
| 270 /* This button has no ink ripple. */ | 270 /* This button has no ink ripple. */ |
| 271 .list-item.list-button { | 271 .list-item.list-button { |
| 272 @apply(--settings-actionable); | 272 @apply(--settings-actionable); |
| 273 align-items: center; | 273 align-items: center; |
| 274 color: var(--google-blue-500); | 274 color: var(--google-blue-500); |
| 275 font-weight: 500; | 275 font-weight: 500; |
| 276 } | 276 } |
| 277 | 277 |
| 278 /* A row with two lines of text. Often the lower line will be .secondary. |
| 279 */ |
| 280 .two-line { |
| 281 min-height: var(--settings-row-two-line-min-height); |
| 282 } |
| 283 |
| 278 /* A settings-box is a horizontal row of text or controls within a | 284 /* A settings-box is a horizontal row of text or controls within a |
| 279 * setting section (page or subpage). */ | 285 * setting section (page or subpage). */ |
| 280 .settings-box { | 286 .settings-box { |
| 281 align-items: center; | 287 align-items: center; |
| 282 border-top: var(--settings-separator-line); | 288 border-top: var(--settings-separator-line); |
| 283 display: flex; | 289 display: flex; |
| 284 min-height: var(--settings-row-min-height); | 290 min-height: var(--settings-box-min-height); |
| 285 padding: 0 var(--settings-box-row-padding); | 291 padding: 0 var(--settings-box-row-padding); |
| 286 } | 292 } |
| 287 | 293 |
| 294 .settings-box.two-line { |
| 295 min-height: var(--settings-box-two-line-min-height); |
| 296 } |
| 297 |
| 288 /* We use an explicit tag to remove the top border, rather than a | 298 /* We use an explicit tag to remove the top border, rather than a |
| 289 * :first-of-type modifier. This is a conscious choice, please consult | 299 * :first-of-type modifier. This is a conscious choice, please consult |
| 290 * with dbeam@ or dschuyler@ prior to changing it. */ | 300 * with dbeam@ or dschuyler@ prior to changing it. */ |
| 291 .settings-box.first, | 301 .settings-box.first, |
| 292 .settings-box.continuation { | 302 .settings-box.continuation { |
| 293 border-top: none; | 303 border-top: none; |
| 294 } | 304 } |
| 295 | 305 |
| 296 .settings-box.block { | 306 .settings-box.block { |
| 297 display: block; | 307 display: block; |
| 298 } | 308 } |
| 299 | 309 |
| 300 /* A row with two lines of text. Often the lower line will be .secondary. | |
| 301 */ | |
| 302 .two-line { | |
| 303 min-height: var(--settings-row-two-line-min-height); | |
| 304 } | |
| 305 | |
| 306 /* A start-aligned column. */ | 310 /* A start-aligned column. */ |
| 307 .single-column { | 311 .single-column { |
| 308 align-items: flex-start; | 312 align-items: flex-start; |
| 309 flex-direction: column; | 313 flex-direction: column; |
| 310 justify-content: center; | 314 justify-content: center; |
| 311 } | 315 } |
| 312 | 316 |
| 313 /* A settings-box with no height other than the separator line. */ | 317 /* A settings-box with no height other than the separator line. */ |
| 314 .settings-box.line-only { | 318 .settings-box.line-only { |
| 315 min-height: 0; | 319 min-height: 0; |
| (...skipping 110 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 426 /* Turns the arrow direction downwards, when the bubble is placed above | 430 /* Turns the arrow direction downwards, when the bubble is placed above |
| 427 * the anchor element */ | 431 * the anchor element */ |
| 428 .search-bubble-innards.above::after { | 432 .search-bubble-innards.above::after { |
| 429 -webkit-transform: rotate(-135deg); | 433 -webkit-transform: rotate(-135deg); |
| 430 bottom: -5px; | 434 bottom: -5px; |
| 431 top: auto; | 435 top: auto; |
| 432 } | 436 } |
| 433 </style> | 437 </style> |
| 434 </template> | 438 </template> |
| 435 </dom-module> | 439 </dom-module> |
| OLD | NEW |