| 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/cr_elements/shared_vars_css.html"> | 2 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| 3 | 3 |
| 4 <!-- Common styles for Material Design WebUI. Included directly in | 4 <!-- Common styles for Material Design WebUI. Included directly in |
| 5 settings_shared_css.html. --> | 5 settings_shared_css.html. --> |
| 6 <dom-module id="cr-shared-style"> | 6 <dom-module id="cr-shared-style"> |
| 7 <template> | 7 <template> |
| 8 <style> | 8 <style> |
| 9 /* Chrome spinners should be blue. */ | 9 /* Chrome spinners should be blue. */ |
| 10 paper-spinner { | 10 paper-spinner { |
| 11 --paper-spinner-layer-1-color: var(--google-blue-500); | 11 --paper-spinner-layer-1-color: var(--google-blue-500); |
| 12 --paper-spinner-layer-2-color: var(--google-blue-500); | 12 --paper-spinner-layer-2-color: var(--google-blue-500); |
| 13 --paper-spinner-layer-3-color: var(--google-blue-500); | 13 --paper-spinner-layer-3-color: var(--google-blue-500); |
| 14 --paper-spinner-layer-4-color: var(--google-blue-500); | 14 --paper-spinner-layer-4-color: var(--google-blue-500); |
| 15 } | 15 } |
| 16 | 16 |
| 17 .action-button { | 17 .action-button { |
| 18 background: var(--google-blue-500); | 18 background: var(--google-blue-500); |
| 19 color: white; | 19 color: white; |
| 20 --paper-button-flat-keyboard-focus: { | 20 --paper-button-flat-keyboard-focus: { |
| 21 background: rgb(58, 117, 215); /* 88% of --google-blue-500 */ | 21 background: rgb(58, 117, 215); /* 88% of --google-blue-500 */ |
| 22 }; | 22 }; |
| 23 } | 23 } |
| 24 | 24 |
| 25 .action-button[disabled] { | 25 .action-button[disabled] { |
| 26 opacity: .25; /* TODO(dbeam): check this value with bettes. */ | 26 opacity: .2; |
| 27 } | 27 } |
| 28 | 28 |
| 29 .cancel-button { | 29 .cancel-button { |
| 30 --paper-button-flat-keyboard-focus: { | 30 --paper-button-flat-keyboard-focus: { |
| 31 background: rgba(0, 0, 0, .12); | 31 background: rgba(0, 0, 0, .12); |
| 32 }; | 32 }; |
| 33 } | 33 } |
| 34 | 34 |
| 35 .action-button, | 35 .action-button, |
| 36 .cancel-button { | 36 .cancel-button { |
| 37 font-weight: 500; | 37 font-weight: 500; |
| 38 padding-left: 16px; |
| 39 padding-right: 16px; |
| 38 } | 40 } |
| 39 | 41 |
| 40 [actionable] { | 42 [actionable] { |
| 41 @apply(--cr-actionable); | 43 @apply(--cr-actionable); |
| 42 } | 44 } |
| 43 | 45 |
| 44 button[is='paper-icon-button-light'] { | 46 button[is='paper-icon-button-light'] { |
| 45 @apply(--cr-paper-icon-button-margin); | 47 @apply(--cr-paper-icon-button-margin); |
| 46 background-position: center; | 48 background-position: center; |
| 47 background-repeat: no-repeat; | 49 background-repeat: no-repeat; |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 102 [selectable]:focus, | 104 [selectable]:focus, |
| 103 [selectable] > :focus { | 105 [selectable] > :focus { |
| 104 @apply(--cr-selectable-focus); | 106 @apply(--cr-selectable-focus); |
| 105 } | 107 } |
| 106 [selectable] > * { | 108 [selectable] > * { |
| 107 @apply(--cr-actionable); | 109 @apply(--cr-actionable); |
| 108 } | 110 } |
| 109 </style> | 111 </style> |
| 110 </template> | 112 </template> |
| 111 </dom-module> | 113 </dom-module> |
| OLD | NEW |