mekari-ui-toolkit
Version:
Mekari ui toolkit
1 lines • 8.1 kB
Source Map (JSON)
{"version":3,"sources":["../../../scss/vendors/_breadcrumb.scss","../../../scss/vendor-extensions/_breadcrumb.scss","../../../scss/vendors/mixins/_border-radius.scss","mekari-ui-breadcrumb.css","../../../scss/vendor-extensions/_color.scss","../../../scss/components/config/_breadcrumb.scss"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,eAAe;EACf,YCA2B;EDC3B,gBCH2B;EDI3B,gBAAgB;EAChB,6BCNqC;ECKnC,kBDC2B;AEE/B;;AHEA;EAGI,iBCR2B;AEO/B;;AHFA;EAMM,qBAAqB;EACrB,kBCZyB;EDazB,WIhBM;EJiBN,YCZwB;AEY9B;;AHTA;EAoBI,0BAA0B;AGP9B;;AHbA;EAwBI,qBAAqB;AGPzB;;AHjBA;EA4BI,cIrCW;AD8Bf;;AE/BA;EAGM,WDDM;ADiCZ;;AE3BA;EAEI,cDTW;ECUX,0BAA0B;AF6B9B","file":"mekari-ui-breadcrumb.css","sourcesContent":[".#{$prefix}breadcrumb {\n display: flex;\n flex-wrap: wrap;\n padding: $breadcrumb-padding-y $breadcrumb-padding-x;\n margin-bottom: $breadcrumb-margin-bottom;\n list-style: none;\n background-color: $breadcrumb-bg;\n @include border-radius($breadcrumb-border-radius);\n}\n\n.#{$prefix}breadcrumb-item {\n // The separator between breadcrumbs (by default, a forward-slash: \"/\")\n + .#{$prefix}breadcrumb-item {\n padding-left: $breadcrumb-item-padding;\n\n &::before {\n display: inline-block; // Suppress underlining of the separator in modern browsers\n padding-right: $breadcrumb-item-padding;\n color: $breadcrumb-divider-color;\n content: $breadcrumb-divider;\n }\n }\n\n // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built\n // without `<ul>`s. The `::before` pseudo-element generates an element\n // *within* the .#{$prefix}breadcrumb-item and thereby inherits the `text-decoration`.\n //\n // To trick IE into suppressing the underline, we give the pseudo-element an\n // underline and then immediately remove it.\n + .#{$prefix}breadcrumb-item:hover::before {\n text-decoration: underline;\n }\n // stylelint-disable-next-line no-duplicate-selectors\n + .#{$prefix}breadcrumb-item:hover::before {\n text-decoration: none;\n }\n\n &.active {\n color: $breadcrumb-active-color;\n }\n}\n","$breadcrumb-bg: transparent;\n$breadcrumb-margin-bottom: 0;\n$breadcrumb-padding-y: 0;\n$breadcrumb-padding-x: 0;\n$breadcrumb-divider-color: $slate;\n$breadcrumb-item-padding: 4px;\n$breadcrumb-border-radius: 4px;\n$breadcrumb-divider: quote(\"/\");\n$breadcrumb-divider-color: $slate;\n$breadcrumb-active-color: $dark;\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",".breadcrumb {\n display: flex;\n flex-wrap: wrap;\n padding: 0 0;\n margin-bottom: 0;\n list-style: none;\n background-color: transparent;\n border-radius: 4px;\n}\n\n.breadcrumb-item + .breadcrumb-item {\n padding-left: 4px;\n}\n\n.breadcrumb-item + .breadcrumb-item::before {\n display: inline-block;\n padding-right: 4px;\n color: #777;\n content: \"/\";\n}\n\n.breadcrumb-item + .breadcrumb-item:hover::before {\n text-decoration: underline;\n}\n\n.breadcrumb-item + .breadcrumb-item:hover::before {\n text-decoration: none;\n}\n\n.breadcrumb-item.active {\n color: #212121;\n}\n\n.breadcrumb li a {\n color: #777;\n}\n\n.breadcrumb-item.active a {\n color: #212121;\n text-decoration: underline;\n}\n\n/*# sourceMappingURL=mekari-ui-breadcrumb.css.map */","// 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",".#{$prefix}breadcrumb {\n li {\n a {\n color: $slate;\n }\n }\n}\n\n.#{$prefix}breadcrumb-item.active {\n a {\n color: $breadcrumb-active-color;\n text-decoration: underline;\n }\n}\n"]}