@vnmfify/core
Version:
```shell npm i @vnmfify/core -S ```
1 lines • 4.44 kB
Source Map (JSON)
{"version":3,"sources":["progress/progress.scss","progress/_variables.scss"],"names":[],"mappings":"AAEA,kBAIE,iECD0B,CDE1B,uECHuB,CDAvB,kCCDgB,CDEhB,eAAA,CAFA,iBCCuB,CDKvB,2BAIE,wBAAA,CAAA,qBAAA,CACA,uBAAA,CAAA,oBAAA,CADA,0BAAA,CAAA,kBAAA,CAKA,0DCZqB,CDMrB,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CAKA,oECVyB,CDQzB,WAAA,CADA,8BAAA,CAAA,sBAAA,CAHA,MAAA,CAKA,eAAA,CANA,iBAAA,CASA,iBAAA,CACA,mBAAA,CAKE,sDACE,oGChBoC,CDuBtC,mDACE,8FCvBiC,CD8BnC,sDACE,qGC9BoC,CDqCtC,sDACE,sGCrCoC,CD4CtC,qDACE,iGC5CmC,CDmDrC,uDACE,4DC1D6B,CDiE/B,sDACE,qLAAA,CAAA,gLAAA,CAAA,6KAAA,CAQA,yBAAA,CAOF,uDACE,6DAAA,CAAA,qDAAA,CAIJ,4CACE,GACE,uBAAA,CAGF,GACE,0BAAA,CAAA,CANJ,oCACE,GACE,uBAAA,CAGF,GACE,0BAAA,CAAA","file":"index.css","sourcesContent":["@import \"./variables\";\r\n\r\n.#{$component-prefix}progress {\r\n position: relative;\r\n height: $progress-height;\r\n overflow: hidden;\r\n background: $progress-background-color;\r\n border-radius: $progress-border-radius;\r\n\r\n &__portion {\r\n position: absolute;\r\n left: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n overflow: hidden;\r\n font-size: $progress-portion-font-size;\r\n color: $progress-portion-color;\r\n text-align: center;\r\n word-break: keep-all;\r\n }\r\n\r\n &--primary {\r\n .#{$component-prefix}progress {\r\n &__portion {\r\n background: $progress-portion-primary-background-color;\r\n }\r\n }\r\n }\r\n\r\n &--info {\r\n .#{$component-prefix}progress {\r\n &__portion {\r\n background: $progress-portion-info-background-color;\r\n }\r\n }\r\n }\r\n\r\n &--success {\r\n .#{$component-prefix}progress {\r\n &__portion {\r\n background: $progress-portion-success-background-color;\r\n }\r\n }\r\n }\r\n\r\n &--warning {\r\n .#{$component-prefix}progress {\r\n &__portion {\r\n background: $progress-portion-warning-background-color;\r\n }\r\n }\r\n }\r\n\r\n &--danger {\r\n .#{$component-prefix}progress {\r\n &__portion {\r\n background: $progress-portion-danger-background-color;\r\n }\r\n }\r\n }\r\n\r\n &--inactive {\r\n .#{$component-prefix}progress {\r\n &__portion {\r\n background: $progress-inactive-background-color;\r\n }\r\n }\r\n }\r\n\r\n &--striped {\r\n .#{$component-prefix}progress {\r\n &__portion {\r\n background-image: linear-gradient(\r\n 45deg,\r\n hsla(0, 0%, 100%, .15) 25%,\r\n transparent 0,\r\n transparent 50%,\r\n hsla(0, 0%, 100%, .15) 0,\r\n hsla(0, 0%, 100%, .15) 75%,\r\n transparent 0, transparent);\r\n background-size: 1rem 1rem;\r\n }\r\n }\r\n }\r\n\r\n &--animated {\r\n .#{$component-prefix}progress {\r\n &__portion {\r\n animation: #{$component-prefix}progress-stripes 1s linear infinite;\r\n }\r\n }\r\n\r\n @keyframes vnmfify-progress-stripes {\r\n 0% {\r\n background-position-x: 0;\r\n }\r\n\r\n 100% {\r\n background-position-x: 24px * $hd;\r\n }\r\n }\r\n }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$progress-height: var(--progress-height, 14px * $hd);\r\n$progress-border-radius: var(--progress-border-radius, $progress-height);\r\n$progress-background-color: var(--progress-background-color, var(--gray-3, $gray-3));\r\n$progress-portion-color: var(--progress-portion-text-color, var(--white, $white));\r\n$progress-portion-font-size: var(--progress-portion-font-size, var(--font-size-xs, $font-size-xs));\r\n$progress-inactive-background-color: var(--progress-inactive-background-color, #cacaca);\r\n\r\n$progress-portion-primary-background-color: var(--progress-portion-primary-background-color, var(--primary-color, $primary-color));\r\n$progress-portion-info-background-color: var(--progress-portion-info-background-color, var(--info-color, $info-color));\r\n$progress-portion-success-background-color: var(--progress-portion-success-background-color, var(--success-color, $success-color));\r\n$progress-portion-warning-background-color: var(--progress-portion-warning-background-color, var(--warning-color, $warning-color));\r\n$progress-portion-danger-background-color: var(--progress-portion-danger-background-color, var(--danger-color, $danger-color));\r\n"]}