| 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 h2 { | 8 h2 { |
| 9 align-items: center; | 9 align-items: center; |
| 10 display: flex; | 10 display: flex; |
| (...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 80 } | 80 } |
| 81 | 81 |
| 82 span ~ a { | 82 span ~ a { |
| 83 -webkit-margin-start: 4px; | 83 -webkit-margin-start: 4px; |
| 84 } | 84 } |
| 85 | 85 |
| 86 [is='action-link'], | 86 [is='action-link'], |
| 87 [is='action-link']:active, | 87 [is='action-link']:active, |
| 88 [is='action-link']:hover, | 88 [is='action-link']:hover, |
| 89 [is='action-link']:visited, | 89 [is='action-link']:visited, |
| 90 paper-button.primary-button, | 90 .primary-button, |
| 91 paper-button.tertiary-button { | 91 .tertiary-button { |
| 92 color: var(--google-blue-700); | 92 color: var(--google-blue-700); |
| 93 } | 93 } |
| 94 | 94 |
| 95 paper-button.primary-button, | 95 .primary-button, |
| 96 paper-button.tertiary-button { | 96 .tertiary-button { |
| 97 --paper-button-flat-keyboard-focus: { | 97 --paper-button-flat-keyboard-focus: { |
| 98 background-color: rgba(51, 103, 214, .12); /* --google-blue-700 */ | 98 background-color: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
| 99 }; | 99 }; |
| 100 } | 100 } |
| 101 | 101 |
| 102 [is='action-link']:hover { | 102 [is='action-link']:hover { |
| 103 text-decoration: none; | 103 text-decoration: none; |
| 104 } | 104 } |
| 105 | 105 |
| 106 /* There are three main button styles, .primary-button, .secondary-button, | 106 /* There are three main button styles, .primary-button, .secondary-button, |
| 107 * and .tertiary-button. The primary is the action button (e.g. "edit", | 107 * and .tertiary-button. The primary is the action button (e.g. "edit", |
| 108 * "delete") while the secondary is often a "Cancel" button. A tertiary | 108 * "delete") while the secondary is often a "Cancel" button. A tertiary |
| 109 * button may be used to get more information or similar, that we expect | 109 * button may be used to get more information or similar, that we expect |
| 110 * most users will not need. */ | 110 * most users will not need. */ |
| 111 paper-button.primary-button { | 111 .primary-button { |
| 112 --paper-button: { | 112 --paper-button: { |
| 113 font-weight: 500; | 113 font-weight: 500; |
| 114 text-align: start; | 114 text-align: start; |
| 115 }; | 115 }; |
| 116 } | 116 } |
| 117 | 117 |
| 118 /* See notes in .primary-button. */ | 118 /* See notes in .primary-button. */ |
| 119 paper-button.secondary-button { | 119 .secondary-button { |
| 120 --paper-button: { | 120 --paper-button: { |
| 121 color: var(--paper-grey-600); | 121 color: var(--paper-grey-600); |
| 122 text-decoration: none; | 122 text-decoration: none; |
| 123 font-weight: 500; | 123 font-weight: 500; |
| 124 }; | 124 }; |
| 125 --paper-button-flat-keyboard-focus: { | 125 --paper-button-flat-keyboard-focus: { |
| 126 background-color: rgba(0, 0, 0, .12); | 126 background-color: rgba(0, 0, 0, .12); |
| 127 }; | 127 }; |
| 128 } | 128 } |
| 129 | 129 |
| 130 /* See notes in .primary-button. */ | 130 /* See notes in .primary-button. */ |
| 131 paper-button.tertiary-button { | 131 .tertiary-button { |
| 132 --paper-button: { | 132 --paper-button: { |
| 133 font-weight: 400; | 133 font-weight: 400; |
| 134 text-decoration: none; | 134 text-decoration: none; |
| 135 }; | 135 }; |
| 136 } | 136 } |
| 137 | 137 |
| 138 .settings-box paper-button.primary-button, | 138 .settings-box .primary-button, |
| 139 .settings-box paper-button.secondary-button, | 139 .settings-box .secondary-button, |
| 140 .settings-box paper-button.secondary-button { | 140 .settings-box .secondary-button { |
| 141 margin-left: -12px; | 141 margin-left: -12px; |
| 142 margin-right: -12px; | 142 margin-right: -12px; |
| 143 padding-left: 12px; | 143 padding-left: 12px; |
| 144 padding-right: 12px; | 144 padding-right: 12px; |
| 145 } | 145 } |
| 146 | 146 |
| 147 paper-checkbox { | 147 paper-checkbox { |
| 148 --paper-checkbox-checked-color: var(--google-blue-500); | 148 --paper-checkbox-checked-color: var(--google-blue-500); |
| 149 --paper-checkbox-label-spacing: var(--checkbox-spacing); | 149 --paper-checkbox-label-spacing: var(--checkbox-spacing); |
| 150 --paper-checkbox-size: var(--checkbox-size); | 150 --paper-checkbox-size: var(--checkbox-size); |
| (...skipping 186 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 337 | 337 |
| 338 .favicon-image { | 338 .favicon-image { |
| 339 background-repeat: no-repeat; | 339 background-repeat: no-repeat; |
| 340 background-size: contain; | 340 background-size: contain; |
| 341 height: 16px; | 341 height: 16px; |
| 342 width: 16px; | 342 width: 16px; |
| 343 } | 343 } |
| 344 </style> | 344 </style> |
| 345 </template> | 345 </template> |
| 346 </dom-module> | 346 </dom-module> |
| OLD | NEW |