Added "inset-up, inset-down, inset-left, inset-right" four arguments …

…to $direction Please see http://codepen.io/P233/pen/AtzIw for more details.
thoughtbot · Jan 12, 2014 · daf825d · daf825d
1 parent 27b2db9
commit daf825d
Showing 1 changed file with 26 additions and 3 deletions.
diff --git a/app/assets/stylesheets/addons/_triangle.scss b/app/assets/stylesheets/addons/_triangle.scss
@@ -6,9 +6,8 @@
   $height: nth($size, length($size));
 
   $foreground-color: nth($color, 1);
-  @if (length($color) == 1) {
-    $background-color: transparent;
-  } @else {
+  $background-color: transparent !default;
+  @if (length($color) == 2) {
     $background-color: nth($color, 2);
   }
 
@@ -59,4 +58,28 @@
       border-right: $width solid $background-color;
     }
   }
+
+  @else if ($direction == inset-up) {
+    border-width: $height $width;
+    border-style: solid;
+    border-color: $background-color $background-color $foreground-color;
+  }
+
+  @else if ($direction == inset-down) {
+    border-width: $height $width;
+    border-style: solid;
+    border-color: $foreground-color $background-color $background-color;
+  }
+
+  @else if ($direction == inset-right) {
+    border-width: $width $height;
+    border-style: solid;
+    border-color: $background-color $background-color $background-color $foreground-color;
+  }
+
+  @else if ($direction == inset-left) {
+    border-width: $width $height;
+    border-style: solid;
+    border-color: $background-color $foreground-color $background-color $background-color;
+  }
 }