| 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 | 15 |
| 16 --settings-background-color: rgb(241, 241, 241); | 16 --settings-background-color: rgb(241, 241, 241); |
| 17 --settings-box-row-padding: 20px; | 17 --settings-box-row-padding: 20px; |
| 18 --settings-indent-width: 36px; | 18 --settings-indent-width: 36px; |
| 19 --settings-card-max-width: 640px; | 19 --settings-card-max-width: 640px; |
| 20 --settings-disabled-opacity: .65; | 20 --settings-disabled-opacity: .65; |
| 21 --settings-error-color: var(--paper-red-700); | 21 --settings-error-color: var(--paper-red-700); |
| 22 | 22 |
| 23 /* The inner icon is 20px in size. paper-icon-button has 8px padding. */ | |
| 24 --settings-icon-ripple-size: 36px; | |
| 25 --settings-icon-size: 20px; | |
| 26 | |
| 27 --settings-list-frame-padding: { | 23 --settings-list-frame-padding: { |
| 28 -webkit-padding-end: var(--settings-box-row-padding); | 24 -webkit-padding-end: var(--settings-box-row-padding); |
| 29 -webkit-padding-start: calc( | 25 -webkit-padding-start: calc( |
| 30 var(--settings-box-row-padding) + var(--settings-indent-width)); | 26 var(--settings-box-row-padding) + var(--settings-indent-width)); |
| 31 padding-bottom: 0; | 27 padding-bottom: 0; |
| 32 padding-top: 0; | 28 padding-top: 0; |
| 33 } | 29 } |
| 34 | 30 |
| 35 --settings-nav-grey: rgb(90, 90, 90); | 31 --settings-nav-grey: rgb(90, 90, 90); |
| 36 | 32 |
| (...skipping 29 matching lines...) Expand all Loading... |
| 66 height: 16px; | 62 height: 16px; |
| 67 top: -2px; | 63 top: -2px; |
| 68 width: 16px; | 64 width: 16px; |
| 69 }; | 65 }; |
| 70 --settings-toggle-color: var(--google-blue-500); | 66 --settings-toggle-color: var(--google-blue-500); |
| 71 | 67 |
| 72 --checkbox-margin-start: 2px; | 68 --checkbox-margin-start: 2px; |
| 73 --checkbox-size: 16px; | 69 --checkbox-size: 16px; |
| 74 --checkbox-spacing: 18px; | 70 --checkbox-spacing: 18px; |
| 75 --iron-icon-fill-color: var(--paper-grey-600); | 71 --iron-icon-fill-color: var(--paper-grey-600); |
| 76 --iron-icon-height: var(--settings-icon-size); | 72 --iron-icon-height: var(--cr-icon-size); |
| 77 --iron-icon-width: var(--settings-icon-size); | 73 --iron-icon-width: var(--cr-icon-size); |
| 78 --paper-checkbox-label-color: inherit; | 74 --paper-checkbox-label-color: inherit; |
| 79 --paper-dialog-color: inherit; | 75 --paper-dialog-color: inherit; |
| 80 --paper-icon-button: { | 76 --paper-icon-button: { |
| 81 height: var(--settings-icon-ripple-size); | 77 height: var(--cr-icon-ripple-size); |
| 82 width: var(--settings-icon-ripple-size); | 78 width: var(--cr-icon-ripple-size); |
| 83 }; | 79 }; |
| 84 --paper-input-container-focus-color: var(--google-blue-500); | 80 --paper-input-container-focus-color: var(--google-blue-500); |
| 85 --paper-input-container-input: { | 81 --paper-input-container-input: { |
| 86 color: inherit; | 82 color: inherit; |
| 87 font-size: inherit; | 83 font-size: inherit; |
| 88 font-weight: inherit; | 84 font-weight: inherit; |
| 89 vertical-align: baseline; | 85 vertical-align: baseline; |
| 90 }; | 86 }; |
| 91 --paper-input-max-width: 264px; | 87 --paper-input-max-width: 264px; |
| 92 --paper-item: { | 88 --paper-item: { |
| 93 font-size: inherit; | 89 font-size: inherit; |
| 94 }; | 90 }; |
| 95 --paper-radio-button-ink-size: 40px; | 91 --paper-radio-button-ink-size: 40px; |
| 96 --paper-radio-button-label-color: inherit; | 92 --paper-radio-button-label-color: inherit; |
| 97 --paper-radio-button-size: 16px; | 93 --paper-radio-button-size: 16px; |
| 98 --paper-radio-group-item-padding: 0; | 94 --paper-radio-group-item-padding: 0; |
| 99 | 95 |
| 100 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); | 96 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); |
| 101 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); | 97 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); |
| 102 --paper-toggle-button-checked-button: { | 98 --paper-toggle-button-checked-button: { |
| 103 @apply(--settings-toggle-button-size); | 99 @apply(--settings-toggle-button-size); |
| 104 transform: translate(14px, 0); | 100 transform: translate(14px, 0); |
| 105 }; | 101 }; |
| 106 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); | 102 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); |
| 107 --paper-toggle-button-label-spacing: 0; | 103 --paper-toggle-button-label-spacing: 0; |
| 108 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); | 104 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); |
| 109 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); | 105 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); |
| 110 } | 106 } |
| 111 </style> | 107 </style> |
| OLD | NEW |