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 button[is="paper-icon-button-light"] { | |
9 --paper-ripple: { | |
tommycli
2016/09/23 19:29:57
Maybe a comment that these dimenisons are to cente
dschuyler
2016/09/27 00:43:09
Done.
| |
10 height: 36px; | |
11 left: -8px; | |
12 top: -8px; | |
13 width: 36px; | |
14 }; | |
15 -webkit-margin-start: 16px; | |
16 background-size: cover; | |
17 flex-shrink: 0; | |
18 height: 20px; | |
19 margin: 0; | |
20 width: 20px; | |
21 } | |
22 | |
23 [actionable] button[is="paper-icon-button-light"].icon-arrow-right { | |
24 background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3 D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%222 4px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23757575%22%3E%3Cg%3E%3Cpa th%20d%3D%22M7%2014l5-5%205%205z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); | |
25 transform: rotate(90deg); | |
26 } | |
27 | |
28 [actionable] button[is="paper-icon-button-light"].icon-external { | |
29 background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3 D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%222 4px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23bdbdbd%22%3E%3Cg%3E%3Cpa th%20d%3D%22M19%2019H5V5h7V3H5c-1.11%200-2%20.9-2%202v14c0%201.1.89%202%202%202h 14c1.1%200%202-.9%202-2v-7h-2v7zM14%203v2h3.59l-9.83%209.83%201.41%201.41L19%206 .41V10h2V3h-7z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); | |
30 } | |
31 | |
8 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ | 32 /* Use <h2> as the "sub-header" mentioned in the UX design docs. */ |
9 h2 { | 33 h2 { |
10 align-items: center; | 34 align-items: center; |
11 align-self: flex-start; | 35 align-self: flex-start; |
12 color: var(--paper-grey-600); | 36 color: var(--paper-grey-600); |
13 display: flex; | 37 display: flex; |
14 font-size: inherit; | 38 font-size: inherit; |
15 font-weight: 500; | 39 font-weight: 500; |
16 margin: 0; | 40 margin: 0; |
17 padding-top: 24px; | 41 padding-top: 24px; |
18 padding-bottom: 12px; | 42 padding-bottom: 12px; |
19 } | 43 } |
20 | 44 |
21 iron-icon[icon='cr:check'], | 45 iron-icon[icon='cr:check'], |
22 iron-icon[icon='settings:done'] { | 46 iron-icon[icon='settings:done'] { |
23 --iron-icon-fill-color: var(--google-green-500); | 47 --iron-icon-fill-color: var(--google-green-500); |
24 } | 48 } |
25 | 49 |
26 paper-button { | 50 paper-button { |
27 margin: 0; | 51 margin: 0; |
28 } | 52 } |
29 | 53 |
30 paper-button[toggles][active] { | 54 paper-button[toggles][active] { |
31 background-color: var(--paper-grey-300); | 55 background-color: var(--paper-grey-300); |
32 } | 56 } |
33 | 57 |
34 paper-toggle-button { | 58 paper-toggle-button { |
35 @apply(--settings-actionable); | 59 @apply(--settings-actionable); |
36 height: 20px; | 60 height: var(--settings-row-min-height); |
37 width: 31px; | 61 width: 31px; |
38 } | 62 } |
39 | 63 |
40 paper-dropdown-menu-light { | 64 paper-dropdown-menu-light { |
41 --iron-icon-fill-color: var(--paper-grey-600); | 65 --iron-icon-fill-color: var(--paper-grey-600); |
42 --paper-font-subhead: { | 66 --paper-font-subhead: { |
43 font-size: inherit; | 67 font-size: inherit; |
44 }; | 68 }; |
45 --paper-dropdown-menu-input: { | 69 --paper-dropdown-menu-input: { |
46 border-bottom-color: var(--paper-grey-300); | 70 border-bottom-color: var(--paper-grey-300); |
(...skipping 244 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
291 justify-content: center; | 315 justify-content: center; |
292 } | 316 } |
293 | 317 |
294 /* The lower line of text in a .settings-box.two-line. */ | 318 /* The lower line of text in a .settings-box.two-line. */ |
295 .settings-box .secondary { | 319 .settings-box .secondary { |
296 @apply(--settings-secondary); | 320 @apply(--settings-secondary); |
297 } | 321 } |
298 | 322 |
299 /* The middle part (horizontally) of a row. */ | 323 /* The middle part (horizontally) of a row. */ |
300 .settings-box .middle { | 324 .settings-box .middle { |
301 -webkit-margin-start: 16px; | 325 -webkit-padding-start: 16px; |
302 align-items: center; | 326 align-items: center; |
303 flex: auto; | 327 flex: auto; |
304 } | 328 } |
305 | 329 |
330 .settings-box .middle.two-line { | |
331 display: flex; | |
332 min-height: var(--settings-row-two-line-min-height); | |
333 } | |
334 | |
306 /* The start (left in LTR) part (horizontally) of a row. */ | 335 /* The start (left in LTR) part (horizontally) of a row. */ |
307 .settings-box .start { | 336 .settings-box .start { |
308 align-items: center; | 337 align-items: center; |
309 flex: auto; | 338 flex: auto; |
310 } | 339 } |
311 | 340 |
312 /* The secondary-action wraps a clickable sub-area of a .settings-box. | 341 /* The secondary-action wraps a clickable sub-area of a .settings-box. |
313 * An example is the |sign out| button on the People settings. | 342 * An example is the |sign out| button on the People settings. |
314 * Here is an example with and without a secondary action box: | 343 * Here is an example with and without a secondary action box: |
315 * | 344 * |
316 * +-------------------------------------------------------+ | 345 * +-------------------------------------------------------+ |
317 * | Main action area .settings-box | .secondary-action | | 346 * | Main action area .settings-box | .secondary-action | |
318 * +-------------------------------------------------------+ | 347 * +-------------------------------------------------------+ |
319 * | Another setting-box without a secondary-action | | 348 * | Another setting-box without a secondary-action | |
320 * +-------------------------------------------------------+ */ | 349 * +-------------------------------------------------------+ */ |
321 .settings-box .secondary-action { | 350 .settings-box .secondary-action { |
322 -webkit-border-start: var(--settings-separator-line); | 351 -webkit-border-start: var(--settings-separator-line); |
352 -webkit-margin-start: 20px; | |
tommycli
2016/09/23 19:29:57
Why is this required?
dschuyler
2016/09/27 00:43:09
I know it looks strange because normally we use
a
| |
323 -webkit-padding-start: 20px; | 353 -webkit-padding-start: 20px; |
354 align-items: center; | |
355 display: flex; | |
324 flex-shrink: 0; | 356 flex-shrink: 0; |
357 height: 33px; | |
tommycli
2016/09/23 19:29:57
This seems odd. Why is this height required?
dschuyler
2016/09/27 00:43:09
It previously didn't have a height and the
height
| |
325 } | 358 } |
326 | 359 |
327 .settings-box paper-item iron-icon { | 360 .settings-box paper-item iron-icon { |
328 /* Same padding as paper-icon-button. */ | 361 /* Same padding as paper-icon-button. */ |
329 padding: 8px; | 362 padding: 8px; |
330 } | 363 } |
331 | 364 |
332 /* Helper for a list frame to automatically avoid the separator line. */ | 365 /* Helper for a list frame to automatically avoid the separator line. */ |
333 .vertical-list > *:not(:first-of-type) { | 366 .vertical-list > *:not(:first-of-type) { |
334 border-top: var(--settings-separator-line); | 367 border-top: var(--settings-separator-line); |
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
384 /* Turns the arrow direction downwards, when the bubble is placed above | 417 /* Turns the arrow direction downwards, when the bubble is placed above |
385 * the anchor element */ | 418 * the anchor element */ |
386 .search-bubble-innards.above::after { | 419 .search-bubble-innards.above::after { |
387 -webkit-transform: rotate(-135deg); | 420 -webkit-transform: rotate(-135deg); |
388 bottom: -5px; | 421 bottom: -5px; |
389 top: auto; | 422 top: auto; |
390 } | 423 } |
391 </style> | 424 </style> |
392 </template> | 425 </template> |
393 </dom-module> | 426 </dom-module> |
OLD | NEW |