Chromium Code Reviews| 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 @apply(--settings-actionable); | |
| 83 text-decoration: none; | |
| 84 } | |
| 85 | |
| 81 [is='action-link'], | 86 [is='action-link'], |
| 82 [is='action-link']:active, | 87 [is='action-link']:active, |
| 83 [is='action-link']:hover, | 88 [is='action-link']:hover, |
| 84 [is='action-link']:visited, | 89 [is='action-link']:visited, |
| 85 .primary-button, | 90 .primary-button, |
| 86 .tertiary-button, | 91 .tertiary-button, |
| 87 a[href] { | 92 a[href] { |
| 88 color: var(--google-blue-700); | 93 color: var(--google-blue-700); |
| 89 } | 94 } |
| 90 | 95 |
| 91 .primary-button, | 96 .primary-button, |
| 92 .tertiary-button { | 97 .tertiary-button { |
| 93 --paper-button-flat-keyboard-focus: { | 98 --paper-button-flat-keyboard-focus: { |
| 94 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ | 99 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
| 95 }; | 100 }; |
| 96 } | 101 } |
| 97 | 102 |
| 98 a[href], | 103 a[href] { |
| 99 [is='action-link']:hover { | |
| 100 text-decoration: none; | 104 text-decoration: none; |
| 101 } | 105 } |
| 102 | 106 |
| 107 [is='action-link'][disabled] { | |
| 108 color: var(--paper-grey-600); | |
| 109 cursor: default; | |
| 110 opacity: var(--settings-disabled-opacity); | |
| 111 pointer-events: none; | |
| 112 } | |
| 113 | |
| 103 /* There are three main button styles, .primary-button, .secondary-button, | 114 /* There are three main button styles, .primary-button, .secondary-button, |
| 104 * and .tertiary-button. The primary is the action button (e.g. "edit", | 115 * and .tertiary-button. The primary is the action button (e.g. "edit", |
| 105 * "delete") while the secondary is often a "Cancel" button. A tertiary | 116 * "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 | 117 * button may be used to get more information or similar, that we expect |
| 107 * most users will not need. */ | 118 * most users will not need. */ |
| 108 .primary-button { | 119 .primary-button { |
| 109 --paper-button: { | 120 --paper-button: { |
| 110 font-weight: 500; | 121 font-weight: 500; |
| 111 text-align: start; | 122 text-align: start; |
| 112 }; | 123 }; |
| (...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 214 | 225 |
| 215 .list-item > label span[disabled] { | 226 .list-item > label span[disabled] { |
| 216 opacity: var(--settings-disabled-opacity); | 227 opacity: var(--settings-disabled-opacity); |
| 217 } | 228 } |
| 218 | 229 |
| 219 .list-item > paper-icon-item { | 230 .list-item > paper-icon-item { |
| 220 padding: 0; | 231 padding: 0; |
| 221 } | 232 } |
| 222 | 233 |
| 223 /* This button has no ink ripple. */ | 234 /* This button has no ink ripple. */ |
| 224 .list-item.list-button { | 235 .list-button[is='action-link'] { |
| 225 @apply(--settings-actionable); | 236 min-height: inherit; |
|
Dan Beam
2017/01/23 20:40:09
alphabetize
| |
| 237 display: flex; | |
| 226 align-items: center; | 238 align-items: center; |
| 227 color: var(--google-blue-500); | 239 flex: 1; |
| 228 font-weight: 500; | 240 font-weight: 500; |
| 229 } | 241 } |
| 230 | 242 |
| 231 /* A row with two lines of text. Often the lower line will be .secondary. | 243 /* A row with two lines of text. Often the lower line will be .secondary. |
| 232 */ | 244 */ |
| 233 .two-line { | 245 .two-line { |
| 234 min-height: var(--settings-row-two-line-min-height); | 246 min-height: var(--settings-row-two-line-min-height); |
| 235 } | 247 } |
| 236 | 248 |
| 237 /* A settings-box is a horizontal row of text or controls within a | 249 /* 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... | |
| 376 /* Turns the arrow direction downwards, when the bubble is placed above | 388 /* Turns the arrow direction downwards, when the bubble is placed above |
| 377 * the anchor element */ | 389 * the anchor element */ |
| 378 .search-bubble-innards.above::after { | 390 .search-bubble-innards.above::after { |
| 379 -webkit-transform: rotate(-135deg); | 391 -webkit-transform: rotate(-135deg); |
| 380 bottom: -5px; | 392 bottom: -5px; |
| 381 top: auto; | 393 top: auto; |
| 382 } | 394 } |
| 383 </style> | 395 </style> |
| 384 </template> | 396 </template> |
| 385 </dom-module> | 397 </dom-module> |
| OLD | NEW |