mixins.scss

/* Example:
 *   @font-face
 *     @include l-font-face('Rubik', Rubik-Light, 300) */

@mixin l-font-face($name, $filename, $font-weight) {
  font-family: $name;
  src: url("/fonts/" + $filename + ".woff") format("woff");
  font-weight: $font-weight;
  font-style: normal;
}

/* Example:
 *   .input
 *     @include l-placeholder()
 *       color: $l-color-gray-2 */

@mixin l-placeholder {
  &::-webkit-input-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

/* Adds '...' to multi-line block when overfilled
 * Example:
 *   div
 *     @include l-text-ellipsis-multiline(2, 18px) */

@mixin l-text-ellipsis-multiline($visible-lines-count, $line-height) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  line-height: $line-height;
  height: $line-height * $visible-lines-count;
  -webkit-line-clamp: $visible-lines-count;
  -webkit-box-orient: vertical;
}

/* Applies the same style for normal, :hover, :focus and :active states of a link or a button:
 * Example:
 *   @include l-normal-hover-focus-active()
 *     color: $l-color-gray-3 */

@mixin l-normal-hover-focus-active {
  &,
  &:hover,
  &:focus,
  &:active {
    @content;
  }
}

/* Applies media-queries using bootstrap-like syntax
 * Examples:
 *
 *   div
 *     @include l-media(xs,xs)
 *       font-size: 12px           <-- only works for xs screen sizes (from 0 to 768px)
 *
 *   div
 *     @include l-media(xs,md)
 *       color: red                <-- works on screen sizes from xs to md (xs, sm, md)
 *
 *   div
 *     @include l-media(md,lg)
 *       max-width: 980px          <-- works on md and lg screen sizes
 *
 *   div
 *     @include l-media(xs,md)     <-- combining multiple conditions
 *       height: 80px
 *     @include l-media(sm,lg)
 *       padding-top: 0
 *
 *   div
 *     @include l-media(700px,md)  <-- also works with px values
 *       border-width: 2px
 *     @include l-media(200px,400px)
 *       border: none */

@mixin l-media($screen-size-from, $screen-size-to) {
  @if $screen-size-from == lg {
    @media (min-width: $screen-lg) {
      & {
        @content;
      }
    }
  }
  @else {
    $_from: 1px;
    $_to: 99999px;

    @if type_of($screen-size-from) == string {
      @if $screen-size-from == xs {
        $_from: 0;
      }
      @else if $screen-size-from == sm {
        $_from: $screen-sm;
      }
      @else if $screen-size-from == md {
        $_from: $screen-md;
      }
    }
    @else {
      $_from: $screen-size-from;
    }

    @if type_of($screen-size-to) == string {
      @if $screen-size-to == xs {
        $_to: $screen-sm - 1;
      }
      @else if $screen-size-to == sm {
        $_to: $screen-md - 1;
      }
      @else if $screen-size-to == md {
        $_to: $screen-lg - 1;
      }
    }
    @else {
      $_to: $screen-size-to;
    }

    @media (min-width: $_from) and (max-width: $_to) {
      & {
        @content;
      }
    }
  }
}