A compilation of custom mixins and functions #website

mixins.scss

// Mixins
// -=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

// Breakpoint
// --------------------------------------------

// Usage:
// @include breakpoint (min-width, 300px) {
//   div { color:#000; }
// }
@mixin breakpoint($feature, $value) {
  @if $mq-support == true {
    @media #{$media} and ($feature: $value) {
      @content;
    }
  }
}

// Border radius
// --------------------------------------------

// Usage:
// .div {
//   @include border-radius(30px, right);
// }
@mixin border-radius($radius, $pos) {
  @if $pos == top {
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
  }

  @else if $pos == right {
    border-bottom-right-radius: $radius;
    border-top-right-radius: $radius;
  }

  @else if $pos == bottom {
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
  }

  @else if $pos == left {
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
  }
}

// Ellipsis
// --------------------------------------------

// Usage:
// .text {
//   @include ellipsis();
// }
@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
}

// Placeholder
// --------------------------------------------

// Usage:
// .box {
//   @include placeholder(
//     font-size: 14px;
//   );
// }
@mixin placeholder() {
  &::-webkit-input-placeholder { @content; }
  &:-moz-placeholder { @content; }
  &::-moz-placeholder { @content; }
  &:-ms-input-placeholder { @content; }
}

// Shapes
// --------------------------------------------

// Usage:
// .box {
//   @include square(20px);
// }
@mixin square($size) {
  width: $size;
  height: $size;
}

// Usage:
// .rounded {
//   @include circle(20px);
// }
@mixin circle($size) {
  @include square($size);
  border-radius: 100%;
}

// Triangle Borders
// --------------------------------------------

// Usage :
// .triangle-border {
//   @include triangle-border(red, 16px, right);
// }

@mixin triangle-border($color, $size, $pos) {
  border-style: solid;

  @if $pos == top {
    border-color: transparent transparent $color transparent;
    border-width: 0 $size $size $size;
  }

  @else if $pos == right {
    border-color: transparent transparent $color transparent;
    border-width: 0 $size $size $size;
  }

  @else if $pos == bottom {
    border-color: $color transparent transparent transparent;
    border-width: $size $size 0 $size;
  }

  @else if $pos == left {
    border-color: transparent $color transparent transparent ;
    border-width: $size $size  $size 0;
  }
}

// Rgba fallback
// --------------------------------------------

// Usage
// .top {
//   @include rgba-fallback(red, .1, border, top);
// }
// .color {
//   @include rgba-fallback(green, .1, color);
// }
// .bg {
//   @include rgba-fallback(blue, .1);
// }

@mixin rgba-fallback($color, $value, $type: null, $pos: null) {
  @if $type == color {
    color: lighten($color, $value);
    color: fade-out($color, $value);
  }

  @else if $type == border and $pos {
    border-#{$pos}-color: lighten($color, $value);
    border-#{$pos}-color: fade-out($color, $value);
  }

  @else if not $type and not $pos {
    background-color: lighten($color, $value);
    background-color: fade-out($color, $value);
  }
}

// Zindex management
// --------------------------------------------

// Usage:
// .class {
//   z-index: zindex(firstLayer);
// }
@function zindex($layer) {
  @if not map-has-key($zindex, $layer) {
    @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
  }

  @return map-get($zindex, $layer);
}