UNPKG

@vnmfify/core

Version:

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

1 lines 6.88 kB
{"version":3,"sources":["tabs/tab.scss","tabs/_variables.scss","tabs/tabs.scss","tabs/tabs-header.scss","tabs/tabs-line.scss"],"names":[],"mappings":"AAEA,mBAIE,kBAAA,CACA,wBAAA,CAAA,qBAAA,CACA,uBAAA,CAAA,oBAAA,CADA,0BAAA,CAAA,kBAAA,CAHA,6BAAA,CAAA,qBAAA,CASA,4CCKU,CDJV,cAAA,CATA,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,cAAA,CAAA,UAAA,CAAA,MAAA,CAKA,uDCSc,CDZd,8BAAA,CAAA,sBAAA,CAIA,6DCSgB,CDZhB,WAAA,CACA,oDCSY,CDhBZ,iBAWA,CAEA,2BAEE,qECIe,CDLf,qECKe,CDDjB,6BACE,qDCEiB,CDDjB,kBAAA,CAGF,4BAEE,wBAAA,CAAA,qBAAA,CACA,uBAAA,CAAA,oBAAA,CADA,0BAAA,CAAA,kBAAA,CADA,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CAEA,8BAAA,CAAA,sBAAA,CE3BJ,cACE,iBAAA,CAEA,qBAEE,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CAEA,WAAA,CAHA,iBAAA,CAEA,UAAA,CAEA,gBAAA,CAKA,iCACE,eAAA,CAIA,sGAGE,mBAAA,CADA,6BAAA,CAAA,qBAAA,CACA,qBAAA,CAAA,aAAA,CACA,UAAA,CAGF,iEACE,QAAA,CACA,gBAAA,CCxBJ,wCACE,mCFDa,CEMnB,oBACE,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,eAAA,CAEA,8BACE,cAAA,CAGF,oCAEE,QAAA,CADA,QACA,CAKA,kCAIE,eAAA,CAHA,8BAAA,CAAA,sBAAA,CAEA,WAAA,CADA,UAEA,CAGF,kCAKE,qKAAA,CACA,wEF7BoB,CEwBpB,6BAAA,CAAA,qBAAA,CAEA,mCF9Ba,CE+Bb,uDF9Ba,CE4Bb,UFzBoB,CEgCtB,+CACE,YAAA,CAKF,mDACE,kBAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,aAAA,CACA,gCAAA,CAKN,mBAIE,6DFhD0B,CE8C1B,mBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,YAAA,CADA,iBAAA,CAEA,wBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,gBF/C0B,CEkD1B,yBAGE,mBAAA,CAGF,kDALE,8BAAA,CAAA,sBAAA,CACA,WAMA,CAEA,4CAEE,+GAAA,CADA,qEACA,CAEA,uDACE,cAAA,CAGF,oDAEE,0EF7EY,CE4EZ,uBF5EY,CEgFd,sDACE,qDF7Da,CGtBrB,oBAME,4GHO2B,CGN3B,wEHKwB,CGVxB,QAAA,CAGA,kCHMiB,CGVjB,iBAAA,CAOA,0BAAA,CAAA,sBAAA,CAAA,kBAAA,CAJA,iCHMgB,CGPhB,SAKA,CAEA,4BACE,0BAAA,CAAA,sBAAA,CAAA,kBAAA","file":"index.css","sourcesContent":["@import \"./variables\";\r\n\r\n.#{$component-prefix}tabs__tab {\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex: 1;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 0;\r\n padding: $tab-padding;\r\n font-size: $tab-font-size;\r\n line-height: $tab-line-height;\r\n color: $tab-color;\r\n cursor: pointer;\r\n\r\n &--active {\r\n font-weight: $tab-active-font-weight;\r\n color: $tab-active-color;\r\n }\r\n\r\n &--disabled {\r\n color: $tab-disabled-color;\r\n cursor: not-allowed;\r\n }\r\n\r\n &__content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n// Tabs styles\r\n$tabs-active-color: var(--tabs-active-color, var(--danger-color, $danger-color));\r\n$tabs-wrap-height: var(--tabs-wrap-height, 44px * $hd);\r\n$tabs-card-height: var(--tabs-card-height, 30px * $hd);\r\n$tabs-card-margin: var(--tabs-card-margin, 0 var(--padding-md, $padding-md));\r\n$tabs-card-border-width: var(--tabs-card-border-width, var(--border-width-base, $border-width-base));\r\n$tabs-card-border-color: var(--tabs-card-border-color, $tabs-active-color);\r\n$tabs-card-border-radius: var(--tabs-card-border-radius, var(--border-radius-sm, $border-radius-sm));\r\n$tabs-nav-background-color: var(--tabs-nav-background-color, var(--white, $white));\r\n$tabs-line-width: var(--tabs-line-width, 40px * $hd);\r\n$tabs-line-height: var(--tabs-line-height, 3px * $hd);\r\n$tabs-line-border-radius: var(--tabs-line-border-radius, $tabs-line-height);\r\n$tabs-line-background-color: var(--tabs-line-background-color, $tabs-active-color);\r\n\r\n// Tab styles\r\n$tab-color: var(--tab-color, var(--gray-7, $gray-7));\r\n$tab-padding: var(--tab-padding, 0 var(--padding-base, $padding-base));\r\n$tab-font-size: var(--tab-font-size, var(--font-size-md, $font-size-md));\r\n$tab-line-height: var(--tab-line-height, var(--line-height-md, $line-height-md));\r\n$tab-active-color: var(--tab-active-color, var(--text-color, $text-color));\r\n$tab-active-font-weight: var(--tab-active-font-weight, var(--font-weight-bold, $font-weight-bold));\r\n$tab-disabled-color: var(--tab-disabled-color, var(--gray-5, $gray-5));\r\n","@import \"./variables\";\r\n\r\n.#{$component-prefix}tabs {\r\n position: relative;\r\n\r\n &__track {\r\n position: relative;\r\n display: flex;\r\n width: 100%;\r\n height: 100%;\r\n will-change: left;\r\n }\r\n\r\n &__content {\r\n\r\n &--animated {\r\n overflow: hidden;\r\n }\r\n\r\n .#{$component-prefix}tabs__tab-pane {\r\n &,\r\n &-wrapper {\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n width: 100%;\r\n }\r\n\r\n &-wrapper--inactive {\r\n height: 0;\r\n overflow: visible;\r\n }\r\n }\r\n }\r\n}\r\n","@import \"./variables\";\r\n\r\n.#{$component-prefix}tabs {\r\n\r\n &--line {\r\n .#{$component-prefix}tabs__wrap {\r\n height: $tabs-wrap-height;\r\n }\r\n }\r\n}\r\n\r\n.#{$component-prefix}tabs__wrap {\r\n display: flex;\r\n overflow: hidden;\r\n\r\n &--page-top {\r\n position: fixed;\r\n }\r\n\r\n &--content-bottom {\r\n top: auto;\r\n bottom: 0;\r\n }\r\n\r\n &__scroll {\r\n\r\n &--line {\r\n box-sizing: content-box;\r\n width: 100%;\r\n height: 100%;\r\n background: #fff;\r\n }\r\n\r\n &--card {\r\n box-sizing: border-box;\r\n width: 100%;\r\n height: $tabs-card-height;\r\n margin: $tabs-card-margin;\r\n border: $tabs-card-border-width solid $tabs-card-border-color;\r\n border-radius: $tabs-card-border-radius;\r\n }\r\n\r\n &::-webkit-scrollbar {\r\n display: none;\r\n }\r\n }\r\n\r\n &--scrollable {\r\n .#{$component-prefix}tabs__tab {\r\n flex: 1 0 auto;\r\n padding: 0 var(--padding-sm, $padding-sm);\r\n }\r\n }\r\n}\r\n\r\n.#{$component-prefix}tabs__nav {\r\n position: relative;\r\n display: flex;\r\n user-select: none;\r\n background: $tabs-nav-background-color;\r\n\r\n &--line {\r\n box-sizing: content-box;\r\n height: 100%;\r\n padding-bottom: 15px * $hd; /* 15px padding to hide scrollbar in mobile safari */\r\n }\r\n\r\n &--card {\r\n box-sizing: content-box;\r\n height: 100%;\r\n\r\n .#{$component-prefix}tabs__tab {\r\n color: $tabs-active-color;\r\n border-right: var(--border-width-base, $border-width-base) solid $tabs-active-color;\r\n\r\n &:last-child {\r\n border-right: 0 none;\r\n }\r\n\r\n &--active {\r\n color: var(--white, $white);\r\n background: $tabs-active-color;\r\n }\r\n\r\n &--disabled {\r\n color: $tab-disabled-color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n","@import \"./variables\";\r\n\r\n.#{$component-prefix}tabs__line {\r\n position: absolute;\r\n bottom: 0;\r\n z-index: 1;\r\n width: $tabs-line-width;\r\n height: $tabs-line-height;\r\n background: $tabs-line-background-color;\r\n border-radius: $tabs-line-border-radius;\r\n transform: scale(0);\r\n\r\n &--active {\r\n transform: scale(1);\r\n }\r\n}\r\n"]}