| 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] { |
| 11 display: none !important; | 11 display: none !important; |
| 12 } | 12 } |
| 13 | 13 |
| 14 button[is='paper-icon-button-light'] { | 14 button[is='paper-icon-button-light'] { |
| 15 -webkit-margin-end: -8px; /* Allow ripple to overlap the end. */ | 15 -webkit-margin-end: -8px; /* Allow ripple to overlap the end. */ |
| 16 -webkit-margin-start: 16px; | 16 -webkit-margin-start: 16px; |
| 17 background-position: center; | 17 background-position: center; |
| 18 background-repeat: no-repeat; | 18 background-repeat: no-repeat; |
| 19 background-size: var(--settings-icon-size); | 19 background-size: var(--settings-icon-size); |
| 20 flex-shrink: 0; | 20 flex-shrink: 0; |
| 21 height: var(--settings-icon-ripple-size); | 21 height: var(--settings-icon-ripple-size); |
| 22 width: var(--settings-icon-ripple-size); | 22 width: var(--settings-icon-ripple-size); |
| 23 } | 23 } |
| 24 | 24 |
| 25 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { | 25 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { |
| 26 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 26 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
| 27 } | 27 } |
| 28 | 28 |
| 29 button[is='paper-icon-button-light'].subpage-arrow { | |
| 30 background-image: url(images/arrow_right.svg); | |
| 31 } | |
| 32 | |
| 33 button[is='paper-icon-button-light'].icon-external { | |
| 34 background-image: url(images/open_in_new.svg); | |
| 35 } | |
| 36 | |
| 37 .subpage-arrow, | |
| 38 .icon-external { | |
| 39 display: none; | |
| 40 } | |
| 41 | |
| 42 [actionable] :-webkit-any(.subpage-arrow, .icon-external), | |
| 43 [actionable]:-webkit-any(.subpage-arrow, .icon-external) { | |
| 44 display: block; | |
| 45 } | |
| 46 | |
| 47 :host-context([dir=rtl]) paper-icon-button[icon='settings:arrow-back'] { | 29 :host-context([dir=rtl]) paper-icon-button[icon='settings:arrow-back'] { |
| 48 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 30 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
| 49 } | 31 } |
| 50 | 32 |
| 51 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ | 33 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
| 52 h2 { | 34 h2 { |
| 53 align-items: center; | 35 align-items: center; |
| 54 align-self: flex-start; | 36 align-self: flex-start; |
| 55 color: var(--paper-grey-600); | 37 color: var(--paper-grey-600); |
| 56 display: flex; | 38 display: flex; |
| (...skipping 389 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 446 /* Turns the arrow direction downwards, when the bubble is placed above | 428 /* Turns the arrow direction downwards, when the bubble is placed above |
| 447 * the anchor element */ | 429 * the anchor element */ |
| 448 .search-bubble-innards.above::after { | 430 .search-bubble-innards.above::after { |
| 449 -webkit-transform: rotate(-135deg); | 431 -webkit-transform: rotate(-135deg); |
| 450 bottom: -5px; | 432 bottom: -5px; |
| 451 top: auto; | 433 top: auto; |
| 452 } | 434 } |
| 453 </style> | 435 </style> |
| 454 </template> | 436 </template> |
| 455 </dom-module> | 437 </dom-module> |
| OLD | NEW |