UNPKG

@vnmfify/core

Version:

```shell npm i @vnmfify/core -S ```

1 lines 4.37 kB
{"version":3,"sources":["slider/slider.scss","slider/_variables.scss"],"names":[],"mappings":"AAEA,gBAKE,8ECFiC,CDGjC,wECLqB,CDGrB,cAAA,CADA,qCCEoB,CDJpB,iBAAA,CACA,UCDqB,CDQrB,uBAKE,YAAA,CAEA,UAAA,CADA,MAAA,CALA,iBAAA,CAGA,OAAA,CADA,SAIA,CAGF,uBAIE,0ECrB8B,CDsB9B,qBAAA,CAFA,WAAA,CAFA,iBAAA,CAKA,iGAAA,CAAA,4FAAA,CAAA,yFAAA,CAJA,UAIA,CAGF,uBAGE,uECrB6B,CDsB7B,mDCvByB,CDwBzB,0ECtBsB,CDsBtB,kECtBsB,CDmBtB,sCCtBkB,CDqBlB,oCClBsB,CDwBtB,oEAKE,mBAAA,CAAA,WAAA,CAHA,iBAAA,CAEA,OAAA,CADA,OAAA,CAGA,yCAAA,CAAA,iCAAA,CAGF,oCAIE,mBAAA,CAAA,WAAA,CADA,MAAA,CAFA,iBAAA,CACA,OAAA,CAGA,0CAAA,CAAA,kCAAA,CAIJ,0BACE,kBAAA,CACA,iECnDsB,CDqDtB,sLAGE,kBAAA,CAIJ,0BACE,oBAAA,CAEA,WAAA,CADA,oCACA,CAEA,wHAIE,QAAA,CADA,SAAA,CADA,QAAA,CAGA,wCAAA,CAAA,gCAAA,CAGF,8DAGE,SAAA,CADA,SAAA,CADA,KAAA,CAGA,yCAAA,CAAA,iCAAA,CAIF,iCAIE,QAAA,CACA,UAAA,CAFA,WAAA,CAFA,KAIA","file":"index.css","sourcesContent":["@import './variables';\r\n\r\n.#{$component-prefix}slider {\r\n position: relative;\r\n width: 100%;\r\n height: $slider-track-height;\r\n cursor: pointer;\r\n background-color: $slider-inactive-background-color;\r\n border-radius: $slider-border-radius;\r\n\r\n // use pseudo element to expand click area\r\n &::before {\r\n position: absolute;\r\n // TODO use scss var\r\n top: -$padding-xs;\r\n right: 0;\r\n bottom: -$padding-xs;\r\n left: 0;\r\n content: '';\r\n }\r\n\r\n &__track {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n background-color:$slider-active-background-color;\r\n border-radius: inherit;\r\n transition: all $slider-track-transition-duration;\r\n }\r\n\r\n &__thumb {\r\n width: $slider-thumb-width;\r\n height: $slider-thumb-height;\r\n background-color: $slider-thumb-background-color;\r\n border-radius: $slider-thumb-border-radius;\r\n box-shadow: $slider-thumb-box-shadow;\r\n\r\n &-wrapper,\r\n &-wrapper-right {\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n cursor: grab;\r\n transform: translate3d(50%, -50%, 0);\r\n }\r\n\r\n &-wrapper-left {\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n cursor: grab;\r\n transform: translate3d(-50%, -50%, 0);\r\n }\r\n }\r\n\r\n &--disabled {\r\n cursor: not-allowed;\r\n opacity: $slider-disabled-opacity;\r\n\r\n .#{$component-prefix}slider__thumb-wrapper,\r\n .#{$component-prefix}slider__thumb-wrapper-left,\r\n .#{$component-prefix}slider__thumb-wrapper-right {\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &--vertical {\r\n display: inline-block;\r\n width: $slider-track-height;\r\n height: 100%;\r\n\r\n .#{$component-prefix}slider__thumb-wrapper,\r\n .#{$component-prefix}slider__thumb-wrapper-right {\r\n top: auto;\r\n right: 50%;\r\n bottom: 0;\r\n transform: translate3d(50%, 50%, 0);\r\n }\r\n\r\n .#{$component-prefix}slider__thumb-wrapper-left {\r\n top: 0;\r\n right: 50%;\r\n left: auto;\r\n transform: translate3d(50%, -50%, 0);\r\n }\r\n\r\n // use pseudo element to expand click area\r\n &::before {\r\n top: 0;\r\n // TODO use scss var\r\n right: -$padding-xs;\r\n bottom: 0;\r\n left: -$padding-xs;\r\n }\r\n }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$slider-border-radius: var(--slider-border-radius, var(--border-radius-max, $border-radius-max));\r\n$slider-active-background-color: var(--slider-active-background-color, var(--blue, $blue));\r\n$slider-inactive-background-color: var(--slider-inactive-background-color, var(--gray-3, $gray-3));\r\n$slider-disabled-opacity: var(--slider-disabled-opacity, var(--disabled-opacity, $disabled-opacity));\r\n$slider-track-height: var(--slider-track-height, 2px * $hd);\r\n$slider-track-transition-duration: var(--slider-track-transition-duration, var(--animation-duration-fast, $animation-duration-fast));\r\n$slider-thumb-width: var(--slider-thumb-width, 24px * $hd);\r\n$slider-thumb-height: var(--slider-thumb-height, 24px * $hd);\r\n$slider-thumb-border-radius: var(--slider-thumb-border-radius, 50%);\r\n$slider-thumb-background-color: var(--slider-thumb-background-color, var(--white, $white));\r\n$slider-thumb-box-shadow: var(--slider-thumb-box-shadow, 0 1px * $hd 2px * $hd rgba(0, 0, 0, 0.5));\r\n"]}