it-vue3-countdown
Version:
The Vue.js v3 Countdown Component
1 lines • 6.4 kB
Source Map (JSON)
{"version":3,"sources":["ItCountdown.vue%3Fvue&type=style&index=0&id=70353446&scoped=true&lang.scss"],"names":[],"mappings":"AAAA,qCAKE,+BAAgC,CADhC,aAAc,CAFd,cAAe,CADf,eAAgB,CAEhB,eAGF,CAEA,6BAGE,aAAc,CADd,yBAAkB,CAAlB,iBAAkB,CADlB,iBAGF,CACA,0JAGE,6BAAsB,CAAtB,qBACF,CAEA,oCACE,oBAAqB,CACrB,aACF,CACA,0BACE,oCACE,YACF,CACF,CAEA,mCAIE,gCAAiC,CADjC,aAAc,CAFd,cAAe,CACf,eAGF,CAEA,4BACE,aAAc,CAGd,iBAAkB,CAClB,eAAiB,CAFjB,oBAAsB,CADtB,iBAIF,CAEA,0BACE,mCACE,gBACF,CACA,4BACE,cACF,CACF,CACA,+LAUE,0BAA2B,CAC3B,kCAAmC,CAJnC,kDAAmD,CAEnD,6BAAgC,CAHhC,+BAAgC,CADhC,aAAc,CASd,YAAc,CANd,wBAA4B,CAI5B,mCAA4B,CAA5B,2BAA4B,CAC5B,WAEF,CAEA,uOAUE,0BAA2B,CAC3B,kCAAmC,CAJnC,kDAAmD,CAEnD,6BAAgC,CAHhC,+BAAgC,CADhC,aAAc,CASd,YAAc,CANd,wBAA4B,CAI5B,mCAA4B,CAA5B,2BAA4B,CAC5B,YAEF,CAEA,0KASE,oDAAqD,CACrD,6BAAgC,CAFhC,yBAA0B,CAJ1B,qCAAsC,CAGtC,MAAO,CAKP,eAAgB,CADhB,mBAAoB,CANpB,iBAAkB,CAClB,OAAQ,CAOR,SACF,CAEA,0FAEE,SACF,CAEA,kMAIE,aAAc,CACd,iBACF,CAEA,4RAME,wBACF,CAEA,4EAIE,WAAY,CACZ,MAAQ,CACR,mBAAoB,CAJpB,iBAAkB,CAClB,KAIF,CAEA,0FAGE,eAAgB,CADhB,iBAAkB,CAElB,UACF,CAEA,sGAGE,oEAAqE,CAArE,4DAAqE,CACrE,gCAAyB,CAAzB,wBAAyB,CACzB,sCAA+B,CAA/B,8BAA+B,CAH/B,SAIF,CAEA,4FAGE,gCAAyB,CAAzB,wBAAyB,CACzB,qEAAqE,CAArE,6DAAqE,CAFrE,mCAA4B,CAA5B,2BAGF,CAEA,oCACE,GACE,+BAAwB,CAAxB,uBAAwB,CACxB,SACF,CACA,OACE,SACF,CACA,GAEE,SAAU,CADV,iCAA0B,CAA1B,yBAEF,CACF,CAZA,4BACE,GACE,+BAAwB,CAAxB,uBAAwB,CACxB,SACF,CACA,OACE,SACF,CACA,GAEE,SAAU,CADV,iCAA0B,CAA1B,yBAEF,CACF,CACA,uCACE,OAGE,SAAU,CADV,gCAAyB,CAAzB,wBAAyB,CADzB,UAGF,CACA,IACE,SACF,CACA,GACE,SAAU,CACV,+BAAwB,CAAxB,uBAAwB,CACxB,SACF,CACF,CAdA,+BACE,OAGE,SAAU,CADV,gCAAyB,CAAzB,wBAAyB,CADzB,UAGF,CACA,IACE,SACF,CACA,GACE,SAAU,CACV,+BAAwB,CAAxB,uBAAwB,CACxB,SACF,CACF","file":"it-vue3-countdown.css","sourcesContent":[".no-animation__card[data-v-70353446] {\n font-weight: 500;\n font-size: 2rem;\n line-height: 1.5;\n display: block;\n color: var(--70353446-mainColor);\n}\n\n.flip-clock[data-v-70353446] {\n text-align: center;\n perspective: 600px;\n margin: 0 auto;\n}\n.flip-clock[data-v-70353446] *[data-v-70353446],\n.flip-clock[data-v-70353446] *[data-v-70353446]:before,\n.flip-clock[data-v-70353446] *[data-v-70353446]:after {\n box-sizing: border-box;\n}\n\n.flip-clock__piece[data-v-70353446] {\n display: inline-block;\n margin: 0 0.2vw;\n}\n@media (min-width: 1000px) {\n .flip-clock__piece[data-v-70353446] {\n margin: 0 5px;\n }\n}\n\n.flip-clock__slot[data-v-70353446] {\n font-size: 1rem;\n line-height: 1.5;\n display: block;\n color: var(--70353446-labelColor);\n}\n\n.flip-card[data-v-70353446] {\n display: block;\n position: relative;\n padding-bottom: 0.72em;\n font-size: 2.25rem;\n line-height: 0.95;\n}\n\n@media (min-width: 1000px) {\n .flip-clock__slot[data-v-70353446] {\n font-size: 1.2rem;\n }\n .flip-card[data-v-70353446] {\n font-size: 3rem;\n }\n}\n.flip-card__top[data-v-70353446],\n.flip-card__bottom[data-v-70353446],\n.flip-card__back-bottom[data-v-70353446],\n.flip-card__back[data-v-70353446]::before,\n.flip-card__back[data-v-70353446]::after {\n display: block;\n color: var(--70353446-mainColor);\n background: var(--70353446-mainFlipBackgroundColor);\n padding: 0.23em 0.15em 0.4em;\n border-radius: 0.15em 0.15em 0 0;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n transform-style: preserve-3d;\n width: 2.1em;\n height: 0.72em;\n}\n\n.flip-card__top-4digits[data-v-70353446],\n.flip-card__bottom-4digits[data-v-70353446],\n.flip-card__back-bottom-4digits[data-v-70353446],\n.flip-card__back-4digits[data-v-70353446]::before,\n.flip-card__back-4digits[data-v-70353446]::after {\n display: block;\n color: var(--70353446-mainColor);\n background: var(--70353446-mainFlipBackgroundColor);\n padding: 0.23em 0.15em 0.4em;\n border-radius: 0.15em 0.15em 0 0;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n transform-style: preserve-3d;\n width: 2.65em;\n height: 0.72em;\n}\n\n.flip-card__bottom[data-v-70353446],\n.flip-card__back-bottom[data-v-70353446],\n.flip-card__bottom-4digits[data-v-70353446],\n.flip-card__back-bottom-4digits[data-v-70353446] {\n color: var(--70353446-secondFlipColor);\n position: absolute;\n top: 50%;\n left: 0;\n border-top: solid 1px #000;\n background: var(--70353446-secondFlipBackgroundColor);\n border-radius: 0 0 0.15em 0.15em;\n pointer-events: none;\n overflow: hidden;\n z-index: 2;\n}\n\n.flip-card__back-bottom[data-v-70353446],\n.flip-card__back-bottom-4digits[data-v-70353446] {\n z-index: 1;\n}\n\n.flip-card__bottom[data-v-70353446]::after,\n.flip-card__back-bottom[data-v-70353446]::after,\n.flip-card__bottom-4digits[data-v-70353446]::after,\n.flip-card__back-bottom-4digits[data-v-70353446]::after {\n display: block;\n margin-top: -0.72em;\n}\n\n.flip-card__back[data-v-70353446]::before,\n.flip-card__bottom[data-v-70353446]::after,\n.flip-card__back-bottom[data-v-70353446]::after,\n.flip-card__back-4digits[data-v-70353446]::before,\n.flip-card__bottom-4digits[data-v-70353446]::after,\n.flip-card__back-bottom-4digits[data-v-70353446]::after {\n content: attr(data-value);\n}\n\n.flip-card__back[data-v-70353446],\n.flip-card__back-4digits[data-v-70353446] {\n position: absolute;\n top: 0;\n height: 100%;\n left: 0%;\n pointer-events: none;\n}\n\n.flip-card__back[data-v-70353446]::before,\n.flip-card__back-4digits[data-v-70353446]::before {\n position: relative;\n overflow: hidden;\n z-index: -1;\n}\n\n.flip .flip-card__back[data-v-70353446]::before,\n.flip .flip-card__back-4digits[data-v-70353446]::before {\n z-index: 1;\n animation: flipTop-70353446 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);\n animation-fill-mode: both;\n transform-origin: center bottom;\n}\n\n.flip .flip-card__bottom[data-v-70353446],\n.flip .flip-card__bottom-4digits[data-v-70353446] {\n transform-origin: center top;\n animation-fill-mode: both;\n animation: flipBottom-70353446 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);\n}\n\n@keyframes flipTop-70353446 {\n 0% {\n transform: rotateX(0deg);\n z-index: 2;\n }\n 0%, 99% {\n opacity: 1;\n }\n 100% {\n transform: rotateX(-90deg);\n opacity: 0;\n }\n}\n@keyframes flipBottom-70353446 {\n 0%, 50% {\n z-index: -1;\n transform: rotateX(90deg);\n opacity: 0;\n }\n 51% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n transform: rotateX(0deg);\n z-index: 5;\n }\n}"]}