| OLD | NEW |
| 1 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> | 1 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
| 2 <link rel="import" href="settings_vars_css.html"> | 2 <link rel="import" href="settings_vars_css.html"> |
| 3 | 3 |
| 4 <!-- Common styles for Material Design settings. --> | 4 <!-- Common styles for Material Design settings. --> |
| 5 <dom-module id="settings-shared"> | 5 <dom-module id="settings-shared"> |
| 6 <template> | 6 <template> |
| 7 <style include="cr-shared-style"> | 7 <style include="cr-shared-style"> |
| 8 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ | 8 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
| 9 h2 { | 9 h2 { |
| 10 align-items: center; | 10 align-items: center; |
| (...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 86 } | 86 } |
| 87 | 87 |
| 88 /* Adjust the margin between the separator and the first button. */ | 88 /* Adjust the margin between the separator and the first button. */ |
| 89 .settings-box .separator + paper-button { | 89 .settings-box .separator + paper-button { |
| 90 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); | 90 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); |
| 91 } | 91 } |
| 92 | 92 |
| 93 /* There are two settings button styles, .primary-button and normal | 93 /* There are two settings button styles, .primary-button and normal |
| 94 * buttons. The primary is the action button (e.g. "edit", "delete") | 94 * buttons. The primary is the action button (e.g. "edit", "delete") |
| 95 * while the normal (secondary-button) is often a "Cancel" button. */ | 95 * while the normal (secondary-button) is often a "Cancel" button. */ |
| 96 .primary-button { | 96 .primary-button:not([disabled]) { |
| 97 --paper-button: { | |
| 98 -webkit-padding-end: var(--settings-button-edge-spacing); | |
| 99 -webkit-padding-start: var(--settings-button-edge-spacing); | |
| 100 font-weight: 500; | |
| 101 text-align: start; | |
| 102 }; | |
| 103 --paper-button-flat-keyboard-focus: { | 97 --paper-button-flat-keyboard-focus: { |
| 104 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ | 98 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
| 105 }; | 99 }; |
| 106 color: var(--google-blue-500); | 100 color: var(--google-blue-500); |
| 107 } | 101 } |
| 108 | 102 |
| 109 .primary-button[disabled] { | |
| 110 background: none; | |
| 111 color: var(--paper-grey-600); | |
| 112 } | |
| 113 | |
| 114 paper-toggle-button { | 103 paper-toggle-button { |
| 115 @apply(--settings-actionable); | 104 @apply(--settings-actionable); |
| 116 height: var(--settings-row-min-height); | 105 height: var(--settings-row-min-height); |
| 117 width: 36px; | 106 width: 36px; |
| 118 } | 107 } |
| 119 | 108 |
| 120 span ~ a { | 109 span ~ a { |
| 121 -webkit-margin-start: 4px; | 110 -webkit-margin-start: 4px; |
| 122 } | 111 } |
| 123 | 112 |
| (...skipping 294 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 418 transform: rotate(-135deg); | 407 transform: rotate(-135deg); |
| 419 } | 408 } |
| 420 | 409 |
| 421 .column-header { | 410 .column-header { |
| 422 color: var(--paper-grey-600); | 411 color: var(--paper-grey-600); |
| 423 font-weight: 500; | 412 font-weight: 500; |
| 424 } | 413 } |
| 425 </style> | 414 </style> |
| 426 </template> | 415 </template> |
| 427 </dom-module> | 416 </dom-module> |
| OLD | NEW |