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; |
11 background-position: center; | 11 background-position: center; |
12 background-repeat: no-repeat; | 12 background-repeat: no-repeat; |
13 background-size: var(--settings-icon-size); | 13 background-size: var(--settings-icon-size); |
14 flex-shrink: 0; | 14 flex-shrink: 0; |
15 height: var(--settings-icon-ripple-size); | 15 height: var(--settings-icon-ripple-size); |
16 width: var(--settings-icon-ripple-size); | 16 width: var(--settings-icon-ripple-size); |
17 } | 17 } |
18 | 18 |
19 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { | 19 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { |
20 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 20 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
21 } | 21 } |
22 | 22 |
23 [actionable] button[is="paper-icon-button-light"].subpage-arrow { | 23 [actionable] button[is='paper-icon-button-light'].subpage-arrow { |
24 background-image: url(images/arrow_right.svg); | 24 background-image: url(images/arrow_right.svg); |
25 } | 25 } |
26 | 26 |
27 [actionable] button[is="paper-icon-button-light"].icon-external { | 27 [actionable] button[is='paper-icon-button-light'].icon-external { |
28 background-image: url(images/open_in_new.svg); | 28 background-image: url(images/open_in_new.svg); |
29 } | 29 } |
30 | 30 |
31 :host-context([dir=rtl]) paper-icon-button[icon='settings:arrow-back'] { | 31 :host-context([dir=rtl]) paper-icon-button[icon='settings:arrow-back'] { |
32 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 32 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
33 } | 33 } |
34 | 34 |
35 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ | 35 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
36 h2 { | 36 h2 { |
37 align-items: center; | 37 align-items: center; |
(...skipping 388 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
426 /* Turns the arrow direction downwards, when the bubble is placed above | 426 /* Turns the arrow direction downwards, when the bubble is placed above |
427 * the anchor element */ | 427 * the anchor element */ |
428 .search-bubble-innards.above::after { | 428 .search-bubble-innards.above::after { |
429 -webkit-transform: rotate(-135deg); | 429 -webkit-transform: rotate(-135deg); |
430 bottom: -5px; | 430 bottom: -5px; |
431 top: auto; | 431 top: auto; |
432 } | 432 } |
433 </style> | 433 </style> |
434 </template> | 434 </template> |
435 </dom-module> | 435 </dom-module> |
OLD | NEW |