| OLD | NEW |
| 1 <!-- Common styles for Material Design settings. --> | 1 <!-- Common styles for Material Design settings. --> |
| 2 <dom-module id="settings-shared"> | 2 <dom-module id="settings-shared"> |
| 3 <template> | 3 <template> |
| 4 <style> | 4 <style> |
| 5 :root { | 5 :root { |
| 6 --checkbox-margin-start: 2px; | 6 --checkbox-margin-start: 2px; |
| 7 --checkbox-size: 16px; | 7 --checkbox-size: 16px; |
| 8 --checkbox-spacing: 18px; | 8 --checkbox-spacing: 18px; |
| 9 --iron-icon-fill-color: var(--paper-grey-600); | 9 --iron-icon-fill-color: var(--paper-grey-600); |
| 10 --iron-icon-height: 20px; | 10 --iron-icon-height: 20px; |
| (...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 83 /* TODO(dbeam): check with bettes@ on this one, but I'm pretty sure we | 83 /* TODO(dbeam): check with bettes@ on this one, but I'm pretty sure we |
| 84 * shouldn't be showing much :hover stuff on Polymer pages. */ | 84 * shouldn't be showing much :hover stuff on Polymer pages. */ |
| 85 text-decoration: none; | 85 text-decoration: none; |
| 86 } | 86 } |
| 87 | 87 |
| 88 paper-button.primary-button { | 88 paper-button.primary-button { |
| 89 --paper-button: { | 89 --paper-button: { |
| 90 font-weight: 500; | 90 font-weight: 500; |
| 91 text-align: start; | 91 text-align: start; |
| 92 }; | 92 }; |
| 93 margin: 0 -0.57em; /* Offsets default paper-button padding. */ | |
| 94 } | 93 } |
| 95 | 94 |
| 96 paper-button.secondary-button { | 95 paper-button.secondary-button { |
| 97 --paper-button: { | 96 --paper-button: { |
| 98 color: var(--paper-grey-600); | 97 color: var(--paper-grey-600); |
| 99 text-decoration: none; | 98 text-decoration: none; |
| 100 font-weight: 500; | 99 font-weight: 500; |
| 101 }; | 100 }; |
| 102 } | 101 } |
| 103 | 102 |
| 104 paper-button.tertiary-button { | 103 paper-button.tertiary-button { |
| 105 --paper-button: { | 104 --paper-button: { |
| 106 font-weight: 400; | 105 font-weight: 400; |
| 107 text-decoration: none; | 106 text-decoration: none; |
| 108 }; | 107 }; |
| 109 } | 108 } |
| 110 | 109 |
| 110 .settings-box paper-button.primary-button, |
| 111 .settings-box paper-button.secondary-button, |
| 112 .settings-box paper-button.secondary-button { |
| 113 margin-left: -12px; |
| 114 margin-right: -12px; |
| 115 padding-left: 12px; |
| 116 padding-right: 12px; |
| 117 } |
| 118 |
| 111 paper-checkbox { | 119 paper-checkbox { |
| 112 --paper-checkbox-checked-color: var(--google-blue-500); | 120 --paper-checkbox-checked-color: var(--google-blue-500); |
| 113 --paper-checkbox-label-spacing: var(--checkbox-spacing); | 121 --paper-checkbox-label-spacing: var(--checkbox-spacing); |
| 114 --paper-checkbox-size: var(--checkbox-size); | 122 --paper-checkbox-size: var(--checkbox-size); |
| 115 --paper-checkbox-unchecked-color: var(--paper-grey-600); | 123 --paper-checkbox-unchecked-color: var(--paper-grey-600); |
| 116 -webkit-margin-start: var(--checkbox-margin-start); | 124 -webkit-margin-start: var(--checkbox-margin-start); |
| 117 } | 125 } |
| 118 | 126 |
| 119 paper-radio-button { | 127 paper-radio-button { |
| 120 @apply(--layout-center); | 128 @apply(--layout-center); |
| 121 --paper-radio-button-checked-color: var(--google-blue-500); | 129 --paper-radio-button-checked-color: var(--google-blue-500); |
| 122 --paper-radio-button-label-spacing: 18px; | 130 --paper-radio-button-label-spacing: 18px; |
| 123 --paper-radio-button-unchecked-color: var(--paper-grey-600); | 131 --paper-radio-button-unchecked-color: var(--paper-grey-600); |
| 124 -webkit-margin-start: 2px; | 132 -webkit-margin-start: 2px; |
| 125 display: flex; | 133 display: flex; |
| 126 min-height: 40px; | 134 min-height: 40px; |
| 127 } | 135 } |
| 128 | 136 |
| 129 paper-radio-group { | 137 paper-radio-group { |
| 130 width: 100%; | 138 width: 100%; |
| 131 } | 139 } |
| 132 | 140 |
| 133 .text-elide { | 141 .text-elide { |
| 134 overflow: hidden; | 142 overflow: hidden; |
| 135 text-overflow: ellipsis; | 143 text-overflow: ellipsis; |
| 136 white-space: nowrap; | 144 white-space: nowrap; |
| 137 } | 145 } |
| 138 | 146 |
| 139 .button-row { | |
| 140 display: flex; | |
| 141 margin-top: 25px; | |
| 142 } | |
| 143 | |
| 144 .button-strip { | 147 .button-strip { |
| 145 text-align: end; | 148 text-align: end; |
| 146 } | 149 } |
| 147 | 150 |
| 148 .action-button { | 151 .action-button { |
| 149 background: var(--google-blue-500); | 152 background: var(--google-blue-500); |
| 150 color: white; | 153 color: white; |
| 151 } | 154 } |
| 152 | 155 |
| 153 .action-button[disabled] { | 156 .action-button[disabled] { |
| (...skipping 138 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 292 | 295 |
| 293 .favicon-image { | 296 .favicon-image { |
| 294 background-repeat: no-repeat; | 297 background-repeat: no-repeat; |
| 295 background-size: contain; | 298 background-size: contain; |
| 296 height: 16px; | 299 height: 16px; |
| 297 width: 16px; | 300 width: 16px; |
| 298 } | 301 } |
| 299 </style> | 302 </style> |
| 300 </template> | 303 </template> |
| 301 </dom-module> | 304 </dom-module> |
| OLD | NEW |