Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <!-- Common styles for Material Design settings. --> | 1 <!-- Common styles for Material Design settings. --> |
| 2 <dom-module id="settings-shared"> | 2 <dom-module id="settings-shared"> |
| 3 <template> | 3 <template> |
| 4 <style> | 4 <style> |
| 5 :root { | 5 :root { |
| 6 --checkbox-margin-start: 2px; | 6 --checkbox-margin-start: 2px; |
| 7 --checkbox-size: 16px; | 7 --checkbox-size: 16px; |
| 8 --checkbox-spacing: 18px; | 8 --checkbox-spacing: 18px; |
| 9 --iron-icon-fill-color: var(--paper-grey-600); | 9 --iron-icon-fill-color: var(--paper-grey-600); |
| 10 --iron-icon-height: 20px; | 10 --iron-icon-height: 20px; |
| 11 --iron-icon-spacing: 16px; | 11 --iron-icon-spacing: 16px; |
| 12 --iron-icon-width: 20px; | 12 --iron-icon-width: 20px; |
| 13 --paper-checkbox-label-color: inherit; | 13 --paper-checkbox-label-color: inherit; |
| 14 --paper-dialog-color: inherit; | 14 --paper-dialog-color: inherit; |
| 15 --paper-icon-button: { | 15 --paper-icon-button: { |
| 16 width: 36px; | 16 width: 36px; |
| 17 height: 36px; | 17 height: 36px; |
| 18 }; | 18 }; |
| 19 --paper-input-max-width: 264px; | 19 --paper-input-max-width: 264px; |
| 20 --paper-item: { | 20 --paper-item: { |
| 21 font-size: inherit; | 21 font-size: inherit; |
| 22 }; | 22 }; |
| 23 --paper-radio-button-label-color: inherit; | 23 --paper-radio-button-label-color: inherit; |
| 24 --paper-radio-group-item-padding: 0; | 24 --paper-radio-group-item-padding: 0; |
| 25 | 25 |
| 26 --settings-background-color: var(--paper-blue-grey-50); | 26 --settings-background-color: rgb(241, 241, 241); |
|
tommycli
2016/05/20 23:40:39
Alan specific color? comment?
dschuyler
2016/05/20 23:46:57
Done.
| |
| 27 --settings-secondary: { | 27 --settings-secondary: { |
| 28 color: var(--paper-grey-600); | 28 color: var(--paper-grey-600); |
| 29 font-weight: 400; | 29 font-weight: 400; |
| 30 margin-top: 4px; | 30 margin-top: 4px; |
| 31 }; | 31 }; |
| 32 --settings-error-color: var(--paper-red-700); | 32 --settings-error-color: var(--paper-red-700); |
| 33 --settings-hover-color: var(--google-grey-300); | 33 --settings-hover-color: var(--google-grey-300); |
| 34 | 34 |
| 35 /* Some colors use non-MD colors. These custom colors are specified by | 35 /* Some colors use non-MD colors. These custom colors are specified by |
| 36 * UX design (bettes@). */ | 36 * UX design (bettes@). */ |
| 37 --settings-nav-grey: rgb(90, 90, 90); | 37 --settings-nav-grey: rgb(90, 90, 90); |
| 38 | 38 |
| 39 --settings-row-min-height: 40px; | 39 --settings-row-min-height: 44px; |
| 40 --settings-separator-line: 1px solid rgba(0, 0, 0, 0.06); | 40 --settings-separator-line: 1px solid rgba(0, 0, 0, 0.06); |
| 41 | 41 |
| 42 --settings-title-bar-background-color: rgb(52, 73, 94); | 42 --settings-title-bar-background-color: var(--google-blue-700); |
| 43 --settings-title-bar-color: rgb(255, 255, 255); | 43 --settings-title-bar-color: rgb(255, 255, 255); |
| 44 --settings-title-search-color: rgb(192, 199, 205); | 44 --settings-title-search-color: rgb(192, 199, 205); |
| 45 } | 45 } |
| 46 | 46 |
| 47 h2 { | 47 h2 { |
| 48 @apply(--layout-center); | 48 @apply(--layout-center); |
| 49 display: flex; | 49 display: flex; |
| 50 font-size: 100%; | 50 font-size: 100%; |
| 51 font-weight: 500; | 51 font-weight: 500; |
| 52 margin: 0; | 52 margin: 0; |
| (...skipping 174 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 227 .settings-box.first, | 227 .settings-box.first, |
| 228 .settings-box.continuation { | 228 .settings-box.continuation { |
| 229 border-top: none; | 229 border-top: none; |
| 230 } | 230 } |
| 231 | 231 |
| 232 .settings-box.block { | 232 .settings-box.block { |
| 233 display: block; | 233 display: block; |
| 234 } | 234 } |
| 235 | 235 |
| 236 .settings-box.two-line { | 236 .settings-box.two-line { |
| 237 min-height: 52px; | 237 min-height: 56px; |
| 238 } | 238 } |
| 239 | 239 |
| 240 .settings-box .secondary { | 240 .settings-box .secondary { |
| 241 @apply(--settings-secondary); | 241 @apply(--settings-secondary); |
| 242 } | 242 } |
| 243 | 243 |
| 244 .settings-box .middle { | 244 .settings-box .middle { |
| 245 -webkit-margin-start: 16px; | 245 -webkit-margin-start: 16px; |
| 246 align-items: center; | 246 align-items: center; |
| 247 flex: auto; | 247 flex: auto; |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 292 | 292 |
| 293 .favicon-image { | 293 .favicon-image { |
| 294 background-repeat: no-repeat; | 294 background-repeat: no-repeat; |
| 295 background-size: contain; | 295 background-size: contain; |
| 296 height: 16px; | 296 height: 16px; |
| 297 width: 16px; | 297 width: 16px; |
| 298 } | 298 } |
| 299 </style> | 299 </style> |
| 300 </template> | 300 </template> |
| 301 </dom-module> | 301 </dom-module> |
| OLD | NEW |