assets/sass/bourbon/bourbon/library/_triangle.scss

   1 @charset "UTF-8";
   2
   3 /// Generates a triangle pointing in a specified direction.
   4 ///
   5 /// @argument {string} $direction
   6 ///   The direction the triangle should point. Accepts `up`, `up-right`,
   7 ///   `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
   8 ///
   9 /// @argument {number (with unit)} $width
  10 ///   Width of the triangle.
  11 ///
  12 /// @argument {number (with unit)} $height
  13 ///   Height of the triangle.
  14 ///
  15 /// @argument {color} $color
  16 ///   Color of the triangle.
  17 ///
  18 /// @example scss
  19 ///   .element {
  20 ///     &::before {
  21 ///       @include triangle("up", 2rem, 1rem, #b25c9c);
  22 ///       content: "";
  23 ///     }
  24 ///   }
  25 ///
  26 ///   // CSS Output
  27 ///   .element::before {
  28 ///     border-style: solid;
  29 ///     height: 0;
  30 ///     width: 0;
  31 ///     border-color: transparent transparent #b25c9c;
  32 ///     border-width: 0 1rem 1rem;
  33 ///     content: "";
  34 ///   }
  35
  36 @mixin triangle(
  37   $direction,
  38   $width,
  39   $height,
  40   $color
  41 ) {
  42   @if not index(
  43     "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
  44     $direction
  45   ) {
  46     @error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
  47       "`down`, `down-left`, `left` or `up-left`.";
  48   } @else if not _is-color($color) {
  49     @error "`#{$color}` is not a valid color for the `$color` argument in " +
  50       "the `triangle` mixin.";
  51   } @else {
  52     border-style: solid;
  53     height: 0;
  54     width: 0;
  55
  56     @if $direction == "up" {
  57       border-color: transparent transparent $color;
  58       border-width: 0 ($width / 2) $height;
  59     } @else if $direction == "up-right" {
  60       border-color: transparent $color transparent transparent;
  61       border-width: 0 $width $width 0;
  62     } @else if $direction == "right" {
  63       border-color: transparent transparent transparent $color;
  64       border-width: ($height / 2) 0 ($height / 2) $width;
  65     } @else if $direction == "down-right" {
  66       border-color: transparent transparent $color;
  67       border-width: 0 0 $width $width;
  68     } @else if $direction == "down" {
  69       border-color: $color transparent transparent;
  70       border-width: $height ($width / 2) 0;
  71     } @else if $direction == "down-left" {
  72       border-color: transparent transparent transparent $color;
  73       border-width: $width 0 0 $width;
  74     } @else if $direction == "left" {
  75       border-color: transparent $color transparent transparent;
  76       border-width: ($height / 2) $width ($height / 2) 0;
  77     } @else if $direction == "up-left" {
  78       border-color: $color transparent transparent;
  79       border-width: $width $width 0 0;
  80     }
  81   }
  82 }