| 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 /* Included here so we don't have to include "iron-positioning" in every | 8 /* Included here so we don't have to include "iron-positioning" in every |
| 9 * stylesheet. See crbug.com/498405. */ | 9 * stylesheet. See crbug.com/498405. */ |
| 10 [hidden] { | 10 [hidden] { |
| (...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 71 } | 71 } |
| 72 | 72 |
| 73 iron-dropdown .dropdown-content .dropdown-item[disabled] { | 73 iron-dropdown .dropdown-content .dropdown-item[disabled] { |
| 74 opacity: var(--settings-disabled-opacity); | 74 opacity: var(--settings-disabled-opacity); |
| 75 } | 75 } |
| 76 | 76 |
| 77 span ~ a { | 77 span ~ a { |
| 78 -webkit-margin-start: 4px; | 78 -webkit-margin-start: 4px; |
| 79 } | 79 } |
| 80 | 80 |
| 81 [is='action-link'], | |
| 82 [is='action-link']:active, | |
| 83 [is='action-link']:hover, | |
| 84 [is='action-link']:visited, | |
| 85 .primary-button, | 81 .primary-button, |
| 86 .tertiary-button, | 82 .tertiary-button, |
| 87 a[href] { | 83 a[href] { |
| 88 color: var(--google-blue-700); | 84 color: var(--google-blue-700); |
| 89 } | 85 } |
| 90 | 86 |
| 91 .primary-button, | 87 .primary-button, |
| 92 .tertiary-button { | 88 .tertiary-button { |
| 93 --paper-button-flat-keyboard-focus: { | 89 --paper-button-flat-keyboard-focus: { |
| 94 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ | 90 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
| 95 }; | 91 }; |
| 96 } | 92 } |
| 97 | 93 |
| 98 a[href], | 94 a[href] { |
| 99 [is='action-link']:hover { | |
| 100 text-decoration: none; | 95 text-decoration: none; |
| 101 } | 96 } |
| 102 | 97 |
| 103 /* There are three main button styles, .primary-button, .secondary-button, | 98 /* There are three main button styles, .primary-button, .secondary-button, |
| 104 * and .tertiary-button. The primary is the action button (e.g. "edit", | 99 * and .tertiary-button. The primary is the action button (e.g. "edit", |
| 105 * "delete") while the secondary is often a "Cancel" button. A tertiary | 100 * "delete") while the secondary is often a "Cancel" button. A tertiary |
| 106 * button may be used to get more information or similar, that we expect | 101 * button may be used to get more information or similar, that we expect |
| 107 * most users will not need. */ | 102 * most users will not need. */ |
| 108 .primary-button { | 103 .primary-button { |
| 109 --paper-button: { | 104 --paper-button: { |
| (...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 225 | 220 |
| 226 .list-item > label span[disabled] { | 221 .list-item > label span[disabled] { |
| 227 opacity: var(--settings-disabled-opacity); | 222 opacity: var(--settings-disabled-opacity); |
| 228 } | 223 } |
| 229 | 224 |
| 230 .list-item > paper-icon-item { | 225 .list-item > paper-icon-item { |
| 231 padding: 0; | 226 padding: 0; |
| 232 } | 227 } |
| 233 | 228 |
| 234 /* This button has no ink ripple. */ | 229 /* This button has no ink ripple. */ |
| 235 .list-item.list-button { | 230 .list-button[is='action-link'] { |
| 236 @apply(--settings-actionable); | 231 min-height: inherit; |
| 232 display: flex; |
| 237 align-items: center; | 233 align-items: center; |
| 238 color: var(--google-blue-500); | 234 flex: 1; |
| 239 font-weight: 500; | 235 font-weight: 500; |
| 240 } | 236 } |
| 241 | 237 |
| 242 /* A row with two lines of text. Often the lower line will be .secondary. | 238 /* A row with two lines of text. Often the lower line will be .secondary. |
| 243 */ | 239 */ |
| 244 .two-line { | 240 .two-line { |
| 245 min-height: var(--settings-row-two-line-min-height); | 241 min-height: var(--settings-row-two-line-min-height); |
| 246 } | 242 } |
| 247 | 243 |
| 248 /* A settings-box is a horizontal row of text or controls within a | 244 /* A settings-box is a horizontal row of text or controls within a |
| (...skipping 138 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 387 /* Turns the arrow direction downwards, when the bubble is placed above | 383 /* Turns the arrow direction downwards, when the bubble is placed above |
| 388 * the anchor element */ | 384 * the anchor element */ |
| 389 .search-bubble-innards.above::after { | 385 .search-bubble-innards.above::after { |
| 390 -webkit-transform: rotate(-135deg); | 386 -webkit-transform: rotate(-135deg); |
| 391 bottom: -5px; | 387 bottom: -5px; |
| 392 top: auto; | 388 top: auto; |
| 393 } | 389 } |
| 394 </style> | 390 </style> |
| 395 </template> | 391 </template> |
| 396 </dom-module> | 392 </dom-module> |
| OLD | NEW |