@charset 'UTF-8';
////
/// Flavor SCSS Mixins Common
/// @group mixins-common
/// @author blackmirror1980
////
/// Gets important attribute based on a boolean flag
///
/// @access public
/// @param {boolean} $important [false] - important boolean flag
/// @return {string} - the resulting string value
@function important($important: false) {
@return if($important, !important, null);
}
/// Convert pixels to rems
///
eg. for a relational value of 12px write rem(12)
///
Assumes $base is the font-size of
///
/// @access public
/// @param {size} $px - pixels size you want to convert
/// @param {size} $base [$font-size-base] - html font-size base
/// @return {size} - the size converted in rem based on html font-size
@function rem($px, $base: $font-size-base) {
@if not unitless($px) {
$px: strip-unit($px);
}
@if not unitless($base) {
$base: strip-unit($base);
}
@return ($px / $base) * 1rem;
}
/// Convert rems to pixels
///
eg. for a relational value of 12px write px(1.2rem) base on $font-size-base (10px)
///
Assumes $base is the font-size of
///
/// @access public
/// @param {size} $px - pixels size you want to convert
/// @param {size} $base [$font-size-base] - html font-size base
/// @return {size} - the size converted in rem based on html font-size
@function px($rem, $base: $font-size-base) {
@if not unitless($rem) {
$rem: strip-unit($rem);
}
@return strip-unit($rem / 1rem) * $base;
}
$prefixes: webkit moz ms o spec;
$prefixes-default: $prefixes;
@function is-prefix($p) {
@return is-defined($p) and array-contains($prefixes, $p);
}
/// Prefixer mixin
///
for generating vendor prefixes on non-standardized properties.
///
/// @example scss - Usage
/// .element {
/// @include prefixer(border-radius, 10px, webkit moz spec);
/// }
///
/// @example css - Output
/// .element {
/// -webkit-border-radius: 10px;
/// -moz-border-radius: 10px;
/// border-radius: 10px;
/// }
/// @access public
/// @param {string} $property - the property to prefix
/// @param {any} $values - the values list to use
/// @param {array | list} $prefixes [$prefixes-default] - space separated list
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin prefixer($property, $values, $prefixes: $prefixes-default, $important: false) {
@if not $prefixes or is-null($prefixes) {
$prefixes: $prefixes-default;
}
@each $prefix in $prefixes {
@if is-prefix($prefix) {
#{if($prefix != spec, '-#{$prefix}-', '') + $property}: $values important($important);
}
@else {
@warn 'Unrecognized prefix: #{$prefix}';
}
}
}
/// Prefixer @Selector mixin
///
for generating vendor prefixes on non-standardized properties.
///
/// @example scss - Usage
/// @include prefixer-at-rule(viewport, null, ms spec) {
/// width: device-width;
/// };
///
/// @example css - Output
/// @-ms-viewport {
/// width: device-width;
/// }
///
/// @viewport {
/// width: device-width;
/// }
/// @access public
/// @param {string} $at-rule - the at rule to prefix
/// @param {string} $at-rule-suffix [null] - the suffix to add after the at-rule (eg. animation keyframes)
/// @param {array | list} $prefixes - space separated list
@mixin prefixer-at-rule($at-rule, $at-rule-suffix: null, $prefixes: $prefixes-default) {
@each $prefix in $prefixes {
@if is-prefix($prefix) {
$at-rule-selector: #{'@' + if($prefix != spec, '-' + $prefix + '-', '') + $at-rule + if($at-rule-suffix, ' ' + $at-rule-suffix, '')};
@debug $at-rule-selector;
#{$at-rule-selector} {
@content;
};
}
@else {
@warn 'Unrecognized prefix: #{$prefix}';
}
}
}
/// Disable mixin
///
it forces the cursor to default and pointer-evento to none for an element and all of his children
///
it's compatible with IE11+
///
/// @link https://caniuse.com/#search=pointer-events caniuse.com i use pointer-events
/// @example scss - Usage
/// .disable-element {
/// @include disable;
/// }
///
/// @example css - Output
/// .disable-element {
/// cursor: default;
/// pointer-events: none;
/// }
///
/// .disable-element * {
/// cursor: default;
/// pointer-events: none;
/// }
/// @access public
/// @param {boolean} $force [true] - if true, forces the disable for all children
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin disable($force: true, $important: false) {
@include cursor(default, $important);
@include pointer-events(none, $important);
@if $force == true {
* {
@include cursor(default, $important);
@include pointer-events(none, $important);
}
}
}
/// Hidden mixin
///
visually hides an element without touching display or visibility selectors
///
/// @example scss - Usage
/// .hidden-element {
/// @include hidden;
/// }
///
/// @example css - Output
/// .hidden-element {
/// position: absolute;
/// width: 1px;
/// height: 1px;
/// padding: 0;
/// border: 0;
/// overflow: hidden;
/// white-space: nowrap;
/// clip: rect(1px, 1px, 1px, 1px);
/// clip-path: inset(100%);
/// }
/// @access public
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin hidden($important: false) {
@include position(absolute, $important);
@include box-size(1px, true, $important);
@include padding(0, $important);
@include border(0, $important);
@include overflow(hidden, $important);
@include white-space(nowrap, $important);
clip: rect(1px, 1px, 1px, 1px) important($important);
clip-path: inset(100%) important($important);
}
/// Animateable properties
///
/// @access private
/// @type list
$animateable-properties: (background, background-color, background-position, background-size, border, border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-width, border-color, border-left, border-left-color, border-left-width, border-right, border-right-color, border-right-width, border-spacing, border-top, border-top-color, border-top-left-radius, border-top-right-radius, border-top-width, bottom, box-shadow, clip, clip-path, color, column-count, column-gap, column-rule, column-rule-color, column-rule-width, column-width, columns, filter, flex, flex-basis, flex-grow, flex-shrink, font, font-size, font-size-adjust font-stretch font-weight, height, left, letter-spacing, line-height, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, order, outline, outline-color, outline-offset, outline-width, padding, padding-bottom, padding-left, padding-right, padding-top, perspective, perspective-origin, right, text-decoration-color, text-indent, text-shadow, top, transform, transform-origin, vertical-align, visibility width, word-spacing, z-index);