| 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: 0 16px; |
| 38 } | 39 } |
| 39 | 40 |
| 40 [actionable] { | 41 [actionable] { |
| 41 @apply(--cr-actionable); | 42 @apply(--cr-actionable); |
| 42 } | 43 } |
| 43 | 44 |
| 44 button[is='paper-icon-button-light'] { | 45 button[is='paper-icon-button-light'] { |
| 45 @apply(--cr-paper-icon-button-margin); | 46 @apply(--cr-paper-icon-button-margin); |
| 46 background-position: center; | 47 background-position: center; |
| 47 background-repeat: no-repeat; | 48 background-repeat: no-repeat; |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 102 [selectable]:focus, | 103 [selectable]:focus, |
| 103 [selectable] > :focus { | 104 [selectable] > :focus { |
| 104 @apply(--cr-selectable-focus); | 105 @apply(--cr-selectable-focus); |
| 105 } | 106 } |
| 106 [selectable] > * { | 107 [selectable] > * { |
| 107 @apply(--cr-actionable); | 108 @apply(--cr-actionable); |
| 108 } | 109 } |
| 109 </style> | 110 </style> |
| 110 </template> | 111 </template> |
| 111 </dom-module> | 112 </dom-module> |
| OLD | NEW |