mekari-ui-toolkit
Version:
Mekari ui toolkit
1 lines • 21.7 kB
Source Map (JSON)
{"version":3,"sources":["../../../scss/vendors/_close.scss","../../../scss/vendors/_rfs.scss","../../../scss/vendors/mixins/_hover.scss","../../../scss/vendors/_transitions.scss","../../../scss/vendors/mixins/_transition.scss","../../../scss/vendors/_alert.scss","../../../scss/vendors/mixins/_border-radius.scss","../../../scss/vendors/mixins/_alert.scss","../../../scss/vendors/mixins/_gradients.scss","../../../scss/components/config/_alert.scss"],"names":[],"mappings":"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","sourcesContent":[".close {\n float: right;\n @include font-size($close-font-size);\n font-weight: $close-font-weight;\n line-height: 1;\n color: $close-color;\n text-shadow: $close-text-shadow;\n opacity: .5;\n\n // Override <a>'s hover style\n @include hover {\n color: $close-color;\n text-decoration: none;\n }\n\n &:not(:disabled):not(.disabled) {\n @include hover-focus {\n opacity: .75;\n }\n }\n}\n\n// Additional properties for button version\n// iOS requires the button element instead of an anchor tag.\n// If you want the anchor version, it requires `href=\"#\"`.\n// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\n\n// stylelint-disable-next-line selector-no-qualifying-type\nbutton.close {\n padding: 0;\n background-color: transparent;\n border: 0;\n appearance: none;\n}\n\n// Future-proof disabling of clicks on `<a>` elements\n\n// stylelint-disable-next-line selector-no-qualifying-type\na.close.disabled {\n pointer-events: none;\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","// 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",".#{$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","//\n// Base styles\n//\n\n.#{$prefix}alert {\n position: relative;\n padding: $alert-padding-y $alert-padding-x;\n margin-bottom: $alert-margin-bottom;\n border: $alert-border-width solid transparent;\n @include border-radius($alert-border-radius);\n}\n\n// Headings for larger alerts\n.#{$prefix}alert-heading {\n // Specified to prevent conflicts of changing $headings-color\n color: inherit;\n}\n\n// Provide class for links that match alerts\n.#{$prefix}alert-link {\n font-weight: $alert-link-font-weight;\n}\n\n\n// Dismissible alerts\n//\n// Expand the right padding and account for the close button's positioning.\n\n.#{$prefix}alert-dismissible {\n padding-right: $close-font-size + $alert-padding-x * 2;\n\n // Adjust close link position\n .close {\n position: absolute;\n top: 0;\n right: 0;\n padding: $alert-padding-y $alert-padding-x;\n color: inherit;\n }\n}\n\n\n// Alternate styles\n//\n// Generate contextual modifier classes for colorizing the alert.\n\n@each $color, $value in $theme-colors {\n .#{$prefix}alert-#{$color} {\n @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));\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","@mixin alert-variant($background, $border, $color) {\n color: $color;\n @include gradient-bg($background);\n border-color: $border;\n\n hr {\n border-top-color: darken($border, 5%);\n }\n\n .alert-link {\n color: darken($color, 10%);\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","// v1.2 color\n$alert-background-theme-colors: ();\n$alert-background-theme-colors: map-merge(\n (\n \"danger\" : #f9e2de,\n \"success\" : #d9f1e7,\n \"info\" : #d9e7f5,\n \"warning\" : #fff5dc,\n ),\n $alert-background-theme-colors\n);\n\n$alert-foreground-theme-colors: ();\n$alert-foreground-theme-colors: map-merge(\n (\n \"danger\" : map-get($theme-colors, \"danger\"),\n \"success\" : map-get($theme-colors, \"success\"),\n \"info\" : map-get($theme-colors, \"info\"),\n \"warning\" : map-get($theme-colors, \"warning\"),\n ),\n $alert-foreground-theme-colors\n);\n\n@each $color, $value in $alert-foreground-theme-colors {\n $alert-background-color: map-get($alert-background-theme-colors, $color);\n .#{$prefix}alert-#{$color} {\n color: $value;\n background-color: $alert-background-color;\n border: none;\n }\n .#{$prefix}alert-toast.#{$prefix}alert-#{$color} {\n border: 1px solid $value;\n }\n}\n\n.#{$prefix}alert-info {\n color: $primary;\n background-color: rgba($primary, .15);\n border: none;\n}\n\n.#{$prefix}alert-toast.#{$prefix}alert-info {\n border: 1px solid $primary;\n}\n\n.#{$prefix}alert-error {\n color: $danger;\n background-color: rgba($danger, .15);\n border: none;\n}\n\n.#{$prefix}alert-toast.#{$prefix}alert-error {\n border: 1px solid $danger;\n}\n\n.#{$prefix}alert {\n display: flex;\n justify-content: space-between;\n max-width: 1200px;\n padding: 12px;\n font-size: 0;\n\n .#{$prefix}alert-icon {\n flex-basis: 24px;\n width: 24px;\n margin-right: 12px;\n font-size: 14px;\n vertical-align: top;\n .ic {\n color: inherit !important; // stylelint-disable-line declaration-no-important\n }\n }\n\n .#{$prefix}alert-content {\n display: inline-block;\n font-size: 14px;\n color: $dark;\n vertical-align: top;\n }\n\n .#{$prefix}alert-icon + .#{$prefix}alert-content {\n flex: 1 1 0;\n }\n\n .#{$prefix}alert-title {\n font-weight: $font-weight-bold;\n line-height: 20px;\n }\n\n .#{$prefix}alert-description {\n line-height: 20px;\n }\n\n .#{$prefix}alert-title + .#{$prefix}alert-description {\n padding-top: 4px;\n }\n\n .#{$prefix}alert-link {\n display: block;\n padding-top: 16px;\n font-weight: 400;\n color: $link !important; // stylelint-disable-line declaration-no-important\n background-color: transparent;\n }\n\n .close {\n margin-left: 8px;\n }\n}\n\n.#{$prefix}alert.#{$prefix}alert-dismissible {\n .close {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n padding: 0;\n color: $slate;\n .ic {\n width: 20px;\n height: 20px;\n font-size: 20px;\n font-weight: 700;\n line-height: 20px;\n vertical-align: middle;\n }\n }\n}\n\n.#{$prefix}alert.#{$prefix}alert-small {\n display: inline-flex;\n min-width: 400px;\n .#{$prefix}alert-content {\n display: flex;\n }\n .#{$prefix}alert-description {\n display: inline-block;\n }\n .#{$prefix}alert-link {\n display: inline-block;\n padding: 0;\n padding-left: 16px;\n font-weight: 400;\n color: $link !important; // stylelint-disable-line declaration-no-important\n background-color: transparent;\n }\n}\n\n.#{$prefix}alert.#{$prefix}alert-toast {\n display: inline-flex;\n padding: 12px;\n font-size: 0;\n background-color: $white;\n border-radius: 4px; // stylelint-disable-line property-blacklist\n box-shadow: 0 4px 8px 0 rgba($slate, .1), 0 12px 20px 0 rgba($slate, .2);\n .#{$prefix}alert-icon {\n margin-right: 8px;\n }\n .#{$prefix}alert-description {\n display: inline-block;\n }\n .#{$prefix}alert-link {\n display: inline-block;\n padding: 0;\n padding-left: 16px;\n font-weight: 400;\n color: $link !important; // stylelint-disable-line declaration-no-important\n background-color: transparent;\n }\n}\n"]}