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-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1); |
| 28 |
27 --cr-paper-icon-button-margin: { | 29 --cr-paper-icon-button-margin: { |
28 /* Shift button so ripple overlaps the end of the row. */ | 30 /* Shift button so ripple overlaps the end of the row. */ |
29 -webkit-margin-end: calc(var(--cr-icon-ripple-padding) * -1); | 31 -webkit-margin-end: var(--cr-icon-ripple-margin); |
30 -webkit-margin-start: calc(var(--cr-icon-ripple-padding) * -1); | 32 -webkit-margin-start: var(--cr-icon-ripple-margin); |
31 } | 33 } |
32 | 34 |
33 --cr-selectable-focus: { | 35 --cr-selectable-focus: { |
34 background-color: var(--cr-focused-item-color); | 36 background-color: var(--cr-focused-item-color); |
35 outline: none; | 37 outline: none; |
36 } | 38 } |
37 --cr-separator-height: 1px; | 39 --cr-separator-height: 1px; |
38 --cr-separator-line: var(--cr-separator-height) solid rgba(0, 0, 0, 0.06); | 40 --cr-separator-line: var(--cr-separator-height) solid rgba(0, 0, 0, 0.06); |
39 --paper-checkbox-ink-size: 40px; | 41 --paper-checkbox-ink-size: 40px; |
40 } | 42 } |
41 </style> | 43 </style> |
OLD | NEW |