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 --paper-icon-button-light-ripple: { | 9 --paper-icon-button-light-ripple: { |
10 /* Center the ripple on the icon button. */ | 10 /* Center the ripple on the icon button. */ |
(...skipping 289 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
300 .settings-box.continuation { | 300 .settings-box.continuation { |
301 border-top: none; | 301 border-top: none; |
302 } | 302 } |
303 | 303 |
304 .settings-box.block { | 304 .settings-box.block { |
305 display: block; | 305 display: block; |
306 } | 306 } |
307 | 307 |
308 /* A row with two lines of text. Often the lower line will be .secondary. | 308 /* A row with two lines of text. Often the lower line will be .secondary. |
309 */ | 309 */ |
310 .settings-box.two-line { | 310 .two-line { |
311 min-height: var(--settings-row-two-line-min-height); | 311 min-height: var(--settings-row-two-line-min-height); |
312 } | 312 } |
313 | 313 |
314 /* | 314 /* |
315 * A settings box with a single start-aligned column, generally but not | 315 * A single start-aligned column, generally but not necessarily used in |
316 * necessarily used in combination with two-line. | 316 * combination with two-line. |
317 */ | 317 */ |
318 .settings-box.single-column { | 318 .single-column { |
319 align-items: flex-start; | 319 align-items: flex-start; |
320 flex-direction: column; | 320 flex-direction: column; |
321 justify-content: center; | 321 justify-content: center; |
322 } | 322 } |
323 | 323 |
324 /* The lower line of text in a .settings-box.two-line. */ | 324 /* The lower line of text in a two-line row. */ |
325 .settings-box .secondary { | 325 .secondary { |
326 @apply(--settings-secondary); | 326 @apply(--settings-secondary); |
327 } | 327 } |
328 | 328 |
329 /* The middle part (horizontally) of a row. */ | 329 /* The middle part (horizontally) of a row. */ |
330 .settings-box .middle { | 330 .settings-box .middle { |
331 -webkit-padding-start: 16px; | 331 -webkit-padding-start: 16px; |
332 align-items: center; | 332 align-items: center; |
333 flex: auto; | 333 flex: auto; |
334 } | 334 } |
335 | 335 |
336 .settings-box .middle.two-line { | 336 .settings-box .middle.two-line, |
| 337 .settings-box .start.two-line { |
337 display: flex; | 338 display: flex; |
338 min-height: var(--settings-row-two-line-min-height); | |
339 } | 339 } |
340 | 340 |
341 /* The start (left in LTR) part (horizontally) of a row. */ | 341 /* The start (left in LTR) part (horizontally) of a row. */ |
342 .settings-box .start { | 342 .settings-box .start { |
343 align-items: center; | 343 align-items: center; |
344 flex: auto; | 344 flex: auto; |
345 } | 345 } |
346 | 346 |
347 .settings-box .start.two-line { | |
348 display: flex; | |
349 min-height: var(--settings-row-two-line-min-height); | |
350 } | |
351 | |
352 /* The secondary-action wraps a clickable sub-area of a .settings-box. | 347 /* The secondary-action wraps a clickable sub-area of a .settings-box. |
353 * An example is the |sign out| button on the People settings. | 348 * An example is the |sign out| button on the People settings. |
354 * Here is an example with and without a secondary action box: | 349 * Here is an example with and without a secondary action box: |
355 * | 350 * |
356 * +-------------------------------------------------------+ | 351 * +-------------------------------------------------------+ |
357 * | Main action area .settings-box | .secondary-action | | 352 * | Main action area .settings-box | .secondary-action | |
358 * +-------------------------------------------------------+ | 353 * +-------------------------------------------------------+ |
359 * | Another setting-box without a secondary-action | | 354 * | Another setting-box without a secondary-action | |
360 * +-------------------------------------------------------+ */ | 355 * +-------------------------------------------------------+ */ |
361 .settings-box .secondary-action { | 356 .settings-box .secondary-action { |
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
428 /* Turns the arrow direction downwards, when the bubble is placed above | 423 /* Turns the arrow direction downwards, when the bubble is placed above |
429 * the anchor element */ | 424 * the anchor element */ |
430 .search-bubble-innards.above::after { | 425 .search-bubble-innards.above::after { |
431 -webkit-transform: rotate(-135deg); | 426 -webkit-transform: rotate(-135deg); |
432 bottom: -5px; | 427 bottom: -5px; |
433 top: auto; | 428 top: auto; |
434 } | 429 } |
435 </style> | 430 </style> |
436 </template> | 431 </template> |
437 </dom-module> | 432 </dom-module> |
OLD | NEW |