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

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

Issue 2174083002: Cleanup: fix comment style in settings_shared_css.html (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@stevenjb-patch
Patch Set: Created 4 years, 5 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 h2 { 8 h2 {
9 align-items: center; 9 align-items: center;
10 display: flex; 10 display: flex;
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after
96 paper-button.tertiary-button { 96 paper-button.tertiary-button {
97 --paper-button-flat-keyboard-focus: { 97 --paper-button-flat-keyboard-focus: {
98 background-color: rgba(51, 103, 214, .12); /* --google-blue-700 */ 98 background-color: rgba(51, 103, 214, .12); /* --google-blue-700 */
99 }; 99 };
100 } 100 }
101 101
102 [is='action-link']:hover { 102 [is='action-link']:hover {
103 text-decoration: none; 103 text-decoration: none;
104 } 104 }
105 105
106 /* 106 /* There are three main button styles, .primary-button, .secondary-button,
107 * There are three main button styles, .primary-button, .secondary-button,
108 * and .tertiary-button. The primary is the action button (e.g. "edit", 107 * and .tertiary-button. The primary is the action button (e.g. "edit",
109 * "delete") while the secondary is often a "Cancel" button. A tertiary 108 * "delete") while the secondary is often a "Cancel" button. A tertiary
110 * button may be used to get more information or similar, that we expect 109 * button may be used to get more information or similar, that we expect
111 * most users will not need. 110 * most users will not need. */
112 */
113 paper-button.primary-button { 111 paper-button.primary-button {
114 --paper-button: { 112 --paper-button: {
115 font-weight: 500; 113 font-weight: 500;
116 text-align: start; 114 text-align: start;
117 }; 115 };
118 } 116 }
119 117
120 /* See notes in .primary-button. */ 118 /* See notes in .primary-button. */
121 paper-button.secondary-button { 119 paper-button.secondary-button {
122 --paper-button: { 120 --paper-button: {
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
171 .text-elide { 169 .text-elide {
172 overflow: hidden; 170 overflow: hidden;
173 text-overflow: ellipsis; 171 text-overflow: ellipsis;
174 white-space: nowrap; 172 white-space: nowrap;
175 } 173 }
176 174
177 .button-strip { 175 .button-strip {
178 text-align: end; 176 text-align: end;
179 } 177 }
180 178
181 /* 179 /* A list-frame is an outer container for list-items. It is intended to be
182 * A list-frame is an outer container for list-items. It is intended to be
183 * outside of a settings-box. A list-frame is likely to follow a 180 * outside of a settings-box. A list-frame is likely to follow a
184 * settings box. 181 * settings box. */
185 */
186 .list-frame { 182 .list-frame {
187 -webkit-padding-end: 20px; 183 -webkit-padding-end: 20px;
188 -webkit-padding-start: 56px; 184 -webkit-padding-start: 56px;
189 align-items: center; 185 align-items: center;
190 display: block; 186 display: block;
191 padding-bottom: 0; 187 padding-bottom: 0;
192 padding-top: 0; 188 padding-top: 0;
193 } 189 }
194 190
195 .list-frame .secondary, 191 .list-frame .secondary,
196 .list-item .secondary { 192 .list-item .secondary {
197 @apply(--settings-secondary); 193 @apply(--settings-secondary);
198 } 194 }
199 195
200 /* 196 /* A list-item is intended to be contained within a list-frame. The list
201 * A list-item is intended to be contained within a list-frame. The list 197 * frame will setup the initial start margin. */
202 * frame will setup the initial start margin.
203 */
204 .list-item { 198 .list-item {
205 align-items: center; 199 align-items: center;
206 display: flex; 200 display: flex;
207 min-height: var(--settings-row-min-height); 201 min-height: var(--settings-row-min-height);
208 padding: 0; 202 padding: 0;
209 } 203 }
210 204
211 /* A thin separator line under a list item. */ 205 /* A thin separator line under a list item. */
212 .list-item.underbar { 206 .list-item.underbar {
213 border-bottom: var(--settings-separator-line); 207 border-bottom: var(--settings-separator-line);
(...skipping 26 matching lines...) Expand all
240 padding: 0; 234 padding: 0;
241 } 235 }
242 236
243 /* This button has no ink ripple. */ 237 /* This button has no ink ripple. */
244 .list-item.list-button { 238 .list-item.list-button {
245 align-items: center; 239 align-items: center;
246 color: var(--google-blue-500); 240 color: var(--google-blue-500);
247 font-weight: 500; 241 font-weight: 500;
248 } 242 }
249 243
250 /* 244 /* A settings-box is a horizontal row of text or controls within a
251 * A settings-box is a horizontal row of text or controls within a 245 * setting section (page or subpage). */
252 * setting section (page or subpage).
253 */
254 .settings-box { 246 .settings-box {
255 align-items: center; 247 align-items: center;
256 border-top: var(--settings-separator-line); 248 border-top: var(--settings-separator-line);
257 display: flex; 249 display: flex;
258 min-height: var(--settings-row-min-height); 250 min-height: var(--settings-row-min-height);
259 padding: 0 20px; 251 padding: 0 20px;
260 } 252 }
261 253
262 /* 254 /* We use an explicit tag to remove the top border, rather than a
263 * We use an explicit tag to remove the top border, rather than a
264 * :first-of-type modifier. This is a conscious choice, please consult 255 * :first-of-type modifier. This is a conscious choice, please consult
265 * with dbeam@ or dschuyler@ prior to changing it. 256 * with dbeam@ or dschuyler@ prior to changing it. */
266 */
267 .settings-box.first, 257 .settings-box.first,
268 .settings-box.continuation { 258 .settings-box.continuation {
269 border-top: none; 259 border-top: none;
270 } 260 }
271 261
272 .settings-box.block { 262 .settings-box.block {
273 display: block; 263 display: block;
274 } 264 }
275 265
276 /* 266 /* A row with two lines of text. Often the lower line will be .secondary.
277 * A row with two lines of text. Often the lower line will be .secondary.
278 */ 267 */
279 .settings-box.two-line { 268 .settings-box.two-line {
280 min-height: 56px; 269 min-height: 56px;
281 } 270 }
282 271
283 /* 272 /*
284 * A settings box with a single start-aligned column, generally but not 273 * A settings box with a single start-aligned column, generally but not
285 * necessarily used in combination with two-line. 274 * necessarily used in combination with two-line.
286 */ 275 */
287 .settings-box.single-column { 276 .settings-box.single-column {
(...skipping 21 matching lines...) Expand all
309 } 298 }
310 299
311 /* The secondary-action wraps a clickable sub-area of a .settings-box. 300 /* The secondary-action wraps a clickable sub-area of a .settings-box.
312 * An example is the |sign out| button on the People settings. 301 * An example is the |sign out| button on the People settings.
313 * Here is an example with and without a secondary action box: 302 * Here is an example with and without a secondary action box:
314 * 303 *
315 * +-------------------------------------------------------+ 304 * +-------------------------------------------------------+
316 * | Main action area .settings-box | .secondary-action | 305 * | Main action area .settings-box | .secondary-action |
317 * +-------------------------------------------------------+ 306 * +-------------------------------------------------------+
318 * | Another setting-box without a secondary-action | 307 * | Another setting-box without a secondary-action |
319 * +-------------------------------------------------------+ 308 * +-------------------------------------------------------+ */
320 */
321 .settings-box .secondary-action { 309 .settings-box .secondary-action {
322 -webkit-border-start: var(--settings-separator-line); 310 -webkit-border-start: var(--settings-separator-line);
323 -webkit-padding-start: 20px; 311 -webkit-padding-start: 20px;
324 } 312 }
325 313
326 .settings-box paper-item iron-icon { 314 .settings-box paper-item iron-icon {
327 /* Same padding as paper-icon-button. */ 315 /* Same padding as paper-icon-button. */
328 padding: 8px; 316 padding: 8px;
329 } 317 }
330 318
(...skipping 18 matching lines...) Expand all
349 337
350 .favicon-image { 338 .favicon-image {
351 background-repeat: no-repeat; 339 background-repeat: no-repeat;
352 background-size: contain; 340 background-size: contain;
353 height: 16px; 341 height: 16px;
354 width: 16px; 342 width: 16px;
355 } 343 }
356 </style> 344 </style>
357 </template> 345 </template>
358 </dom-module> 346 </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