OLD | NEW |
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 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ | 8 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
9 h2 { | 9 h2 { |
10 align-items: center; | 10 align-items: center; |
11 align-self: flex-start; | 11 align-self: flex-start; |
12 color: var(--paper-grey-600); | 12 color: var(--paper-grey-600); |
13 display: flex; | 13 display: flex; |
14 font-size: inherit; | 14 font-size: inherit; |
15 font-weight: 500; | 15 font-weight: 500; |
16 margin: 0; | 16 margin: 0; |
17 padding-bottom: 12px; | 17 padding-bottom: 12px; |
18 padding-top: 24px; | 18 padding-top: 24px; |
19 } | 19 } |
20 | 20 |
21 iron-icon { | 21 iron-icon { |
22 flex-shrink: 0; /* Prevent distortion of icons in cramped UI. */ | 22 flex-shrink: 0; /* Prevent distortion of icons in cramped UI. */ |
23 } | 23 } |
24 | 24 |
25 iron-icon[icon='cr:check'], | 25 iron-icon[icon='cr:check'], |
26 iron-icon[icon='settings:done'] { | 26 iron-icon[icon='settings:done'] { |
27 --iron-icon-fill-color: var(--google-green-500); | 27 --iron-icon-fill-color: var(--google-green-500); |
28 } | 28 } |
29 | 29 |
| 30 paper-icon-button { |
| 31 -webkit-margin-end: var(--cr-icon-ripple-margin); |
| 32 -webkit-margin-start: 16px; |
| 33 color: var(--paper-grey-600); |
| 34 flex-shrink: 0; |
| 35 } |
| 36 |
| 37 .separator + button[is='paper-icon-button-light'], |
| 38 .separator + paper-icon-button { |
| 39 -webkit-margin-start: var(--cr-icon-ripple-margin)); |
| 40 } |
| 41 |
30 /* See notes in .primary-button. | 42 /* See notes in .primary-button. |
31 * TODO(dschuyler): Remove unnecessary .secondary-button references. */ | 43 * TODO(dschuyler): Remove unnecessary .secondary-button references. */ |
32 paper-button { | 44 paper-button { |
33 --paper-button: { | 45 --paper-button: { |
34 -webkit-padding-end: var(--settings-button-edge-spacing); | 46 -webkit-padding-end: var(--settings-button-edge-spacing); |
35 -webkit-padding-start: var(--settings-button-edge-spacing); | 47 -webkit-padding-start: var(--settings-button-edge-spacing); |
36 color: var(--paper-grey-600); | 48 color: var(--paper-grey-600); |
37 font-weight: 500; | 49 font-weight: 500; |
38 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ | 50 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ |
39 text-decoration: none; | 51 text-decoration: none; |
40 }; | 52 }; |
41 --paper-button-flat-keyboard-focus: { | 53 --paper-button-flat-keyboard-focus: { |
42 background: rgba(0, 0, 0, .12); | 54 background: rgba(0, 0, 0, .12); |
43 }; | 55 }; |
44 flex-shrink: 0; | 56 flex-shrink: 0; |
45 height: 36px; | 57 height: 36px; |
46 margin: 0; | 58 margin: 0; |
47 } | 59 } |
48 | 60 |
49 paper-button[toggles][active] { | 61 paper-button[toggles][active] { |
50 background-color: var(--paper-grey-300); | 62 background-color: var(--paper-grey-300); |
51 } | 63 } |
52 | 64 |
53 .settings-box paper-button { | 65 /* If a button is at the end of the row, shift it to overlap the end of |
| 66 * the row. */ |
| 67 .settings-box paper-button:last-of-type { |
54 -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1); | 68 -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1); |
| 69 } |
| 70 |
| 71 /* Space out multiple buttons in the same row. */ |
| 72 .settings-box paper-button + paper-button { |
| 73 -webkit-margin-start: 16px; |
| 74 } |
| 75 |
| 76 /* Adjust the margin between the separator and the first button. */ |
| 77 .settings-box .separator + paper-button { |
55 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); | 78 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); |
56 } | 79 } |
57 | 80 |
58 /* There are two settings button styles, .primary-button and normal | 81 /* There are two settings button styles, .primary-button and normal |
59 * buttons. The primary is the action button (e.g. "edit", "delete") | 82 * buttons. The primary is the action button (e.g. "edit", "delete") |
60 * while the normal (secondary-button) is often a "Cancel" button. */ | 83 * while the normal (secondary-button) is often a "Cancel" button. */ |
61 .primary-button { | 84 .primary-button { |
62 --paper-button: { | 85 --paper-button: { |
63 -webkit-padding-end: var(--settings-button-edge-spacing); | 86 -webkit-padding-end: var(--settings-button-edge-spacing); |
64 -webkit-padding-start: var(--settings-button-edge-spacing); | 87 -webkit-padding-start: var(--settings-button-edge-spacing); |
(...skipping 318 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
383 transform: rotate(-135deg); | 406 transform: rotate(-135deg); |
384 } | 407 } |
385 | 408 |
386 .column-header { | 409 .column-header { |
387 color: var(--paper-grey-600); | 410 color: var(--paper-grey-600); |
388 font-weight: 500; | 411 font-weight: 500; |
389 } | 412 } |
390 </style> | 413 </style> |
391 </template> | 414 </template> |
392 </dom-module> | 415 </dom-module> |
OLD | NEW |