mekari-ui-toolkit
Version:
Mekari ui toolkit
1 lines • 15.6 kB
Source Map (JSON)
{"version":3,"sources":["../../../scss/vendors/_nav.scss","mekari-ui-tabs.css","../../../scss/vendor-extensions/_navs.scss","../../../scss/vendors/mixins/_hover.scss","../../../scss/vendor-extensions/_color.scss","../../../scss/vendors/mixins/_border-radius.scss","../../../scss/components/config/_tabs.scss"],"names":[],"mappings":"AAKA;EACE,aAAa;EACb,eAAe;EACf,eAAe;EACf,gBAAgB;EAChB,gBAAgB;ACJlB;;ADOA;EACE,cAAc;EACd,iBELuB;ADCzB;;AEKE;EHEE,qBAAqB;ACHzB;;ADFA;EAUI,cIpBW;EJqBX,oBAAoB;EACpB,eAAe;ACJnB;;ADYA;EACE,gCI9Ba;AHqBf;;ADQA;EAII,mBEnCmC;AD2BvC;;ADIA;EAQI,6BAAgD;EK3BhD,yBHXiC;EGYjC,0BHZiC;ADgCrC;;AEnBE;EH6BI,yBEzCyC;ADmC/C;;ADNA;EAgBM,cI9CS;EJ+CT,6BAA6B;EAC7B,yBAAyB;ACN/B;;ADZA;;EAwBI,cIxDW;EJyDX,6BEpD2C;EFqD3C,yBEpD2C;AD6C/C;;ADnBA;EA+BI,gBE9DmC;EGYnC,yBLoD4B;EKnD5B,0BLmD4B;ACRhC;;ADiBA;EKtEI,kBHUyB;AD+C7B;;ADaA;;EAOI,WI5EQ;EJ6ER,yBIpEmB;AHqDvB;;ADwBA;EAEI,cAAc;EACd,kBAAkB;ACtBtB;;AD0BA;EAEI,aAAa;EACb,YAAY;EACZ,kBAAkB;ACxBtB;;ADiCA;EAEI,aAAa;AC/BjB;;AD6BA;EAKI,cAAc;AC9BlB;;AKvFA;EACE,mBAAmB;AL0FrB;;AK3FA;EAKM,aAAa;AL0FnB;;AK/FA;EASM,kBAAkB;EAClB,iBAAiB;EACjB,WFTM;EEUN,YAAY;EDPd,kBCQ4B;AL0FhC;;AKvGA;EAgBQ,cFfO;AH0Gf;;AK3GA;EAoBQ,gBAAgB;AL2FxB;;AK/GA;EAsBU,kBAAkB;EAClB,YAAY;EACZ,OAAO;EACP,WAAW;EACX,WAAW;EACX,WAAW;EACX,yBF3BK;EE4BL,0BAA0B;AL6FpC;;AK1HA;EAqCc,yBAAkB;ALyFhC;;AK9HA;EAqCc,yBAAkB;AL6FhC;;AKlIA;EAqCc,yBAAkB;ALiGhC;;AKtIA;EAqCc,yBAAkB;ALqGhC;;AK1IA;EAqCc,yBAAkB;ALyGhC;;AK9IA;EAqCc,yBAAkB;AL6GhC;;AKlJA;EAqCc,yBAAkB;ALiHhC;;AKtJA;EAqCc,yBAAkB;ALqHhC;;AK1JA;EAqCc,yBAAkB;ALyHhC;;AK9JA;EAqCc,yBAAkB;AL6HhC;;AKlKA;EAqCc,sBAAkB;ALiIhC;;AKtKA;EAqCc,yBAAkB;ALqIhC;;AK1KA;EAqCc,yBAAkB;ALyIhC;;AK9KA;EAqCc,yBAAkB;AL6IhC;;AKlLA;EAqCc,yBAAkB;ALiJhC;;AKtLA;EAqCc,yBAAkB;ALqJhC;;AK1LA;EAqCc,sBAAkB;ALyJhC;;AK9LA;EA4CQ,cFzCO;EE0CP,oBAAoB;EACpB,mBAAmB;ALsJ3B;;AKpMA;EAoDI,gBAAgB;ED/ChB,kBCgD0B;ALoJ9B;;AKzMA;EAyDQ,cAAc;EACd,yBAAyB;ALoJjC","file":"mekari-ui-tabs.css","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",".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\n/*# sourceMappingURL=mekari-ui-tabs.css.map */","// Tabs\n$nav-tabs-border-color: $smoke;\n$nav-tabs-border-width: 1px;\n$nav-tabs-border-radius: 0;\n$nav-tabs-link-hover-border-color: transparent;\n$nav-tabs-link-active-color: $dark;\n$nav-tabs-link-active-bg: transparent;\n$nav-tabs-link-active-border-color: transparent;\n\n$nav-link-padding-y: 8px;\n$nav-link-padding-x: 16px;\n$nav-link-height: calc($font-size-base * $line-height-base) + $nav-link-padding-y * 2;\n$navbar-brand-height: $font-size-lg * $line-height-base;\n$navbar-brand-padding-y: calc($nav-link-height - $navbar-brand-height) / 2;\n$nav-link-disabled-color: $text-muted;\n$nav-pills-border-radius: 4px;\n\n$nav-pills-link-active-color: $white;\n$nav-pills-link-active-bg: $primary;\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","// Neutrals color variables\n$dark: #212121;\n$slate: #777;\n$muted: #b4b4b4;\n$smoke: #e2e2e2;\n$snow: #fbfbfb;\n$white: #fff;\n$cloud: #f2f4f7;\n\n// UI color variables\n$red: #d74022;\n$green: #009f61;\n$light-yellow: #ffeb99;\n$blue: #1357ff;\n$orange: #ffb700;\n$sapphire: #005fbf;\n\n// Branding color variables\n$crimson: #c02a34;\n$azure: #009bde;\n$salamander: #f96d01;\n$purple: #6d48e5;\n\n// Bootstrap dependencies color\n$black: #000 !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold: 150 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark: $gray-900 !default;\n$yiq-text-light: $white !default;\n\n\n$grays: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$grays: map-merge(\n (\n \"100\": $gray-100,\n \"200\": $gray-200,\n \"300\": $gray-300,\n \"400\": $gray-400,\n \"500\": $gray-500,\n \"600\": $gray-600,\n \"700\": $gray-700,\n \"800\": $gray-800,\n \"900\": $gray-900\n ),\n $grays\n);\n\n// register mekari color variables too bootstrap\n$colors: ();\n$colors: map-merge(\n (\n \"noir\" : $dark, // going to deprecated\n \"dark\" : $dark,\n \"slate\" : $slate,\n \"muted\" : $muted,\n \"smoke\" : $smoke,\n \"snow\" : $snow,\n \"cloud\" : $cloud,\n \"crimson\" : $crimson,\n \"azure\" : $azure,\n \"salamander\" : $salamander,\n \"purple\" : $purple,\n \"sapphire\" : $sapphire,\n \"white\" : $white,\n \"red\" : $red,\n \"orange\" : $orange,\n \"green\" : $green,\n \"blue\" : $blue,\n \"light-yellow\" : $light-yellow\n ),\n $colors\n);\n\n//extend bootstrap class\n$danger: $red;\n$success: $green;\n$info: $light-yellow;\n$warning: $orange;\n$primary: $sapphire;\n$jurnal: $azure;\n$talenta: $crimson;\n$klikpajak: $salamander;\n$mekari: $purple;\n\n$link: $blue;\n\n$text-muted: $muted;\n$body-color: $dark;\n$dark: $dark;\n$secondary: $slate;\n$light: $snow;\n\n// Add more theme color variables\n$theme-colors: ();\n$theme-colors: map-merge(\n (\n \"danger\" : $danger,\n \"success\" : $success,\n \"info\" : $info,\n \"warning\" : $warning,\n \"primary\" : $primary,\n \"jurnal\" : $jurnal,\n \"talenta\" : $talenta,\n \"klikpajak\" : $klikpajak,\n \"mekari\" : $mekari,\n \"dark\" : $dark,\n \"slate\" : $slate,\n \"muted\" : $muted,\n \"smoke\" : $smoke,\n \"light\" : $light,\n \"cloud\" : $cloud,\n \"link\" : $blue,\n \"white\" : $white\n ),\n $theme-colors\n);\n\n$card-border-color: $smoke;\n$body-bg: $white;\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",".#{$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"]}