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

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

Issue 2889493002: [MD settings] removing secondary-button class (Closed)
Patch Set: 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
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 21 matching lines...) Expand all
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 paper-button { 38 paper-button {
39 flex-shrink: 0; 39 flex-shrink: 0;
40 height: 36px; 40 height: 36px;
41 margin: 0; 41 margin: 0;
42 } 42 }
stevenjb 2017/05/16 16:27:29 Can we merge this with the other paper-button CSS?
dschuyler 2017/05/16 19:07:56 Done.
43 43
44 paper-button[toggles][active] { 44 paper-button[toggles][active] {
45 background-color: var(--paper-grey-300); 45 background-color: var(--paper-grey-300);
46 } 46 }
stevenjb 2017/05/16 16:27:29 And maybe move this down also (or move the rest up
dschuyler 2017/05/16 19:07:56 Done.
47 47
48 paper-toggle-button { 48 paper-toggle-button {
49 @apply(--settings-actionable); 49 @apply(--settings-actionable);
50 height: var(--settings-row-min-height); 50 height: var(--settings-row-min-height);
51 width: 36px; 51 width: 36px;
52 } 52 }
53 53
54 span ~ a { 54 span ~ a {
55 -webkit-margin-start: 4px; 55 -webkit-margin-start: 4px;
56 } 56 }
57 57
58 .primary-button { 58 .primary-button {
59 color: var(--google-blue-500); 59 color: var(--google-blue-500);
60 } 60 }
stevenjb 2017/05/16 16:27:29 Ditto
dschuyler 2017/05/16 19:07:56 Done.
61 61
62 a[href] { 62 a[href] {
63 color: var(--google-blue-700); 63 color: var(--google-blue-700);
64 } 64 }
65 65
66 .primary-button { 66 .primary-button {
67 --paper-button-flat-keyboard-focus: { 67 --paper-button-flat-keyboard-focus: {
68 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ 68 background: rgba(51, 103, 214, .12); /* --google-blue-700 */
69 }; 69 };
70 } 70 }
stevenjb 2017/05/16 16:27:29 Ditto
dschuyler 2017/05/16 19:07:56 Done.
71 71
72 a[href] { 72 a[href] {
73 text-decoration: none; 73 text-decoration: none;
74 } 74 }
75 75
76 /* For elements that are simple out-links but don't look like anchors. */ 76 /* For elements that are simple out-links but don't look like anchors. */
77 .inherit-color { 77 .inherit-color {
78 color: inherit !important; 78 color: inherit !important;
79 } 79 }
80 80
81 /* There are three main button styles, .primary-button, .secondary-button, 81 /* See notes in .primary-button. */
82 * and .tertiary-button. The primary is the action button (e.g. "edit", 82 paper-button {
83 * "delete") while the secondary is often a "Cancel" button. A tertiary 83 --paper-button: {
84 * button may be used to get more information or similar, that we expect 84 -webkit-padding-end: var(--settings-button-edge-spacing);
85 * most users will not need. */ 85 -webkit-padding-start: var(--settings-button-edge-spacing);
86 color: var(--paper-grey-600);
87 font-weight: 500;
88 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */
89 text-decoration: none;
90 };
91 --paper-button-flat-keyboard-focus: {
92 background: rgba(0, 0, 0, .12);
93 };
94 }
95
96 /* There are two settings button styles, .primary-button and normal
97 * buttons. The primary is the action button (e.g. "edit", "delete")
98 * while the normal (secondary-button) is often a "Cancel" button. */
86 .primary-button { 99 .primary-button {
87 --paper-button: { 100 --paper-button: {
88 -webkit-padding-end: var(--settings-button-edge-spacing); 101 -webkit-padding-end: var(--settings-button-edge-spacing);
89 -webkit-padding-start: var(--settings-button-edge-spacing); 102 -webkit-padding-start: var(--settings-button-edge-spacing);
stevenjb 2017/05/16 16:27:29 Same as for paper-button (and therefor not needed)
dschuyler 2017/05/16 19:07:56 This is in a mixin variable. So it must be a compl
stevenjb 2017/05/16 19:22:11 Ah, right. Might be worth defining a var for these
90 font-weight: 500; 103 font-weight: 500;
stevenjb 2017/05/16 16:27:29 ditto?
dschuyler 2017/05/16 19:07:56 intractable.
91 text-align: start; 104 text-align: start;
92 }; 105 };
93 } 106 }
94 107
95 .primary-toggle { 108 .primary-toggle {
96 color: var(--paper-grey-600); 109 color: var(--paper-grey-600);
97 font-weight: 500; 110 font-weight: 500;
98 } 111 }
99 112
100 .primary-toggle[checked] { 113 .primary-toggle[checked] {
101 color: var(--google-blue-500); 114 color: var(--google-blue-500);
102 } 115 }
103 116
104 /* See notes in .primary-button. */ 117 .settings-box paper-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); 118 -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1);
122 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); 119 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1);
123 } 120 }
124 121
125 paper-checkbox { 122 paper-checkbox {
126 --paper-checkbox-checked-color: var(--google-blue-500); 123 --paper-checkbox-checked-color: var(--google-blue-500);
127 --paper-checkbox-label-spacing: var(--settings-control-spacing); 124 --paper-checkbox-label-spacing: var(--settings-control-spacing);
128 --paper-checkbox-size: var(--checkbox-size); 125 --paper-checkbox-size: var(--checkbox-size);
129 --paper-checkbox-unchecked-color: var(--paper-grey-600); 126 --paper-checkbox-unchecked-color: var(--paper-grey-600);
130 -webkit-margin-start: var(--checkbox-margin-start); 127 -webkit-margin-start: var(--checkbox-margin-start);
(...skipping 277 matching lines...) Expand 10 before | Expand all | Expand 10 after
408 transform: rotate(-135deg); 405 transform: rotate(-135deg);
409 } 406 }
410 407
411 .column-header { 408 .column-header {
412 color: var(--paper-grey-600); 409 color: var(--paper-grey-600);
413 font-weight: 500; 410 font-weight: 500;
414 } 411 }
415 </style> 412 </style>
416 </template> 413 </template>
417 </dom-module> 414 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698