Mixins SCSS

README.md

SASS MIXINS

https://web-design-weekly.com/2013/05/12/handy-sass-mixins/

_arrow.scss

@mixin arrow($direction: left, $color: black, $height: 2rem, $width: 1rem, $hoverColor: black ){
  display: block;
  width: 0;
  height: 0;

  @if $direction==left {
    border-top: $height/2 transparent solid;
    border-right: $width $color solid;
    border-bottom: $height/2 transparent solid;
    border-left: 0 transparent solid;
    &:hover, &:active {
      border-right-color: $hoverColor;
    }
  }

  @if $direction==right {
    border-top: $height/2 transparent solid;
    border-right: 0 transparent solid;
    border-bottom: $height/2 transparent solid;
    border-left: $width $color solid;
    &:hover, &:active {
      border-left-color: $hoverColor;
    }
  }

  @if $direction==top {
    border-top: 0 transparent solid;
    border-right: $width/2 transparent solid;
    border-bottom: $height $color solid;
    border-left: $width/2 transparent solid;
    &:hover, &:active {
      border-bottom-color: $hoverColor;
    }
  }

  @if $direction==bottom {
    border-top: $height $color solid;
    border-right: $width/2 transparent solid;
    border-bottom: 0 transparent solid;
    border-left: $width/2 transparent solid;
    &:hover, &:active {
      border-top-color: $hoverColor;
    }
  }
}

_basics.scss

/**
 * Box Sizing
 */
@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model; // Safari <= 5
     -moz-box-sizing: $box-model; // Firefox <= 19
          box-sizing: $box-model;
}

_inside-border.scss

/**
 * MIXINS
 */

@mixin inside-border($border-color: #fff, $inner-border-width: 0.5rem) {
  padding: $inner-border-width + 0.5rem;

  &:before {
   content: " ";
   position: absolute;
   z-index: 0;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   border: $inner-border-width solid $border-color;
 }
}

_mixins.scss

@import "./_arrow.scss";
@import "./_inside-border.scss";
@import "./_outer-three-dimensional.scss";

_outer-three-dimensional.scss

@import "/node_modules/bourbon/app/assets/stylesheets/bourbon";

@mixin outer-three-dimensional($outer-border-width: 0.2rem, $border-color: #000) {
  border: solid $border-color $outer-border-width;

  &:after {
    content: " ";
    position: absolute;
    z-index: 0;

    height: 50%;
    margin: 0 auto;
    display: block;
    top: 98%;
    left: 0;
    width: 100%;
    background-color: $border-color;
    @include transform(perspective(600px) scale3d(.98, 1, 1) translateY(-30%) rotateX(-75deg));
  }
}

opacity-ie8.scss

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

text.scss

/**
  Cut long text with ellipsis
*/
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}