Opal-Estate-Pro/assets/scss/components/mixins/_functions.scss

// Functions
// --------------------------------------------------


// Position mixin
//==========================================
// @param [string] $position: position type
// @param [list] $args: list of offsets and values
//==========================================
@mixin position($position, $args) {
    @each $o in top right bottom left {
        $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;
}


// Absolute positioning mixin
//==========================================
// @param [list] $args: list of offsets and values
//==========================================
@mixin absolute($args) {
    @include position(absolute, $args);
}

// Arrow mixin
//==========================================
// @param [string] $direction: arrow direction
// @param [list] $position: list of offsets and values
// @param [color] $color (inherit): arrow color
// @param [number] $size (1em): arrow size
//==========================================
@mixin triangle($direction, $position, $color: currentColor, $size: 1em) {
    // Make sure the direction is valid
    @if not index(top right bottom left, $direction) {
        @warn "Direction must be one of top, right, bottom or left.";
    }

    @else {
        @include absolute($position); // Position
        @include square(0); // Size
        content: '';
        z-index: 2;

        border-#{opposite-position($direction)}: $size * 1.25 solid $color;
        $perpendicular-borders: $size solid transparent;

        @if $direction == top or $direction == bottom {
            border-left:   $perpendicular-borders;
            border-right:  $perpendicular-borders;
        }

        @else if $direction == right or $direction == left {
            border-bottom: $perpendicular-borders;
            border-top:    $perpendicular-borders;
        }
    }
}
 
// Font size - rem
//==========================================

@function parseInt($n) { /* 2 */
  @return $n / ($n * 0 + 1);
}

@mixin font-size($property, $values) {
  $px : (); /* 3 */
  $rem: (); /* 3 */

  @each $value in $values { /* 4 */

    @if $value == 0 or $value == auto { /* 5 */
      $px : append($px , $value);
      $rem: append($rem, $value);
    }

    @else {
      $unit: unit($value);    /* 6 */
      $val: parseInt($value); /* 6 */

      @if $unit == "px" {  /* 7 */
        $px : append($px,  $value);
        $rem: append($rem, ($val / 10 + rem));
      }

      @if $unit == "rem" { /* 7 */
        $px : append($px,  ($val * 10 + px));
        $rem: append($rem, $value);
      }
    }
  }

  @if $px == $rem {     /* 8 */
    #{$property}: $px;  /* 9 */
  } @else {
    #{$property}: $px;  /* 9 */
    #{$property}: $rem; /* 9 */
  }
}


//== Border
//==========================================
@mixin border( $coordinates: 0 0 0 0, $colour: $border-color, $style: solid ) {
    $top: nth($coordinates, 1);
    $right: nth($coordinates, 2);
    $bottom: nth($coordinates, 3);
    $left: nth($coordinates, 4);
    @if not(unitless($top)) {
        border-top: $top $style $colour;
    }
    @if not(unitless($right)) {
        border-right: $right $style $colour;
    }
    @if not(unitless($bottom)) {
        border-bottom: $bottom $style $colour;
    }
    @if not(unitless($left)) {
        border-left: $left $style $colour;
    }
}

// State and hover
//==========================================
@mixin state-hover-default($time, $background, $border-color){
    @include transition(all $time);
    &:hover{
      background: $background;
      border-color: $border-color;
    }
}

@mixin state-hover($time,$height,$color){
    @include box-shadow(inset 0 0 0 0 $color);
    @include transition(all $time cubic-bezier(0.8,0,0,1));
    &:hover{
        @include transition(all $time cubic-bezier(0.8,0,0,1));
        @include box-shadow(inset 0 (-$height) 0 0 $color);
    }
}

@mixin state-hover-2($background){
    position: relative;
    z-index: 10;
    &:after{
        content: "";
        display: block;
        z-index: -50;
        background-color: $background;
        visibility: hidden;
        @include scale(0);
        @include vertical-center(100%,100%);
        @include opacity(0);
        @include transition-delay(0.3s,0s);
        @include transition(transform 0s cubic-bezier(0.19,1,0.22,1) 0.3s,opacity 0.3s cubic-bezier(0.19,1,0.22,1));
    }
    &:hover{
        &:after{
            visibility: visible;
            @include scale(1);
            @include opacity(1);
            @include transition(transform 0.6s cubic-bezier(0.19,1,0.22,1),opacity 0.5s cubic-bezier(0.19,1,0.22,1));
        }
    }
}



//== Flexible Layout
//==========================================

@mixin flexbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

%flexbox {
    @include flexbox;
}

@mixin inline-flex {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

%inline-flex {
    @include inline-flex;
}



// Retina Sprite Mixins

@mixin retina-sprite-background($url,$position,$width,$height){
    background-repeat: no-repeat;
    background-image: url($url);
    background-position: $position;
    width:$width;
    height:$height;
}

/** elements mixins **/

@mixin border-exclude-top($border-deep, $border-type , $border-color ){
   border-bottom: $border-deep $border-type $border-color ;
   border-left: $border-deep $border-type $border-color ;
   border-right: $border-deep $border-type $border-color ;
}

@mixin border-exclude-bottom($border-deep, $border-type , $border-color ){
   border-top: $border-deep $border-type $border-color ;
   border-left: $border-deep $border-type $border-color ;
   border-right: $border-deep $border-type $border-color ;
}

@mixin border-exclude-left($border-deep, $border-type , $border-color ){
   border-top: $border-deep $border-type $border-color ;
   border-bottom: $border-deep $border-type $border-color ;
   border-right: $border-deep $border-type $border-color ;
}

@mixin border-exclude-right($border-deep, $border-type , $border-color ){
   border-top: $border-deep $border-type $border-color ;
   border-bottom: $border-deep $border-type $border-color ;
   border-left: $border-deep $border-type $border-color ;
}

@mixin rounded-corners ($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   -o-border-radius: $radius;
   border-radius: $radius;
}

@mixin clearboxstyle(){
   background: none;
   border:none;
}

@mixin clearfloat(){
   float: none;
   width: 100%;
}
 

@mixin transform-style($transform-style){
   -webkit-transform-style: $transform-style;                    
   -moz-transform-style: $transform-style;                    
   -ms-transform-style: $transform-style;                    
   -o-transform-style: $transform-style;                    
   transform-style: $transform-style;
}

@mixin backface-visibility($backface-visibility){
   backface-visibility: $backface-visibility;  /* W3C */
   -webkit-backface-visibility: $backface-visibility; /* Safari & Chrome */
   -moz-backface-visibility: $backface-visibility; /* Firefox */
   -ms-backface-visibility: $backface-visibility; /* Internet Explorer */
   -o-backface-visibility: $backface-visibility; /* Opera */
}

@mixin animation-theme($animation-duration, $animation-fill-mode, $animation-name){
   -webkit-animation-duration: $animation-duration; 
   -moz-animation-duration: $animation-duration; 
   -ms-animation-duration: $animation-duration; 
   -o-animation-duration: $animation-duration; 
   animation-duration: $animation-duration; 

   -webkit-animation-fill-mode: $animation-fill-mode;
   -moz-animation-fill-mode: $animation-fill-mode;
   -ms-animation-fill-mode: $animation-fill-mode;
   -o-animation-fill-mode: $animation-fill-mode;
   animation-fill-mode: $animation-fill-mode;

   -webkit-animation-name: $animation-name;
   -moz-animation-name: $animation-name; 
   -ms-animation-name: $animation-name; 
   -o-animation-name: $animation-name; 
   animation-name: $animation-name; 
}

@mixin perspective($perspective){
   -webkit-perspective: $perspective;
   -ms-perspective: $perspective;
   -moz-perspective: $perspective;
   -o-perspective: $perspective;
   perspective: $perspective;    
}

/**
* Transition-timing-function property@mixin 
*/
@mixin transition-timing-function($timing-function) {
   -moz-transition-timing-function: $timing-function;
   -o-transition-timing-function: $timing-function;
   -webkit-transition-timing-function: $timing-function;
   transition-timing-function: $timing-function;
}
 

@mixin appearance($appearance){
   appearance: $arguments;
   -moz-appearance: $arguments;
   -ms-appearance: $arguments;
   -o-appearance: $arguments;
   -webkit-appearance: $arguments; 
}


/*background RGBA
============================================*/
@mixin rgba($colour, $alpha)
{
   $alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
   $ieAlphaColour: argb($alphaColour);   
   background-color: $colour; 
   background-color: $alphaColour;       
   zoom: 1; 
   background-color: transparent\9;   
   
   
}


@mixin border-rgba($colour, $alpha)
{
   $alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
   $ieAlphaColour: argb($alphaColour);   
   border-color: $colour; 
   border-color: $alphaColour;       
   zoom: 1; 
   border-color: transparent\9;
  
}

//copyright

//sub heading (h2,h3) define
@mixin sub-heading {
  @include rtl-float-left();
  color: $block-heading-color;
  text-transform: uppercase;
  font: 600 14px/20px $font-custom;
  padding: 8px 15px;
  margin: 0 0 20px;
  min-width: 120px;
  position: relative;
  background: $theme-bg-default;
}
@mixin sub-heading-before {
  height: 0;
  width: 0;
  @include rtl-right(45%);
  top: 100%;
  content: "";
  position: absolute;
  border: 4px solid transparent;
  border-top-color: $theme-bg-default;
}

//background
@mixin background-hover {
  color: $base-text-color;
  background: rgba(228, 50, 40, 0.3);
}

/*inline-block
============================================*/

@mixin inline-block() {
   display: inline-block;
   *display: inline;
   zoom: 1;   
}

// Sizing shortcuts
@mixin size($width, $height) {
  width: $width;
  height: $height;
}



// Panels
// -------------------------
@mixin box-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
  border-color: $border;

  & > .box-heading {
    color: $heading-text-color;
    background-color: $heading-bg-color;
    border-color: $heading-border;

    +  .box-content {
      border-top-color: $border;
    }
  }
  & > .box-content{
      border-color:$border;
  }
  & > .box-footer {
    + .box-collapse .box-body {
      border-bottom-color: $border;
    }
  }
}
@mixin button-3d($suffixclass, $height3d ,$color3d){
  border: 0;
  @if ($suffixclass == "empty") {
      box-shadow: 0 $height3d $color3d inset;
      -o-box-shadow: 0 $height3d $color3d inset;
      -moz-box-shadow: 0 $height3d $color3d inset;
      -webkit-box-shadow: 0 $height3d $color3d inset;
      -ms-box-shadow: 0 $height3d $color3d inset;
  }
  @else {
  &.btn-#{$suffixclass}{
     box-shadow: 0 $height3d $color3d inset;
      -o-box-shadow: 0 $height3d $color3d inset;
      -moz-box-shadow: 0 $height3d $color3d inset;
      -webkit-box-shadow: 0 $height3d $color3d inset;
      -ms-box-shadow: 0 $height3d $color3d inset;
    }
  }
}

@mixin button-inverse( $suffixclass,  $color ,$background ){
 
  &.btn-#{$suffixclass}{
      &:hover{ 
        color:$color;
        background:transparent;
      }
  }
}

@mixin button-outline( $suffixclass, $color, $hovercolor ){
  background:transparent;
  &.btn-#{$suffixclass}{
      color:$color;
      &:hover{
          color:$hovercolor;
      }
  }
}
/// button variant outline
@mixin button-variant-outline($color, $background, $border, $colorhover, $bghover, $borderhover ) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:hover,
  &:focus,
  &:active,
  &.active {
    color: $colorhover;
    background-color: $bghover;
        border-color: $borderhover ;
  }
  .open & { &.dropdown-toggle {
    color: $colorhover;
    background-color: $bghover;
        border-color: $borderhover ;
  } }
  &:active,
  &.active {
    background-image: none;
  }
  .open & { &.dropdown-toggle {
    background-image: none;
  } }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: $background;
          border-color: $border;
    }
  }

  .badge {
    color: $background;
    background-color: $color;
  }
}
// icon variant inverse

@mixin icons-inverse( $suffixclass,  $color ,$background ){
 
  &.icons-#{$suffixclass}{
      &:hover{ 
        color:$color;
        background:transparent;
      }
  }
}
// icon variant outline

@mixin icons-outline( $suffixclass, $color, $hovercolor ){
  &.icons-#{$suffixclass}{
  background:transparent;
      color:$color;
      &:hover{
          color:$hovercolor;
      }
  }
}

// Block
// -------------------------
@mixin block-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
  
  border: solid 1px $border;

  & .#{$block-heading-selector} {
    + .#{$block-prefix}-collapse .#{$block-content-selector} {
      border-top-color: $border;
    }
  }
  & > .#{$block-prefix}-footer {
    + .#{$block-prefix}-collapse .#{$block-prefix}-body {
      border-bottom-color: $border;
    }
  }
}

/****/
/****/
@mixin container-layout-variant($color, $background, $linkcolor ){
    background: $background;
    color: $color;
    a{
      color:$linkcolor; 
      &:hover{
        color: $theme-color; 
      }  
    }         
}

@mixin widget-heading-style(){
     font-size: 36px;
      position: relative;
      text-align: center;
      padding-bottom: 35px;
      text-transform: uppercase;
      margin-top: 0;
      margin-bottom: 40px;
      &.style-2 {
        font-size: 20px;
        margin-bottom: 20px;
        @include rtl-text-align-left();
        padding-bottom: 0;
        .widget-heading {
          font-size: 20px;
          > span:first-child {
            position: relative;
            margin-bottom: 20px;
            padding-bottom: 15px;
            display: block;
            &:before {
              content: "";
              background-color: $theme-color;
              @include size(40px,1px);
              position: absolute;
              bottom: 0;
              @include rtl-left(0px);
            }
          }
          .description {
            font-size: 18px;
            font-family: $font-family-base;
            color: $black;
            line-height: 30px;
          }
        }
        &:before,
        &:after {
          content: none;
        }
        @media screen and (max-width: $screen-xs-max) {
          margin-top: 20px;
        }
      }
      &.style-3 {
        text-transform: none;
        padding-bottom: 0;
        .description {
          margin: 15px 23% 0;
        }
        &:before,
        &:after {
          content: none;
        }
      }
      &.style-4 {
        background: url('#{$image-theme-path}heading-title-bg.png') no-repeat center bottom;
        .widget-heading {
          color: $white;
          .description {
            &:after {
              content: none;
            }
          }
        }
        &:before {
          content: none;
        }
        &:after {
          background-color: transparent;
        }
      }
      &:before {
        content: "";
        width: 156px;
        height: 1px;
        background-color: #d3d3d3;
        position: absolute;
        bottom: 0;
        @include rtl-left(50%);
        @include rtl-margin-left(-78px);
      }
      &:after {
        content: "";
        border: 2px solid $theme-color;
        @include border-radius(2px);
        @include rotate(45deg);
        position: absolute;
        bottom:-5px;
        @include rtl-left(50%);
        @include square(12px);
        z-index: 1;
        @include rtl-margin-left(-6px);
        background-color: $white;
      }
      .widget-heading {
        margin: 0;
        font-size: 36px;
        @media screen and (max-width: 979px) {
          font-size: 30px;
        }
        @media screen and (max-width: $screen-xs-min) {
          font-size: 24px;
        }
      }
      .description, .widget-desc{
          display: block;
          font-size: 18px;
          font-style: italic;
          color: $light-gray;
          font-weight: 400;
          text-transform: none;
          font-family: $font-family-base;
          margin: 10px 0 0;
          line-height: 1.4;
          &:after {
            content: "";
            @include size(50px,1px);
            background-color: $body-bg;
            position: absolute;
            bottom: 0;
            @include rtl-left(50%);
            @include rtl-margin-left(-25px);
          }
      }
      @media screen and (max-width: 979px) {
        font-size: 30px;
        padding-bottom: 25px;
        margin-bottom: 30px;
      }
}

@mixin widget-specical-style(){
  margin-bottom: 40px;
  @include widget-heading-style();
  &.text-white {
    .widget-heading {
      color: $white;
      &:after {
        background-color: $white;
      }
    }    
  }
}