@yek/sass

Version:

the Sass/SCSS library with useful mixins, functions and more features

1 lines • 21.7 kB

Source Map (JSON)

{"version":3,"sources":["_at_the_head.scss","_dependencies.scss","_length.scss","_split.scss","_units.scss","_variables.scss","_color.scss","_flex.scss","_size.scss","_position.scss","_breakpoints.scss","_mixins.scss","_transform.scss","_style.scss","_default.scss"],"names":[],"mappings":"AAAA;AACA;ACDA;AACA;AACA;AACA;AACA;AACA;ACLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AChBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACzEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACpEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AClBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACvCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACnGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACvGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACpCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AC3BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACjIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AC7CA;AACA;AACA;AACA;AACA;AACA;ACLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.scss","sourcesContent":["/* [ YEK/SASS - VERSION : 3.2.0 ] */\n","/// DEPENDENCIES //\n@use 'sass:list' as LIST;\n@use 'sass:string' as STR;\n@use 'sass:meta' as META;\n@use 'sass:map' as MAP;\n","/// length\n/// @group function, string\n/// @param {String} $string\n/// @return {Number} $length - Length of the string\n@function length($collection) {\n @if META.type-of($collection) == 'string' {\n @return STR.length($collection);\n }\n @if META.type-of($collection) == 'list' {\n @return LIST.length($collection);\n }\n}\n\n@function len($collection) {\n @return length($collection);\n}\n","/// split without delimiter\n/// @access private\n/// @func-size (664 bytes)\n/// @speed-test (70.xxx sec)\n@function _split-by-null($string) {\n // empty list\n $fragment: ();\n // constant index\n $index: 1;\n // walk string when length of string is greater than 1\n @while $index <= len($string) - 1 {\n // get first character of string\n $item: STR.slice($string, 0, $index);\n // push item to fragment\n $fragment: LIST.append($fragment, $item);\n // remove first character of string\n $string: STR.slice($string, $index + 1);\n }\n // push last character of string to fragment\n $fragment: LIST.append($fragment, $string);\n @return $fragment;\n}\n\n/// split with delimiter\n/// @access private\n/// @func-size (695 bytes)\n/// @speed-test (68.xxx sec)\n@function _split-by-sep($string, $sep: ':') {\n // empty list\n $fragment: ();\n // find first index of delimiter\n $index: STR.index($string, $sep);\n // walk through string\n @while $index != null {\n // get string of value\n $item: STR.slice($string, 1, $index - 1);\n // push item to fragment\n $fragment: LIST.append($fragment, $item);\n // remove walked string\n $string: STR.slice($string, $index + len($sep));\n // find new index of delimiter\n $index: STR.index($string, $sep);\n }\n // push last character of string to fragment\n $fragment: LIST.append($fragment, $string);\n // return splited string\n @return $fragment;\n}\n\n/// split - split a string into list by separator\n/// @access public\n/// @func-size (829 bytes)\n/// @speed-test (65.xxx ~ 70.xxx sec)\n/// @group helpers\n/// @param {String} $string\n/// @param {String} $sep [':'|'.'|'-'|' ']\n/// @return {List} $splited-string\n@function split($string, $sep: null) {\n // type-check of `$string`\n @if type-of($string) != 'string' {\n @error 'The argument $string: `#{$string}` is of incorrect type: `#{type-of($string)}`. Type of `String` is required!';\n } @else if $sep != null and type-of($sep) != 'string' {\n @error 'The argument $string: `#{$sep}` is of incorrect type: `#{type-of($sep)}`. Type of `String` is required!';\n }\n\n // if seprator not passed or is empty string\n @if $sep == null or len($sep) == 0 or $sep == '' {\n @return _split-by-null($string);\n } @else {\n // else seprator passed\n @return _split-by-sep($string, $sep);\n }\n}\n","// sass default funciton have warning\n@function unit($value) {\n @return STR.slice($value * 0 + '', 2, -1);\n}\n\n///\n// A collection of function for advanced type checking\n// @author Kitty Giraudel\n// @from `https://css-tricks.com/snippets/sass/advanced-type-checking/`\n///\n\n@function is-number($value) {\n @return type-of($value) == 'number';\n}\n\n@function is-time($value) {\n @return is-number($value) and index('ms' 's', unit($value)) != null;\n}\n\n@function is-duration($value) {\n @return is-time($value);\n}\n\n@function is-angle($value) {\n @return is-number($value) and index('deg' 'rad' 'grad' 'turn', unit($value))\n != null;\n}\n\n@function is-frequency($value) {\n @return is-number($value) and index('Hz' 'kHz', unit($value)) != null;\n}\n\n@function is-integer($value) {\n @return is-number($value) and round($value) == $value;\n}\n\n@function is-relative-length($value) {\n @return is-number($value) and\n index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null;\n}\n\n@function is-absolute-length($value) {\n @return is-number($value) and\n index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null;\n}\n\n@function is-percentage($value) {\n @return is-number($value) and unit($value) == '%';\n}\n\n@function is-length($value) {\n @return is-relative-length($value) or is-absolute-length($value);\n}\n\n@function is-resolution($value) {\n @return is-number($value) and index('dpi' 'dpcm' 'dppx', unit($value)) != null;\n}\n\n@function is-position($value) {\n @return is-length($value) or is-percentage($value) or\n index('top' 'right' 'bottom' 'left' 'center', $value) != null;\n}\n\n// @author (YEK/DEV) [Miko Mikoloism]\n// @from `https://github.com/yek-org/yek-sass`\n@function is-unitless($value) {\n @return unit($value) == '';\n}\n","// NOTE : may this be confiusing, then rename to `val` or `value`\n@function val($name) {\n @return unquote('var(--#{$name})');\n}\n\n// HINT : set variable property with value\n@mixin set-var($name, $value) {\n --#{$name}: #{$value};\n}\n\n// HINT : set the `:root` selector variable\n@mixin set-root($variables) {\n @at-root :root {\n @each $name, $value in $variables {\n @include set-var($name, $value);\n }\n }\n}\n","// HINT : convert any color to rgb/rgba\n@function to-rgb($color, $alpha: 1, $sep: ' ') {\n $red: red($color);\n $green: green($color);\n $blue: blue($color);\n $res: null;\n @if $sep == ' ' {\n $res: '#{$red}#{$sep}#{$green}#{$sep}#{$blue} / #{$alpha}';\n } @else {\n $res: '#{$red}#{$sep}#{$green}#{$sep}#{$blue}#{$sep}#{$alpha}';\n }\n @return unquote('rgb(#{$res})');\n}\n\n// HINT : convert any color to hsl/hsla\n@function to-hsl($color, $alpha: 1, $sep: ' ') {\n $hue: hue($color);\n $saturation: saturation($color);\n $lightness: lightness($color);\n $res: null;\n @if $sep == ' ' {\n $res: '#{$hue}#{$sep}#{$saturation}#{$sep}#{$lightness} / #{$alpha}';\n } @else {\n $res: '#{$hue}#{$sep}#{$saturation}#{$sep}#{$lightness}#{$sep}#{$alpha}';\n }\n @return unquote('hsl(#{$res})');\n}\n\n// HINT : get variable color with `hsl` method\n@function color($var-name) {\n @return #{val('color-#{$var-name}')};\n}\n@mixin set-colors($colors) {\n & {\n @each $name, $value in $colors {\n @include set-var(#{unquote('color-#{$name}')}, #{$value});\n }\n }\n}\n","// [START _flex.scss]\n@mixin grid(\n $flow: row,\n $cols: null,\n $rows: null,\n $gap: null,\n $temp: (\n rows: null,\n cols: null,\n )\n) {\n grid-auto-flow: $flow;\n\n @if $gap not null {\n grid-gap: $gap;\n }\n\n @if map-get($temp, rows) not null {\n grid-template-rows: #{map-get($temp, rows)};\n }\n @if map-get($temp, cols) not null {\n grid-template-columns: #{map-get($temp, cols)};\n }\n\n @if $cols not null {\n grid-auto-columns: $cols;\n }\n @if $rows not null {\n grid-auto-rows: $rows;\n }\n}\n\n@mixin flex($dir: row, $wrap: wrap) {\n display: flex;\n flex-direction: $dir;\n flex-wrap: $wrap;\n}\n@mixin align($ver: null, $hor: null, $content: null) {\n @if $hor == null and $ver == null {\n align-items: center;\n justify-content: center;\n }\n @if $hor not null {\n align-items: $hor; // hor\n }\n @if $ver not null {\n justify-content: $ver; // ver\n }\n @if $content not null {\n align-content: $content;\n }\n}\n@mixin aligns($align: center) {\n @include align($align, $align, $align);\n}\n@mixin center($type: flex-row) {\n @if $type ==\n flex or\n $type ==\n flex-row or\n $type ==\n fr or\n $type ==\n frow or\n $type ==\n f-row\n {\n @include flex;\n } @else if\n $type ==\n flex-column or\n $type ==\n fc or\n $type ==\n f-col or\n $type ==\n f-column or\n $type ==\n flex-col\n {\n @include flex(column);\n } @else if $type == grid-row or $type == g-row {\n @include grid(row);\n } @else if\n $type ==\n grid-column or\n $type ==\n g-col or\n $type ==\n grid-col or\n $type ==\n g-column\n {\n @include grid(column);\n }\n @include aligns;\n}\n\n// [END _flex.scss]\n","// [START _size.scss]\n\n@mixin width($w: null, $max: null, $min: null, $tog: null) {\n @if $w == null and $max == null and $min == null {\n @if $tog == null {\n width: 100%;\n max-width: 100%;\n min-width: 100%;\n } @else {\n width: $tog;\n max-width: $tog;\n min-width: $tog;\n }\n }\n @if $w not null {\n width: $w;\n }\n @if $max not null {\n max-width: $max;\n }\n @if $min not null {\n min-width: $min;\n }\n}\n\n@mixin height($h: null, $max: null, $min: null, $tog: null) {\n @if $h == null and $max == null and $min == null {\n @if $tog == null {\n height: 100%;\n max-height: 100%;\n min-height: 100%;\n } @else {\n height: $tog;\n max-height: $tog;\n min-height: $tog;\n }\n }\n @if $h not null {\n height: $h;\n }\n @if $max not null {\n max-height: $max;\n }\n @if $min not null {\n min-height: $min;\n }\n}\n\n//=> [w min max]|w, [h min max]|h, ([w+h min max])|(together: w+h), min, max\n@mixin size($w: null, $h: null, $tog: null, $min: null, $max: null) {\n @if $w ==\n null and\n $h ==\n null and\n $tog ==\n null and\n $min ==\n null and\n $max ==\n null\n {\n width: 100%;\n height: 100%;\n }\n @if $w ==\n null and\n $h ==\n null and\n $tog not\n null and\n $min ==\n null and\n $max ==\n null\n {\n @if type-of($tog) == 'list' {\n @include width(LIST.nth($tog, 1), LIST.nth($tog, 2), LIST.nth($tog, 3));\n @include height(LIST.nth($tog, 1), LIST.nth($tog, 2), LIST.nth($tog, 3));\n } @else {\n width: $tog;\n height: $tog;\n }\n }\n // TODO : max and min together\n // NOTE : max = ((width, height)) | (width & height)\n // NOTE : min = ((width, height)) | (width & height)\n @if $w not null {\n @if type-of($w) == 'list' {\n @include width(LIST.nth($w, 1), LIST.nth($w, 2), LIST.nth($w, 3));\n } @else {\n width: $w;\n }\n }\n @if $h not null {\n @if type-of($h) == 'list' {\n @include height(LIST.nth($h, 1), LIST.nth($h, 2), LIST.nth($h, 3));\n } @else {\n height: $h;\n }\n }\n}\n\n// [END _size.scss]\n","// [START _position.scss]\n\n@mixin position(\n $type: null,\n $top: null,\n $left: null,\n $bottom: null,\n $right: null\n) {\n @if $type not null {\n position: $type;\n }\n @if $top not null {\n top: $top;\n }\n @if $left not null {\n left: $left;\n }\n @if $bottom not null {\n bottom: $bottom;\n }\n @if $right not null {\n right: $right;\n }\n}\n@mixin absolute($top: null, $left: null, $bottom: null, $right: null) {\n @include position(absolute, $top, $left, $bottom, $right);\n}\n@mixin fixed($top: null, $left: null, $bottom: null, $right: null) {\n @include position(fixed, $top, $left, $bottom, $right);\n}\n@mixin relative($top: null, $left: null, $bottom: null, $right: null) {\n @include position(relative, $top, $left, $bottom, $right);\n}\n\n// [END _position.scss]\n","$breakpoints: (\n 'small': (\n min-width: 767px,\n ),\n 'medium': (\n min-width: 992px,\n ),\n 'large': (\n min-width: 1200px,\n ),\n) !default;\n\n@mixin media($breakpoint) {\n // If the key exists in the map\n @if map-has-key($breakpoints, $breakpoint) {\n // Prints a media query based on the value\n @media #{inspect(map-get($breakpoints, $breakpoint))} {\n @content;\n }\n }\n\n // If the key doesn't exist in the map\n @else {\n @warn \"Unfortunately, no value could be retrieved from `#{$breakpoint}`. \"\n + \"Available breakpoints are: #{map-keys($breakpoints)}.\";\n }\n}\n","@mixin clear-space {\n padding: 0;\n margin: 0;\n}\n\n@mixin clear-list {\n list-style-type: none;\n @include clear-space;\n}\n\n// HINT : fieldset, form, figure\n@mixin clear-frame {\n fieldset,\n form,\n figure {\n @include clear-space;\n }\n figcaption {\n display: none;\n }\n}\n\n@mixin clear-border {\n border: none;\n outline: none;\n stroke: none;\n box-shadow: none;\n}\n\n@mixin radius($offset: 9, $unit: px) {\n border-radius: #{unquote('#{$offset}#{unquote($unit)}')};\n}\n\n@mixin clear-input(\n $fluid: false,\n $color: (\n focus: color(input-focus),\n hover: color(input-hover),\n ),\n $effect: true\n) {\n letter-spacing: 1.7px;\n @include clear-space;\n @include clear-border;\n\n @if ($fluid == true) {\n @include size($tog: 100%);\n } @else {\n @include size(150px, 50px);\n }\n\n @if $effect == true {\n transition: 0.2s 0s ease-out;\n &:hover {\n box-shadow: 0 0 0 0.25rem #{map-get($color, hover)};\n }\n &:focus {\n box-shadow: 0 0 0 0.25rem #{map-get($color, focus)};\n }\n }\n}\n\n@mixin clear-button($effect: false) {\n @include clear-border;\n cursor: pointer;\n\n @if $effect == true {\n &:hover {\n transform: scale(1.05);\n }\n &:active {\n transform: scale(0.95);\n }\n }\n}\n\n@mixin clear-fab(\n $float: false,\n $offset: 60,\n $radius: 60,\n $position: (\n bottom: 15px,\n right: 20px,\n )\n) {\n @include clear-button(true);\n $size: unquote('#{$offset}px');\n @include size($size, $size);\n @if $float == true {\n @include fixed(\n $top: map-get($position, top),\n $bottom: map-get($position, bottom),\n $right: map-get($position, right),\n $left: map-get($position, left)\n );\n }\n @include radius($radius);\n z-index: 99990;\n}\n\n@mixin image-fit-cover {\n @include clear-space;\n @include size;\n object-fit: cover;\n}\n\n@mixin text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@mixin case($case: null) {\n $_case: none;\n @if $case == lower or $case == lowercase {\n $_case: lowercase;\n } @else if $case == upper or $case == uppercase {\n $_case: uppercase;\n } @else if $case == title or $case == capitalize {\n $_case: capitalize;\n } @else if $case == full or $case == full-width {\n $_case: full-width;\n } @else if $case == null or $case == none {\n $_case: none;\n } @else {\n $_case: none;\n }\n text-transform: $_case;\n}\n","// [START _transform.scss]\n// NOTE : DEPRECATED (on v1.0.5)\n\n@mixin transform($transform: null) {\n @if $transform not null {\n transform: $transform;\n }\n}\n@mixin translate($x: null, $y: null, $z: null) {\n @if $z not null {\n @include transform(translateZ($z));\n }\n @if $y not null {\n @include transform(translateY($y));\n }\n @if $x not null {\n @include transform(translateX($x));\n }\n}\n\n@mixin scale($x: null, $y: null, $z: null) {\n @if $z not null {\n @include transform(scaleZ($z));\n }\n @if $y not null {\n @include transform(scaleY($y));\n }\n @if $x not null {\n @include transform(scaleX($x));\n }\n}\n\n@mixin rotate($z: null, $x: null, $y: null) {\n @if $z not null {\n @include transform(rotateZ($z));\n }\n @if $y not null {\n @include transform(rotateY($y));\n }\n @if $x not null {\n @include transform(rotateX($x));\n }\n}\n\n// [END _transform.scss]\n","// stylesheets / presets //\n\n.visible-hidden {\n visibility: hidden;\n}\n","@mixin clear-root {\n /* __[ FONT'S ]__ */\n @import url('https://fonts.googleapis.com/css?family=Montserrat'); // NOTE : Montserrat\n @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); // NOTE : Roboto\n @import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap'); // NOTE : lalezar font\n @import url('https://cdn.jsdelivr.net/npm/yekan-font@1.0.0/css/yekan-font.min.css'); // NOTE : yekan font\n\n /* __[ VARIABLE ]__ */\n $color-primary: hsl(229, 53%, 22%);\n $color-secondary: hsl(222, 35%, 74%);\n $color-gray: hsl(215, 46%, 91%);\n $color-light-gray: hsl(220, 53%, 97%);\n $color-white: hsl(0, 0%, 100%);\n $color-black: hsl(275, 10%, 24%);\n $color-input-hover: hsl(222 35% 74% / 60%); // NOTE : $color-secondary / 60%\n $color-input-focus: hsl(229 53% 22% / 45%); // NOTE : $color-primary / 45%\n $color-input-error: hsl(17deg 100% 56% / 60%);\n $color-input-warning: hsl(49deg 51% 43% / 60%);\n $color-input-success: hsl(120deg 69% 29% / 45%);\n $color-input-disabled: $color-gray;\n $font-proxima: 'proxima-soft', 'Proxima Soft', 'Proxima Nova Soft', Helvetica,\n Arial, sans-serif;\n $font-family: 'Roboto', 'Montserrat', 'sans-serif';\n $font-persian: 'Yekan', 'Lalezar', cursive;\n\n /* __[ :ROOT ]__ */\n @include set-root(\n (\n color-primary: $color-primary,\n color-secondary: $color-secondary,\n color-gray: $color-gray,\n color-light-gray: $color-light-gray,\n color-white: $color-white,\n color-black: $color-black,\n color-input-hover: $color-input-hover,\n color-input-focus: $color-input-focus,\n color-input-error: $color-input-error,\n color-input-warning: $color-input-warning,\n color-input-success: $color-input-success,\n color-input-disabled: $color-input-disabled,\n font-family: $font-family,\n font-persian: $font-persian,\n font-proxima: $font-proxima,\n )\n );\n\n /* __[ STYLE ]__ */\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n transition: 0.2s ease all;\n }\n\n body,\n html {\n padding: 0;\n margin: 0;\n font-family: val(font-family);\n }\n\n body {\n @include flex(column);\n width: 100vw;\n min-height: 100vh;\n font-family: val(font-family);\n }\n}\n"]}