| 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 { |
| (...skipping 22 matching lines...) Expand all Loading... |
| 33 --settings-page-vertical-margin: 21px; | 33 --settings-page-vertical-margin: 21px; |
| 34 | 34 |
| 35 /* These are used for row items such as radio buttons, check boxes, list | 35 /* These are used for row items such as radio buttons, check boxes, list |
| 36 * items etc. */ | 36 * items etc. */ |
| 37 --settings-row-min-height: 44px; | 37 --settings-row-min-height: 44px; |
| 38 --settings-row-two-line-min-height: 56px; | 38 --settings-row-two-line-min-height: 56px; |
| 39 | 39 |
| 40 /* These are used for the settings-box containers, which may contain one or | 40 /* These are used for the settings-box containers, which may contain one or |
| 41 * more "row items". */ | 41 * more "row items". */ |
| 42 --settings-box-min-height: 48px; | 42 --settings-box-min-height: 48px; |
| 43 --settings-box-two-line-min-height: 60px; | 43 --settings-box-two-line-min-height: 64px; |
| 44 --settings-box-three-line-min-height: 84px; |
| 44 | 45 |
| 45 --settings-text-elide: { | 46 --settings-text-elide: { |
| 46 overflow: hidden; | 47 overflow: hidden; |
| 47 text-overflow: ellipsis; | 48 text-overflow: ellipsis; |
| 48 white-space: nowrap; | 49 white-space: nowrap; |
| 49 }; | 50 }; |
| 50 | 51 |
| 51 --settings-secondary: { | 52 --settings-secondary: { |
| 52 color: var(--paper-grey-600); | 53 color: var(--paper-grey-600); |
| 53 font-weight: 400; | 54 font-weight: 400; |
| 54 margin-top: 4px; | |
| 55 }; | 55 }; |
| 56 --settings-separator-line: var(--cr-separator-line); | 56 --settings-separator-line: var(--cr-separator-line); |
| 57 | 57 |
| 58 --settings-title-bar-background-color: var(--google-blue-700); | 58 --settings-title-bar-background-color: var(--google-blue-700); |
| 59 --settings-title-bar-color: rgb(255, 255, 255); | 59 --settings-title-bar-color: rgb(255, 255, 255); |
| 60 --settings-title-search-color: rgb(192, 199, 205); | 60 --settings-title-search-color: rgb(192, 199, 205); |
| 61 --settings-toggle-bar-size: { | 61 --settings-toggle-bar-size: { |
| 62 height: 12px; | 62 height: 12px; |
| 63 left: 4px; | 63 left: 4px; |
| 64 width: 24px; | 64 width: 28px; |
| 65 }; | 65 }; |
| 66 --settings-toggle-button-size: { | 66 --settings-toggle-button-size: { |
| 67 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); | 67 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); |
| 68 height: 16px; | 68 height: 16px; |
| 69 top: -2px; | 69 top: -2px; |
| 70 width: 16px; | 70 width: 16px; |
| 71 }; | 71 }; |
| 72 --settings-toggle-ink-size: { |
| 73 height: 40px; |
| 74 top: -12px; |
| 75 left: -12px; |
| 76 width: 40px; |
| 77 }; |
| 72 --settings-toggle-color: var(--google-blue-500); | 78 --settings-toggle-color: var(--google-blue-500); |
| 73 | 79 |
| 74 --checkbox-margin-start: 2px; | 80 --checkbox-margin-start: 2px; |
| 75 --checkbox-size: 16px; | 81 --checkbox-size: 16px; |
| 76 --checkbox-spacing: 18px; | 82 --checkbox-spacing: 18px; |
| 77 --iron-icon-fill-color: var(--paper-grey-600); | 83 --iron-icon-fill-color: var(--paper-grey-600); |
| 78 --iron-icon-height: var(--cr-icon-size); | 84 --iron-icon-height: var(--cr-icon-size); |
| 79 --iron-icon-width: var(--cr-icon-size); | 85 --iron-icon-width: var(--cr-icon-size); |
| 80 --paper-checkbox-label-color: inherit; | 86 --paper-checkbox-label-color: inherit; |
| 81 --paper-dialog-color: inherit; | 87 --paper-dialog-color: inherit; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 96 }; | 102 }; |
| 97 --paper-radio-button-ink-size: 40px; | 103 --paper-radio-button-ink-size: 40px; |
| 98 --paper-radio-button-label-color: inherit; | 104 --paper-radio-button-label-color: inherit; |
| 99 --paper-radio-button-size: 16px; | 105 --paper-radio-button-size: 16px; |
| 100 --paper-radio-group-item-padding: 0; | 106 --paper-radio-group-item-padding: 0; |
| 101 | 107 |
| 102 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); | 108 --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size); |
| 103 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); | 109 --paper-toggle-button-checked-bar-color: var(--settings-toggle-color); |
| 104 --paper-toggle-button-checked-button: { | 110 --paper-toggle-button-checked-button: { |
| 105 @apply(--settings-toggle-button-size); | 111 @apply(--settings-toggle-button-size); |
| 106 transform: translate(14px, 0); | 112 transform: translate(18px, 0); |
| 107 }; | 113 }; |
| 108 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); | 114 --paper-toggle-button-checked-button-color: var(--settings-toggle-color); |
| 109 --paper-toggle-button-label-spacing: 0; | 115 --paper-toggle-button-label-spacing: 0; |
| 110 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); | 116 --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size); |
| 111 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); | 117 --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size); |
| 118 --paper-toggle-button-unchecked-ink: var(--settings-toggle-ink-size); |
| 119 |
| 120 --settings-input-underline: { |
| 121 border-color: var(--paper-grey-300); |
| 122 } |
| 123 |
| 124 --paper-input-container-underline: var(--settings-input-underline); |
| 112 } | 125 } |
| 113 </style> | 126 </style> |
| OLD | NEW |