OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
3 | 3 |
4 <!-- Common css variables for Material Design WebUI. --> | 4 <!-- Common css variables for Material Design WebUI. --> |
5 <style is="custom-style"> | 5 <style is="custom-style"> |
6 :root { | 6 :root { |
7 --cr-actionable: { | 7 --cr-actionable: { |
8 cursor: pointer; | 8 cursor: pointer; |
9 }; | 9 }; |
10 | 10 |
11 /* Spacing between policy (controlledBy) indicator and control. */ | 11 /* Spacing between policy (controlledBy) indicator and control. */ |
12 --cr-controlled-by-spacing: 24px; | 12 --cr-controlled-by-spacing: 24px; |
13 | 13 |
14 --cr-focused-item-color: var(--google-grey-300); | 14 --cr-focused-item-color: var(--google-grey-300); |
15 | 15 |
16 /* The inner icon is 20px in size. paper-icon-button has 8px padding. */ | 16 /* The inner icon is 20px in size. paper-icon-button has 8px padding. */ |
17 --cr-icon-ripple-size: 36px; | 17 --cr-icon-ripple-size: 36px; |
18 --cr-icon-ripple-padding: 8px; | 18 --cr-icon-ripple-padding: 8px; |
19 | 19 |
20 --cr-icon-size: 20px; | 20 --cr-icon-size: 20px; |
21 | 21 |
22 --cr-icon-height-width: { | 22 --cr-icon-height-width: { |
23 height: var(--cr-icon-size); | 23 height: var(--cr-icon-size); |
24 width: var(--cr-icon-size); | 24 width: var(--cr-icon-size); |
25 } | 25 } |
26 | 26 |
| 27 --cr-icon-button-margin-start: 16px; |
| 28 |
27 --cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1); | 29 --cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1); |
28 | 30 |
29 --cr-paper-icon-button-margin: { | 31 --cr-paper-icon-button-margin: { |
30 /* Shift button so ripple overlaps the end of the row. */ | 32 /* Shift button so ripple overlaps the end of the row. */ |
31 -webkit-margin-end: var(--cr-icon-ripple-margin); | 33 -webkit-margin-end: var(--cr-icon-ripple-margin); |
32 -webkit-margin-start: var(--cr-icon-ripple-margin); | 34 -webkit-margin-start: var(--cr-icon-button-margin-start); |
33 } | 35 } |
34 | 36 |
35 --cr-selectable-focus: { | 37 --cr-selectable-focus: { |
36 background-color: var(--cr-focused-item-color); | 38 background-color: var(--cr-focused-item-color); |
37 outline: none; | 39 outline: none; |
38 } | 40 } |
39 --cr-separator-height: 1px; | 41 --cr-separator-height: 1px; |
40 --cr-separator-line: var(--cr-separator-height) solid rgba(0, 0, 0, 0.06); | 42 --cr-separator-line: var(--cr-separator-height) solid rgba(0, 0, 0, 0.06); |
41 --paper-checkbox-ink-size: 40px; | 43 --paper-checkbox-ink-size: 40px; |
42 } | 44 } |
43 </style> | 45 </style> |
OLD | NEW |