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

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

Issue 1981423002: [MD settings] change button padding and placement (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: using negative offsets Created 4 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 <!-- Common styles for Material Design settings. --> 1 <!-- Common styles for Material Design settings. -->
2 <dom-module id="settings-shared"> 2 <dom-module id="settings-shared">
3 <template> 3 <template>
4 <style> 4 <style>
5 :root { 5 :root {
6 --checkbox-margin-start: 2px; 6 --checkbox-margin-start: 2px;
7 --checkbox-size: 16px; 7 --checkbox-size: 16px;
8 --checkbox-spacing: 18px; 8 --checkbox-spacing: 18px;
9 --iron-icon-fill-color: var(--paper-grey-600); 9 --iron-icon-fill-color: var(--paper-grey-600);
10 --iron-icon-height: 20px; 10 --iron-icon-height: 20px;
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after
83 /* TODO(dbeam): check with bettes@ on this one, but I'm pretty sure we 83 /* TODO(dbeam): check with bettes@ on this one, but I'm pretty sure we
84 * shouldn't be showing much :hover stuff on Polymer pages. */ 84 * shouldn't be showing much :hover stuff on Polymer pages. */
85 text-decoration: none; 85 text-decoration: none;
86 } 86 }
87 87
88 paper-button.primary-button { 88 paper-button.primary-button {
89 --paper-button: { 89 --paper-button: {
90 font-weight: 500; 90 font-weight: 500;
91 text-align: start; 91 text-align: start;
92 }; 92 };
93 margin: 0 -0.57em; /* Offsets default paper-button padding. */
94 } 93 }
95 94
96 paper-button.secondary-button { 95 paper-button.secondary-button {
97 --paper-button: { 96 --paper-button: {
98 color: var(--paper-grey-600); 97 color: var(--paper-grey-600);
99 text-decoration: none; 98 text-decoration: none;
100 font-weight: 500; 99 font-weight: 500;
101 }; 100 };
102 } 101 }
103 102
104 paper-button.tertiary-button { 103 paper-button.tertiary-button {
105 --paper-button: { 104 --paper-button: {
106 font-weight: 400; 105 font-weight: 400;
107 text-decoration: none; 106 text-decoration: none;
108 }; 107 };
109 } 108 }
110 109
110 /* TODO(dschuyler): check with Alan about whether action buttons should
111 * shift over. */
112 .settings-box paper-button.action-button,
113 .settings-box paper-button.primary-button,
114 .settings-box paper-button.secondary-button,
115 .settings-box paper-button.secondary-button {
116 margin-left: -12px;
117 margin-right: -12px;
118 padding-left: 12px;
119 padding-right: 12px;
120 }
121
111 paper-checkbox { 122 paper-checkbox {
112 --paper-checkbox-checked-color: var(--google-blue-500); 123 --paper-checkbox-checked-color: var(--google-blue-500);
113 --paper-checkbox-label-spacing: var(--checkbox-spacing); 124 --paper-checkbox-label-spacing: var(--checkbox-spacing);
114 --paper-checkbox-size: var(--checkbox-size); 125 --paper-checkbox-size: var(--checkbox-size);
115 --paper-checkbox-unchecked-color: var(--paper-grey-600); 126 --paper-checkbox-unchecked-color: var(--paper-grey-600);
116 -webkit-margin-start: var(--checkbox-margin-start); 127 -webkit-margin-start: var(--checkbox-margin-start);
117 } 128 }
118 129
119 paper-radio-button { 130 paper-radio-button {
120 @apply(--layout-center); 131 @apply(--layout-center);
121 --paper-radio-button-checked-color: var(--google-blue-500); 132 --paper-radio-button-checked-color: var(--google-blue-500);
122 --paper-radio-button-label-spacing: 18px; 133 --paper-radio-button-label-spacing: 18px;
123 --paper-radio-button-unchecked-color: var(--paper-grey-600); 134 --paper-radio-button-unchecked-color: var(--paper-grey-600);
124 -webkit-margin-start: 2px; 135 -webkit-margin-start: 2px;
125 display: flex; 136 display: flex;
126 min-height: 40px; 137 min-height: 40px;
127 } 138 }
128 139
129 paper-radio-group { 140 paper-radio-group {
130 width: 100%; 141 width: 100%;
131 } 142 }
132 143
133 .text-elide { 144 .text-elide {
134 overflow: hidden; 145 overflow: hidden;
135 text-overflow: ellipsis; 146 text-overflow: ellipsis;
136 white-space: nowrap; 147 white-space: nowrap;
137 } 148 }
138 149
139 .button-row {
dschuyler 2016/05/20 01:06:37 This was not used at all. So this is just some cle
140 display: flex;
141 margin-top: 25px;
142 }
143
144 .button-strip { 150 .button-strip {
145 text-align: end; 151 text-align: end;
146 } 152 }
147 153
148 .action-button { 154 .action-button {
149 background: var(--google-blue-500); 155 background: var(--google-blue-500);
150 color: white; 156 color: white;
151 } 157 }
152 158
153 .action-button[disabled] { 159 .action-button[disabled] {
(...skipping 138 matching lines...) Expand 10 before | Expand all | Expand 10 after
292 298
293 .favicon-image { 299 .favicon-image {
294 background-repeat: no-repeat; 300 background-repeat: no-repeat;
295 background-size: contain; 301 background-size: contain;
296 height: 16px; 302 height: 16px;
297 width: 16px; 303 width: 16px;
298 } 304 }
299 </style> 305 </style>
300 </template> 306 </template>
301 </dom-module> 307 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698