Index: chrome/browser/resources/settings/settings_vars_css.html |
diff --git a/chrome/browser/resources/settings/settings_vars_css.html b/chrome/browser/resources/settings/settings_vars_css.html |
index dd2d858cabb5f782962a5ec629dfcd2aab022393..d47877620690e1459412213834bf6ef87662bb88 100644 |
--- a/chrome/browser/resources/settings/settings_vars_css.html |
+++ b/chrome/browser/resources/settings/settings_vars_css.html |
@@ -3,43 +3,45 @@ |
<!-- Common css variables for Material Design settings. --> |
<style is="custom-style"> |
- /* We keep our vars in sort order, though some vars must be defined prior to |
- * others. The --settings-* vars are defined explicitly prior to the --paper-* |
- * and --iron-* vars. |
- */ |
+ /* Vars are kept in sort order, but some must be defined prior to others. */ |
+ |
+ /* Single attribute and other simple settings vars are defined first. */ |
:root { |
/* Some colors use non-MD colors. These custom colors are specified by |
* UX design (bettes@). */ |
--settings-actionable: var(--cr-actionable); |
- |
--settings-background-color: rgb(241, 241, 241); |
+ --settings-box-row-padding: 20px; |
+ --settings-checkbox-margin-start: 2px; |
+ --settings-checkbox-size: 16px; |
+ --settings-checkbox-spacing: 18px; |
--settings-disabled-opacity: .65; |
--settings-error-color: var(--paper-red-700); |
+ --settings-nav-grey: rgb(90, 90, 90); |
+ --settings-page-vertical-margin: 21px; |
+ --settings-row-min-height: 44px; |
+ --settings-row-two-line-min-height: 56px; |
+ --settings-separator-line: var(--cr-separator-line); |
+ --settings-title-bar-background-color: var(--google-blue-700); |
+ --settings-title-bar-color: rgb(255, 255, 255); |
+ --settings-title-search-color: rgb(192, 199, 205); |
+ --settings-toggle-color: var(--google-blue-500); |
+ } |
+ /* Style blocks are defined after single attribute vars. */ |
+ :root { |
--settings-list-frame-padding: { |
- -webkit-padding-end: 20px; |
+ -webkit-padding-end: var(--settings-box-row-padding); |
-webkit-padding-start: 56px; |
padding-bottom: 0; |
padding-top: 0; |
} |
- |
- --settings-nav-grey: rgb(90, 90, 90); |
- |
- --settings-page-vertical-margin: 21px; |
- |
- --settings-row-min-height: 44px; |
- --settings-row-two-line-min-height: 56px; |
--settings-secondary: { |
color: var(--paper-grey-600); |
font-weight: 400; |
margin-top: 4px; |
}; |
- --settings-separator-line: var(--cr-separator-line); |
- |
- --settings-title-bar-background-color: var(--google-blue-700); |
- --settings-title-bar-color: rgb(255, 255, 255); |
- --settings-title-search-color: rgb(192, 199, 205); |
--settings-toggle-bar-size: { |
height: 12px; |
left: 4px; |
@@ -49,13 +51,10 @@ |
height: 16px; |
width: 16px; |
}; |
- --settings-toggle-color: var(--google-blue-500); |
} |
+ /* Polymer vars are defined last. */ |
:root { |
- --checkbox-margin-start: 2px; |
- --checkbox-size: 16px; |
- --checkbox-spacing: 18px; |
--iron-icon-fill-color: var(--paper-grey-600); |
--iron-icon-height: 20px; |
--iron-icon-spacing: 16px; |