mekari-ui-toolkit
Version:
Mekari ui toolkit
1 lines • 11.1 kB
Source Map (JSON)
{"version":3,"sources":["../../../scss/vendors/_nav.scss","../../../scss/vendors/mixins/_hover.scss","../../../scss/vendors/mixins/_border-radius.scss","dist/css/components/mekari-ui-tabs.css","../../../scss/components/config/_tabs.scss"],"names":[],"mappings":"AAKA,KACE,QAAA,KACA,UAAA,KACA,aAAA,EACA,cAAA,EACA,WAAA,KAGF,UACE,QAAA,MACA,QAAA,IAAA,KCCA,gBAAA,gBDEE,gBAAA,KALJ,mBAUI,MAAA,QACA,eAAA,KACA,OAAA,QAQJ,UACE,cAAA,IAAA,MAAA,QADF,oBAII,cAAA,KAJJ,oBAQI,OAAA,IAAA,MAAA,YE3BA,uBAAA,EACA,wBAAA,EDCF,0BAAA,0BD6BI,aAAA,YAZN,6BAgBM,MAAA,QACA,iBAAA,YACA,aAAA,YGHN,mCHfA,2BAwBI,MAAA,QACA,iBAAA,YACA,aAAA,YA1BJ,yBA+BI,WAAA,KElDA,uBAAA,EACA,wBAAA,EF4DJ,qBEtEI,cAAA,IFsEJ,4BGVA,2BHiBI,MAAA,KACA,iBAAA,QASJ,oBAEI,KAAA,EAAA,EAAA,KACA,WAAA,OAIJ,yBAEI,WAAA,EACA,UAAA,EACA,WAAA,OASJ,uBAEI,QAAA,KAFJ,qBAKI,QAAA,MIrHJ,UACE,cAAA,KADF,oBAKM,OAAA,IAAA,EALN,oBASM,SAAA,SACA,QAAA,IAAA,KACA,MAAA,KACA,OAAA,KFPF,cAAA,IELJ,0BAgBQ,MAAA,QAhBR,2BAoBQ,YAAA,IApBR,kCAsBU,SAAA,SACA,OAAA,KACA,KAAA,EACA,MAAA,KACA,OAAA,IACA,QAAA,GACA,iBAAA,QACA,cAAA,IAAA,IAAA,EAAA,EA7BV,+CAqCc,iBAAA,QArCd,gDAqCc,iBAAA,QArCd,6CAqCc,iBAAA,QArCd,gDAqCc,iBAAA,QArCd,gDAqCc,iBAAA,QArCd,+CAqCc,iBAAA,QArCd,gDAqCc,iBAAA,QArCd,kDAqCc,iBAAA,QArCd,+CAqCc,iBAAA,QArCd,6CAqCc,iBAAA,QArCd,8CAqCc,iBAAA,KArCd,8CAqCc,iBAAA,QArCd,8CAqCc,iBAAA,QArCd,8CAqCc,iBAAA,QArCd,8CAqCc,iBAAA,QArCd,6CAqCc,iBAAA,QArCd,8CAqCc,iBAAA,KArCd,6BA4CQ,MAAA,QACA,eAAA,KACA,OAAA,YA9CR,yBAoDI,WAAA,KF/CA,cAAA,IELJ,+CAyDQ,MAAA,QACA,iBAAA","sourcesContent":["// Base class\n//\n// Kickstart any navigation component with a set of style resets. Works with\n// `<nav>`s or `<ul>`s.\n\n.#{$prefix}nav {\n display: flex;\n flex-wrap: wrap;\n padding-left: 0;\n margin-bottom: 0;\n list-style: none;\n}\n\n.#{$prefix}nav-link {\n display: block;\n padding: $nav-link-padding-y $nav-link-padding-x;\n\n @include hover-focus {\n text-decoration: none;\n }\n\n // Disabled state lightens text\n &.disabled {\n color: $nav-link-disabled-color;\n pointer-events: none;\n cursor: default;\n }\n}\n\n//\n// Tabs\n//\n\n.#{$prefix}nav-tabs {\n border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;\n\n .#{$prefix}nav-item {\n margin-bottom: -$nav-tabs-border-width;\n }\n\n .#{$prefix}nav-link {\n border: $nav-tabs-border-width solid transparent;\n @include border-top-radius($nav-tabs-border-radius);\n\n @include hover-focus {\n border-color: $nav-tabs-link-hover-border-color;\n }\n\n &.disabled {\n color: $nav-link-disabled-color;\n background-color: transparent;\n border-color: transparent;\n }\n }\n\n .#{$prefix}nav-link.active,\n .#{$prefix}nav-item.#{$prefix}show .#{$prefix}nav-link {\n color: $nav-tabs-link-active-color;\n background-color: $nav-tabs-link-active-bg;\n border-color: $nav-tabs-link-active-border-color;\n }\n\n .#{$prefix}dropdown-menu {\n // Make dropdown border overlap tab border\n margin-top: -$nav-tabs-border-width;\n // Remove the top rounded corners here since there is a hard edge above the menu\n @include border-top-radius(0);\n }\n}\n\n\n//\n// Pills\n//\n\n.#{$prefix}nav-pills {\n .#{$prefix}nav-link {\n @include border-radius($nav-pills-border-radius);\n }\n\n .#{$prefix}nav-link.active,\n .#{$prefix}show > .#{$prefix}nav-link {\n color: $nav-pills-link-active-color;\n background-color: $nav-pills-link-active-bg;\n }\n}\n\n\n//\n// Justified variants\n//\n\n.#{$prefix}nav-fill {\n .#{$prefix}nav-item {\n flex: 1 1 auto;\n text-align: center;\n }\n}\n\n.#{$prefix}nav-justified {\n .#{$prefix}nav-item {\n flex-basis: 0;\n flex-grow: 1;\n text-align: center;\n }\n}\n\n\n// Tabbable tabs\n//\n// Hide tabbable panes to start, show them when `.active`\n\n.#{$prefix}tab-content {\n > .#{$prefix}tab-pane {\n display: none;\n }\n > .active {\n display: block;\n }\n}\n","// Hover mixin and `$enable-hover-media-query` are deprecated.\n//\n// Originally added during our alphas and maintained during betas, this mixin was\n// designed to prevent `:hover` stickiness on iOS-an issue where hover styles\n// would persist after initial touch.\n//\n// For backward compatibility, we've kept these mixins and updated them to\n// always return their regular pseudo-classes instead of a shimmed media query.\n//\n// Issue: https://github.com/twbs/bootstrap/issues/25195\n\n@mixin hover {\n &:hover { @content; }\n}\n\n@mixin hover-focus {\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin plain-hover-focus {\n &,\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin hover-focus-active {\n &:hover,\n &:focus,\n &:active {\n @content;\n }\n}\n","// stylelint-disable property-blacklist\n// Single side border-radius\n\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n @if $enable-rounded {\n border-radius: $radius;\n }\n @else if $fallback-border-radius != false {\n border-radius: $fallback-border-radius;\n }\n}\n\n@mixin border-top-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: $radius;\n border-top-right-radius: $radius;\n }\n}\n\n@mixin border-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: $radius;\n border-bottom-right-radius: $radius;\n }\n}\n\n@mixin border-bottom-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: $radius;\n border-bottom-left-radius: $radius;\n }\n}\n\n@mixin border-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: $radius;\n border-bottom-left-radius: $radius;\n }\n}\n\n@mixin border-top-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: $radius;\n }\n}\n\n@mixin border-top-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: $radius;\n }\n}\n\n@mixin border-bottom-right-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: $radius;\n }\n}\n\n@mixin border-bottom-left-radius($radius) {\n @if $enable-rounded {\n border-bottom-left-radius: $radius;\n }\n}\n",".nav {\n display: flex;\n flex-wrap: wrap;\n padding-left: 0;\n margin-bottom: 0;\n list-style: none;\n}\n\n.nav-link {\n display: block;\n padding: 8px 16px;\n}\n\n.nav-link:hover, .nav-link:focus {\n text-decoration: none;\n}\n\n.nav-link.disabled {\n color: #b4b4b4;\n pointer-events: none;\n cursor: default;\n}\n\n.nav-tabs {\n border-bottom: 1px solid #e2e2e2;\n}\n\n.nav-tabs .nav-item {\n margin-bottom: -1px;\n}\n\n.nav-tabs .nav-link {\n border: 1px solid transparent;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {\n border-color: transparent;\n}\n\n.nav-tabs .nav-link.disabled {\n color: #b4b4b4;\n background-color: transparent;\n border-color: transparent;\n}\n\n.nav-tabs .nav-link.active,\n.nav-tabs .nav-item.show .nav-link {\n color: #212121;\n background-color: transparent;\n border-color: transparent;\n}\n\n.nav-tabs .dropdown-menu {\n margin-top: -1px;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.nav-pills .nav-link {\n border-radius: 4px;\n}\n\n.nav-pills .nav-link.active,\n.nav-pills .show > .nav-link {\n color: #fff;\n background-color: #005fbf;\n}\n\n.nav-fill .nav-item {\n flex: 1 1 auto;\n text-align: center;\n}\n\n.nav-justified .nav-item {\n flex-basis: 0;\n flex-grow: 1;\n text-align: center;\n}\n\n.tab-content > .tab-pane {\n display: none;\n}\n\n.tab-content > .active {\n display: block;\n}\n\n.nav-tabs {\n margin-bottom: 24px;\n}\n\n.nav-tabs .nav-item {\n margin: 8px 0;\n}\n\n.nav-tabs .nav-link {\n position: relative;\n padding: 8px 16px;\n color: #777;\n border: none;\n border-radius: 4px;\n}\n\n.nav-tabs .nav-link:hover {\n color: #212121;\n}\n\n.nav-tabs .nav-link.active {\n font-weight: 500;\n}\n\n.nav-tabs .nav-link.active::after {\n position: absolute;\n bottom: -9px;\n left: 0;\n width: 100%;\n height: 4px;\n content: \"\";\n background-color: #212121;\n border-radius: 2px 2px 0 0;\n}\n\n.nav-tabs .nav-link.active.theme-danger::after {\n background-color: #d74022;\n}\n\n.nav-tabs .nav-link.active.theme-success::after {\n background-color: #009f61;\n}\n\n.nav-tabs .nav-link.active.theme-info::after {\n background-color: #ffeb99;\n}\n\n.nav-tabs .nav-link.active.theme-warning::after {\n background-color: #ffb700;\n}\n\n.nav-tabs .nav-link.active.theme-primary::after {\n background-color: #005fbf;\n}\n\n.nav-tabs .nav-link.active.theme-jurnal::after {\n background-color: #009bde;\n}\n\n.nav-tabs .nav-link.active.theme-talenta::after {\n background-color: #c02a34;\n}\n\n.nav-tabs .nav-link.active.theme-klikpajak::after {\n background-color: #f96d01;\n}\n\n.nav-tabs .nav-link.active.theme-mekari::after {\n background-color: #6d48e5;\n}\n\n.nav-tabs .nav-link.active.theme-dark::after {\n background-color: #212121;\n}\n\n.nav-tabs .nav-link.active.theme-slate::after {\n background-color: #777;\n}\n\n.nav-tabs .nav-link.active.theme-muted::after {\n background-color: #b4b4b4;\n}\n\n.nav-tabs .nav-link.active.theme-smoke::after {\n background-color: #e2e2e2;\n}\n\n.nav-tabs .nav-link.active.theme-light::after {\n background-color: #fbfbfb;\n}\n\n.nav-tabs .nav-link.active.theme-cloud::after {\n background-color: #f2f4f7;\n}\n\n.nav-tabs .nav-link.active.theme-link::after {\n background-color: #1357ff;\n}\n\n.nav-tabs .nav-link.active.theme-white::after {\n background-color: #fff;\n}\n\n.nav-tabs .nav-link.disabled {\n color: #b4b4b4;\n pointer-events: auto;\n cursor: not-allowed;\n}\n\n.nav-tabs .dropdown-menu {\n margin-top: 11px;\n border-radius: 4px;\n}\n\n.nav-tabs .dropdown-menu .dropdown-item.active {\n color: inherit;\n background-color: inherit;\n}\n/*# sourceMappingURL=mekari-ui-tabs.css.map */",".#{$prefix}nav-tabs {\n margin-bottom: 24px;\n\n .#{$prefix}nav {\n &-item {\n margin: 8px 0;\n }\n\n &-link {\n position: relative;\n padding: 8px 16px;\n color: $slate;\n border: none;\n @include border-radius(4px);\n\n &:hover {\n color: $dark;\n }\n\n &.active {\n font-weight: 500;\n &::after {\n position: absolute;\n bottom: -9px;\n left: 0;\n width: 100%;\n height: 4px;\n content: \"\";\n background-color: $dark;\n border-radius: 2px 2px 0 0; // stylelint-disable-line property-blacklist\n }\n }\n\n @each $color, $hex in $theme-colors {\n &.active {\n &.theme-#{$color} {\n &::after {\n background-color: #{$hex};\n }\n }\n }\n }\n\n &.disabled {\n color: $muted;\n pointer-events: auto;\n cursor: not-allowed;\n }\n }\n }\n\n .#{$prefix}dropdown-menu {\n margin-top: 11px;\n @include border-radius(4px);\n\n .#{$prefix}dropdown-item {\n &.active {\n color: inherit;\n background-color: inherit;\n }\n }\n }\n}\n"]}