@brainhubeu/react-carousel
Version:
Carousel component for React
1 lines • 7.48 kB
Source Map (JSON)
{"version":3,"sources":["webpack://react-carousel/./src/plugins/rtl.scss","webpack://react-carousel/./src/styles/CarouselItem.scss","webpack://react-carousel/./src/styles/Carousel.scss","webpack://react-carousel/./src/plugins/arrows.scss","webpack://react-carousel/./src/styles/CarouselDots.scss"],"names":[],"mappings":"AAAA,0CAGI,aAAc,CAHlB,qGAOQ,aAAc;ACPtB,sBACE,YAAa,CACb,sBAAuB,CACvB,kBAAmB,CACnB,iBAAkB,CAJpB,sDAMI,cAAe,CANnB,oCAYI,iBAAkB,CAClB,KAAM,CACN,QAAS,CACT,MAAO,CACP,OAAQ,CACR,YAAa,CACb,sBAAuB,CACvB,aAAc,CACd,6BAA8B;AClBlC,6BACE,UAAW,CACX,eAAgB,CACjB,kBAGC,eAAgB,CAChB,YAAa,CACb,kBAAmB,CAHrB,0CAMI,aAAc,CANlB,qGAUQ,aAAc,CAVtB,oDAgBI,UAAW,CACX,eAAgB,CAjBpB,6EAmBM,YAAa,CACb,eAAgB,CAChB,eAAgB,CAChB,QAAS,CACT,SAAU,CAvBhB,iHA0BQ,oBAAqB,CACtB,0BAOL,cAAe,CAChB,0BAIC,UAAW,CACX,WAAY,CACZ,kBAAmB,CACnB,wBAjDmB,CAkDnB,6BAA8B,CAC9B,2CAAW,CAAX,mCAAoC,CACrC,0BAGC,GACE,sBAAuB,CAEzB,KACE,wBAAyB,EAP5B,kBAGC,GACE,sBAAuB,CAEzB,KACE,wBAAyB;AChD7B,0BACE,iBAAkB,CAClB,YAA6B,CAC7B,WAAY,CACZ,eAAgB,CAChB,SAAU,CACV,WAAY,CACZ,aAAc,CACd,wBAjB0B,CAS5B,+BAWI,aAAc,CACd,iBAAkB,CAClB,OAAQ,CACR,QAAS,CACT,kBAAmB,CACnB,iBArBa,CAsBb,wBAA2C,CAC3C,WAAqB,CACrB,eAAgB,CAChB,WAAY,CApBhB,gCAwBI,wBAhC4C,CAQhD,qCA0BM,aAAc,CACd,iBAAkB,CAClB,OAAQ,CACR,QAAS,CACT,kBAAmB,CACnB,iBApCW,CAqCX,wBAA2C,CAC3C,WAAqB,CACrB,eAAgB,CAChB,WAAY,CAnClB,wCAuCM,wBA/C0C,CAQhD,6CAyCQ,iBA7CgB,CA8ChB,QAAS,CA1CjB,mCAgDI,qBAvDyB,CAwD1B,kCAKC,+CAAgD,CAChD,kBAA+C,CAChD,mCAKC,6CAA8C,CAC9C,mBAAgD,CACjD,2DAMG,6CAA8C,CAC9C,mBAAgD,CAJtD,kEAUM,wBAAyB,CAV/B,4DAgBM,+CAAgD,CAChD,kBAA+C,CAjBrD,mEAuBM,yBAA0B,CAvBhC,8DA8BQ,QAAS,CACV,kCAML,mBAAoB;AC/GtB,wBACE,YAAa,CACb,sBAAuB,CACvB,eAAgB,CAChB,QAAS,CACT,SAAU,CACV,WAAY,CACZ,aAAc,CAPhB,sDAUI,aAAc,CAVlB,+CAcI,SAAU,CACV,YAAa,CACb,WAAY,CACZ,WAAY,CACZ,WAAY,CACZ,cAAe,CACf,uBAAwB,CApB5B,+EAuBM,oBAAqB,CAvB3B,qDA2BM,SAAU,CA3BhB,sDA+BM,UAAW,CACX,aAAc,CACd,SAAU,CACV,UAAW,CACX,iBAAkB,CAClB,SAAU,CACV,WAAY,CACZ,eAxCY,CAElB,qDA2CI,SAAU,CACV,YAAa,CACb,WAAY,CACZ,WAAY,CACZ,WAAY,CACZ,cAAe,CAhDnB,2FAmDM,oBAAqB,CAnD3B,2DAuDM,SAAU,CACX,0CAKH,uBAAwB,CACzB,iDAIG,aAAc","file":"style.css","sourcesContent":[".BrainhubCarousel {\n\n &.BrainhubCarousel--isRTL {\n direction: rtl;\n\n .BrainhubCarousel__trackContainer {\n .BrainhubCarousel__track {\n direction: rtl;\n }\n }\n }\n}\n",".BrainhubCarouselItem {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n &.BrainhubCarouselItem--clickable {\n cursor: pointer;\n }\n &.BrainhubCarouselItem--active {\n\n }\n .debug-number {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n font-size: 2em;\n text-shadow: 0px 0px 9px white;\n }\n}\n","$loaderColor: #7b59ff;\n\n.BrainhubCarousel__container {\n width: 100%;\n overflow: hidden;\n}\n\n.BrainhubCarousel {\n overflow: hidden;\n display: flex;\n align-items: center;\n\n &.BrainhubCarousel--isRTL {\n direction: rtl;\n\n .BrainhubCarousel__trackContainer {\n .BrainhubCarousel__track {\n direction: rtl;\n }\n }\n }\n\n .BrainhubCarousel__trackContainer {\n width: 100%;\n overflow: hidden;\n .BrainhubCarousel__track {\n display: flex;\n overflow: hidden;\n list-style: none;\n margin: 0;\n padding: 0;\n\n &.BrainhubCarousel__track--transition {\n transition: transform;\n }\n }\n }\n}\n\n/* arrows */\n.BrainhubCarousel__arrows {\n cursor: pointer;\n}\n\n/* loader */\n.BrainhubCarousel__loader {\n width: 50px;\n height: 50px;\n border-radius: 100%;\n border: 4px solid $loaderColor;\n border-left-color: transparent;\n animation: loader 1s infinite linear;\n}\n\n@keyframes loader {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}","\n$clickableAreaSize: 42px;\n$clickableAreaColor: #7b59ff;\n$clickableAreaColor__hover: lighten(#7b59ff, 3%);\n$disabledButtonColor: #cccccc;\n\n$arrowColor: #fff;\n$arrowColor__hover: #fff;\n$arrowSize: 10px;\n$arrowWeight: 3px;\n\n.BrainhubCarousel__arrows {\n position: relative;\n padding: $clickableAreaSize/2;\n border: none;\n overflow: hidden;\n outline: 0;\n font-size: 0;\n line-height: 0;\n background-color: $clickableAreaColor;\n\n span {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n border-style: solid;\n border-color: $arrowColor;\n border-width: $arrowWeight $arrowWeight 0 0;\n padding: $arrowSize/2;\n transition: 0.3s;\n font-size: 0;\n }\n\n &:hover {\n background-color: $clickableAreaColor__hover;\n span {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n border-style: solid;\n border-color: $arrowColor;\n border-width: $arrowWeight $arrowWeight 0 0;\n padding: $arrowSize/2;\n transition: 0.3s;\n font-size: 0;\n }\n\n &:enabled {\n background-color: $clickableAreaColor__hover;\n span {\n border-color: $arrowColor__hover;\n margin: 0;\n }\n }\n }\n\n &:disabled {\n background-color: $disabledButtonColor;\n }\n}\n\n.BrainhubCarousel__arrowLeft {\n span {\n transform: translate(-50%, -50%) rotate(-135deg);\n margin-left: 0.35 * ($arrowSize - $arrowWeight);\n }\n}\n\n.BrainhubCarousel__arrowRight {\n span {\n transform: translate(-50%, -50%) rotate(45deg);\n margin-left: -0.35 * ($arrowSize - $arrowWeight);\n }\n}\n\n.BrainhubCarousel--isRTL {\n .BrainhubCarousel__arrowLeft {\n span {\n transform: translate(-50%, -50%) rotate(45deg);\n margin-left: -0.35 * ($arrowSize - $arrowWeight);\n }\n }\n\n .BrainhubCarousel__custom-arrowLeft {\n span {\n transform: rotate(180deg);\n }\n }\n\n .BrainhubCarousel__arrowRight {\n span {\n transform: translate(-50%, -50%) rotate(-135deg);\n margin-left: 0.35 * ($arrowSize - $arrowWeight);\n }\n }\n\n .BrainhubCarousel__custom-arrowRight {\n span {\n transform: rotate(-180deg);\n }\n }\n\n .BrainhubCarousel__arrows {\n &:hover {\n span {\n margin: 0;\n }\n }\n }\n}\n\n.BrainhubCarousel__arrow--disable {\n pointer-events: none;\n}\n","/* variables */\n$dots-color: black;\n\n.BrainhubCarousel__dots {\n display: flex;\n justify-content: center;\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: 0;\n line-height: 0;\n\n &.BrainhubCarousel__dots--isRTL {\n direction: rtl;\n }\n\n .BrainhubCarousel__dot {\n outline: 0;\n padding: 10px;\n border: none;\n opacity: 0.5;\n font-size: 0;\n cursor: pointer;\n -webkit-appearance: none;\n\n &.BrainhubCarousel__dot--selected {\n opacity: 1 !important;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &:before {\n content: '';\n display: block;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n padding: 0;\n border: none;\n background: $dots-color;\n }\n }\n\n .BrainhubCarousel__thumbnail {\n outline: 0;\n padding: 10px;\n border: none;\n opacity: 0.5;\n font-size: 0;\n cursor: pointer;\n\n &.BrainhubCarousel__thumbnail--selected {\n opacity: 1 !important;\n }\n\n &:hover {\n opacity: 1;\n }\n }\n}\n\n.BrainhubCarousel__thumbnail[type=button] {\n -webkit-appearance: none;\n}\n\n.BrainhubCarousel--isRTL {\n + .BrainhubCarousel__dots {\n direction: rtl;\n }\n}\n"],"sourceRoot":""}