mixins.scss

// Media queries helpers
$breakpoints: (
  mobile:  0px,
  tablet:  1024px,
  desktop: 1280px
);

@mixin xs-mobile {
  @media only screen and (max-width: #{map-get($breakpoints, mobile) - 1px}) { @content; }
}

@mixin mobile {
  @media only screen and (max-width: #{map-get($breakpoints, tablet) - 1px}) { @content; }
}

@mixin tablet {
  @media only screen and (min-width: #{map-get($breakpoints, tablet)})
    and (max-width: #{map-get($breakpoints, desktop) - 1px}) { @content; }
}

@mixin desktop {
  @media only screen and (min-width: #{map-get($breakpoints, desktop)}) { @content; }
}

@mixin responsive ($media1, $media2) {
  @if $media2 {
    @if $media1 == mobile and $media2 == tablet {
      @media only screen and (max-width: #{map-get($breakpoints, desktop) - 1px}) {
        @content;
      }
    } @else if  $media1 == tablet and $media2 == desktop {
      @media only screen and (min-width: #{map-get($breakpoints, tablet)}) {
        @content;
      }
    }
  } @else {
    @if $media1 == mobile { @include mobile { @content; } }
    @if $media1 == tablet { @include tablet { @content; } }
    @if $media1 == desktop { @include desktop { @content; } }
  }
}

@function set-linear-gradient($direction: horizontal, $color: $primary-color-map, $light-start: 0%, $dark-start: 100%) {
  $light-color: map-get($color, light);
  $dark-color: map-get($color, dark);
  $degree: $direction;

  @if $direction == horizontal {
    $degree: 90deg;
  } @else if $direction == diagonal {
    $degree: 135deg;
  } @else if $direction == vertical {
    $degree: 180deg;
  }

  @return linear-gradient($degree, $light-color $light-start, $dark-color $dark-start);
}

@mixin hover ($color: $primary-color) {
  box-shadow:
    0 0 0 1px $color,
    0px 0px 3px 1px rgba($color, 0.55),
    inset 0px 0px 3px 0px rgba($color, 0.55);
}

@function set-radial-gradient($color: $primary-color-map) {
  $light-color: map-get($color, light);
  $dark-color: map-get($color, dark);

  @return radial-gradient(ellipse at top left, $light-color, $dark-color);
}

// material Design elevations (box-shadow).
@mixin elevation ($level: 0) {
  $box-shadow-levels: (
    0: none,
    1: (0  0  2px 1px rgba(#8E92A7, .05)),
    2: (0  0  2px 1px rgba(#8E92A7, .10)),
    3: (0  1px  3px rgba(#000, .12), 0  1px  2px rgba(#000, .24)),
    4: (0  3px  6px rgba(#000, .16), 0  3px  6px rgba(#000, .23)),
    5: (0 10px 20px rgba(#000, .19), 0  6px  6px rgba(#000, .23)),
    6: (0 14px 28px rgba(#000, .25), 0 10px 10px rgba(#000, .22)),
    7: (0 19px 38px rgba(#000, .30), 0 15px 12px rgba(#000, .22))
  );

  $box-shadow: map-get($box-shadow-levels, $level);

  @if ($box-shadow == null) {
    @error 'There are no elevation level "' + $level + '".';
  }

  box-shadow: $box-shadow;
}

// Container helpers
@mixin container {
  max-width: $desktop-break;
  margin-left: auto;
  margin-right: auto;
}

// 'shadowed' sass mixin is supposed to be used together with 'Shadowed' Vue mixin.
@mixin shadowed (
  $shadow-size: 100px,
  $shadow-color: #fff,
  $upper-shadow: true,
  $bottom-shadow: true,
  $upper-dark: false,
  $bottom-dark: false
) {
  & {
    position: relative;

    &%shadow {
      content: "";
      display: block;
      position: absolute;
      opacity: 0;
      left: 0;
      // 17px is the current scrollbar width default
      width: calc(100% - 17px);
      pointer-events: none;
      transition: opacity 0.3s;
    }

    &%dark-shadow {
      content: "";
      position: absolute;
      z-index: 50;
      left: 2.5%;
      width: 95%;
      height: 17px;
      border-radius: 50%;
      box-shadow: 0 0 17px 0 rgba(0, 0, 0, 0.0);
      transition: box-shadow 350ms ease-in-out;
    }

    @if $upper-shadow {
      @if $upper-dark {
        &.-upper-shadow {
          border-top: $base-border;
          &::before { box-shadow: 0px 4px 17px 0 rgba(0, 0, 0, 0.30); }
        }

        &::before {
          @extend %dark-shadow;
          top: -17px;
        }
      } @else {
        &::before {
          @extend %shadow;
          z-index: 1;
          top: 0;
          height: $shadow-size;
          background: linear-gradient(0deg, rgba($shadow-color, 0) 0%, $shadow-color 100%);
        }
      }

      &.-upper-shadow::before { opacity: 1; }
    }

    @if $bottom-shadow {
      @if $bottom-dark {
        &.-bottom-shadow {
          border-bottom: $base-border;
          &::after { box-shadow: 0px -4px 17px 0 rgba(0, 0, 0, 0.30); }
        }

        &::after {
          @extend %dark-shadow;
          bottom: -17px;
        }
      } @else {
        &::after {
          @extend %shadow;
          bottom: 0;
          height: $shadow-size;
          background: linear-gradient(180deg, rgba($shadow-color, 0) 0%, $shadow-color 100%);
        }
      }

      &.-bottom-shadow::after { opacity: 1; }
    }
  }
}

// Responsive tables @mixin
@mixin responsive-table($gutter, $breakpoints) {
  display: flex;
  flex-flow: row wrap;
  margin: $gutter * -.5;

  > * {
    margin: $gutter * .5;

    @each $breakpoint in $breakpoints {
      @media only screen and (min-width: $breakpoint) {
        $rows: index($breakpoints, $breakpoint);
        max-width: calc((100% / #{$rows}) - #{$gutter};
        min-width: calc((100% / #{$rows}) - #{$gutter};
      }
    }
  }
}