mekari-ui-toolkit
Version:
Mekari ui toolkit
1 lines • 39.1 kB
Source Map (JSON)
{"version":3,"sources":["../../../scss/mixins/_text.scss","../../../scss/vendors/_transitions.scss","../../../scss/vendors/mixins/_transition.scss","dist/css/components/mekari-ui-dropdown.css","../../../scss/vendors/_dropdown.scss","../../../scss/vendors/mixins/_caret.scss","../../../scss/vendors/_rfs.scss","../../../scss/vendors/mixins/_border-radius.scss","../../../scss/vendors/mixins/_breakpoints.scss","../../../scss/vendors/mixins/_nav-divider.scss","../../../scss/vendors/mixins/_hover.scss","../../../scss/vendors/mixins/_gradients.scss","../../../scss/components/config/_dropdowns.scss","../../../scss/mixins/_scroll.scss"],"names":[],"mappings":"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","sourcesContent":["%font-size-base {\n font-size: $font-size-base; // 16px\n line-height: 20px;\n letter-spacing: $letter-spacing;\n}\n\n%font-size-sm {\n font-size: $font-size-sm; // 12px\n line-height: 16px;\n letter-spacing: $letter-spacing;\n}\n",".#{$prefix}fade {\n @include transition($transition-fade);\n\n &:not(.#{$prefix}show) {\n opacity: 0;\n }\n}\n\n.#{$prefix}collapse {\n &:not(.#{$prefix}show) {\n display: none;\n }\n}\n\n.#{$prefix}collapsing {\n position: relative;\n height: 0;\n overflow: hidden;\n @include transition($transition-collapse);\n}\n","// stylelint-disable property-blacklist\n@mixin transition($transition...) {\n @if $enable-transitions {\n @if length($transition) == 0 {\n transition: $transition-base;\n } @else {\n transition: $transition;\n }\n }\n\n @if $enable-prefers-reduced-motion-media-query {\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n",".dropdown-item--title {\n font-size: 0.75rem;\n line-height: 16px;\n letter-spacing: 0.2px;\n}\n\n.fade {\n transition: opacity 0.15s linear;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .fade {\n transition: none;\n }\n}\n\n.fade:not(.show) {\n opacity: 0;\n}\n\n.collapse:not(.show) {\n display: none;\n}\n\n.collapsing {\n position: relative;\n height: 0;\n overflow: hidden;\n transition: height 0.35s ease;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .collapsing {\n transition: none;\n }\n}\n\n.dropup,\n.dropright,\n.dropdown,\n.dropleft {\n position: relative;\n}\n\n.dropdown-toggle {\n white-space: nowrap;\n}\n\n.dropdown-toggle::after {\n display: inline-block;\n margin-left: 0.255em;\n vertical-align: 0.255em;\n content: \"\";\n border-top: 0.3em solid;\n border-right: 0.3em solid transparent;\n border-bottom: 0;\n border-left: 0.3em solid transparent;\n}\n\n.dropdown-toggle:empty::after {\n margin-left: 0;\n}\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1000;\n display: none;\n float: left;\n min-width: 10rem;\n padding: 0.5rem 0;\n margin: 0.125rem 0 0;\n font-size: 0.875rem;\n color: #212121;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n}\n\n.dropdown-menu-left {\n right: auto;\n left: 0;\n}\n\n.dropdown-menu-right {\n right: 0;\n left: auto;\n}\n\n@media (min-width: 576px) {\n .dropdown-menu-sm-left {\n right: auto;\n left: 0;\n }\n .dropdown-menu-sm-right {\n right: 0;\n left: auto;\n }\n}\n\n@media (min-width: 768px) {\n .dropdown-menu-md-left {\n right: auto;\n left: 0;\n }\n .dropdown-menu-md-right {\n right: 0;\n left: auto;\n }\n}\n\n@media (min-width: 992px) {\n .dropdown-menu-lg-left {\n right: auto;\n left: 0;\n }\n .dropdown-menu-lg-right {\n right: 0;\n left: auto;\n }\n}\n\n@media (min-width: 1272px) {\n .dropdown-menu-xl-left {\n right: auto;\n left: 0;\n }\n .dropdown-menu-xl-right {\n right: 0;\n left: auto;\n }\n}\n\n.dropup .dropdown-menu {\n top: auto;\n bottom: 100%;\n margin-top: 0;\n margin-bottom: 0.125rem;\n}\n\n.dropup .dropdown-toggle::after {\n display: inline-block;\n margin-left: 0.255em;\n vertical-align: 0.255em;\n content: \"\";\n border-top: 0;\n border-right: 0.3em solid transparent;\n border-bottom: 0.3em solid;\n border-left: 0.3em solid transparent;\n}\n\n.dropup .dropdown-toggle:empty::after {\n margin-left: 0;\n}\n\n.dropright .dropdown-menu {\n top: 0;\n right: auto;\n left: 100%;\n margin-top: 0;\n margin-left: 0.125rem;\n}\n\n.dropright .dropdown-toggle::after {\n display: inline-block;\n margin-left: 0.255em;\n vertical-align: 0.255em;\n content: \"\";\n border-top: 0.3em solid transparent;\n border-right: 0;\n border-bottom: 0.3em solid transparent;\n border-left: 0.3em solid;\n}\n\n.dropright .dropdown-toggle:empty::after {\n margin-left: 0;\n}\n\n.dropright .dropdown-toggle::after {\n vertical-align: 0;\n}\n\n.dropleft .dropdown-menu {\n top: 0;\n right: 100%;\n left: auto;\n margin-top: 0;\n margin-right: 0.125rem;\n}\n\n.dropleft .dropdown-toggle::after {\n display: inline-block;\n margin-left: 0.255em;\n vertical-align: 0.255em;\n content: \"\";\n}\n\n.dropleft .dropdown-toggle::after {\n display: none;\n}\n\n.dropleft .dropdown-toggle::before {\n display: inline-block;\n margin-right: 0.255em;\n vertical-align: 0.255em;\n content: \"\";\n border-top: 0.3em solid transparent;\n border-right: 0.3em solid;\n border-bottom: 0.3em solid transparent;\n}\n\n.dropleft .dropdown-toggle:empty::after {\n margin-left: 0;\n}\n\n.dropleft .dropdown-toggle::before {\n vertical-align: 0;\n}\n\n.dropdown-menu[x-placement^=\"top\"], .dropdown-menu[x-placement^=\"right\"], .dropdown-menu[x-placement^=\"bottom\"], .dropdown-menu[x-placement^=\"left\"] {\n right: auto;\n bottom: auto;\n}\n\n.dropdown-divider {\n height: 0;\n margin: 8px 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef;\n}\n\n.dropdown-item {\n display: block;\n width: 100%;\n padding: 0.25rem 1.5rem;\n clear: both;\n font-weight: 400;\n color: #212529;\n text-align: inherit;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n}\n\n.dropdown-item:hover, .dropdown-item:focus {\n color: #16181b;\n text-decoration: none;\n background-color: #f8f9fa;\n}\n\n.dropdown-item.active, .dropdown-item:active {\n color: #fff;\n text-decoration: none;\n background-color: #005fbf;\n}\n\n.dropdown-item.disabled, .dropdown-item:disabled {\n color: #b4b4b4;\n pointer-events: none;\n background-color: transparent;\n}\n\n.dropdown-menu.show {\n display: block;\n}\n\n.dropdown-header {\n display: block;\n padding: 0.5rem 1.5rem;\n margin-bottom: 0;\n font-size: 0.75rem;\n color: #6c757d;\n white-space: nowrap;\n}\n\n.dropdown-item-text {\n display: block;\n padding: 0.25rem 1.5rem;\n color: #212529;\n}\n\n.dropdown-item--title {\n font-size: 0.75rem;\n line-height: 16px;\n letter-spacing: 0.2px;\n}\n\n.dropdown-toggle::after {\n display: none;\n vertical-align: 2px;\n}\n\n.dropdown-menu {\n width: auto;\n min-width: 80px;\n max-width: 684px;\n padding: 0;\n margin: 4px 0 0;\n overflow-y: hidden;\n background-color: #fff;\n border: 1px solid #e2e2e2;\n box-shadow: 0 2px 4px rgba(119, 119, 119, 0.1), 0 4px 8px rgba(119, 119, 119, 0.2);\n border-radius: 4px;\n}\n\n.dropdown-menu::-webkit-scrollbar {\n width: 12px;\n background-color: transparent;\n}\n\n.dropdown-menu::-webkit-scrollbar-thumb {\n background-color: #777;\n background-clip: padding-box;\n border: 4px solid transparent;\n border-radius: 16px;\n}\n\n.dropdown-menu::-webkit-scrollbar-track {\n background-color: #fff;\n border-radius: 4px;\n}\n\n.dropdown-menu--small {\n width: 80px;\n}\n\n.dropdown-menu--medium {\n width: 184px;\n}\n\n.dropdown-menu--large {\n width: 288px;\n}\n\n.dropdown-menu--max-content {\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n}\n\n.dropdown-menu--fixed-height {\n max-height: 180px;\n}\n\n.dropdown-menu--fixed-height .dropdown-item--container {\n max-height: 180px;\n overflow: auto;\n}\n\n.dropdown-menu--fixed-height .dropdown-item--search + .dropdown-item--container {\n max-height: 126px;\n}\n\n.dropdown-item {\n padding: 8px;\n color: #212121;\n white-space: normal;\n cursor: pointer;\n outline: none;\n}\n\n.dropdown-item--title {\n padding-top: 12px;\n padding-bottom: 4px;\n color: #777;\n text-transform: capitalize;\n border-top: 1px solid #e2e2e2;\n}\n\n.dropdown-item--title:first-child {\n border: none;\n}\n\n.dropdown-item:hover {\n background-color: #f2f4f7;\n}\n\n.dropdown-item:hover:active {\n color: #212121;\n}\n\n.dropdown-item.active:hover {\n background-color: #00468c;\n}\n\n.dropdown-item.active:hover:active {\n color: #f2f4f7;\n}\n\n.dropdown-item.active .ic {\n color: inherit;\n}\n\n.dropdown-item.is-selected {\n background-color: #f2f4f7;\n}\n\n.dropdown-divider {\n margin: 0;\n}\n\n.dropdown-not-found {\n display: block;\n padding: 8px;\n color: #b4b4b4;\n text-align: center;\n}\n\n.dropdown-selected-list {\n margin-top: 4px;\n}\n\n.dropdown-selected-list .badge {\n margin-top: 4px;\n margin-right: 8px;\n}\n\n.dropdown-selected-list .badge:last-child {\n margin-right: 0;\n}\n\n.dropdown-action {\n padding: 8px;\n}\n\n.dropdown-action input {\n width: 100%;\n margin: 0;\n}\n\n.dropdown-action:hover {\n background-color: inherit;\n}\n\n.dropdown-with-action .dropdown-menu {\n max-height: none;\n overflow: hidden;\n}\n\n.dropdown-with-action .dropdown-menu .dropdown-action:hover {\n background-color: inherit;\n}\n\n.dropdown-with-action .dropdown-menu-list {\n height: auto;\n max-height: 126px;\n overflow-y: auto;\n}\n\n.dropdown-with-action .dropdown-menu-list::-webkit-scrollbar {\n width: 12px;\n background-color: transparent;\n}\n\n.dropdown-with-action .dropdown-menu-list::-webkit-scrollbar-thumb {\n background-color: #777;\n background-clip: padding-box;\n border: 4px solid transparent;\n border-radius: 16px;\n}\n\n.dropdown-with-action .dropdown-menu-list::-webkit-scrollbar-track {\n background-color: #fff;\n border-radius: 4px;\n}\n\n.dropdown-with-avatar span {\n vertical-align: middle;\n}\n\n.dropdown-with-pill .dropdown-menu-list .dropdown-item.is-selected {\n color: #b4b4b4;\n pointer-events: none;\n background-color: transparent;\n}\n\n.dropdown--medium {\n width: 184px;\n}\n\n.dropdown--large {\n width: 288px;\n}\n/*# sourceMappingURL=mekari-ui-dropdown.css.map */","// The dropdown wrapper (`<div>`)\n.#{$prefix}dropup,\n.#{$prefix}dropright,\n.#{$prefix}dropdown,\n.#{$prefix}dropleft {\n position: relative;\n}\n\n.#{$prefix}dropdown-toggle {\n white-space: nowrap;\n\n // Generate the caret automatically\n @include caret;\n}\n\n// The dropdown menu\n.#{$prefix}dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: $zindex-dropdown;\n display: none; // none by default, but block on \"open\" of the menu\n float: left;\n min-width: $dropdown-min-width;\n padding: $dropdown-padding-y 0;\n margin: $dropdown-spacer 0 0; // override default ul\n @include font-size($dropdown-font-size);\n color: $dropdown-color;\n text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n list-style: none;\n background-color: $dropdown-bg;\n background-clip: padding-box;\n border: $dropdown-border-width solid $dropdown-border-color;\n @include border-radius($dropdown-border-radius);\n @include box-shadow($dropdown-box-shadow);\n}\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n @include media-breakpoint-up($breakpoint) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n .#{$prefix}dropdown-menu#{$infix}-left {\n right: auto;\n left: 0;\n }\n\n .#{$prefix}dropdown-menu#{$infix}-right {\n right: 0;\n left: auto;\n }\n }\n}\n\n// Allow for dropdowns to go bottom up (aka, dropup-menu)\n// Just add .#{$prefix}dropup after the standard .#{$prefix}dropdown class and you're set.\n.#{$prefix}dropup {\n .#{$prefix}dropdown-menu {\n top: auto;\n bottom: 100%;\n margin-top: 0;\n margin-bottom: $dropdown-spacer;\n }\n\n .#{$prefix}dropdown-toggle {\n @include caret(up);\n }\n}\n\n.#{$prefix}dropright {\n .#{$prefix}dropdown-menu {\n top: 0;\n right: auto;\n left: 100%;\n margin-top: 0;\n margin-left: $dropdown-spacer;\n }\n\n .#{$prefix}dropdown-toggle {\n @include caret(right);\n &::after {\n vertical-align: 0;\n }\n }\n}\n\n.#{$prefix}dropleft {\n .#{$prefix}dropdown-menu {\n top: 0;\n right: 100%;\n left: auto;\n margin-top: 0;\n margin-right: $dropdown-spacer;\n }\n\n .#{$prefix}dropdown-toggle {\n @include caret(left);\n &::before {\n vertical-align: 0;\n }\n }\n}\n\n// When enabled Popper.js, reset basic dropdown position\n// stylelint-disable-next-line no-duplicate-selectors\n.#{$prefix}dropdown-menu {\n &[x-placement^=\"top\"],\n &[x-placement^=\"right\"],\n &[x-placement^=\"bottom\"],\n &[x-placement^=\"left\"] {\n right: auto;\n bottom: auto;\n }\n}\n\n// Dividers (basically an `<hr>`) within the dropdown\n.#{$prefix}dropdown-divider {\n @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y);\n}\n\n// Links, buttons, and more within the dropdown menu\n//\n// `<button>`-specific styles are denoted with `// For <button>s`\n.#{$prefix}dropdown-item {\n display: block;\n width: 100%; // For `<button>`s\n padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n clear: both;\n font-weight: $font-weight-normal;\n color: $dropdown-link-color;\n text-align: inherit; // For `<button>`s\n white-space: nowrap; // prevent links from randomly breaking onto new lines\n background-color: transparent; // For `<button>`s\n border: 0; // For `<button>`s\n\n // Prevent dropdown overflow if there's no padding\n // See https://github.com/twbs/bootstrap/pull/27703\n @if $dropdown-padding-y == 0 {\n &:first-child {\n @include border-top-radius($dropdown-inner-border-radius);\n }\n\n &:last-child {\n @include border-bottom-radius($dropdown-inner-border-radius);\n }\n }\n\n @include hover-focus {\n color: $dropdown-link-hover-color;\n text-decoration: none;\n @include gradient-bg($dropdown-link-hover-bg);\n }\n\n &.active,\n &:active {\n color: $dropdown-link-active-color;\n text-decoration: none;\n @include gradient-bg($dropdown-link-active-bg);\n }\n\n &.disabled,\n &:disabled {\n color: $dropdown-link-disabled-color;\n pointer-events: none;\n background-color: transparent;\n // Remove CSS gradients if they're enabled\n @if $enable-gradients {\n background-image: none;\n }\n }\n}\n\n.#{$prefix}dropdown-menu.#{$prefix}show {\n display: block;\n}\n\n// Dropdown section headers\n.#{$prefix}dropdown-header {\n display: block;\n padding: $dropdown-padding-y $dropdown-item-padding-x;\n margin-bottom: 0; // for use with heading elements\n @include font-size($font-size-sm);\n color: $dropdown-header-color;\n white-space: nowrap; // as with > li > a\n}\n\n// Dropdown text\n.#{$prefix}dropdown-item-text {\n display: block;\n padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n color: $dropdown-link-color;\n}\n","@mixin caret-down {\n border-top: $caret-width solid;\n border-right: $caret-width solid transparent;\n border-bottom: 0;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-up {\n border-top: 0;\n border-right: $caret-width solid transparent;\n border-bottom: $caret-width solid;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-right {\n border-top: $caret-width solid transparent;\n border-right: 0;\n border-bottom: $caret-width solid transparent;\n border-left: $caret-width solid;\n}\n\n@mixin caret-left {\n border-top: $caret-width solid transparent;\n border-right: $caret-width solid;\n border-bottom: $caret-width solid transparent;\n}\n\n@mixin caret($direction: down) {\n @if $enable-caret {\n &::after {\n display: inline-block;\n margin-left: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @if $direction == down {\n @include caret-down;\n } @else if $direction == up {\n @include caret-up;\n } @else if $direction == right {\n @include caret-right;\n }\n }\n\n @if $direction == left {\n &::after {\n display: none;\n }\n\n &::before {\n display: inline-block;\n margin-right: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @include caret-left;\n }\n }\n\n &:empty::after {\n margin-left: 0;\n }\n }\n}\n","// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated font-resizing\n//\n// See https://github.com/twbs/rfs\n\n// Configuration\n\n// Base font size\n$rfs-base-font-size: 1.25rem !default;\n$rfs-font-size-unit: rem !default;\n\n// Breakpoint at where font-size starts decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n// Resize font-size based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != \"number\" or $rfs-factor <= 1 {\n @error \"`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.\";\n}\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-responsive-font-sizes to false\n$enable-responsive-font-sizes: true !default;\n\n// Cache $rfs-base-font-size unit\n$rfs-base-font-size-unit: unit($rfs-base-font-size);\n\n// Remove px-unit from $rfs-base-font-size for calculations\n@if $rfs-base-font-size-unit == \"px\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);\n}\n@else if $rfs-base-font-size-unit == \"rem\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == \"px\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == \"rem\" or $rfs-breakpoint-unit-cache == \"em\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);\n}\n\n// Responsive font-size mixin\n@mixin rfs($fs, $important: false) {\n // Cache $fs unit\n $fs-unit: if(type-of($fs) == \"number\", unit($fs), false);\n\n // Add !important suffix if needed\n $rfs-suffix: if($important, \" !important\", \"\");\n\n // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n @if not $fs-unit or $fs-unit != \"\" and $fs-unit != \"px\" and $fs-unit != \"rem\" or $fs == 0 {\n font-size: #{$fs}#{$rfs-suffix};\n }\n @else {\n // Variables for storing static and fluid rescaling\n $rfs-static: null;\n $rfs-fluid: null;\n\n // Remove px-unit from $fs for calculations\n @if $fs-unit == \"px\" {\n $fs: $fs / ($fs * 0 + 1);\n }\n @else if $fs-unit == \"rem\" {\n $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);\n }\n\n // Set default font-size\n @if $rfs-font-size-unit == rem {\n $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};\n }\n @else if $rfs-font-size-unit == px {\n $rfs-static: #{$fs}px#{$rfs-suffix};\n }\n @else {\n @error \"`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.\";\n }\n\n // Only add media query if font-size is bigger as the minimum font-size\n // If $rfs-factor == 1, no rescaling will take place\n @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {\n $min-width: null;\n $variable-unit: null;\n\n // Calculate minimum font-size for given font-size\n $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;\n\n // Calculate difference between given font-size and minimum font-size for given font-size\n $fs-diff: $fs - $fs-min;\n\n // Base font-size formatting\n // No need to check if the unit is valid, because we did that before\n $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);\n\n // If two-dimensional, use smallest of screen width and height\n $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n // Calculate the variable width between 0 and $rfs-breakpoint\n $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};\n\n // Set the calculated font-size.\n $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};\n }\n\n // Rendering\n @if $rfs-fluid == null {\n // Only render static font-size if no fluid font-size is available\n font-size: $rfs-static;\n }\n @else {\n $mq-value: null;\n\n // RFS breakpoint formatting\n @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {\n $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};\n }\n @else if $rfs-breakpoint-unit == px {\n $mq-value: #{$rfs-breakpoint}px;\n }\n @else {\n @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n }\n\n @if $rfs-class == \"disable\" {\n // Adding an extra class increases specificity,\n // which prevents the media query to override the font size\n &,\n .disable-responsive-font-size &,\n &.disable-responsive-font-size {\n font-size: $rfs-static;\n }\n }\n @else {\n font-size: $rfs-static;\n }\n\n @if $rfs-two-dimensional {\n @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n @else {\n @media (max-width: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n }\n }\n}\n\n// The font-size & responsive-font-size mixin uses RFS to rescale font sizes\n@mixin font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n\n@mixin responsive-font-size($fs, $important: false) {\n @include rfs($fs, $important);\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","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n","// Horizontal dividers\n//\n// Dividers (basically an hr) within dropdowns and nav lists\n\n@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {\n height: 0;\n margin: $margin-y 0;\n overflow: hidden;\n border-top: 1px solid $color;\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","// Gradients\n\n@mixin gradient-bg($color) {\n @if $enable-gradients {\n background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;\n } @else {\n background-color: $color;\n }\n}\n\n// Horizontal gradient, from left to right\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n// Vertical gradient, from top to bottom\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {\n background-image: linear-gradient($deg, $start-color, $end-color);\n background-repeat: repeat-x;\n}\n@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {\n background-image: radial-gradient(circle, $inner-color, $outer-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {\n background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);\n}\n","@import \"../../mixins/text\";\n\n.#{$prefix}dropdown {\n &-toggle {\n &::after {\n display: none;\n vertical-align: 2px;\n }\n }\n\n &-menu {\n width: auto;\n min-width: 80px;\n max-width: 684px;\n padding: 0;\n margin: 4px 0 0;\n overflow-y: hidden;\n background-color: $white;\n border: 1px solid $smoke;\n box-shadow: 0 2px 4px rgba(119, 119, 119, .1), 0 4px 8px rgba(119, 119, 119, .2);\n @include border-radius(4px);\n @include scroll-default;\n &--small {\n width: 80px;\n }\n &--medium {\n width: 184px;\n }\n &--large {\n width: 288px;\n }\n &--max-content {\n width: max-content;\n }\n &--fixed-height {\n max-height: 180px;\n .#{$prefix}dropdown-item--container {\n max-height: 180px;\n overflow: auto;\n }\n .#{$prefix}dropdown-item--search + .#{$prefix}dropdown-item--container {\n max-height: 126px;\n }\n }\n }\n\n &-item {\n padding: 8px;\n color: $dark;\n white-space: normal;\n cursor: pointer;\n outline: none;\n\n &--title {\n @extend %font-size-sm;\n padding-top: 12px;\n padding-bottom: 4px;\n color: $slate;\n text-transform: capitalize;\n border-top: 1px solid $smoke;\n }\n\n &--title:first-child {\n border: none;\n }\n\n &:hover {\n background-color: $cloud;\n &:active {\n color: $dark;\n }\n }\n\n &.active {\n &:hover {\n background-color: darken($primary, 10%);\n &:active {\n color: $cloud;\n }\n }\n .ic {\n color: inherit;\n }\n }\n\n &.is-selected {\n background-color: $cloud;\n }\n }\n\n &-divider {\n margin: 0;\n }\n\n &-not-found {\n display: block;\n padding: 8px;\n color: $muted;\n text-align: center;\n }\n\n &-selected-list {\n margin-top: 4px;\n\n .#{$prefix}badge {\n margin-top: 4px;\n margin-right: 8px;\n &:last-child {\n margin-right: 0;\n }\n }\n }\n\n &-action {\n padding: 8px;\n\n input {\n width: 100%;\n margin: 0;\n }\n\n &:hover {\n background-color: inherit;\n }\n }\n\n &-with-action {\n .#{$prefix}dropdown-menu {\n max-height: none;\n overflow: hidden;\n\n .#{$prefix}dropdown-action {\n &:hover {\n background-color: inherit;\n }\n }\n\n &-list {\n height: auto;\n max-height: 126px;\n overflow-y: auto;\n @include scroll-default;\n }\n }\n }\n\n &-with-avatar {\n span {\n vertical-align: middle;\n }\n }\n\n &-with-pill {\n .#{$prefix}dropdown-menu-list {\n .#{$prefix}dropdown-item {\n &.is-selected {\n color: $muted;\n pointer-events: none;\n background-color: transparent;\n }\n }\n }\n }\n &--medium {\n width: 184px;\n }\n &--large {\n width: 288px;\n }\n}\n","@mixin scroll-default {\n &::-webkit-scrollbar {\n width: 12px;\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: $slate;\n background-clip: padding-box;\n border: 4px solid transparent;\n @include border-radius(16px);\n }\n\n &::-webkit-scrollbar-track {\n background-color: $white;\n @include border-radius(4px);\n }\n}\n"]}