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

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: move comment about action_link_css to action_likn_css.html Created 3 years, 10 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 [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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698