| 1 |
/** |
| 2 |
* Block Variables |
| 3 |
*/ |
| 4 |
@import "../../../variables"; |
| 5 |
|
| 6 |
.ghostkit-image-compare { |
| 7 |
--gkt-image-compare__position: 50%; |
| 8 |
|
| 9 |
// Divider. |
| 10 |
--gkt-image-compare--divider__width: 3px; |
| 11 |
--gkt-image-compare--divider__background-color: #fff; |
| 12 |
|
| 13 |
// Divider Icon. |
| 14 |
--gkt-image-compare--divider-icons__font-size: 1.3em; |
| 15 |
--gkt-image-compare--divider-icons__offset: 0.3em; |
| 16 |
--gkt-image-compare--divider-icons__color: #000; |
| 17 |
--gkt-image-compare--divider-hover-icons__offset: 0.35em; |
| 18 |
|
| 19 |
// Divider Button. |
| 20 |
--gkt-image-compare--divider-button__width: 50px; |
| 21 |
--gkt-image-compare--divider-button__height: 50px; |
| 22 |
--gkt-image-compare--divider-button__background-color: var(--gkt-image-compare--divider__background-color); |
| 23 |
|
| 24 |
// Labels. |
| 25 |
--gkt-image-compare--label__backdrop-filter: brightness(0.75) blur(10px); |
| 26 |
--gkt-image-compare--label__offset: 10px; |
| 27 |
--gkt-image-compare--label__max-width: 30%; |
| 28 |
--gkt-image-compare--label__padding: 0.3em 1.6em; |
| 29 |
--gkt-image-compare--label__font-size: 0.8em; |
| 30 |
--gkt-image-compare--label__text-align: center; |
| 31 |
--gkt-image-compare--label__color: #fff; |
| 32 |
--gkt-image-compare--label__background-color: rgba(255, 255, 255, 30%); |
| 33 |
--gkt-image-compare--label__border-radius: 3px; |
| 34 |
|
| 35 |
// Transitions. |
| 36 |
--gkt-image-compare__transition-duration: var(--gkt-transition-duration); |
| 37 |
--gkt-image-compare__transition-easing: var(--gkt-transition-easing); |
| 38 |
} |
| 39 |
|
