| 1 |
/** |
| 2 |
* Editor Styles |
| 3 |
*/ |
| 4 |
@import "./variables"; |
| 5 |
|
| 6 |
.ghostkit-carousel { |
| 7 |
--gkt-carousel-gap: 20px; |
| 8 |
--gkt-carousel-slides-per-view: 2; |
| 9 |
|
| 10 |
position: relative; |
| 11 |
padding-bottom: 10px; |
| 12 |
overflow-x: auto; |
| 13 |
overflow-y: hidden; |
| 14 |
|
| 15 |
> .block-editor-inner-blocks > .block-editor-block-list__layout { |
| 16 |
display: flex; |
| 17 |
gap: var(--gkt-carousel-gap); |
| 18 |
margin: 0; |
| 19 |
|
| 20 |
> .wp-block { |
| 21 |
--gkt-carousel-slide-width: calc(100% / var(--gkt-carousel-slides-per-view) - var(--gkt-carousel-gap) * (var(--gkt-carousel-slides-per-view) - 1) / var(--gkt-carousel-slides-per-view)); |
| 22 |
|
| 23 |
flex: 0 0 var(--gkt-carousel-slide-width); |
| 24 |
min-width: var(--gkt-carousel-slide-width); |
| 25 |
max-width: var(--gkt-carousel-slide-width); |
| 26 |
margin: 0; |
| 27 |
background-color: rgba(126, 126, 126, 5%); |
| 28 |
|
| 29 |
&:last-of-type { |
| 30 |
margin-right: 0; |
| 31 |
} |
| 32 |
} |
| 33 |
|
| 34 |
> .block-list-appender { |
| 35 |
min-width: auto; |
| 36 |
} |
| 37 |
} |
| 38 |
|
| 39 |
// Fade edges. |
| 40 |
&-fade-edges { |
| 41 |
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0%) 0%, #000 var(--gkt-carousel--fade-edges__size), #000 calc(100% - var(--gkt-carousel--fade-edges__size)), rgba(0, 0, 0, 0%) 100%); |
| 42 |
} |
| 43 |
} |
| 44 |
|
| 45 |
// Example. |
| 46 |
.block-editor-inserter__preview .ghostkit-carousel-slide .block-editor-block-list__layout { |
| 47 |
margin: 0; |
| 48 |
|
| 49 |
.wp-block-image { |
| 50 |
margin: 0; |
| 51 |
} |
| 52 |
} |
| 53 |
|
