Handy SCSS utils

_negative-border-radius.scss

// Creates a "negative border-radius"
//
// Author: PMK
// License: MIT
@mixin negative-border-radius($color: #000, $contrast: transparent, $position: all, $size: 1rem) {
  background-repeat: no-repeat;

  @if $position == all {
    background:
      radial-gradient(circle at 0 100%, $contrast $size, $color $size),
      radial-gradient(circle at 100% 100%, $contrast $size, $color $size),
      radial-gradient(circle at 100% 0, $contrast $size, $color $size),
      radial-gradient(circle at 0 0, $contrast $size, $color $size);
    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
  }

  @else if $position == top {
    background:
      radial-gradient(circle at 100% 0, $contrast $size, $color $size),
      radial-gradient(circle at 0 0, $contrast $size, $color $size);
    background-position: top right, top left;
    background-size: 50%;
  }

  @else if $position == right {
    background:
      radial-gradient(circle at 100% 100%, $contrast $size, $color $size),
      radial-gradient(circle at 100% 0, $contrast $size, $color $size);
    background-position: bottom right, top right;
    background-size: 50% 50%;
  }

  @else if $position == bottom {
    background:
      radial-gradient(circle at 0 100%, $contrast $size, $color $size),
      radial-gradient(circle at 100% 100%, $contrast $size, $color $size);
    background-position: bottom left, bottom right;
    background-size: 50%;
  }

  @else if $position == left {
    background:
      radial-gradient(circle at 0 100%, $contrast $size, $color $size),
      radial-gradient(circle at 0 0, $contrast $size, $color $size);
    background-position: bottom left, top left;
    background-size: 50% 50%;
  }
}

_print.scss

// Standard print styling (lot taken from https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L219~L293)
//
// Author: PMK
// License: MIT
@media print {
  *,
  *::after,
  *::before {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
  }

  a[href^='#']::after,
  a[href^='javascript:']::after {
    content: '';
  }

  abbr[title]::after {
    content: ' (' attr(title) ')';
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #777;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  table {
    border-collapse: collapse !important;

    td,
    th {
      background-color: #fff !important;
    }
  }
}

_tick.scss

// Creates a "tick" ❭ (U+276D) in all directions
//
// Author: PMK
// License: MIT
@mixin tick($direction: right, $color: #000, $size: 0.5em, $display: inline-block, $tickness: 1px) {
  border-bottom: 0;
  border-left: 0;
  border-right: $tickness solid $color;
  border-top: $tickness solid $color;
  content: '';
  display: $display;
  height: $size;
  transform-origin: center;
  width: $size;

  @if $direction == top {
    transform: rotate(-45deg) translateY(33.3334%);
  }

  @else if $direction == right {
    transform: rotate(45deg);
  }

  @else if $direction == bottom {
    transform: rotate(135deg) translateX(-33.3334%);
  }

  @else if $direction == left {
    transform: rotate(-135deg);
  }
}