/home/smartbloks/.trash/bbp-core/assets/scss/abstracts/_mixins.scss
/*--------------------------------------
- Base
----------------------------------------*/
// Body Mixin
@mixin body($font-family: $font, $font-weight: 400, $color: $global-color, $font-size: $global-font-size, $line-height: 1.5) {
font-family: $font-family;
font-weight: $font-weight;
font-size: $font-size;
line-height: $line-height;
text-rendering: optimizeSpeed;
color: $color;
}
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);
@if $u1==$u2 and $u1==$u3 and $u1==$u4 {
& {
font-size: $min-font-size;
@media screen and (min-width: $min-vw) {
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
}
@media screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
}
}
//Before Icon mixin
@mixin before-icon($content, $color) {
content: $content;
font-family: IcoFont;
color: $color;
vertical-align: middle;
}
/**
* Convert font-size from px to rem with px fallback
*
* @param $size - the value in pixel you want to convert
*
* e.g. p {@include fontSize(12px);}
*
*/
// Mixin that will include the fall back px declaration as well as the calculated rem value.
@mixin fs-rem($size) {
font-size: rem($size);
}
// Font Size Class
@mixin font($size, $breakpoint: null, $pre: px) {
@if $breakpoint {
@include media-up(#{$breakpoint}) {
.font-#{$breakpoint}-#{$size} {
font-size: #{$size}#{$pre};
}
}
} @else {
.font-#{$size} {
font-size: #{$size}#{$pre};
}
}
}
//Line Height
@mixin line-height($size, $breakpoint: null, $pre: px) {
@if $breakpoint {
@include media-up(#{$breakpoint}) {
.line-height-#{$breakpoint}-#{$size} {
line-height: #{$size}#{$pre};
}
}
} @else {
.line-height-#{$size} {
line-height: #{$size}#{$pre};
}
}
}
// hr mixin
@mixin hr($bg: $global-color, $width: 50px, $height: 5px, $my: 50px, $mx: 0, $p: 0, $radius: 0) {
background: $bg;
width: $width;
height: $height;
margin: $my $mx;
padding: $p;
border: none;
border-radius: $radius;
opacity: 1;
}
@mixin media-up($name, $breakpoints: $breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-down($name, $breakpoints: $breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-between($lower, $upper, $breakpoints: $breakpoints) {
$min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);
@if $min !=null and $max !=null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max==null {
@include media-up($lower, $breakpoints) {
@content;
}
} @else if $min==null {
@include media-down($upper, $breakpoints) {
@content;
}
}
}
// For each breakpoint, define the maximum width of the container in a media query
@mixin container-max-widths($max-widths: $container-widths, $breakpoints: $breakpoints) {
@each $breakpoint,
$container-width in $max-widths {
@include media-up($breakpoint) {
max-width: $container-width;
}
}
}
/// Grid system
//
// Generate semantic grid columns with these mixins.
@mixin container($name: container, $gutter: $gutter-width) {
.#{$name} {
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
margin-right: auto;
margin-left: auto;
@include container-max-widths();
}
}
@mixin container-fluid($name: container-fluid, $gutter: $gutter-width) {
.#{$name} {
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
margin-right: auto;
margin-left: auto;
}
}
// Row
//
// Rows contain your columns.
@mixin row($name: row, $gutter: $gutter-width, $max-width: false) {
@if $max-width==true {
.#{$name} {
margin-right: auto;
margin-left: auto;
display: flex;
flex-flow: row wrap;
@include container-max-widths();
}
} @else {
.#{$name} {
display: flex;
flex-wrap: wrap;
margin-right: -$gutter / 2;
margin-left: -$gutter / 2;
}
}
}
@mixin column($size, $column: $columns) {
flex: 0 0 percentage($size / $column);
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage($size / $column);
}
@mixin col-offset($size, $columns: $columns) {
$num: $size / $columns;
margin-left: if($num==0, 0, percentage($num));
}
.col {
position: relative;
width: 100%;
padding-right: $gutter-width / 2;
padding-left: $gutter-width / 2;
}
@mixin col-ready($gutter: $gutter-width) {
@extend .col;
}
//Gird Columns Width Responsive
@mixin col($name: null, $columns: null, $breakpoint: null) {
@if $name==col {
@if ($breakpoint==sm, md, lg, xl, xxl) {
.#{$name}-#{$breakpoint}-#{$columns} {
@include col-ready();
@include media-up(#{$breakpoint}) {
@include column($columns);
}
}
} @else {
.#{$name}#{$columns} {
@include col-ready();
}
}
} @else {
.#{$name} {
@include col-ready();
}
.#{$breakpoint}-#{$columns} {
@include media-up(#{$breakpoint}) {
@include column($columns);
}
}
}
}
//Gird Columns Offset Width Responsive
@mixin offset($name, $columns, $breakpoint: null) {
@if ($breakpoint==sm, md, lg, xl, xxl) {
.#{$name}-#{$breakpoint}-#{$columns} {
@include media-up($breakpoint) {
@include col-offset($columns);
}
}
} @else {
.#{$name}-#{$columns} {
@include col-offset($columns);
}
}
}
// Mixins for controlling flex.
@mixin flex($name, $value, $breakpoint: null) {
@if $value==1 {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex: 1 1 0%;
}
}
} @else {
.#{$name} {
flex: 1 1 0%;
}
}
} @else if $value==auto {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex: 1 1 auto;
}
}
} @else {
.#{$name} {
flex: 1 1 auto;
}
}
} @else if $value==initial {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex: 0 1 auto;
}
}
} @else {
.#{$name} {
flex: 0 1 auto;
}
}
} @else {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex: none;
}
}
} @else {
.#{$name} {
flex: none;
}
}
}
}
// Controlling gutters between rows and columns.
@mixin gap($size, $position: x) {
@if $position==y {
row-gap: $size;
grid-row-gap: $size;
} @else {
gap: $size;
grid-gap: $size;
}
}
/*--------------------------------------
- Utilities
----------------------------------------*/
@mixin hover() {
&:hover {
@content;
}
}
@mixin focus() {
&:focus {
@content;
}
}
@mixin hover-focus() {
&:hover,
&:focus {
@content;
}
}
@mixin plain-hover-focus() {
&,
&:hover,
&:focus {
@content;
}
}
@mixin hover-focus-active() {
&:hover,
&:focus,
&:active {
@content;
}
}
@mixin before($content: null) {
@if $content {
&::before {
content: $content;
@content;
}
} @else {
&::before {
@content;
}
}
}
@mixin after($content: null) {
@if $content {
&::after {
content: $content;
@content;
}
} @else {
&::after {
@content;
}
}
}
@mixin before-after($content: null) {
@if $content {
&::before,
&::after {
content: $content;
@content;
}
} @else {
&::before,
&::after {
@content;
}
}
}
@mixin pseudo($args: top 0 left 0, $loca: before, $position: absolute, $content: "") {
@if ($loca==after) {
@include after($content) {
@if ($position==relative) {
@include relative($args);
@content;
} @else {
@include absolute($args);
@content;
}
}
} @else if ($loca==before-after) {
@include before-after($content) {
@if ($position==relative) {
@include relative($args);
@content;
} @else {
@include absolute($args);
@content;
}
}
} @else {
@include before($content) {
@if ($position==relative) {
@include relative($args);
@content;
} @else {
@include absolute($args);
@content;
}
}
}
}
//Create the mixin for theme colors
@mixin color($name, $color) {
// Define colors in your theme
$primary: $color;
$bg-color: $color;
// Add your Prefix classes name
.text-#{$name} {
color: $primary !important;
}
.bg-#{$name} {
background: $primary;
}
}
// Gradient Color Mixin
@mixin gradient($direction, $first, $last) {
background-color: $first;
background-image: linear-gradient($direction, $first 0%, $last 100%);
}
// Gradient Color Class Name with Mixin
@mixin gradient-color($class, $direction, $first, $last) {
.#{$class} {
@include gradient($direction, $first, $last);
}
}
// Mixins for controlling the direction of flex items.
@mixin flex-direction($name, $value, $breakpoint: null) {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex-direction: $value;
}
}
} @else {
.#{$name} {
flex-direction: $value;
}
}
}
// Mixins for controlling how flex items wrap.
@mixin flex-wrap($name, $value, $breakpoint: null) {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex-wrap: $value;
}
}
} @else {
.#{$name} {
flex-wrap: $value;
}
}
}
// Mixins for controlling flex.
@mixin flex($name, $value, $breakpoint: null) {
@if $value==1 {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex: 1 1 0%;
}
}
} @else {
.#{$name} {
flex: 1 1 0%;
}
}
} @else if $value==auto {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex: 1 1 auto;
}
}
} @else {
.#{$name} {
flex: 1 1 auto;
}
}
} @else if $value==initial {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex: 0 1 auto;
}
}
} @else {
.#{$name} {
flex: 0 1 auto;
}
}
} @else {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex: none;
}
}
} @else {
.#{$name} {
flex: none;
}
}
}
}
// Mixins for controlling how flex item grow.
@mixin flex-grow($name, $value, $breakpoint: null) {
@if $value==0 {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex-grow: 0;
}
}
} @else {
.#{$name} {
flex-grow: 0;
}
}
} @else {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex-grow: 1;
}
}
} @else {
.#{$name} {
flex-grow: 1;
}
}
}
}
// Mixins for controlling how flex item shrink.
@mixin flex-shrink($name, $value, $breakpoint: null) {
@if $value==0 {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex-shrink: 0;
}
}
} @else {
.#{$name} {
flex-shrink: 0;
}
}
} @else {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
flex-shrink: 1;
}
}
} @else {
.#{$name} {
flex-shrink: 1;
}
}
}
}
// The justify-content property.
@mixin justify-content($name, $value, $breakpoint: null) {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
justify-content: $value;
}
}
} @else {
.#{$name} {
justify-content: $value;
}
}
}
// The justify-items property.
@mixin justify-items($name, $value, $breakpoint: null) {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
justify-items: $value;
}
}
} @else {
.#{$name} {
justify-items: $value;
}
}
}
// The justify-self property.
@mixin justify-self($name, $value, $breakpoint: null) {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
justify-self: $value;
}
}
} @else {
.#{$name} {
justify-self: $value;
}
}
}
// The align-content property.
@mixin align-content($name, $value, $breakpoint: null) {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
align-content: $value;
}
}
} @else {
.#{$name} {
align-content: $value;
}
}
}
// The align-items property.
@mixin align-items($name, $value, $breakpoint: null) {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
align-items: $value;
}
}
} @else {
.#{$name} {
align-items: $value;
}
}
}
// The align-self property.
@mixin align-self($name, $value, $breakpoint: null) {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
align-self: $value;
}
}
} @else {
.#{$name} {
align-self: $value;
}
}
}
// The align-content property.
@mixin align-content($name, $value, $breakpoint: null) {
@if $breakpoint {
@include media-up($breakpoint) {
.#{$name} {
align-content: $value;
}
}
} @else {
.#{$name} {
align-content: $value;
}
}
}
// margin Name with Mixin
@mixin margin($name, $value) {
// Add your Prefix name
@if $name==mt {
@if $value==auto {
margin-top: #{$value};
} @else if $value==0 {
margin-top: #{$value};
} @else {
margin-top: #{$value};
}
} @else if $name==mb {
@if $value==auto {
margin-bottom: #{$value};
} @else if $value==0 {
margin-bottom: #{$value};
} @else {
margin-bottom: #{$value};
}
} @else if $name==ml {
@if $value==auto {
margin-left: #{$value};
} @else if $value==0 {
margin-left: #{$value};
} @else {
margin-left: #{$value};
}
} @else if $name==mr {
@if $value==auto {
margin-right: #{$value};
} @else if $value==0 {
margin-right: #{$value};
} @else {
margin-right: #{$value};
}
} @else if $name==mx {
@if $value==auto {
margin-left: #{$value};
margin-right: #{$value};
} @else if $value==0 {
margin-left: #{$value};
margin-right: #{$value};
} @else {
margin-left: #{$value};
margin-right: #{$value};
}
} @else if $name==my {
@if $value==auto {
margin-top: #{$value};
margin-bottom: #{$value};
} @else if $value==0 {
margin-top: #{$value};
margin-bottom: #{$value};
} @else {
margin-top: #{$value};
margin-bottom: #{$value};
}
} @else {
@if $value==auto {
margin: #{$value};
} @else if $value==0 {
margin: #{$value};
} @else {
margin: #{$value};
}
}
}
@mixin margin-rs($name, $breakpoint, $value) {
// Add your Prefix name
@if $name==mt {
@if $value==auto {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
}
}
} @else if $name==mb {
@if $value==auto {
@include media-up(#{$breakpoint}) {
margin-bottom: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
margin-bottom: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
margin-bottom: #{$value};
}
}
} @else if $name==ml {
@if $value==auto {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
}
}
} @else if $name==mr {
@if $value==auto {
@include media-up(#{$breakpoint}) {
margin-right: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
margin-right: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
margin-right: #{$value};
}
}
} @else if $name==mx {
@if $value==auto {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
margin-right: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
margin-right: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
margin-right: #{$value};
}
}
} @else if $name==my {
@if $value==auto {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
margin-bottom: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
margin-bottom: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
margin-bottom: #{$value};
}
}
} @else {
@if $value==auto {
@include media-up(#{$breakpoint}) {
margin: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
margin: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
margin: #{$value};
}
}
}
}
// margin Class Name with Mixin
@mixin margin-class($name, $property, $value, $pre: $active-prefix) {
// Add your Prefix classes name
@if $property==mt {
@if $value==auto {
.#{$name} {
margin-top: #{$value};
}
} @else if $value==0 {
.#{$name} {
margin-top: #{$value};
}
} @else {
.#{$name} {
margin-top: #{$value}#{$pre};
}
}
} @else if $property==mb {
@if $value==auto {
.#{$name} {
margin-bottom: #{$value};
}
} @else if $value==0 {
.#{$name} {
margin-bottom: #{$value};
}
} @else {
.#{$name} {
margin-bottom: #{$value}#{$pre};
}
}
} @else if $property==ml {
@if $value==auto {
.#{$name} {
margin-left: #{$value};
}
} @else if $value==0 {
.#{$name} {
margin-left: #{$value};
}
} @else {
.#{$name} {
margin-left: #{$value}#{$pre};
}
}
} @else if $property==mr {
@if $value==auto {
.#{$name} {
margin-right: #{$value};
}
} @else if $value==0 {
.#{$name} {
margin-right: #{$value};
}
} @else {
.#{$name} {
margin-right: #{$value}#{$pre};
}
}
} @else if $property==mx {
@if $value==auto {
.#{$name} {
margin-left: #{$value};
margin-right: #{$value};
}
} @else if $value==0 {
.#{$name} {
margin-left: #{$value};
margin-right: #{$value};
}
} @else {
.#{$name} {
margin-left: #{$value}#{$pre};
margin-right: #{$value}#{$pre};
}
}
} @else if $property==my {
@if $value==auto {
.#{$name} {
margin-top: #{$value};
margin-bottom: #{$value};
}
} @else if $value==0 {
.#{$name} {
margin-top: #{$value};
margin-bottom: #{$value};
}
} @else {
.#{$name} {
margin-top: #{$value}#{$pre};
margin-bottom: #{$value}#{$pre};
}
}
} @else {
@if $value==auto {
.#{$name} {
margin: #{$value};
}
} @else if $value==0 {
.#{$name} {
margin: #{$value};
}
} @else {
.#{$name} {
margin: #{$value}#{$pre};
}
}
}
}
// Responsive margin Class Name with Mixin
@mixin margin-class-rs($name, $property, $breakpoint, $value, $pre: $active-prefix) {
// Add your Prefix classe name
@if $property==mt {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-top: #{$value}#{$pre};
}
}
}
} @else if $property==mb {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-bottom: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-bottom: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-bottom: #{$value}#{$pre};
}
}
}
} @else if $property==ml {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-left: #{$value}#{$pre};
}
}
}
} @else if $property==pr {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-right: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-right: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-right: #{$value}#{$pre};
}
}
}
} @else if $property==mx {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
margin-right: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-left: #{$value};
margin-right: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-left: #{$value}#{$pre};
margin-right: #{$value}#{$pre};
}
}
}
} @else if $property==my {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
margin-bottom: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-top: #{$value};
margin-bottom: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin-top: #{$value}#{$pre};
margin-bottom: #{$value}#{$pre};
}
}
}
} @else {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
margin: #{$value}#{$pre};
}
}
}
}
}
// padding Name with Mixin
@mixin padding($name, $value) {
// Add your Prefix name
@if $name==pt {
@if $value==auto {
padding-top: #{$value};
} @else if $value==0 {
padding-top: #{$value};
} @else {
padding-top: #{$value};
}
} @else if $name==pb {
@if $value==auto {
padding-bottom: #{$value};
} @else if $value==0 {
padding-bottom: #{$value};
} @else {
padding-bottom: #{$value};
}
} @else if $name==pl {
@if $value==auto {
padding-left: #{$value};
} @else if $value==0 {
padding-left: #{$value};
} @else {
padding-left: #{$value};
}
} @else if $name==pr {
@if $value==auto {
padding-right: #{$value};
} @else if $value==0 {
padding-right: #{$value};
} @else {
padding-right: #{$value};
}
} @else if $name==px {
@if $value==auto {
padding-left: #{$value};
padding-right: #{$value};
} @else if $value==0 {
padding-left: #{$value};
padding-right: #{$value};
} @else {
padding-left: #{$value};
padding-right: #{$value};
}
} @else if $name==py {
@if $value==auto {
padding-top: #{$value};
padding-bottom: #{$value};
} @else if $value==0 {
padding-top: #{$value};
padding-bottom: #{$value};
} @else {
padding-top: #{$value};
padding-bottom: #{$value};
}
} @else {
@if $value==auto {
padding: #{$value};
} @else if $value==0 {
padding: #{$value};
} @else {
padding: #{$value};
}
}
}
@mixin padding-rs($name, $breakpoint, $value) {
// Add your Prefix name
@if $name==pt {
@if $value==auto {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
}
}
} @else if $name==pb {
@if $value==auto {
@include media-up(#{$breakpoint}) {
padding-bottom: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
padding-bottom: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
padding-bottom: #{$value};
}
}
} @else if $name==pl {
@if $value==auto {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
}
}
} @else if $name==pr {
@if $value==auto {
@include media-up(#{$breakpoint}) {
padding-right: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
padding-right: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
padding-right: #{$value};
}
}
} @else if $name==px {
@if $value==auto {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
padding-right: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
padding-right: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
padding-right: #{$value};
}
}
} @else if $name==py {
@if $value==auto {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
padding-bottom: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
padding-bottom: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
padding-bottom: #{$value};
}
}
} @else {
@if $value==auto {
@include media-up(#{$breakpoint}) {
padding: #{$value};
}
} @else if $value==0 {
@include media-up(#{$breakpoint}) {
padding: #{$value};
}
} @else {
@include media-up(#{$breakpoint}) {
padding: #{$value};
}
}
}
}
// padding Class Name with Mixin
@mixin padding-class($name, $property, $value, $pre: $active-prefix) {
// Add your Prefix classes name
@if $property==pt {
@if $value==auto {
.#{$name} {
padding-top: #{$value};
}
} @else if $value==0 {
.#{$name} {
padding-top: #{$value};
}
} @else {
.#{$name} {
padding-top: #{$value}#{$pre};
}
}
} @else if $property==pb {
@if $value==auto {
.#{$name} {
padding-bottom: #{$value};
}
} @else if $value==0 {
.#{$name} {
padding-bottom: #{$value};
}
} @else {
.#{$name} {
padding-bottom: #{$value}#{$pre};
}
}
} @else if $property==pl {
@if $value==auto {
.#{$name} {
padding-left: #{$value};
}
} @else if $value==0 {
.#{$name} {
padding-left: #{$value};
}
} @else {
.#{$name} {
padding-left: #{$value}#{$pre};
}
}
} @else if $property==pr {
@if $value==auto {
.#{$name} {
padding-right: #{$value};
}
} @else if $value==0 {
.#{$name} {
padding-right: #{$value};
}
} @else {
.#{$name} {
padding-right: #{$value}#{$pre};
}
}
} @else if $property==px {
@if $value==auto {
.#{$name} {
padding-left: #{$value};
padding-right: #{$value};
}
} @else if $value==0 {
.#{$name} {
padding-left: #{$value};
padding-right: #{$value};
}
} @else {
.#{$name} {
padding-left: #{$value}#{$pre};
padding-right: #{$value}#{$pre};
}
}
} @else if $property==py {
@if $value==auto {
.#{$name} {
padding-top: #{$value};
padding-bottom: #{$value};
}
} @else if $value==0 {
.#{$name} {
padding-top: #{$value};
padding-bottom: #{$value};
}
} @else {
.#{$name} {
padding-top: #{$value}#{$pre};
padding-bottom: #{$value}#{$pre};
}
}
} @else {
@if $value==auto {
.#{$name} {
padding: #{$value};
}
} @else if $value==0 {
.#{$name} {
padding: #{$value};
}
} @else {
.#{$name} {
padding: #{$value}#{$pre};
}
}
}
}
// Responsive padding Class Name with Mixin
@mixin padding-class-rs($name, $property, $breakpoint, $value, $pre: $active-prefix) {
// Add your Prefix classe name
@if $property==pt {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-top: #{$value}#{$pre};
}
}
}
} @else if $property==pb {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-bottom: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-bottom: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-bottom: #{$value}#{$pre};
}
}
}
} @else if $property==pl {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-left: #{$value}#{$pre};
}
}
}
} @else if $property==pr {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-right: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-right: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-right: #{$value}#{$pre};
}
}
}
} @else if $property==px {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
padding-right: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-left: #{$value};
padding-right: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-left: #{$value}#{$pre};
padding-right: #{$value}#{$pre};
}
}
}
} @else if $property==py {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
padding-bottom: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-top: #{$value};
padding-bottom: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding-top: #{$value}#{$pre};
padding-bottom: #{$value}#{$pre};
}
}
}
} @else {
@if $value==auto {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding: #{$value};
}
}
} @else if $value==0 {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding: #{$value};
}
}
} @else {
.#{$name} {
@include media-up(#{$breakpoint}) {
padding: #{$value}#{$pre};
}
}
}
}
}
// Border
@mixin border($type: null, $size: 1px, $style: solid, $color: $global-color) {
@if $type==top {
border#{-$type}: #{$size} #{$style} #{$color};
} @else if $type==bottom {
border#{-$type}: #{$size} #{$style} #{$color};
} @else if $type==left {
border#{-$type}: #{$size} #{$style} #{$color};
} @else if $type==right {
border#{-$type}: #{$size} #{$style} #{$color};
} @else if $type==by {
border-top: #{$size} #{$style} #{$color};
border-bottom: #{$size} #{$style} #{$color};
} @else if $type==bx {
border-left: #{$size} #{$style} #{$color};
border-right: #{$size} #{$style} #{$color};
} @else {
border: #{$size} #{$style} #{$color};
}
}
// Border
@mixin border-class($type: null, $size: 1px, $style: solid, $color: $global-color) {
// Add your Prefix classes name
@if $type==top {
.border-#{$type} {
border#{-$type}: #{$size} #{$style} #{$color};
}
} @else if $type==bottom {
.border-#{$type} {
border#{-$type}: #{$size} #{$style} #{$color};
}
} @else if $type==left {
.border-#{$type} {
border#{-$type}: #{$size} #{$style} #{$color};
}
} @else if $type==right {
.border-#{$type} {
border#{-$type}: #{$size} #{$style} #{$color};
}
} @else {
.border {
border: #{$size} #{$style} #{$color};
}
}
}
// Border
@mixin border-rs($breakpoint, $type: null, $size: 1px, $style: solid, $color: $global-color) {
// Add your Prefix classes name
@if $type==top {
.border-#{$breakpoint}-#{$type} {
@include media-up(#{$breakpoint}) {
border#{-$type}: #{$size} #{$style} #{$color};
}
}
} @else if $type==bottom {
.border-#{$breakpoint}-#{$type} {
@include media-up(#{$breakpoint}) {
border#{-$type}: #{$size} #{$style} #{$color};
}
}
} @else if $type==left {
.border-#{$breakpoint}-#{$type} {
@include media-up(#{$breakpoint}) {
border#{-$type}: #{$size} #{$style} #{$color};
}
}
} @else if $type==right {
.border-#{$breakpoint}-#{$type} {
@include media-up(#{$breakpoint}) {
border#{-$type}: #{$size} #{$style} #{$color};
}
}
} @else {
.border-#{$breakpoint} {
@include media-up(#{$breakpoint}) {
border: #{$size} #{$style} #{$color};
}
}
}
}
// Border Width
@mixin border-width($type: null, $size: 1px) {
@if $type==top {
border#{-$type}-width: #{$size};
} @else if $type==right {
border#{-$type}-width: #{$size};
} @else if $type==bottom {
border#{-$type}-width: #{$size};
} @else if $type==left {
border#{-$type}-width: #{$size};
} @else {
border: #{$size};
}
}
// Border Color
@mixin border-color($color: $global-color) {
border-color: #{$color};
}
// Border Style
@mixin border-style($style: solid) {
border-style: #{$style};
}
// Border Radius Mixin
@mixin radius($type: null, $size: 0) {
@if $type==top {
border#{-$type}-left-radius: #{$size};
border#{-$type}-right-radius: #{$size};
} @else if $type==right {
border-top-right-radius: #{$size};
border-bottom-right-radius: #{$size};
} @else if $type==bottom {
border#{-$type}-left-radius: #{$size};
border#{-$type}-right-radius: #{$size};
} @else if $type==left {
border-top-left-radius: #{$size};
border-bottom-left-radius: #{$size};
} @else {
border-radius: #{$size};
}
}
// Border Radius Class Mixin
@mixin radius-class($type: null, $size: 0, $num: null) {
@if $type==top {
@if $num {
.radius-#{$type}-#{$num} {
border#{-$type}-left-radius: #{$size};
border#{-$type}-right-radius: #{$size};
}
} @else {
.radius-#{$type} {
border#{-$type}-left-radius: #{$size};
border#{-$type}-right-radius: #{$size};
}
}
} @else if $type==right {
@if $num {
.radius-#{$type}-#{$num} {
border-top-right-radius: #{$size};
border-bottom-right-radius: #{$size};
}
} @else {
.radius-#{$type} {
border-top-right-radius: #{$size};
border-bottom-right-radius: #{$size};
}
}
} @else if $type==bottom {
@if $num {
.radius-#{$type}-#{$num} {
border#{-$type}-left-radius: #{$size};
border#{-$type}-right-radius: #{$size};
}
} @else {
.radius-#{$type} {
border#{-$type}-left-radius: #{$size};
border#{-$type}-right-radius: #{$size};
}
}
} @else if $type==left {
@if $num {
.radius-#{$type}-#{$num} {
border-top-left-radius: #{$size};
border-bottom-left-radius: #{$size};
}
} @else {
.radius-#{$type} {
border-top-left-radius: #{$size};
border-bottom-left-radius: #{$size};
}
}
} @else {
@if $num {
.radius-#{$num} {
border-radius: #{$size};
}
} @else {
.radius {
border-radius: #{$size};
}
}
}
}
//Display mixin
@mixin display($value) {
.d-#{$value} {
display: $value;
}
}
//Responsive Display Mixin
@mixin display-rs($breakpoint, $value) {
.d-#{$breakpoint}-#{$value} {
@include media-up(#{$breakpoint}) {
display: #{$value};
}
}
}
@mixin padding-divide($name, $value: 0, $device: x, $div: false) {
@if $device==y {
.#{$name} {
@if $div==true {
div + div {
@include padding(py, $value);
}
} @else {
li + li {
@include padding(py, $value);
}
}
}
} @else {
.#{$name} {
@if $div==true {
div + div {
@include padding(pl, $value);
}
} @else {
li + li {
@include padding(pl, $value);
}
}
}
}
}
@mixin padding-divide-rs($name, $value: 0, $breakpoint: null, $divide: x, $div: false) {
@if $divide==y {
.#{$name} {
@include media-up($breakpoint) {
@if $div==true {
div + div {
@include padding(py, $value);
}
} @else {
li + li {
@include padding(py, $value);
}
}
}
}
} @else {
.#{$name} {
@include media-up($breakpoint) {
@if $div==true {
div + div {
@include padding(pl, $value);
}
} @else {
li + li {
@include padding(pl, $value);
}
}
}
}
}
}
//Overlay Mixin
@mixin overlay($name, $width: 100%, $height: $width, $color: null, $direction: null, $gradient: null, $mode: null, $index: 999) {
.overlay {
overflow: hidden;
position: relative;
@include property;
}
@if $gradient {
.overlay-#{$name} {
&::before {
content: '';
@include absolute();
@include size($width, $height: $width);
@include property;
@include gradient($direction, $gradient);
@include overlay-mode($mode: $mode);
z-index: $index;
}
}
} @else {
.overlay-#{$name} {
&::before {
content: '';
@include absolute();
@include size($width, $height: $width);
@include property;
background: $color;
@include overlay-mode($mode: $mode);
z-index: $index;
}
}
}
}
//Overlay Opacity Mixin
@mixin overlay-opacity($name, $opacity: 1) {
.overlay-#{$name} {
&::before {
opacity: $opacity;
}
}
}
//Overlay Mode Mixin
@mixin overlay-mode($name: null, $mode: null) {
@if $name {
.overlay-#{$name} {
&::before {
mix-blend-mode: $mode;
}
}
} @else {
mix-blend-mode: $mode;
}
}
// Size
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
//Position mixin
@mixin position($position, $args) {
@each $o in top right bottom left inset {
$i: index($args, $o);
@if $i and $i+1 <=length($args) and type-of(nth($args, $i + 1))==number {
#{$o}: nth($args, $i + 1);
}
}
position: $position;
}
// Positioning helpers
@mixin absolute($args: '') {
@include position(absolute, $args);
}
@mixin fixed($args: '') {
@include position(fixed, $args);
}
@mixin relative($args: '') {
@include position(relative, $args);
}
// Position Top/Right/Bottom/Left Alignment
@mixin trbl($type, $value, $pre: null) {
@if $type==top {
.#{$type}-#{$value} {
top: #{$value}#{$pre};
}
} @else if $type==right {
.#{$type}-#{$value} {
right: #{$value}#{$pre};
}
} @else if $type==bottom {
.#{$type}-#{$value} {
bottom: #{$value}#{$pre};
}
} @else if $type==left {
.#{$type}-#{$value} {
left: #{$value}#{$pre};
}
}
}
// Position Top/Bottom/Left/Right Alignment
@mixin position-align($name, $position: absolute) {
@if $name==center {
@if $position==relative {
.inset-#{$name} {
@include relative(top 50% left 50%);
transform: translate(-50%, -50%);
}
} @else {
.inset-#{$name} {
@include absolute(top 50% left 50%);
transform: translate(-50%, -50%);
}
}
} @else if $name==tl-center {
@if $position==relative {
.#{$name} {
@include relative(top 50% left 0);
transform: translateY(-50%);
}
} @else {
.#{$name} {
@include absolute(top 50% left 0);
transform: translateY(-50%);
}
}
} @else if $name==tr-center {
@if $position==relative {
.#{$name} {
@include relative(top 50% right 0);
transform: translateY(-50%);
}
} @else {
.#{$name} {
@include absolute(top 50% right 0);
transform: translateY(-50%);
}
}
} @else if $name==top-right {
@if $position==relative {
.#{$name} {
@include relative(top 0 right 0);
}
} @else {
.#{$name} {
@include absolute(top 0 right 0);
}
}
} @else if $name==bl-center {
@if $position==relative {
.#{$name} {
@include relative(bottom 0 left 50%);
transform: translateY(-50%);
}
} @else {
.#{$name} {
@include absolute(bottom 0 left 50%);
transform: translateX(-50%);
}
}
} @else if $name==bottom-left {
@if $position==relative {
.#{$name} {
@include relative(bottom 0 left 0);
}
} @else {
.#{$name} {
@include relative(bottom 0 left 0);
}
}
} @else if $name==bottom-right {
@if $position==relative {
.#{$name} {
@include relative(bottom 0 right 0);
}
} @else {
.#{$name} {
@include relative(bottom 0 right 0);
}
}
}
}
// Box Shadow Mixin
@mixin shadow($x: 0, $y: 0, $b: 0, $color: $black, $opacity: 1) {
-webkit-box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);
-moz-box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);
box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);
}
//Text mixin
@mixin text-align($value: left, $breakpoint: null, $name: null) {
@if $name {
@if $breakpoint {
.#{$name} {
@include media-up(#{$breakpoint}) {
text-align: $value;
}
}
} @else {
.#{$name} {
text-align: $value;
}
}
} @else {
@if $breakpoint {
.text-#{$breakpoint}-#{$value} {
@include media-up(#{$breakpoint}) {
text-align: $value;
}
}
} @else {
.text-#{$value} {
text-align: $value;
}
}
}
}
// prefix declarations
@mixin prefixed($property, $value) {
@if $webkit==true {
-webkit-#{$property}: #{$value};
}
@if $moz==true {
-moz-#{$property}: #{$value};
}
@if $ms==true {
-ms-#{$property}: #{$value};
}
@if $o==true {
-o-#{$property}: #{$value};
}
#{$property}: #{$value};
}
// prefix keyframes
@mixin keyframes($name) {
@if $webkit==true {
@-webkit-keyframes #{$name} {
@content;
}
}
@if $moz==true {
@-moz-keyframes #{$name} {
@content;
}
}
@if $ms==true {
@-ms-keyframes #{$name} {
@content;
}
}
@if $o==true {
@-o-keyframes #{$name} {
@content;
}
}
@keyframes #{$name} {
@content;
}
}
@mixin property($value: 0.3s) {
// Improve performance on mobile/tablet devices
// Perspective reduces blurriness of text in Chrome
@include prefixed(transition, #{$value} ease-out);
}
@mixin transform($name: translate, $value: 0) {
// Improve performance on mobile/tablet devices
// Perspective reduces blurriness of text in Chrome
@include prefixed(transform, #{$name}(#{$value}));
}
// --------------------------------------
// - Component
// ----------------------------------------
// CSS Triangle
@mixin triangle($direction: top, $width: 50px, $height: $width, $color: $global-color) {
$half: $width / 2;
@if ( $direction == top ) {
width: 0;
height: 0;
border-style: solid;
border-width: 0 $half $height $half;
border-color: transparent transparent $color transparent;
display: block;
}
@if ( $direction == right ) {
width: 0;
height: 0;
border-style: solid;
border-width: $half 0 $half $height;
border-color: transparent transparent transparent $color;
display: block;
}
@if ($direction==bottom) {
width: 0;
height: 0;
border-style: solid;
border-width: $height $half 0 $half;
border-color: $color transparent transparent transparent;
display: block;
}
@if ($direction==left) {
width: 0;
height: 0;
border-style: solid;
border-width: $half $height $half 0;
border-color: transparent $color transparent transparent;
display: block;
}
@if ($direction==top-left) {
width: 0;
height: 0;
border-style: solid;
border-width: $width $width 0 0;
border-color: $color transparent transparent transparent;
display: block;
}
@if ($direction==top-right) {
width: 0;
height: 0;
border-style: solid;
border-width: 0 $width $width 0;
border-color: transparent $color transparent transparent;
display: block;
}
@if ($direction==bottom-left) {
width: 0;
height: 0;
border-style: solid;
border-width: $width 0 0 $width;
border-color: transparent transparent transparent $color;
display: block;
}
@if ($direction==bottom-right) {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 $width $width;
border-color: transparent transparent $color transparent;
display: block;
}
}
// Nav Menu Mixin
@mixin nav($li: inline-block, $position: relative, $ff: $font, $fs: 1rem, $fw: 400, $color: $global-color, $bg: transparent, $tt: capitalize, $td: none, $py: 0.625rem, $px: .5rem, $pt: null, $pr: null, $pb: null, $pl: null, $my: null, $mx: null, $mt: null, $mr: null, $mb: null, $ml: null, $display: block, $index: 99, $h-color: $color, $h-bg: $bg, $h-fw: null, $h-py: $py, $h-px: $px, $h-pt: $pt, $h-pr: $pr, $h-pb: $pb, $h-pl: $pl, $h-my: null, $h-mx: null, $h-mt: $mt, $h-mr: $mr, $h-mb: $mb, $h-ml: $ml, $h-td: none) {
ul {
margin: 0;
}
li {
display: $li;
a {
position: $position;
font-family: $ff;
font-size: $fs;
font-weight: $fw;
color: $color;
background: $bg;
text-transform: $tt;
text-decoration: $td;
padding: $py $px;
@if ($pt $pr $pb $pl) {
padding-top: $pt;
padding-right: $pr;
padding-bottom: $pb;
padding-left: $pl;
}
margin: $my $mx;
@if ($mt $mr $mb $ml) {
margin-top: $mt;
margin-right: $mr;
margin-bottom: $mb;
margin-left: $ml;
}
display: $display;
z-index: $index;
@if $h-color {
@include hover {
color: $h-color;
background: $h-bg;
font-weight: $h-fw;
padding: $h-py $h-px;
@if ($h-pt $h-pr $h-pb $h-pl) {
padding-top: $h-pt;
padding-right: $h-pr;
padding-bottom: $h-pb;
padding-left: $h-pl;
}
margin: $h-my $h-mx;
@if ($h-mt $h-mr $h-mb $h-ml) {
margin-top: $h-mt;
margin-right: $h-mr;
margin-bottom: $h-mb;
margin-left: $h-ml;
}
text-decoration: $h-td;
}
}
}
}
}
// Nav Tabs Mixin
@mixin nav-tabs($name, $ff: $font, $fw: 400, $fs: 16px, $lh: null, $color: $global-color, $bg: null, $tt: capitalize, $p-name: null, $p-value:null, $m-name: null, $m-value:null, $h-color: null, $h-bg: null, $breakpoint: null, $b-fs: null, $b-p-name: null, $b-p-value:null, $b-m-name: null, $b-m-value:null) {
.#{$name} {
display: block;
font-family: $ff;
font-weight: $fw;
font-size: $fs;
line-height: $lh;
color: $color;
text-transform: $tt;
@include padding($p-name, $p-value);
@include margin($m-name, $m-value);
@if $breakpoint {
@include media-up($breakpoint) {
font-size: $b-fs;
@include padding($b-p-name, $b-p-value);
@include margin($b-m-name, $b-m-value);
}
}
&:hover {
color: $h-color;
background: $h-bg;
}
// Disabled state lightens text
&.disabled {
color: $nav-link-disabled-color;
pointer-events: none;
cursor: default;
}
}
}
// Button mixin
@mixin btn($fs: var(--btn-fs), $ff: var(--btn-ff), $fw: var(--fw-400), $lh: 1.5, $tt: capitalize, $td: none, $py: var(--btn-py), $px: var(--btn-px), $my: var(--btn-mx), $mx: var(--btn-mx), $bg: var(--btn-bg), $border-width: var(--border-width), $border-style: var(--border-style), $border-color: $bg, $radius: var(--btn-radius, var(--radius)), $display: inline-block, $position: relative) {
position: $position;
font-family: $ff;
font-size: $fs;
font-weight: $fw;
line-height: $lh;
background: var(--btn-bg);
color: var(--btn-clr);
border: var(--btn-bw, #{$border-width}) var(--btn-bs, #{$border-style}) var(--btn-bc, #{$border-color});
text-transform: $tt;
text-decoration: $td;
border-radius: $radius;
padding: $py $px;
margin: $my $mx;
display: $display;
overflow: hidden;
text-align: center;
cursor: pointer;
@include property;
}
// Button Color
@mixin btn-color($bg: var(--clr-black), $color: var(--clr-white), $border-color: $bg, $h-color: $bg, $h-bg: transparent, $h-border-color: $h-color, $f-width: 0.4rem, $f-color: #000000, $f-opacity: 0.25) {
--btn-bg: #{$bg};
--btn-clr: #{$color};
--btn-bc: #{$border-color};
@if $h-bg {
@include hover {
--btn-clr: #{$h-color};
--btn-bg: #{$h-bg};
--btn-bc: #{$h-border-color};
}
}
@include focus {
outline: 0;
box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);
}
}
//Button hover color
@mixin btn-hover($h-color: var(--clr-black), $h-bg: transparent, $h-border-color: $h-color, $f-width: 0.4rem, $f-color: #000000, $f-opacity: 0.25) {
@if $h-bg {
@include hover {
--btn-clr: #{$h-color};
--btn-bg: #{$h-bg};
--btn-bc: #{$h-border-color};
}
}
@include focus {
outline: 0;
box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);
}
}
@mixin btn-outline($color: var(--btn-clr), $h-color: var(--clr-white), $h-bg: $color, $border-color: $color, $h-border-color: $h-bg, $f-width: 0.4rem, $f-color: $color, $f-opacity: 0.5) {
--btn-clr: #{$color};
--btn-bc: #{$border-color};
@include hover {
--btn-clr: #{$h-color};
--btn-bg: #{$h-bg};
--btn-bc: #{$h-border-color};
}
@include focus {
outline: 0;
box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);
}
}
// Form Input mixin
@mixin form-input($ff: $font, $fs: inherit, $fw: null, $lh: null, $color: $global-color, $bg: transparent, $opacity: 1, $tt: capitalize, $py: 1rem, $px: 1.25rem, $my: 0, $mx: 0, $width: 100%, $max-width: null, $height: auto, $border-type: null, $border-size: 1px, $border-style: solid, $border-color: $global-color, $radius-type: null, $radius-size: 0, $shadow: null, $focus: false, $f-fw: null, $f-color: $color, $f-bg: null, $f-opacity: 1, $f-border-type: null, $f-border-size: $border-size, $f-border-style: $border-style, $f-border-color: $black, $f-radius-type: null, $f-radius-size: null, $f-shadow: null) {
font-family: $ff;
font-size: $fs;
font-weight: $fw;
line-height: $lh;
color: rgba($color, $opacity);
background: $bg;
text-transform: $tt;
padding: $py $px;
margin: $my $mx;
@include size($width, $height);
max-width: $max-width;
@include border($border-type, $border-size, $border-style, $border-color);
@include radius($radius-type, $radius-size);
box-shadow: $shadow;
@include property;
@if $focus==true {
&:focus {
outline: none;
font-weight: $f-fw;
color: rgba($f-color, $f-opacity);
background: $f-bg;
@include border($f-border-type, $f-border-size, $f-border-style, $f-border-color);
@include radius($f-radius-type, $f-radius-size);
box-shadow: $f-shadow;
}
} @else {
@include focus {
outline: none;
}
}
}
// Form Textarea mixin
@mixin textarea($fs: null, $fw: null, $lh: null, $color: $global-color, $bg: transparent, $opacity: 1, $tt: capitalize, $py: 15px, $px: 20px, $my: 0.9375rem, $mx: 0, $width: 100%, $max-width: null, $height: auto, $border-type: null, $border-size: 1px, $border-style: solid, $border-color: transparent, $radius-type: null, $radius-size: 0, $shadow: null, $focus: false, $f-fw: null, $f-color: $color, $f-opacity: 1, $f-border-type: null, $f-border-size: $border-size, $f-border-style: $border-style, $f-border-color: $border-color, $f-radius-type: null, $f-radius-size: null, $f-shadow: null) {
font-size: $fs;
font-weight: $fw;
line-height: $lh;
padding: $py $px;
margin: $my $mx;
color: rgba($color, $opacity);
background: $bg;
text-transform: $tt;
@include size($width, $height);
max-width: $max-width;
@include border($border-type, $border-size, $border-style, $border-color);
@include radius($radius-type, $radius-size);
box-shadow: $shadow;
@include property;
@if $focus==true {
&:focus {
font-weight: $f-fw;
color: rgba($f-color, $f-opacity);
@include border($f-border-type, $f-border-size, $f-border-style, $f-border-color);
@include radius($f-radius-type, $f-radius-size);
box-shadow: $f-shadow;
}
}
}
// Dropdown Menu Mixin
@mixin dropdown-menu($position:top 100% left 0, $width: 100%, $max-width: null, $padding: 15px, $m-name: mx, $m-value: auto, $fs: 16px, $a-color: $global-color, $a-padding: 0.625rem, $a-margin: 5px, $align: left, $index: 99, $radius: null, $shadow: null, $hover-bg: $black, $hover-color: $white) {
@include absolute($position);
width: $width;
@if $max-width {
max-width: $max-width;
@include margin($m-name, $m-value);
}
padding: $padding;
text-align: $align;
z-index: $index;
border-radius: $radius;
box-shadow: $shadow;
opacity: 0;
visibility: hidden;
li {
display: block;
a {
color: $a-color;
font-size: $fs;
border-radius: $radius;
padding: $a-padding;
margin-bottom: $a-margin;
display: block;
&:hover {
background: $hover-bg;
color: $hover-color;
}
}
}
}
// Social Link
@mixin social($name, $display: inline-block, $m-type: ml, $m-size: .75rem, $before: false, $divide-li: false, $before-content: '', $position: null, $before-width: 1px, $before-height: 20px, $before-bg: $global-color, $fs: 20px, $bg: transparent, $color: $global-color, $width: null, $height: $width, $lh: $width, $b-type: null, $b-size: 1px, $b-style: solid, $b-color: transparent, $radius: null, $p-name: null, $p-value: null, $shadow-x: null, $shadow-y: null, $shadow-b: null, $shadow-color: $color, $shadow-opacity: 1, $h-bg: null, $h-color: $color, $hb-type: $b-type, $hb-size: $b-size, $hb-style: $b-style, $hb-color: $b-color, $hs-x: null, $hs-y: null, $hs-b: null, $hs-color: $color, $hs-opacity: 1) {
.#{$name} {
li {
+ li {
@include margin($m-type, $m-size);
}
position: relative;
@if $display==inline-flex {
display: inline-flex;
flex-wrap: wrap;
} @else {
display: $display;
}
@if $before==true {
@if $divide-li==true {
& + li {
&::before {
content: $before-content;
@include absolute($position);
@include size($before-width, $before-height);
background: $before-bg;
}
}
} @else {
&::before {
content: $before-content;
@include absolute($position);
@include size($before-width, $before-height);
background: $before-bg;
}
}
}
a {
font-size: $fs;
line-height: $lh;
background: $bg;
color: $color;
display: block;
text-align: center;
@include size($width, $height);
@include border($b-type, $b-size, $b-style, $b-color);
@include radius($size: $radius);
@include property;
@if $p-name {
@include padding($p-name, $p-value);
}
@if $shadow-color==true {
@include shadow($shadow-x, $shadow-y, $shadow-b, $shadow-color, $shadow-opacity);
}
@if $h-bg {
@include hover {
background: $h-bg;
color: $h-color;
@if $hb-color {
@include border($hb-type, $hb-size, $hb-style, $hb-color);
}
@if $hs-color {
@include shadow($hs-x, $hs-y, $hs-b, $hs-color, $hs-opacity);
}
}
} @else {
@include hover {
color: $h-color;
}
}
}
}
}
}
//Owl Carousel Nav
@mixin owl-nav($name: null, $fs: 20px, $bg: transparent, $color: $global-color, $position: null, $width: 50px, $height: $width, $lh: null, $radius: 0, $border: 2px solid $global-color, $transform: null, $p: 0, $owl-prev-left: null, $owl-prev-right: null, $owl-next-left: null, $owl-next-right: null, $h-bg: null, $h-color: null, $h-border: null) {
@if $name {
.#{$name} {
button {
@include absolute($position);
@include size($width, $height);
font: inherit;
font-size: $fs;
background: $bg;
color: $color;
line-height: $lh;
border-radius: $radius;
border: $border;
transform: $transform;
padding: $p;
cursor: pointer;
@include property;
&.owl-prev {
left: $owl-prev-left;
right: $owl-prev-right;
}
&.owl-next {
left: $owl-next-left;
right: $owl-next-right;
}
&:focus {
outline: none;
}
&:hover {
background: $h-bg;
color: $h-color;
border: $h-border;
}
}
}
} @else {
.owl-nav {
button {
@include absolute($position);
@include size($width, $height);
font: inherit;
font-size: $fs;
background: $bg;
color: $color;
line-height: $lh;
border-radius: $radius;
border: $border;
transform: $transform;
padding: $p;
cursor: pointer;
@include property;
&.owl-prev {
left: $owl-prev-left;
right: $owl-prev-right;
}
&.owl-next {
left: $owl-next-left;
right: $owl-next-right;
}
&:focus {
outline: none;
}
&:hover {
background: $h-bg;
color: $h-color;
border: $h-border;
}
}
}
}
}
// OWl Carousel Dots
@mixin owl-dots($dots-position: left 50% bottom 0, $translateX: -50%, $translateY: -50%, $width: 8px, $height: $width, $display: inline-block, $text-center: center, $bg: $global-color, $border-size: 1px, $border-style: solid, $border-color: transparent, $radius-type: null, $radius-size: 50%, $p-name: null, $p-value: .25rem, $m-name: ml, $m-value: .5rem, $before: false, $b-content: '', $b-position: left -9px top -9px, $b-width: 25px, $b-height: $b-width, $b-radius-type: null, $b-radius-size: 50%, $b-border: 1px solid $global-color, $active: true, $a-width: $width, $a-height: $height, $a-bg: $bg, $a-border-size: 1px, $a-border-style: solid, $a-border-color: transparent, $active-before: false, $ab-content: '', $ab-position: left -9px top -9px, $ab-width: 25px, $ab-height: $ab-width, $ab-border: 2px solid $global-color, $ab-radius-type: null, $ab-radius-size: 50%) {
@include absolute($dots-position);
text-align: $text-center;
@if $translateY==true {
transform: translateY($translateY);
} @else {
transform: translateX($translateX);
}
button {
position: relative;
@include size($width, $height);
display: $display;
background: $bg;
@include border(null, $border-size, $border-style, $border-color);
@include radius($radius-type, $radius-size);
@include padding($p-name, $p-value);
@include margin($m-name, $m-value);
@if $before==true {
&::before {
content: $b-content;
@include absolute($b-position);
@include size($b-width, $b-height);
@include radius($b-radius-type, $b-radius-size);
border: $b-border;
}
}
@if $active==true {
&.active {
@include size($a-width, $a-height);
background: $a-bg;
@include border(null, $a-border-size, $a-border-style, $a-border-color);
@if $active-before==true {
&::before {
content: $ab-content;
@include absolute($ab-position);
@include size($ab-width, $ab-height);
@include radius($ab-radius-type, $ab-radius-size);
border: $ab-border;
}
}
}
}
@include focus {
outline: none;
}
}
}
// Footer Menu
@mixin footer-menu($size: 18px, $color: $black, $padding: 10px, $opacity: 1, $display: block, $tt: capitalize, $td: none, $h-color: $black, $h-td: none) {
li {
a {
font-size: $size;
color: $color;
opacity: $opacity;
padding-bottom: $padding;
display: $display;
text-transform: $tt;
text-decoration: $td;
@include hover {
color: $h-color;
text-decoration: $h-td;
}
}
}
}
// Footer Widget
@mixin footer-widget($value, $weight: 600, $prefix: top, $padding: 0) {
h3 {
font-size: $value;
padding-#{$prefix}: $padding;
font-weight: $weight;
}
@include footer-menu;
}
//Extra Small Screen Only
@mixin xs {
@media screen and (max-width: 767px) {
@content;
}
}
//Small Screen
@mixin xsm {
@media screen and (min-width: 425px) {
@content;
}
}
//Small Screen
@mixin sm {
@media screen and (min-width: 576px) {
@content;
}
}
//Medium Screen
@mixin md {
@media screen and (min-width: 768px) {
@content;
}
}
//Large Screen
@mixin lg {
@media screen and (min-width: 992px) {
@content;
}
}
//Extra Large Screen
@mixin xl {
@media screen and (min-width: 1200px) {
@content;
}
}
//Desktop Screen
@mixin xxl {
@media screen and (min-width: 1441px) {
@content;
}
}