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 | 3 |
4 <!-- Common styles for Material Design WebUI. Included directly in | 4 <!-- Common styles for Material Design WebUI. Included directly in |
5 settings_shared_css.html. --> | 5 settings_shared_css.html. --> |
6 <dom-module id="cr-shared-style"> | 6 <dom-module id="cr-shared-style"> |
7 <template> | 7 <template> |
8 <style> | 8 <style> |
9 /* Chrome spinners should be blue. */ | 9 /* Chrome spinners should be blue. */ |
10 paper-spinner { | 10 paper-spinner { |
11 --paper-spinner-layer-1-color: var(--google-blue-500); | 11 --paper-spinner-layer-1-color: var(--google-blue-500); |
12 --paper-spinner-layer-2-color: var(--google-blue-500); | 12 --paper-spinner-layer-2-color: var(--google-blue-500); |
13 --paper-spinner-layer-3-color: var(--google-blue-500); | 13 --paper-spinner-layer-3-color: var(--google-blue-500); |
14 --paper-spinner-layer-4-color: var(--google-blue-500); | 14 --paper-spinner-layer-4-color: var(--google-blue-500); |
15 } | 15 } |
16 | 16 |
17 .action-button { | 17 .action-button { |
18 background: var(--google-blue-500); | 18 background: var(--google-blue-500); |
19 color: white; | 19 color: white; |
20 --paper-button-flat-keyboard-focus: { | 20 --paper-button-flat-keyboard-focus: { |
21 background: rgb(58, 117, 215); /* 88% of --google-blue-500 */ | 21 background: rgb(58, 117, 215); /* 88% of --google-blue-500 */ |
22 }; | 22 }; |
23 } | 23 } |
24 | 24 |
25 .action-button[disabled] { | 25 .action-button[disabled] { |
26 opacity: .25; /* TODO(dbeam): check this value with bettes. */ | 26 opacity: .2; |
27 } | 27 } |
28 | 28 |
29 .cancel-button { | 29 .cancel-button { |
30 --paper-button-flat-keyboard-focus: { | 30 --paper-button-flat-keyboard-focus: { |
31 background: rgba(0, 0, 0, .12); | 31 background: rgba(0, 0, 0, .12); |
32 }; | 32 }; |
33 } | 33 } |
34 | 34 |
35 .action-button, | 35 .action-button, |
36 .cancel-button { | 36 .cancel-button { |
37 font-weight: 500; | 37 font-weight: 500; |
| 38 padding: 0 16px; |
38 } | 39 } |
39 | 40 |
40 [actionable] { | 41 [actionable] { |
41 @apply(--cr-actionable); | 42 @apply(--cr-actionable); |
42 } | 43 } |
43 | 44 |
44 button[is='paper-icon-button-light'] { | 45 button[is='paper-icon-button-light'] { |
45 @apply(--cr-paper-icon-button-margin); | 46 @apply(--cr-paper-icon-button-margin); |
46 background-position: center; | 47 background-position: center; |
47 background-repeat: no-repeat; | 48 background-repeat: no-repeat; |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
102 [selectable]:focus, | 103 [selectable]:focus, |
103 [selectable] > :focus { | 104 [selectable] > :focus { |
104 @apply(--cr-selectable-focus); | 105 @apply(--cr-selectable-focus); |
105 } | 106 } |
106 [selectable] > * { | 107 [selectable] > * { |
107 @apply(--cr-actionable); | 108 @apply(--cr-actionable); |
108 } | 109 } |
109 </style> | 110 </style> |
110 </template> | 111 </template> |
111 </dom-module> | 112 </dom-module> |
OLD | NEW |