@vnmfify/core
Version:
```shell npm i @vnmfify/core -S ```
1 lines • 3.59 kB
Source Map (JSON)
{"version":3,"sources":["loading/loading.scss","loading/_variables.scss"],"names":[],"mappings":"AAEA,iBAEE,wBAAA,CAAA,qBAAA,CACA,uBAAA,CAAA,oBAAA,CADA,0BAAA,CAAA,kBAAA,CAEA,gDCHc,CDAd,0BAAA,CAAA,2BAAA,CAAA,0BAAA,CAAA,mBAAA,CAEA,8BAAA,CAAA,sBCFc,CDKd,qDAGE,6BAAA,CAAA,qBAAA,CAGA,+BCVW,CDWX,eAAA,CAFA,cAAA,CAHA,iBAAA,CAEA,8BAGA,CAGF,0BACE,0FAAA,CAAA,kFAAA,CAEA,gCAKE,WAAA,CAFA,MAAA,CAFA,iBAAA,CACA,KAAA,CAEA,UACA,CAEA,uCAME,6BAAA,CACA,iBAAA,CAFA,WAAA,CAJA,aAAA,CAEA,UAAA,CACA,aAAA,CAFA,SAKA,CAKA,8CACE,SAAA,CACA,+BAAA,CAAA,2BAAA,CAAA,uBAAA,CAFF,+CACE,aAAA,CACA,+BAAA,CAAA,2BAAA,CAAA,uBAAA,CAFF,+CACE,YAAA,CACA,+BAAA,CAAA,2BAAA,CAAA,uBAAA,CAFF,+CACE,aAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,WAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,aAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,YAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,aAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,UAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,gDACE,aAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,gDACE,YAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,gDACE,aAAA,CACA,+BAAA,CAAA,2BAAA,CAAA,uBAAA,CAMR,2BAIE,uFAAA,CAAA,+EAAA,CAFA,mEAAA,CACA,kBAAA,CADA,6BAEA,CAGF,uBAIE,qDCpDiB,CDkDjB,gECjDqB,CDkDrB,gDCjDuB,CD+CvB,kCCjDiB,CDsDjB,6BACE,YAAA,CAIJ,2BACE,2BAAA,CAAA,4BAAA,CAAA,6BAAA,CAAA,yBAAA,CAAA,qBAAA,CAEA,kDACE,iCAAA","file":"index.css","sourcesContent":["@import \"./variables\";\n\n.#{$component-prefix}loading {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: $loading-color;\n\n &__spinner,\n &__circular {\n position: relative;\n box-sizing: border-box;\n width: $loading-size;\n max-width: 100%;\n height: $loading-size;\n max-height: 100%;\n }\n\n &__spinner {\n animation: #{$component-prefix}-rotate $loading-animation-duration steps(12) infinite;\n\n &__item {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n &::before {\n display: block;\n width: 2px * $hd;\n height: 25%;\n margin: 0 auto;\n content: ' ';\n background-color: currentColor;\n border-radius: 40%;\n }\n\n // Generate 12 item\n @for $i from 1 through 12 {\n &:nth-of-type(#{$i}) {\n opacity: 1 - calc(0.75 / 12) * ($i - 1);\n transform: rotate($i * 30deg);\n }\n }\n }\n }\n\n &__circular {\n border: $loading-circular-border-width solid transparent;\n border-top-color: currentColor;\n border-radius: 100%;\n animation: #{$component-prefix}-rotate $loading-animation-duration linear infinite;\n }\n\n &__text {\n margin-left: var(--padding-xs, $padding-xs);\n font-size: $loading-text-font-size;\n line-height: $loading-text-line-height;\n color: $loading-text-color;\n\n &:empty {\n display: none;\n }\n }\n\n &--vertical {\n flex-direction: column;\n\n .#{$component-prefix}loading__text {\n margin: var(--padding-xs, $padding-xs) 0 0;\n }\n }\n}\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$loading-color: var(--loading-color, var(--gray-5, $gray-5));\r\n$loading-size: var(--loading-size, 30px * $hd);\r\n$loading-animation-duration: var(--loading-animation-duration, 0.8s);\r\n$loading-circular-border-width: var(--loading-circular-border-width, 1px * $hd);\r\n$loading-text-color: var(--loading-text-color, var(--gray-6, $gray-6));\r\n$loading-text-font-size: var(--loading-text-font-size, var(--font-size-md, $font-size-md));\r\n$loading-text-line-height: var(--loading-text-line-height, 20px * $hd);\r\n"]}