| 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 |