Last active
May 15, 2023 18:38
-
-
Save krypton225/7c0d629cd19dddedfbe4d06071eb2cad to your computer and use it in GitHub Desktop.
Useful Mixins In SCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Author: Khaled Mohamed. | |
| * Last updated: 15-5-2023. | |
| */ | |
| @charset "UTF-8"; | |
| @use "sass:list"; | |
| @use "sass:math"; | |
| /* ================================================= */ | |
| @mixin prefixing-all($property, $value) { | |
| -webkit-#{$property}: $value; | |
| -moz-#{$property}: $value; | |
| -ms-#{$property}: $value; | |
| -o-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| /* ================================================= */ | |
| @mixin prefixing-web-moz-ms($property, $value) { | |
| -webkit-#{$property}: $value; | |
| -moz-#{$property}: $value; | |
| -ms-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| /* ================================================= */ | |
| @mixin prefixing-web-moz($property, $value) { | |
| -webkit-#{$property}: $value; | |
| -moz-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| /* ================================================= */ | |
| @mixin prefixing-web-ms($property, $value) { | |
| -webkit-#{$property}: $value; | |
| -ms-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| /* ================================================= */ | |
| @mixin prefixing-web-o($property, $value) { | |
| -webkit-#{$property}: $value; | |
| -o-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| /* ================================================= */ | |
| @mixin prefixing-moz-o($property, $value) { | |
| -moz-#{$property}: $value; | |
| -o-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| /* ================================================= */ | |
| @mixin prefixing-ms-o($property, $value) { | |
| -ms-#{$property}: $value; | |
| -o-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| /* ================================================= */ | |
| @mixin prefixing-ms($property, $value) { | |
| -ms-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| /* ================================================= */ | |
| @mixin prefix-val-all($prop, $value) { | |
| #{$prop}: -webkit-#{$value}; | |
| #{$prop}: -moz-#{$value}; | |
| #{$prop}: -ms-#{$value}; | |
| #{$prop}: -o-#{$value}; | |
| #{$prop}: #{$value}; | |
| } | |
| /* ================================================= */ | |
| @mixin prefix-val-web-moz-ms($prop, $value) { | |
| #{$prop}: -webkit-#{$value}; | |
| #{$prop}: -moz-#{$value}; | |
| #{$prop}: -ms-#{$value}; | |
| #{$prop}: #{$value}; | |
| } | |
| /* ================================================= */ | |
| @mixin prefix-val-web-moz($prop, $value) { | |
| #{$prop}: -webkit-#{$value}; | |
| #{$prop}: -moz-#{$value}; | |
| #{$prop}: #{$value}; | |
| } | |
| /* ================================================= */ | |
| @mixin prefix-val-web-ms($prop, $value) { | |
| #{$prop}: -webkit-#{$value}; | |
| #{$prop}: -ms-#{$value}; | |
| #{$prop}: #{$value}; | |
| } | |
| /* ================================================= */ | |
| @mixin prefix-val-web-o($prop, $value) { | |
| #{$prop}: -webkit-#{$value}; | |
| #{$prop}: -o-#{$value}; | |
| #{$prop}: #{$value}; | |
| } | |
| /* ================================================= */ | |
| @mixin prefix-val-moz-o($prop, $value) { | |
| #{$prop}: -moz-#{$value}; | |
| #{$prop}: -o-#{$value}; | |
| #{$prop}: #{$value}; | |
| } | |
| /* ================================================= */ | |
| @mixin prefix-val-ms($prop, $value) { | |
| #{$prop}: -ms-#{$value}; | |
| #{$prop}: #{$value}; | |
| } | |
| /* ================================================= */ | |
| @mixin prefix-val-ms-o($prop, $value) { | |
| #{$prop}: -ms-#{$value}; | |
| #{$prop}: -o-#{$value}; | |
| #{$prop}: #{$value}; | |
| } | |
| /* ================================================= */ | |
| @mixin breakpoint($point) { | |
| $all-points: (mobile, tablet, large); | |
| @if not list.index($all-points, $point) { | |
| @error "$point argument must has one of these units: (#{$all-points})"; | |
| } | |
| @if $point == mobile { | |
| @media only screen and (max-width: 576px) { @content; } | |
| } @else if $point == tablet { | |
| @media only screen and (max-width: 992px) { @content; } | |
| } @else if $point == large { | |
| @media only screen and (max-width: 1200px) { @content; } | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin grid($min-col-size, $gap) { | |
| @if type-of($min-col-size) != number { | |
| @error "$min-col-size argument must be of type number."; | |
| } | |
| @if type-of($gap) != number { | |
| @error "$gap argument must be of type number."; | |
| } | |
| // * Main fixed units. | |
| $col-units: (em, rem, px, fr); | |
| $gap-units: (#{"%"}, rem, px, em); | |
| // * Get the unit which is passed with the two numbers as arguments. | |
| $get-col-unit: unit($min-col-size); | |
| $get-gap-unit: unit($gap); | |
| @if not list.index($col-units, $get-col-unit) { | |
| @error "$min-col-size must has one of these units: (#{$col-units})"; | |
| } | |
| @if not list.index($gap-units, $get-gap-unit) { | |
| @error "$gap argument must has one of these units: (#{$gap-units})"; | |
| } | |
| @include prefix-val-ms(display, grid); | |
| grid-template-columns: repeat(auto-fit, minmax(min(#{$min-col-size}, 100%), 1fr)); | |
| gap: #{$gap}; | |
| } | |
| /* ================================================= */ | |
| /* ================= Start Flexbox ================= */ | |
| @mixin d-flex() { | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| } | |
| /* ====================== */ | |
| @mixin d-inflex() { | |
| display: -webkit-inline-box; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| } | |
| /* ====================== */ | |
| @mixin align-items($value: normal) { | |
| $all-values: (normal, flex-start, flex-end, center, baseline); | |
| @if not list.index($all-values, $value) { | |
| @error "#{$val} argument must be one of these units: (#{$all-values})"; | |
| } | |
| -webkit-box-align: $value; | |
| -ms-flex-align: $value; | |
| align-items: $value; | |
| } | |
| /* ====================== */ | |
| @mixin justify-content($value: flex-start) { | |
| $all-values: (flex-start, flex-end, center, space-between, space-around, space-evenly); | |
| @if not list.index($all-values, $value) { | |
| @error "$val argument must has one of these units: (#{$all-values})"; | |
| } | |
| -webkit-box-pack: $value; | |
| -ms-flex-pack: $value; | |
| justify-content: $value; | |
| } | |
| /* ====================== */ | |
| @mixin flex-dir($value: row) { | |
| $all-values: (row, row-reverse, column, column-reverse); | |
| @if ($value == column) { | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| } @else if ($value == "") or ($value == row) { | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| } @else if ($value == row-reverse) { | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: reverse; | |
| -ms-flex-direction: row-reverse; | |
| flex-direction: row-reverse; | |
| } @else if ($value == column-reverse) { | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: reverse; | |
| -ms-flex-direction: column-reverse; | |
| flex-direction: column-reverse; | |
| } | |
| } | |
| /* ====================== */ | |
| @mixin flex-baseline-start($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(baseline); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin flex-baseline-end($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(baseline); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin flex-end-start($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-end); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin flex-end-end($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-end); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin flex-center-start($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(center); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin flex-center-end($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(center); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin flex-center-center($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(center); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin flex-around-start($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-around); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin flex-around-end($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-around); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin flex-around-center($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-around); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin flex-evenly-start($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-evenly); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin flex-evenly-end($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-evenly); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin flex-evenly-center($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-evenly); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin flex-between-start($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-between); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin flex-between-end($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-between); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin flex-between-center($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-between); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin flex-stretch-start($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(stretch); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin flex-stretch-end($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(stretch); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin flex-stretch-center($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(stretch); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin flex-start-start($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-start); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin flex-start-end($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-start); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin flex-start-center($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-start); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin flex-start-baseline($dir: row) { | |
| @include d-flex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-start); | |
| @include align-items(baseline); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-baseline-start($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(baseline); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-baseline-end($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(baseline); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-end-start($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-end); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-end-end($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-end); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-center-start($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(center); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-center-end($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(center); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-center-center($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(center); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-around-start($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-around); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-around-end($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-around); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-around-center($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-around); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-evenly-start($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-evenly); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-evenly-end($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-evenly); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-evenly-center($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-evenly); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-between-start($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-between); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-between-end($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-between); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-between-center($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(space-between); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-stretch-start($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(stretch); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-stretch-end($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(stretch); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-stretch-center($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(stretch); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-start-start($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-start); | |
| @include align-items(flex-start); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-start-end($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-start); | |
| @include align-items(flex-end); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-start-center($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-start); | |
| @include align-items(center); | |
| } | |
| /* ====================== */ | |
| @mixin inflex-start-baseline($dir: row) { | |
| @include d-inflex(); | |
| @include flex-dir($dir); | |
| @include justify-content(flex-start); | |
| @include align-items(baseline); | |
| } | |
| /* ====================== */ | |
| @mixin flex-basis($val: auto) { | |
| @if type-of($val) == number { | |
| $values: (#{"%"}, rem, px, em); | |
| $get-val-unit: unit($val); | |
| @if not list.index($values, $get-val-unit) { | |
| @error "$val argument must has one of these units: (#{$values})"; | |
| } | |
| } | |
| -ms-flex-preferred-size: $val; | |
| flex-basis: $val; | |
| } | |
| /* ====================== */ | |
| @mixin flex-wrap($val: nowrap) { | |
| $all-values: (nowrap, wrap, wrap-reverse); | |
| @if not list.index($all-values, $val) { | |
| @error "$val must has one of these units: (#{$all-values})"; | |
| } | |
| @include prefixing-ms(flex-wrap, $val); | |
| } | |
| /* ====================== */ | |
| // See the strip-unit: https://gist.github.com/krypton225/12a5bd7b74ba66756b374a29f429995e | |
| @mixin flex-shrink($val: 1) { | |
| @if type-of($val) != number { | |
| @error "$val of flex-shrink argument must be of type number."; | |
| } | |
| $actual-val: strip-unit($val); | |
| -ms-flex-negative: $actual-val; | |
| flex-shrink: $actual-val; | |
| } | |
| /* ====================== */ | |
| @mixin flex-grow($val: 0) { | |
| @if type-of($val) != number { | |
| @error "$val of flex-grow argument must be of type number."; | |
| } | |
| $actual-val: strip-unit($val); | |
| -webkit-box-flex: $actual-val; | |
| -ms-flex-positive: $actual-val; | |
| flex-grow: $actual-val; | |
| } | |
| /* ====================== */ | |
| @mixin align-self($val) { | |
| @if type-of($val) != string { | |
| @error "$val of flex-grow argument must be of type number."; | |
| } | |
| $all-values: (auto, stretch, center, flex-start, flex-end, baseline); | |
| @if not list.index($all-values, $val) { | |
| @error "$val must has one of these units: (#{$all-values})"; | |
| } | |
| -ms-grid-row-align: center; | |
| align-self: center; | |
| } | |
| /* ====================== */ | |
| @mixin order($val) { | |
| @if type-of($val) != number { | |
| @error "$val of order argument must be of type number."; | |
| } | |
| $actual-val: strip-unit($val); | |
| -webkit-box-ordinal-group: $actual-val; | |
| -ms-flex-order: $actual-val; | |
| order: $actual-val; | |
| } | |
| /* ================= End Flexbox ================= */ | |
| @mixin mq($type: min, $dimension: w, $breakpoint-name: md) { | |
| $all-types: (min, max); | |
| $all-dimensions: (width, w, height, h); | |
| $breakpoints: ( | |
| "mob-min": 320px, | |
| "mob": 400px, | |
| "mob-wide": 480px, | |
| "xs": 576px, | |
| "sm-tab": 640px, | |
| "sm": 767px, | |
| "sm-wide": 870px, | |
| "md": 991px, | |
| "lg": 1200px, | |
| "xl": 1400px, | |
| "xxl": 3000px, | |
| ); | |
| @if not list.index($all-types, $type) { | |
| @error "#{$type} dose not exist in list: (#{$all-types})"; | |
| } | |
| @if not list.index($all-dimensions, $dimension) { | |
| @error "#{$dimension} dose not exist in list: (#{$all-dimensions})"; | |
| } | |
| @if map-has-key($breakpoints, $breakpoint-name) { | |
| $actual-dimension: map_get($breakpoints, $breakpoint-name); | |
| @if $type == max { | |
| $actual-dimension: $actual-dimension - 1px; | |
| } | |
| @if $dimension == width or $dimension == w { | |
| @media only screen and (#{$type}-width: $actual-dimension) { | |
| @content; | |
| } | |
| } @else if $dimension == height or $dimension == h { | |
| @media only screen and (#{$type}-height: $actual-dimension) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @error "Please, Enter the valid breakpoint. #{$breakpoint-name} dose not exist in (#{$breakpoints})"; | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin fade($type) { | |
| $list-all-types: (hide, show); | |
| @if not list.index($list-all-types, $type) { | |
| @error "#{$type} dose not exist in list: (#{$list-all-types})."; | |
| } | |
| @if $type == "hide" { | |
| visibility: hidden; | |
| opacity: 0; | |
| } @else if $type == "show" { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin reset-bg { | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| /* ================================================= */ | |
| @mixin bg($urlImage: "") { | |
| background-image: url("#{$urlImage}"); | |
| @include reset-bg; | |
| } | |
| /* ================================================= */ | |
| @mixin transition($prop: all, $time: 0.33, $func: ease-in-out, $delaying: 0) { | |
| $list-functions: (ease, ease-in, ease-in-out, linear); | |
| $params-with-types-map: ( | |
| $prop: "string", | |
| $time: "number", | |
| $func: "string", | |
| $delaying: "number", | |
| ); | |
| @if not list.index($list-functions, $func) { | |
| @error "#{$func} dose not exist in list: (#{$list-functions})."; | |
| } | |
| @each $custom, $val in $params-with-types-map { | |
| @if type-of($custom) != $val { | |
| @error "#{$custom} parameter must be in type #{$val}."; | |
| } | |
| } | |
| @if $func == ease { | |
| @include prefixing(transition, $prop #{$time}s ease #{$delaying}s); | |
| } @else if $func == ease-in { | |
| @include prefixing(transition, $prop #{$time}s ease-in #{$delaying}s); | |
| } @else if $func == ease-in-out { | |
| @include prefixing(transition, $prop #{$time}s ease-in-out #{$delaying}s); | |
| } @else if $func == ease-out { | |
| @include prefixing(transition, $prop #{$time}s ease-out #{$delaying}s); | |
| } @else if $func == linear { | |
| @include prefixing(transition, $prop #{$time}s linear #{$delaying}s); | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin fading-transition($time, $func) { | |
| @include prefixing(transition, visibility); | |
| @include prefixing(transition, opacity); | |
| transition: visibility #{$time}s #{$func}, opacity #{$time}s #{$func}; | |
| } | |
| /* ================================================= */ | |
| @mixin auto-x { | |
| margin: { | |
| right: auto; | |
| left: auto; | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin center-txt-x { | |
| text-align: center; | |
| margin-inline: auto; | |
| } | |
| /* ================================================= */ | |
| @mixin keyframe-prefixing($name) { | |
| @-webkit-keyframes #{$name} { | |
| @content; | |
| } | |
| @-moz-keyframes #{$name} { | |
| @content; | |
| } | |
| @-ms-keyframes #{$name} { | |
| @content; | |
| } | |
| @-o-keyframes #{$name} { | |
| @content; | |
| } | |
| @keyframes #{$name} { | |
| @content; | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin abs-t-r($top: 0, $right: 0, $zIndex: 0) { | |
| position: absolute; | |
| top: $top; | |
| right: $right; | |
| z-index: $zIndex; | |
| } | |
| /* ================================================= */ | |
| @mixin abs-t-l($top: 0, $left: 0, $zIndex: 0) { | |
| position: absolute; | |
| top: $top; | |
| left: $left; | |
| z-index: $zIndex; | |
| } | |
| /* ================================================= */ | |
| @mixin abs-b-r($bottom: 0, $right: 0, $zIndex: 0) { | |
| position: absolute; | |
| bottom: $bottom; | |
| right: $right; | |
| z-index: $zIndex; | |
| } | |
| /* ================================================= */ | |
| @mixin abs-b-l($bottom: 0, $left: 0, $zIndex: 0) { | |
| position: absolute; | |
| bottom: $bottom; | |
| left: $left; | |
| z-index: $zIndex; | |
| } | |
| /* ================================================= */ | |
| @mixin pos-abs($top: 0, $right: 0, $bottom: 0, $left: 0) { | |
| position: absolute; | |
| top: $top; | |
| right: $right; | |
| bottom: $bottom; | |
| left: $left; | |
| } | |
| /* ================================================= */ | |
| @mixin make-arrow($dir, $size, $color) { | |
| width: 0; | |
| height: 0; | |
| @if ($dir == left) { | |
| border-top: $size solid transparent; | |
| border-bottom: $size solid transparent; | |
| border-right: $size solid $color; | |
| } @else if ($dir == right) { | |
| border-top: $size solid transparent; | |
| border-bottom: $size solid transparent; | |
| border-left: $size solid $color; | |
| } @else if ($dir == down) { | |
| border-left: $size solid transparent; | |
| border-right: $size solid transparent; | |
| border-top: $size solid $color; | |
| } @else { | |
| border-left: $size solid transparent; | |
| border-right: $size solid transparent; | |
| border-bottom: $size solid $color; | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin placeholder-prefixing { | |
| &.placeholder { | |
| @content; | |
| } | |
| &:-moz-placeholder { | |
| @content; | |
| } | |
| &::-moz-placeholder { | |
| @content; | |
| } | |
| &:-ms-input-placeholder { | |
| @content; | |
| } | |
| &::-webkit-input-placeholder { | |
| @content; | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin selection($bgColor, $textColor) { | |
| ::-moz-selection { | |
| background-color: $bgColor; | |
| color: $textColor; | |
| } | |
| ::selection { | |
| background-color: $bgColor; | |
| color: $textColor; | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin scrolling( | |
| $widthScrollbar: 0.4, | |
| $borderRadiusScrollbar: 0.3, | |
| $bgColorScrollbar, | |
| $bgColorThumb, | |
| $borderRadiusThumb: 0.3, | |
| $bgColorTrack: transparent, | |
| $bxShadow: true | |
| ) { | |
| body { | |
| margin: 0; | |
| overflow-x: hidden !important; | |
| &::-webkit-scrollbar { | |
| width: #{$widthScrollbar}rem; | |
| border-radius: #{$borderRadiusScrollbar}rem; | |
| background-color: $bgColorScrollbar !important; | |
| } | |
| &::-webkit-scrollbar-track { | |
| @if ($bxShadow == true) { | |
| box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
| background-color: transparent; | |
| } @else { | |
| box-shadow: none; | |
| background-color: $bgColorTrack; | |
| } | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| background-color: $bgColorThumb !important; | |
| border-radius: #{$borderRadiusThumb}rem; | |
| } | |
| } | |
| } | |
| /* ================================================= */ | |
| @mixin square-box($side) { | |
| $all-side-units: (#{'%'}, rem, px, em); | |
| $get-unit: unit($side); | |
| @if type-of($side) != number { | |
| @error "$side variable must be of number type."; | |
| } | |
| @if not list.index($all-side-units, $get-unit) { | |
| @error "#{$get-unit} dose not exist in #{$all-side-units}"; | |
| } | |
| width: #{$side}; | |
| height: #{$side}; | |
| } | |
| /* ================================================= */ | |
| @mixin circle($side) { | |
| $all-side-units: (#{'%'}, rem, px, em); | |
| $get-unit: unit($side); | |
| @if type-of($side) != number { | |
| @error "$side variable must be of number type."; | |
| } | |
| @if not list.index($all-side-units, $get-unit) { | |
| @error "#{$get-unit} dose not exist in #{$all-side-units}"; | |
| } | |
| width: #{$side}; | |
| height: #{$side}; | |
| border-radius: 50%; | |
| } | |
| /* ================================================= */ | |
| @mixin overlay($bgColor: black, $opacity: 4) { | |
| content: ""; | |
| width: 100%; | |
| height: 100%; | |
| @include abs-t-l(0, 0, -1); | |
| background-color: $bgColor; | |
| opacity: calc($opacity / 10); | |
| } | |
| /* ================================================= */ | |
| @mixin hero-img { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| @include prefixing(transform, translate(-50%, -50%)); | |
| } | |
| /* ================================================= */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment