UNPKG

vuestic-ui

Version:

Vue 3 UI Framework

vuestic.dev

epicmaxco/vuestic-ui

9 lines (8 loc) • 3.8 kB
1
2
3
4
5
6
7
8
9
import { _ as _sfc_main } from "./VaCarousel.vue_vue_type_script_setup_true_lang.js"; import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js"; const _style_0 = ':root,\n:host {\n --va-carousel-background: var(--va-background-secondary);\n --va-carousel-border-radius: var(--va-block-border-radius);\n --va-carousel-box-shadow: var(--va-box-shadow);\n --va-carousel-slides-transition: all 0.3s ease-in-out;\n --va-carousel-indicators-gap: 0.25rem;\n --va-carousel-min-height: 80px;\n /** Fake padding for absolute position elements */\n --va-carousel-padding: 16px;\n}\n@keyframes va-carousel-fade-appear {\n0% {\n opacity: 0;\n}\n100% {\n opacity: 1;\n}\n}\n.va-carousel {\n display: flex;\n width: 100%;\n height: 100%;\n max-height: 100%;\n min-height: var(--va-carousel-min-height);\n background: var(--va-carousel-background);\n box-shadow: var(--va-carousel-box-shadow);\n border-radius: var(--va-carousel-border-radius);\n position: relative;\n overflow: hidden;\n}\n.va-carousel__content {\n flex: 1;\n width: 100%;\n white-space: nowrap;\n}\n.va-carousel__slides {\n width: 100%;\n height: 100%;\n transition: var(--va-carousel-slides-transition);\n}\n.va-carousel__slide {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n.va-carousel__indicators {\n width: 100%;\n position: absolute;\n bottom: var(--va-carousel-padding);\n display: flex;\n justify-content: center;\n z-index: 2;\n overflow-x: auto;\n left: 50%;\n transform: translateX(-50%);\n scrollbar-color: var(--va-background-element) transparent;\n scrollbar-width: thin;\n transition: scrollbar-color 0.3s ease-in-out;\n}\n.va-carousel__indicators::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n.va-carousel__indicators::-webkit-scrollbar-track {\n box-shadow: none;\n border-radius: 10px;\n}\n.va-carousel__indicators::-webkit-scrollbar-thumb {\n background: var(--va-background-element);\n opacity: 0.3;\n border-radius: 2px;\n -webkit-transition: background 0.3s ease-in-out;\n transition: background 0.3s ease-in-out;\n}\n.va-carousel__indicators > * {\n margin: 0 var(--va-carousel-indicators-gap);\n}\n.va-carousel__arrow {\n z-index: 1;\n width: -moz-max-content;\n width: max-content;\n height: -moz-max-content;\n height: max-content;\n}\n.va-carousel__arrow--right {\n right: var(--va-carousel-padding);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n.va-carousel__arrow--left {\n left: var(--va-carousel-padding);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n.va-carousel--vertical .va-carousel__slide {\n display: flex;\n}\n.va-carousel--vertical .va-carousel__arrow {\n z-index: 1;\n}\n.va-carousel--vertical .va-carousel__arrow--right {\n bottom: var(--va-carousel-padding);\n top: auto;\n left: 50%;\n transform: translateX(-50%);\n}\n.va-carousel--vertical .va-carousel__arrow--left {\n top: var(--va-carousel-padding);\n left: 50%;\n transform: translateX(-50%);\n}\n.va-carousel--vertical .va-carousel__indicators {\n left: var(--va-carousel-padding);\n flex-direction: column;\n width: auto;\n height: 100%;\n top: 50%;\n transform: translateY(-50%);\n overflow-x: hidden;\n overflow-y: auto;\n}\n.va-carousel--vertical .va-carousel__indicators > * {\n margin: var(--va-carousel-indicators-gap) 0;\n}\n.va-carousel .va-image {\n height: 100%;\n width: 100%;\n}\n.va-carousel .va-button:focus-visible {\n outline: 2px solid var(--va-focus) !important;\n border-radius: "inherit";\n outline-offset: -2px;\n}'; const _VaCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]); export { _VaCarousel as _ }; //# sourceMappingURL=VaCarousel.js.map