hubl/src/styles/mixins.scss

@charset "UTF-8";
@mixin debug {
  $hsla: hsla(random(360), 100%, 50%, 0.3);
  background-color: $hsla;
}
@mixin log($v) {
  font-family: '__log__:#{$v}';
}

@mixin offset($corner: 1, $x: 0, $y: 0) {
  // corner:
  // 1-----2
  // |     |
  // |     |
  // 3-----4
  position: absolute;
  @if ($corner == 1) {
    top: $y;
    left: $x;
  }
  @if ($corner == 2) {
    top: $y;
    right: $x;
  }
  @if ($corner == 3) {
    bottom: $y;
    left: $x;
  }
  @if ($corner == 4) {
    bottom: $y;
    right: $x;
  }
}

@mixin position($top: 0, $right: null, $bottom: null, $left: null) {
  //  --1--
  // |     |
  // 4     2
  // |     |
  //  --3--
  @if ($right == null) {
    $right: $top;
  }

  @if ($bottom == null) {
    $bottom: $top;
  }

  @if ($left == null) {
    $left: $right;
  }

  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

@mixin pos($pos: 5, $position: absolute) {
  // ╔═──┐ ╔═══╗ ┌──═╗
  // │ 1 │ │ 2 │ │ 3 │
  // └───┘ └───┘ └───┘
  // ╔═──┐ ╔═══╗ ┌──═╗
  // ║ 4 │ ║ 5 ║ │ 6 ║
  // ╚═──┘ ╚═══╝ └──═╝
  // ┌───┐ ┌───┐ ┌───┐
  // │ 7 │ │ 8 │ │ 9 │
  // ╚═──┘ ╚═══╝ └──═╝

  $mod: ($pos - 1) % 3;

  position: $position;
  @if ($pos <= 6) {
    top: 0;
  }
  @if ($mod <= 1) {
    left: 0;
  }
  @if ($mod >= 1) {
    right: 0;
  }
  @if ($pos >= 4) {
    bottom: 0;
  }
}

// @mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
//   &:after {
//     content: '';
//     position: absolute;
//     top: if(($border == bottom), auto, 0);
//     left: if(($border == right), auto, 0);
//     right: if(($border == left), auto, 0);
//     bottom: if(($border == top), auto, 0);
//     background-image: linear-gradient(to #{$border}, $color, transparent);
//     #{$border}: -$size;
//     opacity: $opacity;
//     @if ($border == top or $border == bottom) {
//       height: $size;
//     } @else {
//       width: $size;
//     }
//   }
// }

@mixin align($horizontal: center, $vertical: middle) {
  text-align: $horizontal;
  white-space: nowrap;
  &:after,
  > * {
    display: inline-block;
    vertical-align: $vertical;
  }
  &:after {
    content: '';
    height: 100%;
    width: 0;
    visibility: hidden;
  }
  > * {
    //text-align:left;
    white-space: normal;
  }
}

@mixin list-reset($deep: 0) {
  padding: 0;
  margin: 0;
  display: block;
  list-style: none;
  @if ($deep == 0) {
    > li {
      padding: 0;
      margin: 0;
      display: block;
      list-style: none;
    }
  } @else {
    ul,
    ol,
    li {
      padding: 0;
      margin: 0;
      display: block;
      list-style: none;
    }
  }
}