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 /* Included here so we don't have to include "iron-positioning" in every | 8 /* Included here so we don't have to include "iron-positioning" in every |
9 * stylesheet. See crbug.com/498405. */ | 9 * stylesheet. See crbug.com/498405. */ |
10 [hidden] { | 10 [hidden] { |
(...skipping 10 matching lines...) Expand all Loading... |
21 | 21 |
22 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ | 22 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
23 h2 { | 23 h2 { |
24 align-items: center; | 24 align-items: center; |
25 align-self: flex-start; | 25 align-self: flex-start; |
26 color: var(--paper-grey-600); | 26 color: var(--paper-grey-600); |
27 display: flex; | 27 display: flex; |
28 font-size: inherit; | 28 font-size: inherit; |
29 font-weight: 500; | 29 font-weight: 500; |
30 margin: 0; | 30 margin: 0; |
| 31 padding-bottom: 12px; |
31 padding-top: 24px; | 32 padding-top: 24px; |
32 padding-bottom: 12px; | |
33 } | 33 } |
34 | 34 |
35 iron-icon[icon='cr:check'], | 35 iron-icon[icon='cr:check'], |
36 iron-icon[icon='settings:done'] { | 36 iron-icon[icon='settings:done'] { |
37 --iron-icon-fill-color: var(--google-green-500); | 37 --iron-icon-fill-color: var(--google-green-500); |
38 } | 38 } |
39 | 39 |
40 paper-button { | 40 paper-button { |
41 height: 36px; | 41 height: 36px; |
42 margin: 0; | 42 margin: 0; |
(...skipping 166 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
209 .list-item > label span[disabled] { | 209 .list-item > label span[disabled] { |
210 opacity: var(--settings-disabled-opacity); | 210 opacity: var(--settings-disabled-opacity); |
211 } | 211 } |
212 | 212 |
213 .list-item > paper-icon-item { | 213 .list-item > paper-icon-item { |
214 padding: 0; | 214 padding: 0; |
215 } | 215 } |
216 | 216 |
217 /* This button has no ink ripple. */ | 217 /* This button has no ink ripple. */ |
218 .list-button[is='action-link'] { | 218 .list-button[is='action-link'] { |
219 min-height: inherit; | 219 align-items: center; |
220 display: flex; | 220 display: flex; |
221 align-items: center; | |
222 flex: 1; | 221 flex: 1; |
223 font-weight: 500; | 222 font-weight: 500; |
| 223 min-height: inherit; |
224 } | 224 } |
225 | 225 |
226 /* A row with two lines of text. Often the lower line will be .secondary. | 226 /* A row with two lines of text. Often the lower line will be .secondary. |
227 */ | 227 */ |
228 .two-line { | 228 .two-line { |
229 min-height: var(--settings-row-two-line-min-height); | 229 min-height: var(--settings-row-two-line-min-height); |
230 } | 230 } |
231 | 231 |
232 /* A settings-box is a horizontal row of text or controls within a | 232 /* A settings-box is a horizontal row of text or controls within a |
233 * setting section (page or subpage). */ | 233 * setting section (page or subpage). */ |
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
298 } | 298 } |
299 | 299 |
300 /* The start (left in LTR) part (horizontally) of a row. */ | 300 /* The start (left in LTR) part (horizontally) of a row. */ |
301 .settings-box .start { | 301 .settings-box .start { |
302 align-items: center; | 302 align-items: center; |
303 flex: auto; | 303 flex: auto; |
304 } | 304 } |
305 | 305 |
306 [scrollable] .no-outline { | 306 [scrollable] .no-outline { |
307 background: none; | 307 background: none; |
| 308 cursor: initial; |
308 outline: none; | 309 outline: none; |
309 cursor: initial; | |
310 } | 310 } |
311 | 311 |
312 /* The secondary-action wraps a clickable sub-area of a .settings-box. | 312 /* The secondary-action wraps a clickable sub-area of a .settings-box. |
313 * An example is the |sign out| button on the People settings. | 313 * An example is the |sign out| button on the People settings. |
314 * Here is an example with and without a secondary action box: | 314 * Here is an example with and without a secondary action box: |
315 * | 315 * |
316 * +-------------------------------------------------------+ | 316 * +-------------------------------------------------------+ |
317 * | Main action area .settings-box | .secondary-action | | 317 * | Main action area .settings-box | .secondary-action | |
318 * +-------------------------------------------------------+ | 318 * +-------------------------------------------------------+ |
319 * | Another setting-box without a secondary-action | | 319 * | Another setting-box without a secondary-action | |
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
382 transform: rotate(-135deg); | 382 transform: rotate(-135deg); |
383 } | 383 } |
384 | 384 |
385 .column-header { | 385 .column-header { |
386 color: var(--paper-grey-600); | 386 color: var(--paper-grey-600); |
387 font-weight: 500; | 387 font-weight: 500; |
388 } | 388 } |
389 </style> | 389 </style> |
390 </template> | 390 </template> |
391 </dom-module> | 391 </dom-module> |
OLD | NEW |