archetype 0.0.1.pre.1 → 0.0.1.pre.3.00dfd9a

data/stylesheets/archetype/styleguide/primitives/_shadows.scss

@@ -0,0 +1,23 @@
+// ==========
+// SHADOWS
+// ==========
+
+// containers
+$CONFIG_SHADOW_FLYOUT:                          (1px 1px 3px rgba(0,0,0, .25)) !default;
+$CONFIG_SHADOW_CONTAINER:                       (0 2px 2px rgba(0,0,0, 0.25)) !default;
+$CONFIG_SHADOW_CONTAINER_ALT:                   (ie lte 8, border-bottom, 2px solid #CCCCCC) !default;
+$CONFIG_SHADOW_TOOLTIP:                         (0 1px 2px rgba(0,0,0, 0.1)) !default;
+$CONFIG_SHADOW_HOVERCARD:                       (0 1px 2px rgba(0,0,0, 0.2)) !default;
+$CONFIG_SHADOW_PUNCHCUT_INSET:                  (0 0 43px rgba(0,0,0, .75) inset) !default;
+$CONFIG_SHADOW_ALERT:                           (0 1px 2px rgba(0,0,0, .45)) !default;
+
+// text
+$CONFIG_SHADOW_COPY:                            (nil (1px 1px 1px rgba(0,0,0, .75))) !default;
+$CONFIG_SHADOW_CLOSES:                          (1px 1px 1px rgba(0,0,0, .35)) !default;
+$CONFIG_SHADOW_BREADCRUMB:                      (1px 1px 1px rgba(255, 255, 255, .5)) !default;
+
+// buttons
+$CONFIG_SHADOW_BUTTON_TEXT:                     (0 -1px 0 rgba(0,0,0, 0.25)) !default;
+$CONFIG_SHADOW_BUTTON_TEXT_INVERTED:            (0 -1px 0 rgba(255,255,255, 0.25)) !default;
+$CONFIG_SHADOW_BUTTON_HOVER:                    (0 0 8px rgba(0,0,0, 0.15)) !default;
+$CONFIG_SHADOW_BUTTON_ACTIVE:                   (0 1px 3px rgba(0,0,0, .25) inset) !default;

data/stylesheets/archetype/styleguide/primitives/_sprites.scss

@@ -0,0 +1,46 @@
+// ==========
+// SPRITE MAPS
+// ==========
+
+// LOADERS
+$CONFIG_SPRITE_LOADERS:          false !default;
+@if _shouldSetSprite($CONFIG_SPRITE_LOADERS) {
+  $CONFIG_SPRITE_LOADERS:        sprite-map("vendor/archetype/animations/loaders/**/*.png");
+}
+$CONFIG_IMG_LOADERS_SMALL:         (small small_dark) !default;
+$CONFIG_IMG_LOADERS_SMALL_STATIC:  (small_static small_dark_static) !default;
+$CONFIG_IMG_LOADERS_MEDIUM:        (medium medium_dark) !default;
+$CONFIG_IMG_LOADERS_MEDIUM_STATIC: (medium_static medium_dark_static) !default;
+$CONFIG_IMG_LOADERS_LARGE:         (large large_dark) !default;
+$CONFIG_IMG_LOADERS_LARGE_STATIC:  (large_static large_dark_static) !default;
+$CONFIG_LOADERS: (
+  (medium, (
+    default       $CONFIG_IMG_LOADERS_MEDIUM,
+    static        $CONFIG_IMG_LOADERS_MEDIUM_STATIC,
+    steps         $CONFIG_ANIM_LOADERS_MEDIUM_STEP,
+    delay         $CONFIG_ANIM_LOADERS_MEDIUM_DELAY,
+    iterations    $CONFIG_ANIM_LOADERS_MEDIUM_ITERATIONS,
+    duration      $CONFIG_ANIM_LOADERS_MEDIUM_DURATION
+  )),
+  (small, (
+    default       $CONFIG_IMG_LOADERS_SMALL,
+    static        $CONFIG_IMG_LOADERS_SMALL_STATIC,
+    steps         $CONFIG_ANIM_LOADERS_SMALL_STEP,
+    delay         $CONFIG_ANIM_LOADERS_SMALL_DELAY,
+    iterations    $CONFIG_ANIM_LOADERS_SMALL_ITERATIONS,
+    duration      $CONFIG_ANIM_LOADERS_SMALL_DURATION
+  )),
+  (large, (
+    default       $CONFIG_IMG_LOADERS_LARGE,
+    static        $CONFIG_IMG_LOADERS_LARGE_STATIC,
+    steps         $CONFIG_ANIM_LOADERS_LARGE_STEP,
+    delay         $CONFIG_ANIM_LOADERS_LARGE_DELAY,
+    iterations    $CONFIG_ANIM_LOADERS_LARGE_ITERATIONS,
+    duration      $CONFIG_ANIM_LOADERS_LARGE_DURATION
+  )),
+  
+  nil
+) !default;
+@if $CONFIG_KEYFRAMES_AUTO {
+  @include generate-loader-keyframes();
+}

data/stylesheets/archetype/styleguide/primitives/_textures.scss

@@ -0,0 +1,10 @@
+// ==========
+// TEXTURES
+// ==========
+
+$CONFIG_TEXTURE_HEADING:          (#FEFEFE) !default;
+$CONFIG_TEXTURE_MODULE:           (#EEEEEE) !default;
+$CONFIG_TEXTURE_CONTAINER:        (#FFFFFF #000000) !default;
+$CONFIG_TEXTURE_BRISTOL:          (#2C2C2C) !default;
+$CONFIG_TEXTURE_CANVAS:           (#CCCCCC) !default;
+$CONFIG_TEXTURE_PUNCHCUT:         (#333333) !default;

data/stylesheets/archetype/styleguide/primitives/_typography.scss

@@ -0,0 +1,56 @@
+// ==========
+// TYPOGRAPHY
+// ==========
+
+// HEADLINES
+$CONFIG_FONT_HEADLINE_XXLARGE:    (24px 26px) !default;                                             // XXLarge headline
+$CONFIG_FONT_HEADLINE_XLARGE:     (22px 24px) !default;                                             // XLarge headline
+$CONFIG_FONT_HEADLINE_LARGE:      (18px 22px) !default;                                             // Large headline
+$CONFIG_FONT_HEADLINE_MEDIUM:     (16px 18px) !default;                                             // Medium headline
+$CONFIG_FONT_HEADLINE_SMALL:      (14px 16px) !default;                                             // Small headline
+$CONFIG_FONT_HEADLINE_XSMALL:     (13px 17px) !default;                                             // XSmall headline
+
+// GENERIC COPY
+$CONFIG_FONT_COPY_LARGE:          (16px 20px) !default;                                             // Large copy
+$CONFIG_FONT_COPY_MEDIUM:         (13px 17px) !default;                                             // Medium copy
+$CONFIG_FONT_COPY_SMALL:          (12px 14px) !default;                                             // Small copy
+// unused
+$CONFIG_FONT_COPY_XSMALL:         $CONFIG_FONT_COPY_SMALL !default;                                 // XSmall copy
+$CONFIG_FONT_COPY_XLARGE:         $CONFIG_FONT_COPY_LARGE !default;                                 // XLarge copy
+$CONFIG_FONT_COPY_XXLARGE:        $CONFIG_FONT_COPY_XLARGE !default;                                // XXLarge copy
+
+// NOTICE COPY
+$CONFIG_FONT_NOTICE:              (15px 20px) !default;                                             // notice copy
+
+// PULLQUOTES
+$CONFIG_FONT_PULLQUOTE_MEDIUM:    (22px 24px) !default;                                             // Medium pullquote
+// unused
+$CONFIG_FONT_PULLQUOTE_SMALL:     $CONFIG_FONT_PULLQUOTE_MEDIUM !default;                           // Small pullquote
+$CONFIG_FONT_PULLQUOTE_XSMALL:    $CONFIG_FONT_PULLQUOTE_SMALL !default;                            // XSmall pullquote
+$CONFIG_FONT_PULLQUOTE_LARGE:     $CONFIG_FONT_PULLQUOTE_MEDIUM !default;                           // Large pullquote
+$CONFIG_FONT_PULLQUOTE_XLARGE:    $CONFIG_FONT_PULLQUOTE_LARGE !default;                            // XLarge pullquote
+$CONFIG_FONT_PULLQUOTE_XXLARGE:   $CONFIG_FONT_PULLQUOTE_XLARGE !default;                           // XXLarge pullquote
+
+// ANNOTATIONS
+$CONFIG_FONT_ANNOTATION_MEDIUM:   (12px 14px) !default;                                            // Medium annotation
+// unused
+$CONFIG_FONT_ANNOTATION_SMALL:    $CONFIG_FONT_ANNOTATION_MEDIUM !default;                         // Sall annotation
+$CONFIG_FONT_ANNOTATION_XSMALL:   $CONFIG_FONT_ANNOTATION_SMALL !default;                          // XSmall annotation
+$CONFIG_FONT_ANNOTATION_LARGE:    $CONFIG_FONT_ANNOTATION_MEDIUM !default;                         // Large annotation
+$CONFIG_FONT_ANNOTATION_XLARGE:   $CONFIG_FONT_ANNOTATION_LARGE !default;                          // XLarge annotation
+$CONFIG_FONT_ANNOTATION_XXLARGE:  $CONFIG_FONT_ANNOTATION_XLARGE !default;                         // XXLarge annotation
+
+// BUTTONS
+// (font-size, vertical-padding, horizontal-padding)
+$CONFIG_FONT_BUTTON_LARGE:        (16px vertical-spacing(1.8, $abuse: true) horizontal-spacing(3)) !default;
+$CONFIG_FONT_BUTTON_MEDIUM:       (13px vertical-spacing(1.6, $abuse: true) horizontal-spacing(2.6, $abuse: true)) !default;
+$CONFIG_FONT_BUTTON_SMALL:        (12px vertical-spacing(1.2, $abuse: true) horizontal-spacing(2)) !default;
+
+// CARETS
+$CONFIG_FONT_CARET_LARGE:         6px !default;
+$CONFIG_FONT_CARET_MEDIUM:        5px !default;
+$CONFIG_FONT_CARET_SMALL:         4px !default;
+
+// BREADCRUMBS
+$CONFIG_FONT_BREADCRUMB:          13px !default;
+$CONFIG_FONT_WEIGHT_BREADCRUMB:   bold !default;

data/stylesheets/archetype/util/_debug.scss

@@ -0,0 +1,40 @@
+// @category  utilities/debug
+
+// check if debug is enabled
+// @function  is-debug-enabled
+// @param     $if {Bool} optional override for $CONFIG_DEBUG
+// @return    {Bool} whether or not debug is enabled
+@function is-debug-enabled($if: nil) {
+  // debug is only available in DEV environments, so check that first
+  // then check if the debug flag/override is truthy
+  @return (index($CONFIG_DEBUG_ENVS, archetype-env()) and if($if == nil, $CONFIG_DEBUG, $if));
+}
+
+// a debug helper, print out a message
+// @mixin     debug-message
+// @param     $message {String} the message to output
+// @param     $if {Bool} override $CONFIG_DEBUG
+@mixin debug-message($message, $if: nil) {
+  @if(is-debug-enabled($if)) {
+    @if archetype-version('sass >= 3.2') {
+      /* #{$message} */
+    }
+    @else {
+      -archetype-debug: quote($message);
+    }
+  }
+}
+
+// a debug helper, draws a "border" around the container when hovered and change opacity
+// @mixin     debug-hover-box
+// @param     $color {String} the color to draw the border
+// @param     $opacity {Number}
+// @param     $if {Bool} override $CONFIG_DEBUG
+@mixin debug-hover-box($color: rgb(0, 255, 255), $opacity: 0.9, $if: nil) {
+  @if(is-debug-enabled($if)) {
+    &:hover {
+      @include opacity($opacity);
+      @include box-shadow(0 0 3px 0 $color);
+    }
+  }
+}

data/stylesheets/archetype/util/_lists.scss

@@ -0,0 +1,57 @@
+// @category  utilities/lists
+
+// remove an index from a list
+// @function  list-remove
+// @param     $list {List} the list to remove from
+// @param     $idx {Number} the index to remove
+// @param     $separator {String} the separator to use [auto|comma|space]
+// @return    $new-list {Bool} the list with removed index
+@function list-remove($list: (), $idx: false, $separator: auto) {
+  @return list-replace($list: $list, $idx: $idx, $value: nil, $separator: $separator);
+}
+
+// replace an index in a list
+// @function  list-replace
+// @param     $list {List} the list to replace from
+// @param     $value {*} the value to replace (if nil, it's a removal)
+// @param     $idx {Number} the index to replace
+// @param     $separator {String} the separator to use [auto|comma|space]
+// @return    $new-list {List} the list with replaced index
+@function list-replace($list: (), $idx: false, $value: nil, $separator: auto) {
+  $list: -compass-list($list);
+  // if no index was provided, just return the original list
+  @if($idx == false) {
+    @return $list;
+  }
+  $new-list: ();
+  @for $i from 1 through length($list) {
+    @if $i != $idx {
+      $new-list: append($new-list, nth($list, $i), $separator);
+    }
+    @else if($value != nil) {
+      $new-list: append($new-list, $value, $separator);
+    }
+  }
+  @return $new-list;
+}
+
+// map collection items to conform to a well defined collection
+// this is primarily used to convert shorthand notations into symmetrical longhand notations
+// @function  get-collection
+// @private
+// @param     $list {List} input list
+// @param     $components {List} list of components
+// @param     $min {Number} the minimum length of the collection
+// @return    $list {List} formatted collection
+// @usage:
+// $padding: get-collection(10px, $min: 2) => 10px 10px
+// $offset:  get-collection($components: (1 2), $min: 4) => 1 2 1 2
+@function get-collection($list: false, $components: false, $min: 1) {
+  @if($list == false) {
+    $list: $components;
+  }
+  @while(length($list) < $min) {
+    $list: $list $list;
+  }
+  @return $list;
+}

data/stylesheets/archetype/util/_misc.scss

@@ -0,0 +1,108 @@
+// @category  utilities
+
+// simplify checking if a value is defined before outputting it to a property
+// @mixin     if-set
+// @param     $property {String} css property to define
+// @param     $value {String} a valid css value for property
+// @param     $ignore {List} a list of "falsy" values
+// @usage
+// =if-set(margin, $margin, $ignore: (5px 10px)); // will only output margin if it is not 5px or 10px
+@mixin if-set($property, $value: false, $ignore: false) {
+  @if($ignore == false) {
+    $ignore: (0 0px);
+  }
+  @if($value != false and not index(-compass-list($ignore), $value)) {
+    #{$property}: $value;
+  }
+}
+
+$REGISTRY_DO_ONCE: () !default;
+// a function to prevent routines from executing multiple times
+// @function  do-once
+// @param     $name {String} name of the identifier
+// @return    {Bool} true if the first time invoked, false otherwise
+@function do-once($name) {
+  @if index($REGISTRY_DO_ONCE, $name) {
+    @return false;
+  }
+  $REGISTRY_DO_ONCE: append($REGISTRY_DO_ONCE, $name);
+  @return true;
+}
+
+// helper to determine if a sprite is already set or sprites are disabled
+// @function  _shouldSetSprite
+// @private
+// @param     $sprite {SpriteMap} the sprite map to check against
+// @return    {Boolean} should the sprite be set
+@function _shouldSetSprite($sprite) {
+  @return not $CONFIG_DISABLE_STYLEGUIDE_SPRITES and not $sprite;
+}
+
+// check that a sprite isn't nil or false
+// @function  styleguide-check-sprite
+// @param     $map {SpriteMap} the sprite map to check against
+// @return    {Boolean} is the sprite set
+@function styleguide-check-sprite($map) {
+  @return not ($CONFIG_DISABLE_STYLEGUIDE_SPRITES and index(false nil, $map));
+}
+
+// wrapper for sprite()
+// @function  styleguide-sprite
+// @param     $map {SpriteMap} the sprite map
+// @param     $sprite {Sprite} the sprite name
+// @param     $offset-x {Number} the horizontal offset of the sprite position
+// @param     $offset-y {Number} the vertical offset of the sprite position
+// @return    {Sprite} the sprite object or nil
+@function styleguide-sprite($map, $sprite, $offset-x: 0, $offset-y: 0) {
+  @if not styleguide-check-sprite($map) { @return nil; }
+  @return sprite($map, $sprite, $offset-x, $offset-y);
+}
+
+// wrapper for sprite-position()
+// @function  styleguide-sprite-position
+// @param     $map {SpriteMap} the sprite map
+// @param     $sprite {Sprite} the sprite name
+// @param     $offset-x {Number} the horizontal offset of the sprite position
+// @param     $offset-y {Number} the vertical offset of the sprite position
+// @return    {List} the sprite position or nil
+@function styleguide-sprite-position($map, $sprite, $offset-x: 0, $offset-y: 0) {
+  @if not styleguide-check-sprite($map) { @return nil; }
+  @return sprite-position($map, $sprite, $offset-x, $offset-y);
+}
+
+// wrapper for sprite-url()
+// @function  styleguide-sprite-url
+// @param     $map {SpriteMap} the sprite map
+// @return    {String} the sprite URL or nil
+@function styleguide-sprite-url($map) {
+  @if not styleguide-check-sprite($map) { @return nil; }
+  @return sprite-url($map);
+}
+
+// wrapper for sprite-file()
+// @function  styleguide-sprite-file
+// @param     $map {SpriteMap} the sprite map
+// @param     $sprite {Sprite} the sprite name
+// @return    {ImageFile} the image or nil
+@function styleguide-sprite-file($map, $sprite) {
+  @if not styleguide-check-sprite($map) { @return nil; }
+  @return sprite-file($map, $sprite);
+}
+
+// wrapper for image-width()
+// @function  styleguide-image-width
+// @param     $image {ImageFile} the image
+// @return    {Number} the width of the image or nil
+@function styleguide-image-width($image) {
+  @if $image == nil { @return nil; }
+  @return image-width($image);
+}
+
+// wrapper for image-height()
+// @function  styleguide-image-height
+// @param     $image {ImageFile} the image
+// @return    {Number} the height of the image or nil
+@function styleguide-image-height($image) {
+  @if $image == nil { @return nil; }
+  @return image-height($image);
+}

data/stylesheets/archetype/util/_rtl.scss

@@ -0,0 +1,279 @@
+// @category utilities/rtl
+
+// augment the direction
+// @function  rtl
+// @param     $value {List|String} [*|left|right] the value to augment
+// @param     $method {String} [border-radius|background]
+// @param     $force {String} [ltr|rtl] allows you to ignore reading-direction()
+// @return    {Bool|List|String} the augmented value
+@function rtl($value: false, $method: false, $force: false) {
+  $dir: if($force, $force, reading-direction());
+  @if($value == false) {
+    @return $dir == rtl;
+  }
+  @if($value == nil) {
+    @return nil;
+  }
+  @if $dir == rtl {
+    // if it's a left/right value, flip it (all cases)
+    $value: -compass-list($value);
+    @for $idx from 1 through length($value) {
+      $item: nth($value, $idx);
+      @if(index(left right, $item)) {
+        $value: list-replace($value, $idx, opposite-position($item), space);
+      }
+    }
+    // if it's shorthand, swap 2nd with 4th (all cases except `border-radius`)
+    @if($method != border-radius and length($value) >= 4) {
+      @return nth($value, 1) nth($value, 4) nth($value, 3) nth($value, 2);
+    }
+    // if it's border-radius, do some magic (if Compass doesn't support RLT yet)
+    @if($method == border-radius and not $COMPASS_RTL_SUPPORT) {
+      // swap 1st with 2nd, 3rd with 4th
+      @if(length($value) >= 4) {
+        @return nth($value, 2) nth($value, 1) nth($value, 4) nth($value, 3);
+      }
+      // swap 1st with 2nd, append 2nd to end
+      @else if(length($value) == 3) {
+        @return nth($value, 2) nth($value, 1) nth($value, 3) nth($value, 2);
+      }
+      // swap 1st with 2nd
+      @else if(length($value) == 2) {
+        @return nth($value, 2) nth($value, 1);
+      }
+    }
+    // invert percentage background positions
+    @else if($method == background-position) {
+      $first: first-value-of($value);
+      @if type-of($first) == number and (unit($first) == "%" or strip-units($first) == 0) {
+        @return list-replace($value, 1, (100% - $first), space);
+      }
+    }
+  }
+  @if(length($value) == 1) {
+    $value: first-value-of($value);
+  }
+  // if we get here, just return
+  @return $value;
+}
+
+
+$CORE_CSS_RTL_VALUE_SUPPORT: (margin padding border-width border-color border-style clear float text-align background-position);
+// convenience wrapper for RTL support
+// @mixin    wrapper-rtl
+// @param    $value {String|Number|List} the value to augment
+// @param    $method {String} the method (property) to use
+// @param    $direction {String} the direction to apply
+@mixin wrapper-rtl($value, $method: margin, $direction: false) {
+  @if($direction) {
+    #{$method}-#{rtl($direction)}: $value;
+  }
+  @else {
+    #{$method}: rtl($value);
+  }
+}
+
+// RTL wrapper for `margin`
+// @mixin    margin
+// @param    $value {List} margin
+// @param    $direction {String} the direction to apply
+@mixin margin($value, $direction: false) {
+  @include wrapper-rtl($value, margin, $direction);
+}
+// RTL wrapper for `margin-left`
+// @mixin    margin-left
+// @param    $value {Number} margin
+@mixin margin-left($value) {
+  @include margin($value, left);
+}
+// RTL wrapper for `margin-right`
+// @mixin    margin-right
+// @param    $value {Number} margin
+@mixin margin-right($value) {
+  @include margin($value, right);
+}
+// RTL wrapper for `margin-top` (not necessary but here for consistency)
+// @mixin    margin-top
+// @param    $value {Number} margin
+@mixin margin-top($value) {
+  @include margin($value, top);
+}
+// RTL wrapper for `margin-bottom` (not necessary but here for consistency)
+// @mixin    margin-bottom
+// @param    $value {Number} margin
+@mixin margin-bottom($value) {
+  @include margin($value, bottom);
+}
+
+// RTL wrapper for `padding`
+// @mixin    padding
+// @param    $value {List} padding
+// @param    $direction {String} the direction to apply
+@mixin padding($value, $direction: false) {
+  @include wrapper-rtl($value, padding, $direction);
+}
+// RTL wrapper for `padding-left`
+// @mixin    padding-left
+// @param    $value {Number} padding
+@mixin padding-left($value) {
+  @include padding($value, left);
+}
+// RTL wrapper for `padding-right`
+// @mixin    padding-right
+// @param    $value {Number} padding
+@mixin padding-right($value) {
+  @include padding($value, right);
+}
+// RTL wrapper for `padding-top` (not necessary but here for consistency)
+// @mixin    padding-top
+// @param    $value {Number} padding
+@mixin padding-top($value) {
+  @include padding($value, top);
+}
+// RTL wrapper for `padding-bottom` (not necessary but here for consistency)
+// @mixin    padding-bottom
+// @param    $value {Number} padding
+@mixin padding-bottom($value) {
+  @include padding($value, bottom);
+}
+
+// RTL wrapper for `border-width`
+// @mixin    border-width
+// @param    $value {List} width
+// @param    $direction {String} the direction to apply
+@mixin border-width($value, $direction: false) {
+  $direction: if($direction, rtl($direction) + '-', '');
+  @include wrapper-rtl($value, border-#{$direction}width);
+}
+// RTL wrapper for `border-left-width`
+// @mixin    border-left-width
+// @param    $value {List} width
+@mixin border-left-width($value) {
+  @include border-width($value, left);
+}
+// RTL wrapper for `border-right-width`
+// @mixin    border-right-width
+// @param    $value {List} width
+@mixin border-right-width($value) {
+  @include border-width($value, right);
+}
+// RTL wrapper for `border-top-width` (not necessary but here for consistency)
+// @mixin    border-top-width
+// @param    $value {List} width
+@mixin border-top-width($value) {
+  @include border-width($value, top);
+}
+// RTL wrapper for `border-bottom-width` (not necessary but here for consistency)
+// @mixin    border-bottom-width
+// @param    $value {List} width
+@mixin border-bottom-width($value) {
+  @include border-width($value, bottom);
+}
+
+// RTL wrapper for `border-color`
+// @mixin    border-color
+// @param    $value {List} color
+// @param    $direction {String} the direction to apply
+@mixin border-color($value, $direction: false) {
+  $direction: if($direction, rtl($direction) + '-', '');
+  @include wrapper-rtl($value, border-#{$direction}color);
+}
+// RTL wrapper for `border-left-color`
+// @mixin    border-left-color
+// @param    $value {List} color
+@mixin border-left-color($value) {
+  @include border-color($value, left);
+}
+// RTL wrapper for `border-right-color`
+// @mixin    border-right-color
+// @param    $value {List} color
+@mixin border-right-color($value) {
+  @include border-color($value, right);
+}
+// RTL wrapper for `border-top-color` (not necessary but here for consistency)
+// @mixin    border-top-color
+// @param    $value {List} color
+@mixin border-top-color($value) {
+  @include border-color($value, top);
+}
+// RTL wrapper for `border-bottom-color` (not necessary but here for consistency)
+// @mixin    border-bottom-color
+// @param    $value {List} color
+@mixin border-bottom-color($value) {
+  @include border-color($value, bottom);
+}
+
+// RTL wrapper for `border-style`
+// @mixin    border-style
+// @param    $value {List} style
+// @param    $direction {String} the direction to apply
+@mixin border-style($value, $direction: false) {
+  $direction: if($direction, rtl($direction) + '-', '');
+  @include wrapper-rtl($value, border-#{$direction}style);
+}
+// RTL wrapper for `border-left-style`
+// @mixin    border-left-style
+// @param    $value {List} style
+@mixin border-left-style($value) {
+  @include border-style($value, left);
+}
+// RTL wrapper for `border-right-style`
+// @mixin    border-right-style
+// @param    $value {List} style
+@mixin border-right-style($value) {
+  @include border-style($value, right);
+}
+// RTL wrapper for `border-top-style` (not necessary but here for consistency)
+// @mixin    border-top-style
+// @param    $value {List} style
+@mixin border-top-style($value) {
+  @include border-style($value, top);
+}
+// RTL wrapper for `border-bottom-style` (not necessary but here for consistency)
+// @mixin    border-bottom-style
+// @param    $value {List} style
+@mixin border-bottom-style($value) {
+  @include border-style($value, bottom);
+}
+
+// an RTL wrapper for `clear`
+// @mixin    float
+// @param    $value {String} the direction to clear
+@mixin clear($value: left) {
+  clear: rtl($value);
+}
+
+// an RTL wrapper for `float`
+// @mixin    float
+// @param    $value {String} the float direction
+@mixin float($value: left) {
+  float: rtl($value);
+}
+
+// an RTL wrapper for `text-align`
+// @mixin    text-align
+// @param    $value {String} the alignment
+@mixin text-align($value: left) {
+  text-align: rtl($value);
+}
+
+// an RTL wrapper for `left`
+// @mixin    left
+// @param    $value {Number} the position
+@mixin left($value: auto) {
+  #{rtl(left)}: $value;
+}
+
+// an RTL wrapper for `right`
+// @mixin    right
+// @param    $value {Number} the position
+@mixin right($value: auto) {
+  #{rtl(right)}: $value;
+}
+
+// an RTL wrapper for `background-position`
+// @mixin    background-position
+// @param    $value {List} the background position coordinates
+@mixin background-position($value) {
+  background-position: rtl($value, background-position);
+}