Shapes

some scss mixins for shapes

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-shapes

or

yarn add elr-scss-shapes

Implementation

• height "half" will be half of the base
• height "auto" will be the same height as the base
• right triangles will always be equal width and height

@import "elr-scss-shapes/src/main";

.triangle-top {
  @include elr-triangle(
    $config: (
      base: 100px,
      height: "half",
      color: $primary-color,
      direction: "top",
    )
  );
}

.triangle-right {
  @include elr-triangle(
    $config: (
      base: 100px,
      direction: "right",
    )
  );
}

.triangle-bottom {
  @include elr-triangle(
    $config: (
      base: 100px,
      direction: "bottom",
    )
  );
}

.triangle-left {
  @include elr-triangle(
    $config: (
      base: 100px,
      direction: "left",
    )
  );
}

.triangle-top-right {
  @include elr-triangle(
    $config: (
      base: 100px,
      direction: "top-right",
    )
  );
}

.triangle-bottom-right {
  @include elr-triangle(
    $config: (
      base: 100px,
      direction: "bottom-right",
    )
  );
}

.triangle-top-left {
  @include elr-triangle(
    $config: (
      base: 100px,
      direction: "top-left",
    )
  );
}

.triangle-bottom-left {
  @include elr-triangle(
    $config: (
      base: 100px,
      direction: "bottom-left",
    )
  );
}

License

SEE LICENSE IN LICENSE.md