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 |