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 | 6 /* Vars are kept in sort order, but some must be defined prior to others. */ |
7 * others. The --settings-* vars are defined explicitly prior to the --paper-* | 7 |
8 * and --iron-* vars. | 8 /* Single attribute and other simple settings vars are defined first. */ |
9 */ | |
10 :root { | 9 :root { |
11 /* Some colors use non-MD colors. These custom colors are specified by | 10 /* Some colors use non-MD colors. These custom colors are specified by |
12 * UX design (bettes@). */ | 11 * UX design (bettes@). */ |
13 | 12 |
14 --settings-actionable: var(--cr-actionable); | 13 --settings-actionable: var(--cr-actionable); |
15 | |
16 --settings-background-color: rgb(241, 241, 241); | 14 --settings-background-color: rgb(241, 241, 241); |
15 --settings-box-row-padding: 20px; | |
17 --settings-disabled-opacity: .65; | 16 --settings-disabled-opacity: .65; |
18 --settings-error-color: var(--paper-red-700); | 17 --settings-error-color: var(--paper-red-700); |
18 --settings-nav-grey: rgb(90, 90, 90); | |
19 --settings-page-vertical-margin: 21px; | |
20 --settings-row-min-height: 44px; | |
21 --settings-row-two-line-min-height: 56px; | |
22 --settings-separator-line: var(--cr-separator-line); | |
23 --settings-title-bar-background-color: var(--google-blue-700); | |
24 --settings-title-bar-color: rgb(255, 255, 255); | |
25 --settings-title-search-color: rgb(192, 199, 205); | |
26 --settings-toggle-color: var(--google-blue-500); | |
27 } | |
19 | 28 |
29 /* Style blocks are defined after single attribute vars. */ | |
30 :root { | |
20 --settings-list-frame-padding: { | 31 --settings-list-frame-padding: { |
21 -webkit-padding-end: 20px; | 32 -webkit-padding-end: var(--settings-box-row-padding); |
22 -webkit-padding-start: 56px; | 33 -webkit-padding-start: 56px; |
23 padding-bottom: 0; | 34 padding-bottom: 0; |
24 padding-top: 0; | 35 padding-top: 0; |
25 } | 36 } |
26 | |
27 --settings-nav-grey: rgb(90, 90, 90); | |
28 | |
29 --settings-page-vertical-margin: 21px; | |
30 | |
31 --settings-row-min-height: 44px; | |
32 --settings-row-two-line-min-height: 56px; | |
33 --settings-secondary: { | 37 --settings-secondary: { |
34 color: var(--paper-grey-600); | 38 color: var(--paper-grey-600); |
35 font-weight: 400; | 39 font-weight: 400; |
36 margin-top: 4px; | 40 margin-top: 4px; |
37 }; | 41 }; |
38 --settings-separator-line: var(--cr-separator-line); | |
39 | |
40 --settings-title-bar-background-color: var(--google-blue-700); | |
41 --settings-title-bar-color: rgb(255, 255, 255); | |
42 --settings-title-search-color: rgb(192, 199, 205); | |
43 --settings-toggle-bar-size: { | 42 --settings-toggle-bar-size: { |
44 height: 12px; | 43 height: 12px; |
45 width: 28px; | 44 width: 28px; |
46 }; | 45 }; |
47 --settings-toggle-button-size: { | 46 --settings-toggle-button-size: { |
48 height: 16px; | 47 height: 16px; |
49 width: 16px; | 48 width: 16px; |
50 }; | 49 }; |
51 --settings-toggle-color: var(--google-blue-500); | |
52 } | 50 } |
53 | 51 |
52 /* Polymer vars are defined last. */ | |
54 :root { | 53 :root { |
55 --checkbox-margin-start: 2px; | 54 --checkbox-margin-start: 2px; |
michaelpg
2016/09/15 02:24:28
--checkbox-* are Settings vars, not Polymer vars
stevenjb
2016/09/15 17:42:17
I will rename and move these and put all of these
| |
56 --checkbox-size: 16px; | 55 --checkbox-size: 16px; |
57 --checkbox-spacing: 18px; | 56 --checkbox-spacing: 18px; |
58 --iron-icon-fill-color: var(--paper-grey-600); | 57 --iron-icon-fill-color: var(--paper-grey-600); |
59 --iron-icon-height: 20px; | 58 --iron-icon-height: 20px; |
60 --iron-icon-spacing: 16px; | 59 --iron-icon-spacing: 16px; |
61 --iron-icon-width: 20px; | 60 --iron-icon-width: 20px; |
62 --paper-checkbox-label-color: inherit; | 61 --paper-checkbox-label-color: inherit; |
63 --paper-dialog-color: inherit; | 62 --paper-dialog-color: inherit; |
64 --paper-icon-button: { | 63 --paper-icon-button: { |
65 height: 36px; | 64 height: 36px; |
66 width: 36px; | 65 width: 36px; |
67 }; | 66 }; |
68 --paper-input-max-width: 264px; | 67 --paper-input-max-width: 264px; |
69 --paper-item: { | 68 --paper-item: { |
70 font-size: inherit; | 69 font-size: inherit; |
71 }; | 70 }; |
72 --paper-radio-button-label-color: inherit; | 71 --paper-radio-button-label-color: inherit; |
73 --paper-radio-group-item-padding: 0; | 72 --paper-radio-group-item-padding: 0; |
74 | 73 |
75 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); | 74 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); |
76 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); | 75 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); |
77 --paper-toggle-button-checked-button: var(--settings-toggle-button-size); | 76 --paper-toggle-button-checked-button: var(--settings-toggle-button-size); |
78 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); | 77 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); |
79 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); | 78 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); |
80 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); | 79 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); |
81 } | 80 } |
82 </style> | 81 </style> |
OLD | NEW |