compass-inuit 4.2.0 → 4.2.1

data/stylesheets/_compass-inuit.scss

@@ -94,6 +94,7 @@
  * THIS-OR-THIS........Options object
  * COMPLEX-LINK........
  * FLYOUT..............Flyout-on-hover object
+ * ARROWS..............CSS arrows
  * SPRITE..............Generic spriting element
  * ICON-TEXT...........Icon and text couplings
  * BUTTONS.............

data/stylesheets/partials/_objects.scss

@@ -1,6 +1,7 @@
 /**
  * Objects and abstractions
  */
+@import "partials/objects/arrows";
 @import "partials/objects/block-list";
 @import "partials/objects/breadcrumb";
 @import "partials/objects/buttons";

data/stylesheets/partials/generic/_mixins.scss

@@ -83,3 +83,146 @@
     overflow:hidden;
     text-overflow:ellipsis;
 }
+
+
+/**
+ * CSS arrows!!! But... before you read on, you might want to grab a coffee...
+ * 
+ * This mixin creates a CSS arrow on a given element. We can have the arrow
+ * appear in one of 12 locations, thus:
+ * 
+ *       01    02    03
+ *    +------------------+
+ * 12 |                  | 04
+ *    |                  |
+ * 11 |                  | 05
+ *    |                  |
+ * 10 |                  | 06
+ *    +------------------+
+ *       09    08    07
+ * 
+ * You pass this position in along with a desired arrow color and optional
+ * border color, for example:
+ * 
+ * `@include arrow(top, left, red)`
+ * 
+ * for just a single, red arrow, or:
+ * 
+ * `@include arrow(bottom, center, red, black)`
+ * 
+ * which will create a red triangle with a black border which sits at the bottom
+ * center of the element. Call the mixin thus: 
+ * 
+   .foo{
+       background-color:#BADA55;
+       border:1px solid #ACE;
+       @include arrow(top, left, #BADA55, #ACE);
+   }
+ * 
+ */
+@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
+    
+    @if $arrow-edge == top{
+        
+        @extend %arrow--top;
+        
+        &:before{
+            border-bottom-color:$border-color;
+        }
+        
+        &:after{
+            border-bottom-color:$arrow-color;
+        }
+        
+        @if $arrow-location == left{
+            @extend %arrow--left;
+        }
+        
+        @if $arrow-location == center{
+            @extend %arrow--center;
+        }
+        
+        @if $arrow-location == right{
+            @extend %arrow--right;
+        }
+        
+    }
+        
+    @if $arrow-edge == right{
+        
+        @extend %arrow--far;
+        
+        &:before{
+            border-left-color:$border-color;
+        }
+        
+        &:after{
+            border-left-color:$arrow-color;
+        }
+        
+        @if $arrow-location == top{
+            @extend %arrow--upper;
+        }
+        
+        @if $arrow-location == center{
+            @extend %arrow--middle;
+        }
+        
+        @if $arrow-location == bottom{
+            @extend %arrow--lower;
+        }
+        
+    }
+    
+    @if $arrow-edge == bottom{
+        
+        @extend %arrow--bottom;
+        
+        &:before{
+            border-top-color:$border-color;
+        }
+        
+        &:after{
+            border-top-color:$arrow-color;
+        }
+        
+        @if $arrow-location == left{
+            @extend %arrow--left;
+        }
+        
+        @if $arrow-location == center{
+            @extend %arrow--center;
+        }
+        
+        @if $arrow-location == right{
+            @extend %arrow--right;
+        }
+        
+    }
+    
+    @if $arrow-edge == left{
+        @extend %arrow--near;
+        
+        &:before{
+            border-right-color:$border-color;
+        }
+        
+        &:after{
+            border-right-color:$arrow-color;
+        }
+        
+        @if $arrow-location == top{
+            @extend %arrow--upper;
+        }
+        
+        @if $arrow-location == center{
+            @extend %arrow--middle;
+        }
+        
+        @if $arrow-location == bottom{
+            @extend %arrow--lower;
+        }
+        
+    }
+    
+}

data/stylesheets/partials/objects/_arrows.scss

@@ -0,0 +1,143 @@
+/*------------------------------------*\
+    $ARROWS
+\*------------------------------------*/
+/**
+ * It is a common design treatment to give an element a triangular points-out
+ * arrow, we typically build these with CSS. These following classes allow us to
+ * generate these arbitrarily with a mixin, `@arrow()`.
+ */
+
+$arrow-size:            $half-spacing-unit;
+$arrow-border:          1;
+$border:                $arrow-size;
+$arrow:                 $arrow-size - $arrow-border;
+
+/**
+ * Forms the basis for any/all CSS arrows.
+ */
+%arrow{
+    position:relative;
+    
+    &:before,
+    &:after{
+        content:"";
+        position:absolute;
+        border-collapse:separate;
+    }
+    &:before{
+        border:$border +px solid transparent;
+    }
+    &:after{
+        border:$arrow +px solid transparent;
+    }
+}
+
+
+/**
+ * Define individual edges so we can combine what we need, when we need.
+ */
+%arrow--top{
+    @extend %arrow;
+    
+    &:before,
+    &:after{
+        bottom:100%;
+    }
+}
+
+%arrow--upper{
+    @extend %arrow;
+    
+    &:before{
+        top:$arrow +px;
+    }
+    &:after{
+        top:$border +px;
+    }
+}
+
+%arrow--middle{
+    @extend %arrow;
+
+    &:before,
+    &:after{
+        top:50%;
+        margin-top:-($border +px);
+    }
+    &:after{
+        margin-top:-($arrow +px);
+    }
+}
+
+%arrow--lower{
+    @extend %arrow;
+    
+    &:before{
+        bottom:$arrow +px;
+    }
+    &:after{
+        bottom:$border +px;
+    }
+}
+
+%arrow--bottom{
+    @extend %arrow;
+    
+    &:before,
+    &:after{
+        top:100%;
+    }
+}
+
+%arrow--near{
+    @extend %arrow;
+    
+    &:before,
+    &:after{
+        right:100%;
+    }
+}
+
+%arrow--left{
+    @extend %arrow;
+    
+    &:before{
+        left:$arrow +px;
+    }
+    &:after{
+        left:$border +px;
+    }
+}
+
+%arrow--center{
+    @extend %arrow;
+    
+    &:before,
+    &:after{
+        left:50%;
+        margin-left:-($border +px);
+    }
+    &:after{
+        margin-left:-($arrow +px);
+    }
+}
+
+%arrow--right{
+    @extend %arrow;
+    
+    &:before{
+        right:$arrow +px;
+    }
+    &:after{
+        right:$border +px;
+    }
+}
+
+%arrow--far{
+    @extend %arrow;
+    
+    &:before,
+    &:after{
+        left:100%;
+    }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-inuit
 version: !ruby/object:Gem::Version
-  version: 4.2.0
+  version: 4.2.1
   prerelease: 
 platform: ruby
 authors:
@@ -78,6 +78,7 @@ files:
 - stylesheets/partials/generic/_reset.scss
 - stylesheets/partials/generic/_shared.scss
 - stylesheets/partials/generic/_widths.scss
+- stylesheets/partials/objects/_arrows.scss
 - stylesheets/partials/objects/_block-list.scss
 - stylesheets/partials/objects/_breadcrumb.scss
 - stylesheets/partials/objects/_buttons.scss