Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adding CSS triangles mixin

  • Loading branch information...
commit 467a3c5ede994f376c213c9560872fe4958a5ab4 1 parent caec89b
Tom Hare authored
View
1  app/assets/stylesheets/_bourbon.scss
@@ -40,4 +40,5 @@
@import "addons/position";
@import "addons/size";
@import "addons/timing-functions";
+@import "addons/triangle";
@import "addons/hidpi-media-query";
View
34 app/assets/stylesheets/addons/_triangle.scss
@@ -0,0 +1,34 @@
+@mixin triangle ($width, $color, $direction) {
+ width: 0;
+ height: 0;
+
+ @if $direction == up {
+ border-width: $width / 2;
+ border-style: solid;
+ border-color: transparent transparent $color transparent;
+ } @else if $direction == right {
+ border-width: $width / 2;
+ border-style: solid;
+ border-color: transparent transparent transparent $color;
+ } @else if $direction == down {
+ border-width: $width / 2;
+ border-style: solid;
+ border-color: $color transparent transparent transparent;
+ } @else if $direction == left {
+ border-width: $width / 2;
+ border-style: solid;
+ border-color: transparent $color transparent transparent;
+ } @else if $direction == upright {
+ border-top: $width solid $color;
+ border-left: $width solid transparent ;
+ } @else if $direction == upleft {
+ border-top: $width solid $color;
+ border-right: $width solid transparent ;
+ } @else if $direction == downright {
+ border-bottom: $width solid $color;
+ border-left: $width solid transparent ;
+ } @else if $direction == downleft {
+ border-bottom: $width solid $color;
+ border-right: $width solid transparent ;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.