| OLD | NEW |
| 1 /* https://github.com/bgrins/spectrum */ | 1 /* https://github.com/bgrins/spectrum */ |
| 2 :host { | 2 :host { |
| 3 width: 232px; | 3 width: 232px; |
| 4 height: 240px; | 4 height: 240px; |
| 5 -webkit-user-select: none; | 5 -webkit-user-select: none; |
| 6 } | 6 } |
| 7 | 7 |
| 8 :host(.palettes-enabled) { | 8 :host(.palettes-enabled) { |
| 9 height: 271px; | 9 height: 271px; |
| 10 } | 10 } |
| (...skipping 191 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 202 display: inline-block; | 202 display: inline-block; |
| 203 border-radius: 2px; | 203 border-radius: 2px; |
| 204 margin: 6px; | 204 margin: 6px; |
| 205 cursor: pointer; | 205 cursor: pointer; |
| 206 } | 206 } |
| 207 | 207 |
| 208 .spectrum-palette > .spectrum-palette-color { | 208 .spectrum-palette > .spectrum-palette-color { |
| 209 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); | 209 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); |
| 210 border: 1px solid rgba(0, 0, 0, 0.1); | 210 border: 1px solid rgba(0, 0, 0, 0.1); |
| 211 will-change: transform; | 211 will-change: transform; |
| 212 z-index: 13; |
| 212 } | 213 } |
| 213 | 214 |
| 214 .spectrum-palette > .spectrum-palette-color.empty-color { | 215 .spectrum-palette > .spectrum-palette-color.empty-color { |
| 215 border-color: transparent; | 216 border-color: transparent; |
| 216 } | 217 } |
| 217 | 218 |
| 218 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover { | 219 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover { |
| 219 transform: scale(1.15); | 220 transform: scale(1.15); |
| 220 } | 221 } |
| 221 | 222 |
| 222 .add-color-toolbar { | 223 .add-color-toolbar { |
| 223 position: absolute; | 224 margin-left: -3px; |
| 224 right: 29px; | 225 margin-top: -1px; |
| 225 bottom: 5px; | |
| 226 } | 226 } |
| 227 | 227 |
| 228 .spectrum-palette-switcher { | 228 .spectrum-palette-switcher { |
| 229 right: 10px; | 229 right: 10px; |
| 230 top: 235px; | 230 top: 235px; |
| 231 margin-top: 9px; | 231 margin-top: 9px; |
| 232 position: absolute; | 232 position: absolute; |
| 233 } | 233 } |
| 234 | 234 |
| 235 .palette-panel { | 235 .palette-panel { |
| (...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 305 width: 100%; | 305 width: 100%; |
| 306 height: 100%; | 306 height: 100%; |
| 307 } | 307 } |
| 308 | 308 |
| 309 .spectrum-contrast-line { | 309 .spectrum-contrast-line { |
| 310 fill: none; | 310 fill: none; |
| 311 stroke: white; | 311 stroke: white; |
| 312 opacity: 0.7; | 312 opacity: 0.7; |
| 313 stroke-width: 1.5px; | 313 stroke-width: 1.5px; |
| 314 } | 314 } |
| 315 |
| 316 .delete-color-toolbar { |
| 317 position: absolute; |
| 318 right: 0; |
| 319 top: 0; |
| 320 height: 100%; |
| 321 background-color: #EFEFEF; |
| 322 visibility: hidden; |
| 323 z-index: 3; |
| 324 width: 36px; |
| 325 display: flex; |
| 326 align-items: center; |
| 327 padding-left: 5px; |
| 328 } |
| 329 |
| 330 @keyframes showDeleteToolbar { |
| 331 from { |
| 332 opacity: 0; |
| 333 } |
| 334 to { |
| 335 opacity: 1; |
| 336 } |
| 337 } |
| 338 |
| 339 .delete-color-toolbar.dragging { |
| 340 visibility: visible; |
| 341 animation: showDeleteToolbar 100ms 150ms cubic-bezier(0, 0, 0.2, 1) backward
s; |
| 342 } |
| 343 |
| 344 .delete-color-toolbar-active { |
| 345 background-color: #ddd; |
| 346 color: white; |
| 347 } |
| OLD | NEW |