accoutrement 0.0.2 → 0.0.3

data/README.md

@@ -19,6 +19,22 @@ who are very smart.
 List of Things
 --------------
 
+### Arrows
+
+**Settings:**
+
+- `$default-arrow-position       : top         !default;`
+- `$default-arrow-offset         : center      !default;`
+- `$default-arrow-size           : 1em         !default;`
+- `$default-arrow-color          : gray        !default;`
+- `$default-arrow-border-size    : null        !default;`
+- `$default-arrow-border-color   : null        !default;`
+
+**Mixins:**
+
+- `arrow-base()`
+- `arrow([$arrow, $border, $positioning])`
+
 ### Background
 
 **Functions:**
@@ -33,7 +49,9 @@ List of Things
 
 ### Color
 
-*The idea of color-stacks comes from [toolkit][],
+*The brightness and contrast functions are based on
+a [codepen demo][text-contrast] by Brendan Saunders.
+The idea of color-stacks comes from [toolkit][],
 though I've made some alterations to fit into my own process.*
 
 **Settings**:
@@ -51,6 +69,8 @@ though I've made some alterations to fit into my own process.*
 - `shade-stack($color [, $amounts])`
 - `color($color [, $alpha, $tints, $shades])`
 
+[text-contrast]: http://codepen.io/bluesaunders/details/FCLaz
+
 ### Math
 
 **Functions:**
@@ -76,7 +96,7 @@ though I've made some alterations to fit into my own process.*
 **Mixins:**
 - `@include before($content)`
 - `@include after($content)`
-- `@include wrap($content)`
+- `@include wrap-content($content)`
 
 ### Rhythm
 

data/stylesheets/_accoutrement.scss

@@ -9,6 +9,7 @@
 @import 'accoutrement/pseudo-elements';
 @import 'accoutrement/media';
 @import 'accoutrement/type';
+@import 'accoutrement/arrows';
 
 // ----------------------------------------------------------------------------
 // Patterns

data/stylesheets/accoutrement/_arrows.scss

@@ -0,0 +1,127 @@
+// ----------------------------------------------------------------------------
+// Settings
+
+// Body defaults
+$default-arrow-position       : top         !default;
+$default-arrow-offset         : center      !default;
+$default-arrow-size           : 1em         !default;
+$default-arrow-color          : gray        !default;
+
+// Border defaults
+$default-arrow-border-size    : null        !default;
+$default-arrow-border-color   : null        !default;
+
+// ----------------------------------------------------------------------------
+// Mixins
+
+// Creates a pseudo-element, prepared for arrow-fication
+//
+// @include arrow-base()
+@mixin arrow-base {
+  content: " ";
+  position: absolute;
+  height: 0;
+  width: 0;
+  border: solid transparent;
+  pointer-events: none;
+}
+
+// Creates an arrow to your exact size/shape/location specifications
+//
+// @include arrow([$arrow, $border, $positioning])
+// $arrow         : Arrow body position, offset, size, and color.
+// $border        : Border size and color.
+// $positioning   : You have to position the host element, default is relative.
+@mixin arrow(
+  $arrow          : $default-arrow-position
+                    $default-arrow-offset
+                    $default-arrow-size
+                    $default-arrow-color,
+  $border         : $default-arrow-border-size
+                    $default-arrow-border-color,
+  $positioning    : relative
+) {
+  $has-border     : false;
+
+  $position       : $default-arrow-position;
+  $offset         : $default-arrow-offset;
+  $size           : $default-arrow-size;
+  $color          : $default-arrow-color;
+  $border-size    : $default-arrow-border-size;
+  $border-color   : $default-arrow-border-color;
+
+  $strings        : compact();
+  $numbers        : compact();
+
+  @each $val in $border {
+    @if type-of($val) == 'color' {
+      $border-color: $val;
+      $has-border: true;
+    } @else if type-of($val) == 'number' {
+      $border-size: $val;
+      $has-border: true;
+    }
+  }
+
+  $pseudo         : if($has-border, '&:before, &:after', '&:before');
+
+  @each $val in $arrow {
+    @if type-of($val) == 'color' { $color: $val; }
+    @else if type-of($val) == 'string' { $strings: append($strings, $val); }
+    @else if type-of($val) == 'number' { $numbers: append($numbers, $val); }
+  }
+
+  @if length($strings) > 0 {
+    $position: nth($strings,1);
+    @if length($strings) > 1 and nth($strings,2) { $offset: nth($strings,2); }
+  }
+
+  @if length($numbers) > 0 {
+    @if length($numbers) > 1 {
+      $offset: nth($numbers,1);
+      $size: nth($numbers,2);
+    } @else {
+      $size: nth($numbers,1);
+    }
+  }
+
+  $opposite: opposite-position($position);
+  $offset-position: if($position == left or $position == right, top, left);
+  @if $offset == 'bottom' or $offset == 'right' {
+    $offset-position: opposite-position($offset-position);
+  } @else if type-of($offset) == "number" {
+    @if $offset != abs($offset) {
+      $offset-position: opposite-position($offset-position);
+    };
+  }
+
+  position: $positioning;
+
+  #{$pseudo} {
+    @include arrow-base;
+    #{$opposite}: 100%;
+    border-#{$opposite}-color: $color;
+    border-width: $size;
+    @if $offset {
+      @if $offset == 'center' {
+        #{$offset-position}: 50%;
+        margin-#{$offset-position}: - $size;
+      } @else if type-of($offset) == 'string' {
+        #{$offset-position}: 0;
+      } @else {
+        #{$offset-position}: abs($offset);
+      }
+    }
+  }
+
+  @if $has-border {
+    $border-ratio: 1.5; // 1.41421356 square root of 2, rounded a bit
+    $border-full: $size + $border-size * $border-ratio;
+    &:before {
+      border-width: $border-full;
+      border-#{$opposite}-color: $border-color;
+      @if $offset == 'center' { margin-#{$offset-position}: - $border-full; }
+      @else { margin-#{$offset-position}: - $border-size * $border-ratio; }
+    }
+  }
+}

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: accoutrement
 version: !ruby/object:Gem::Version 
-  hash: 27
+  hash: 25
   prerelease: 
   segments: 
   - 0
   - 0
-  - 2
-  version: 0.0.2
+  - 3
+  version: 0.0.3
 platform: ruby
 authors: 
 - Eric Meyer
@@ -45,6 +45,7 @@ files:
 - README.md
 - lib/accoutrement.rb
 - stylesheets/_accoutrement.scss
+- stylesheets/accoutrement/_arrows.scss
 - stylesheets/accoutrement/_background.scss
 - stylesheets/accoutrement/_color.scss
 - stylesheets/accoutrement/_math.scss