Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(123)

Side by Side Diff: chrome/browser/resources/settings/settings_shared_css.html

Issue 2639373002: MD Settings: clean up text controls (links, buttons) (Closed)
Patch Set: add bug link to clarify comment Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698