CSS: Mixins

Cross element

@mixin close($color, $size: 30px) {
  position: relative;
 
  display: inline-block;
  
  width: $size;
  height: $size;
  
  border: 0;
 
  background: none;
  opacity: 0.5;

  &:after,
  &:before {
    background-color: $color;
    position: absolute;
    display: block;
    top: 0;
    left: $size / 2;
    content: ' ';
    height: $size;
    width: 2px;
  }

  &:before {
    transform: rotate(45deg);
  }

  &:after {
    transform: rotate(-45deg);
  }

  &:hover {
    opacity: 1;
  }
}

Icomoon icon

@mixin icon($icon-name, $size: 14px, $color: text-white) {
  font-size: $size;
  color: $color;
  content: $icon-name;
  display: block;

  font-family: 'icomoon';
  font-weight: normal;
}

Triangle element

@mixin triangle($dir, $size, $color) {
  display: block;

  width: 0;
  height: 0;

  content: '';

  @if $dir == up {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $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-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right:$size solid $color;
  }
}