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

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

Issue 2391253002: Site Settings Desktop: Polish the Site Data section. (Closed)
Patch Set: Address feedback Created 4 years, 2 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 button[is='paper-icon-button-light'] { 8 button[is='paper-icon-button-light'] {
9 --paper-icon-button-light-ripple: { 9 --paper-icon-button-light-ripple: {
10 /* Center the ripple on the icon button. */ 10 /* Center the ripple on the icon button. */
(...skipping 289 matching lines...) Expand 10 before | Expand all | Expand 10 after
300 .settings-box.continuation { 300 .settings-box.continuation {
301 border-top: none; 301 border-top: none;
302 } 302 }
303 303
304 .settings-box.block { 304 .settings-box.block {
305 display: block; 305 display: block;
306 } 306 }
307 307
308 /* A row with two lines of text. Often the lower line will be .secondary. 308 /* A row with two lines of text. Often the lower line will be .secondary.
309 */ 309 */
310 .settings-box.two-line { 310 .two-line {
311 min-height: var(--settings-row-two-line-min-height); 311 min-height: var(--settings-row-two-line-min-height);
312 } 312 }
313 313
314 /* 314 /*
315 * A settings box with a single start-aligned column, generally but not 315 * A single start-aligned column, generally but not necessarily used in
316 * necessarily used in combination with two-line. 316 * combination with two-line.
317 */ 317 */
318 .settings-box.single-column { 318 .single-column {
319 align-items: flex-start; 319 align-items: flex-start;
320 flex-direction: column; 320 flex-direction: column;
321 justify-content: center; 321 justify-content: center;
322 } 322 }
323 323
324 /* The lower line of text in a .settings-box.two-line. */ 324 /* The lower line of text in a two-line row. */
325 .settings-box .secondary { 325 .secondary {
326 @apply(--settings-secondary); 326 @apply(--settings-secondary);
327 } 327 }
328 328
329 /* The middle part (horizontally) of a row. */ 329 /* The middle part (horizontally) of a row. */
330 .settings-box .middle { 330 .settings-box .middle {
331 -webkit-padding-start: 16px; 331 -webkit-padding-start: 16px;
332 align-items: center; 332 align-items: center;
333 flex: auto; 333 flex: auto;
334 } 334 }
335 335
336 .settings-box .middle.two-line { 336 .settings-box .middle.two-line,
337 .settings-box .start.two-line {
337 display: flex; 338 display: flex;
338 min-height: var(--settings-row-two-line-min-height);
339 } 339 }
340 340
341 /* The start (left in LTR) part (horizontally) of a row. */ 341 /* The start (left in LTR) part (horizontally) of a row. */
342 .settings-box .start { 342 .settings-box .start {
343 align-items: center; 343 align-items: center;
344 flex: auto; 344 flex: auto;
345 } 345 }
346 346
347 .settings-box .start.two-line {
348 display: flex;
349 min-height: var(--settings-row-two-line-min-height);
350 }
351
352 /* The secondary-action wraps a clickable sub-area of a .settings-box. 347 /* The secondary-action wraps a clickable sub-area of a .settings-box.
353 * An example is the |sign out| button on the People settings. 348 * An example is the |sign out| button on the People settings.
354 * Here is an example with and without a secondary action box: 349 * Here is an example with and without a secondary action box:
355 * 350 *
356 * +-------------------------------------------------------+ 351 * +-------------------------------------------------------+
357 * | Main action area .settings-box | .secondary-action | 352 * | Main action area .settings-box | .secondary-action |
358 * +-------------------------------------------------------+ 353 * +-------------------------------------------------------+
359 * | Another setting-box without a secondary-action | 354 * | Another setting-box without a secondary-action |
360 * +-------------------------------------------------------+ */ 355 * +-------------------------------------------------------+ */
361 .settings-box .secondary-action { 356 .settings-box .secondary-action {
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after
428 /* Turns the arrow direction downwards, when the bubble is placed above 423 /* Turns the arrow direction downwards, when the bubble is placed above
429 * the anchor element */ 424 * the anchor element */
430 .search-bubble-innards.above::after { 425 .search-bubble-innards.above::after {
431 -webkit-transform: rotate(-135deg); 426 -webkit-transform: rotate(-135deg);
432 bottom: -5px; 427 bottom: -5px;
433 top: auto; 428 top: auto;
434 } 429 }
435 </style> 430 </style>
436 </template> 431 </template>
437 </dom-module> 432 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698