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

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

Issue 2889493002: [MD settings] removing secondary-button class (Closed)
Patch Set: review changes Created 3 years, 7 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
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { 8 :host-context([dir=rtl]) button[is='paper-icon-button-light'] {
9 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ 9 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */
10 } 10 }
(...skipping 17 matching lines...) Expand all
28 28
29 iron-icon { 29 iron-icon {
30 flex-shrink: 0; /* Prevent distortion of icons in cramped UI. */ 30 flex-shrink: 0; /* Prevent distortion of icons in cramped UI. */
31 } 31 }
32 32
33 iron-icon[icon='cr:check'], 33 iron-icon[icon='cr:check'],
34 iron-icon[icon='settings:done'] { 34 iron-icon[icon='settings:done'] {
35 --iron-icon-fill-color: var(--google-green-500); 35 --iron-icon-fill-color: var(--google-green-500);
36 } 36 }
37 37
38 /* See notes in .primary-button.
39 * TODO(dschuyler): Remove unnecessary .secondary-button references. */
38 paper-button { 40 paper-button {
41 --paper-button: {
42 -webkit-padding-end: var(--settings-button-edge-spacing);
43 -webkit-padding-start: var(--settings-button-edge-spacing);
44 color: var(--paper-grey-600);
45 font-weight: 500;
46 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */
47 text-decoration: none;
48 };
49 --paper-button-flat-keyboard-focus: {
50 background: rgba(0, 0, 0, .12);
51 };
39 flex-shrink: 0; 52 flex-shrink: 0;
40 height: 36px; 53 height: 36px;
41 margin: 0; 54 margin: 0;
42 } 55 }
43 56
44 paper-button[toggles][active] { 57 paper-button[toggles][active] {
45 background-color: var(--paper-grey-300); 58 background-color: var(--paper-grey-300);
46 } 59 }
47 60
61 .settings-box paper-button {
62 -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1);
63 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1);
64 }
65
66 /* There are two settings button styles, .primary-button and normal
67 * buttons. The primary is the action button (e.g. "edit", "delete")
68 * while the normal (secondary-button) is often a "Cancel" button. */
69 .primary-button {
70 --paper-button: {
71 -webkit-padding-end: var(--settings-button-edge-spacing);
72 -webkit-padding-start: var(--settings-button-edge-spacing);
73 font-weight: 500;
74 text-align: start;
75 };
76 --paper-button-flat-keyboard-focus: {
77 background: rgba(51, 103, 214, .12); /* --google-blue-700 */
78 };
79 color: var(--google-blue-500);
80 }
81
48 paper-toggle-button { 82 paper-toggle-button {
49 @apply(--settings-actionable); 83 @apply(--settings-actionable);
50 height: var(--settings-row-min-height); 84 height: var(--settings-row-min-height);
51 width: 36px; 85 width: 36px;
52 } 86 }
53 87
54 span ~ a { 88 span ~ a {
55 -webkit-margin-start: 4px; 89 -webkit-margin-start: 4px;
56 } 90 }
57 91
58 .primary-button {
59 color: var(--google-blue-500);
60 }
61
62 a[href] { 92 a[href] {
63 color: var(--google-blue-700); 93 color: var(--google-blue-700);
64 } 94 }
65 95
66 .primary-button {
67 --paper-button-flat-keyboard-focus: {
68 background: rgba(51, 103, 214, .12); /* --google-blue-700 */
69 };
70 }
71
72 a[href] { 96 a[href] {
73 text-decoration: none; 97 text-decoration: none;
74 } 98 }
75 99
76 /* For elements that are simple out-links but don't look like anchors. */ 100 /* For elements that are simple out-links but don't look like anchors. */
77 .inherit-color { 101 .inherit-color {
78 color: inherit !important; 102 color: inherit !important;
79 } 103 }
80 104
81 /* There are three main button styles, .primary-button, .secondary-button,
82 * and .tertiary-button. The primary is the action button (e.g. "edit",
83 * "delete") while the secondary is often a "Cancel" button. A tertiary
84 * button may be used to get more information or similar, that we expect
85 * most users will not need. */
86 .primary-button {
87 --paper-button: {
88 -webkit-padding-end: var(--settings-button-edge-spacing);
89 -webkit-padding-start: var(--settings-button-edge-spacing);
90 font-weight: 500;
91 text-align: start;
92 };
93 }
94
95 .primary-toggle { 105 .primary-toggle {
96 color: var(--paper-grey-600); 106 color: var(--paper-grey-600);
97 font-weight: 500; 107 font-weight: 500;
98 } 108 }
99 109
100 .primary-toggle[checked] { 110 .primary-toggle[checked] {
101 color: var(--google-blue-500); 111 color: var(--google-blue-500);
102 } 112 }
103 113
104 /* See notes in .primary-button. */
105 .secondary-button {
106 --paper-button: {
107 -webkit-padding-end: var(--settings-button-edge-spacing);
108 -webkit-padding-start: var(--settings-button-edge-spacing);
109 color: var(--paper-grey-600);
110 font-weight: 500;
111 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */
112 text-decoration: none;
113 };
114 --paper-button-flat-keyboard-focus: {
115 background: rgba(0, 0, 0, .12);
116 };
117 }
118
119 .settings-box .primary-button,
120 .settings-box .secondary-button {
121 -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1);
122 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1);
123 }
124
125 paper-checkbox { 114 paper-checkbox {
126 --paper-checkbox-checked-color: var(--google-blue-500); 115 --paper-checkbox-checked-color: var(--google-blue-500);
127 --paper-checkbox-label-spacing: var(--settings-control-label-spacing); 116 --paper-checkbox-label-spacing: var(--settings-control-label-spacing);
128 --paper-checkbox-size: var(--checkbox-size); 117 --paper-checkbox-size: var(--checkbox-size);
129 --paper-checkbox-unchecked-color: var(--paper-grey-600); 118 --paper-checkbox-unchecked-color: var(--paper-grey-600);
130 -webkit-margin-start: var(--checkbox-margin-start); 119 -webkit-margin-start: var(--checkbox-margin-start);
131 } 120 }
132 121
133 paper-input { 122 paper-input {
134 /* Fix issue with focus animation making labels wiggle. */ 123 /* Fix issue with focus animation making labels wiggle. */
(...skipping 267 matching lines...) Expand 10 before | Expand all | Expand 10 after
402 transform: rotate(-135deg); 391 transform: rotate(-135deg);
403 } 392 }
404 393
405 .column-header { 394 .column-header {
406 color: var(--paper-grey-600); 395 color: var(--paper-grey-600);
407 font-weight: 500; 396 font-weight: 500;
408 } 397 }
409 </style> 398 </style>
410 </template> 399 </template>
411 </dom-module> 400 </dom-module>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698