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 /* 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-* | 7 * others. The --settings-* vars are defined explicitly prior to the --paper-* |
8 * and --iron-* vars. | 8 * and --iron-* vars. |
9 */ | 9 */ |
10 :root { | 10 :root { |
11 /* Some colors use non-MD colors. These custom colors are specified by | 11 /* Some colors use non-MD colors. These custom colors are specified by |
12 * UX design (bettes@). */ | 12 * UX design (bettes@). */ |
13 | 13 |
14 --settings-actionable: var(--cr-actionable); | 14 --settings-actionable: var(--cr-actionable); |
| 15 --settings-button-padding: 12px; |
15 | 16 |
16 --settings-box-row-padding: 20px; | 17 --settings-box-row-padding: 20px; |
17 --settings-box-row-indent: calc( | 18 --settings-box-row-indent: calc( |
18 var(--settings-box-row-padding) + var(--settings-indent-width)); | 19 var(--settings-box-row-padding) + var(--settings-indent-width)); |
19 --settings-indent-width: 40px; | 20 --settings-indent-width: 40px; |
20 --settings-card-max-width: 680px; | 21 --settings-card-max-width: 680px; |
21 --settings-disabled-opacity: .65; | 22 --settings-disabled-opacity: .65; |
22 --settings-error-color: var(--paper-red-700); | 23 --settings-error-color: var(--paper-red-700); |
23 | 24 |
24 --settings-list-frame-padding: { | 25 --settings-list-frame-padding: { |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
81 | 82 |
82 --checkbox-margin-start: 2px; | 83 --checkbox-margin-start: 2px; |
83 --checkbox-size: 16px; | 84 --checkbox-size: 16px; |
84 --settings-control-spacing: var(--cr-control-spacing); | 85 --settings-control-spacing: var(--cr-control-spacing); |
85 --iron-icon-fill-color: var(--paper-grey-600); | 86 --iron-icon-fill-color: var(--paper-grey-600); |
86 --iron-icon-height: var(--cr-icon-size); | 87 --iron-icon-height: var(--cr-icon-size); |
87 --iron-icon-width: var(--cr-icon-size); | 88 --iron-icon-width: var(--cr-icon-size); |
88 --paper-checkbox-label-color: inherit; | 89 --paper-checkbox-label-color: inherit; |
89 --paper-dialog-color: inherit; | 90 --paper-dialog-color: inherit; |
90 | 91 |
91 --cr-icon-ripple-size: 40px; | |
92 --paper-icon-button: { | 92 --paper-icon-button: { |
93 /** | 93 /** |
94 * This makes the icons 20px (in combination with "--cr-icon-ripple-size: | 94 * This makes the icons 20px (in combination with --cr-icon-ripple-size), |
95 * 40px"), since paper-icon-button>iron-icon width and height are | 95 * since paper-icon-button>iron-icon width and height are hardcoded to |
96 * hardcoded to 100%. | 96 * 100%. |
97 */ | 97 */ |
98 padding: 10px; | 98 padding: var(--cr-icon-ripple-padding); |
99 }; | 99 }; |
100 --paper-input-container-focus-color: var(--google-blue-500); | 100 --paper-input-container-focus-color: var(--google-blue-500); |
101 --paper-input-container-input: { | 101 --paper-input-container-input: { |
102 color: inherit; | 102 color: inherit; |
103 font-size: inherit; | 103 font-size: inherit; |
104 font-weight: inherit; | 104 font-weight: inherit; |
105 line-height: 154%; | 105 line-height: 154%; |
106 vertical-align: baseline; | 106 vertical-align: baseline; |
107 }; | 107 }; |
108 --paper-input-container-label: { | 108 --paper-input-container-label: { |
(...skipping 28 matching lines...) Expand all Loading... |
137 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); | 137 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); |
138 --paper-toggle-button-unchecked-ink: var(--settings-toggle-ink-size); | 138 --paper-toggle-button-unchecked-ink: var(--settings-toggle-ink-size); |
139 | 139 |
140 --settings-input-underline: { | 140 --settings-input-underline: { |
141 border-color: var(--paper-grey-300); | 141 border-color: var(--paper-grey-300); |
142 }; | 142 }; |
143 | 143 |
144 --paper-input-container-underline: var(--settings-input-underline); | 144 --paper-input-container-underline: var(--settings-input-underline); |
145 } | 145 } |
146 </style> | 146 </style> |
OLD | NEW |