sass-toolkit/tests/controls/12-triangle.css

Think of Toolkit as your swiss army knife for modern design and development.

/**
  * Triangle
**/
.triangle--default {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle;";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-color: #000;
  border-width: 0 0.5em 1em 0.5em;
}
.triangle--color {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($color: blue);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-color: blue;
  border-width: 0 0.5em 1em 0.5em;
}
.triangle--height {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($height: 1.75em);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-color: #000;
  border-width: 0 0.5em 20px 0.5em;
}
.triangle--width {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($width: 1.5rem);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-color: #000;
  border-width: 0 0.75rem 1em 0.75rem;
}
.triangle--angle-number {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($angle: 72.5);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-left-color: #000;
  border-width: 0.30556em 0 0.69444em 1em;
}
.triangle--angle-top {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($angle: top);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-color: #000;
  border-width: 0 0.5em 1em 0.5em;
}
.triangle--angle-top-right {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($angle: top right);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-right-color: #000;
  border-width: 0em 1em 1em 0;
}
.triangle--angle-right {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($angle: right);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-left-color: #000;
  border-width: 0.5em 0 0.5em 1em;
}
.triangle--angle-bottom-right {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($angle: bottom right);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-color: #000;
  border-width: 0 0em 1em 1em;
}
.triangle--angle-bottom {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($angle: bottom);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-top-color: #000;
  border-width: 1em 0.5em 0 0.5em;
}
.triangle--angle-bottom-left {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($angle: bottom left);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-left-color: #000;
  border-width: 1em 0 0em 1em;
}
.triangle--angle-left {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($angle: left);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-right-color: #000;
  border-width: 0.5em 1em 0.5em 0;
}
.triangle--angle-top-left {
  _setting-triangle-color: #000;
  _setting-triangle-height: 1em;
  _setting-triangle-width: 1em;
  _setting-triangle-angle: 0;
  _test: "@include triangle($angle: top left);";
  display: block;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-top-color: #000;
  border-width: 1em 1em 0 0em;
}