OLD | NEW |
---|---|
1 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> | 1 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html "> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html "> |
3 | 3 |
4 <!-- Common css variables for Material Design settings. --> | 4 <!-- Common css variables for Material Design settings. --> |
5 <style is="custom-style"> | 5 <style is="custom-style"> |
6 /* We keep our vars in sort order, though some vars must be defined prior to | |
7 * others. The --settings-* vars are defined explicitly prior to the --paper-* | |
8 * and --iron-* vars. | |
9 */ | |
6 :root { | 10 :root { |
7 --checkbox-margin-start: 2px; | 11 /* Some colors use non-MD colors. These custom colors are specified by |
8 --checkbox-size: 16px; | 12 * UX design (bettes@). */ |
9 --checkbox-spacing: 18px; | |
10 --iron-icon-fill-color: var(--paper-grey-600); | |
11 --iron-icon-height: 20px; | |
12 --iron-icon-spacing: 16px; | |
13 --iron-icon-width: 20px; | |
14 --paper-checkbox-label-color: inherit; | |
15 --paper-dialog-color: inherit; | |
16 --paper-icon-button: { | |
17 width: 36px; | |
18 height: 36px; | |
19 }; | |
20 --paper-input-max-width: 264px; | |
21 --paper-item: { | |
22 font-size: inherit; | |
23 }; | |
24 --paper-radio-button-label-color: inherit; | |
25 --paper-radio-group-item-padding: 0; | |
26 | |
27 --settings-toggle-bar-size: { | |
28 height: 12px; | |
29 width: 28px; | |
30 }; | |
31 --settings-toggle-button-size: { | |
32 height: 16px; | |
33 width: 16px; | |
34 }; | |
35 --settings-toggle-color: var(--google-blue-500); | |
36 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); | |
37 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); | |
38 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); | |
39 --paper-toggle-button-checked-button: var(--settings-toggle-button-size); | |
40 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); | |
41 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); | |
42 | 13 |
43 --settings-actionable: var(--cr-actionable); | 14 --settings-actionable: var(--cr-actionable); |
44 | 15 |
45 /* Custom grey for Alan (bettes@). */ | |
46 --settings-background-color: rgb(241, 241, 241); | 16 --settings-background-color: rgb(241, 241, 241); |
47 --settings-secondary: { | |
48 color: var(--paper-grey-600); | |
49 font-weight: 400; | |
50 margin-top: 4px; | |
51 }; | |
52 --settings-disabled-opacity: .65; | 17 --settings-disabled-opacity: .65; |
53 --settings-error-color: var(--paper-red-700); | 18 --settings-error-color: var(--paper-red-700); |
54 | 19 |
55 --settings-list-frame-padding: { | 20 --settings-list-frame-padding: { |
56 -webkit-padding-end: 20px; | 21 -webkit-padding-end: 20px; |
57 -webkit-padding-start: 56px; | 22 -webkit-padding-start: 56px; |
58 padding-bottom: 0; | 23 padding-bottom: 0; |
59 padding-top: 0; | 24 padding-top: 0; |
60 } | 25 } |
61 | 26 |
62 /* Some colors use non-MD colors. These custom colors are specified by | |
63 * UX design (bettes@). */ | |
64 --settings-nav-grey: rgb(90, 90, 90); | 27 --settings-nav-grey: rgb(90, 90, 90); |
65 | 28 |
66 --settings-page-vertical-margin: 21px; | 29 --settings-page-vertical-margin: 21px; |
67 | 30 |
68 --settings-row-min-height: 44px; | 31 --settings-row-min-height: 44px; |
69 --settings-row-two-line-min-height: 56px; | 32 --settings-row-two-line-min-height: 56px; |
33 --settings-secondary: { | |
34 color: var(--paper-grey-600); | |
35 font-weight: 400; | |
36 margin-top: 4px; | |
37 }; | |
70 --settings-separator-line: var(--cr-separator-line); | 38 --settings-separator-line: var(--cr-separator-line); |
71 | 39 |
72 --settings-title-bar-background-color: var(--google-blue-700); | 40 --settings-title-bar-background-color: var(--google-blue-700); |
73 --settings-title-bar-color: rgb(255, 255, 255); | 41 --settings-title-bar-color: rgb(255, 255, 255); |
74 --settings-title-search-color: rgb(192, 199, 205); | 42 --settings-title-search-color: rgb(192, 199, 205); |
43 --settings-toggle-bar-size: { | |
44 height: 12px; | |
45 width: 28px; | |
46 }; | |
47 --settings-toggle-button-size: { | |
48 height: 16px; | |
49 width: 16px; | |
50 }; | |
51 --settings-toggle-color: var(--google-blue-500); | |
52 } | |
53 | |
54 :root { | |
55 --checkbox-margin-start: 2px; | |
56 --checkbox-size: 16px; | |
57 --checkbox-spacing: 18px; | |
58 --iron-icon-fill-color: var(--paper-grey-600); | |
59 --iron-icon-height: 20px; | |
60 --iron-icon-spacing: 16px; | |
61 --iron-icon-width: 20px; | |
62 --paper-checkbox-label-color: inherit; | |
63 --paper-dialog-color: inherit; | |
64 --paper-icon-button: { | |
65 width: 36px; | |
66 height: 36px; | |
stevenjb
2016/09/07 15:45:01
sort height width
Also, should these be aligned wi
dschuyler
2016/09/07 18:25:29
Done.
| |
67 }; | |
68 --paper-input-max-width: 264px; | |
69 --paper-item: { | |
70 font-size: inherit; | |
71 }; | |
72 --paper-radio-button-label-color: inherit; | |
73 --paper-radio-group-item-padding: 0; | |
74 | |
75 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); | |
76 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); | |
77 --paper-toggle-button-checked-button: var(--settings-toggle-button-size); | |
78 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); | |
79 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); | |
80 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); | |
75 } | 81 } |
76 </style> | 82 </style> |
OLD | NEW |