OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> | 2 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
3 <link rel="import" href="hidden_style_css.html"> | 3 <link rel="import" href="hidden_style_css.html"> |
| 4 <link rel="import" href="cr_icons_css.html"> |
4 | 5 |
5 <!-- Common styles for Material Design WebUI. Included directly in | 6 <!-- Common styles for Material Design WebUI. Included directly in |
6 settings_shared_css.html. --> | 7 settings_shared_css.html. --> |
7 <dom-module id="cr-shared-style"> | 8 <dom-module id="cr-shared-style"> |
8 <template> | 9 <template> |
9 <style include="cr-hidden-style"> | 10 <style include="cr-hidden-style cr-icons"> |
10 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { | 11 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { |
11 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 12 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
12 } | 13 } |
13 | 14 |
14 /* Chrome spinners should be blue. */ | 15 /* Chrome spinners should be blue. */ |
15 paper-spinner { | 16 paper-spinner { |
16 --paper-spinner-layer-1-color: var(--google-blue-500); | 17 --paper-spinner-layer-1-color: var(--google-blue-500); |
17 --paper-spinner-layer-2-color: var(--google-blue-500); | 18 --paper-spinner-layer-2-color: var(--google-blue-500); |
18 --paper-spinner-layer-3-color: var(--google-blue-500); | 19 --paper-spinner-layer-3-color: var(--google-blue-500); |
19 --paper-spinner-layer-4-color: var(--google-blue-500); | 20 --paper-spinner-layer-4-color: var(--google-blue-500); |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
52 -webkit-margin-end: var(--cr-icon-ripple-margin); | 53 -webkit-margin-end: var(--cr-icon-ripple-margin); |
53 -webkit-margin-start: 16px; | 54 -webkit-margin-start: 16px; |
54 background-position: center; | 55 background-position: center; |
55 background-repeat: no-repeat; | 56 background-repeat: no-repeat; |
56 background-size: var(--cr-icon-size); | 57 background-size: var(--cr-icon-size); |
57 flex-shrink: 0; | 58 flex-shrink: 0; |
58 height: var(--cr-icon-ripple-size); | 59 height: var(--cr-icon-ripple-size); |
59 width: var(--cr-icon-ripple-size); | 60 width: var(--cr-icon-ripple-size); |
60 } | 61 } |
61 | 62 |
62 button[is='paper-icon-button-light'].subpage-arrow { | |
63 background-image: url(chrome://resources/images/arrow_right.svg); | |
64 } | |
65 | |
66 button[is='paper-icon-button-light'].icon-cancel { | |
67 background-image: url(chrome://resources/images/icon_cancel.svg); | |
68 } | |
69 | |
70 button[is='paper-icon-button-light'].icon-cancel-toolbar { | |
71 background-image: | |
72 url(chrome://resources/images/icon_cancel_toolbar.svg); | |
73 } | |
74 | |
75 button[is='paper-icon-button-light'].icon-external { | |
76 background-image: url(chrome://resources/images/open_in_new.svg); | |
77 } | |
78 | |
79 .subpage-arrow, | 63 .subpage-arrow, |
80 .icon-external { | 64 .icon-external { |
81 display: none; | 65 display: none; |
82 } | 66 } |
83 | 67 |
84 paper-icon-button.subpage-arrow { | |
85 background-image: url(../images/arrow_right.svg); | |
86 } | |
87 | |
88 [actionable] :-webkit-any(.subpage-arrow, .icon-external), | 68 [actionable] :-webkit-any(.subpage-arrow, .icon-external), |
89 [actionable]:-webkit-any(.subpage-arrow, .icon-external) { | 69 [actionable]:-webkit-any(.subpage-arrow, .icon-external) { |
90 display: block; | 70 display: block; |
91 } | 71 } |
92 | 72 |
93 [scrollable] { | 73 [scrollable] { |
94 border-color: transparent; | 74 border-color: transparent; |
95 border-style: solid; | 75 border-style: solid; |
96 border-width: 1px 0; | 76 border-width: 1px 0; |
97 overflow-y: auto; | 77 overflow-y: auto; |
(...skipping 18 matching lines...) Expand all Loading... |
116 [selectable]:focus, | 96 [selectable]:focus, |
117 [selectable] > :focus { | 97 [selectable] > :focus { |
118 @apply(--cr-selectable-focus); | 98 @apply(--cr-selectable-focus); |
119 } | 99 } |
120 [selectable] > * { | 100 [selectable] > * { |
121 @apply(--cr-actionable); | 101 @apply(--cr-actionable); |
122 } | 102 } |
123 </style> | 103 </style> |
124 </template> | 104 </template> |
125 </dom-module> | 105 </dom-module> |
OLD | NEW |