| 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 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { | 14 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { |
| 15 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 15 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
| 16 } | 16 } |
| 17 | 17 |
| 18 :host-context([dir=rtl]) paper-icon-button[icon='settings:arrow-back'] { | 18 :host-context([dir=rtl]) paper-icon-button[icon='cr:arrow-back'] { |
| 19 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 19 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
| 20 } | 20 } |
| 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-top: 24px; | 31 padding-top: 24px; |
| 32 padding-bottom: 12px; | 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='cr: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: 32px; | 41 height: 32px; |
| 42 margin: 0; | 42 margin: 0; |
| 43 } | 43 } |
| 44 | 44 |
| 45 paper-button[toggles][active] { | 45 paper-button[toggles][active] { |
| 46 background-color: var(--paper-grey-300); | 46 background-color: var(--paper-grey-300); |
| (...skipping 329 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 376 /* Turns the arrow direction downwards, when the bubble is placed above | 376 /* Turns the arrow direction downwards, when the bubble is placed above |
| 377 * the anchor element */ | 377 * the anchor element */ |
| 378 .search-bubble-innards.above::after { | 378 .search-bubble-innards.above::after { |
| 379 -webkit-transform: rotate(-135deg); | 379 -webkit-transform: rotate(-135deg); |
| 380 bottom: -5px; | 380 bottom: -5px; |
| 381 top: auto; | 381 top: auto; |
| 382 } | 382 } |
| 383 </style> | 383 </style> |
| 384 </template> | 384 </template> |
| 385 </dom-module> | 385 </dom-module> |
| OLD | NEW |