accoutrement 0.0.5 → 0.1.0

data/stylesheets/accoutrement/_background.scss

@@ -1,116 +0,0 @@
-// ----------------------------------------------------------------------------
-// Imports
-
-@import 'sass-lists';
-@import 'color';
-
-// ----------------------------------------------------------------------------
-// Temporary gradient fixes
-
-// Return the convert angle or position for a css gradient using either syntax
-//
-// convert-gradient-angle($deg)
-// - $deg : The angle or position to convert.
-//          - Whichever syntax you pass, the other will be returned.
-@function convert-gradient-angle(
-  $deg
-) {
-  @if type-of($deg) == 'number' {
-    @return mod(abs($deg - 450), 360deg);
-  } @else {
-    $direction: compact();
-    @if nth($deg,1) == 'to' {
-      @if length($deg) < 2 {
-        $direction: top;
-        @warn "no direction given for 'to'. Using 'to bottom' as default.";
-      } @else { $direction: opposite-position(nth($deg,2)); }
-      @if length($deg) > 2 { $direction: append($direction, opposite-position(nth($deg,3)), space);}
-    } @else {
-      $direction: append($direction, to, space);
-      @each $pos in $deg { $direction: append($direction, opposite-position($pos), space); }
-    }
-    @return $direction;
-  }
-}
-
-// Return a linear gradient converted between the old and new syntax
-//
-// convert-linear($angle, $details...)
-// - $angle       : The angle or position to be converted.
-// - $details...  : Color-stops and other details that don't require conversion.
-@function convert-gradient(
-  $angle,
-  $details...
-) {
-  @return linear-gradient(convert-gradient-angle($angle), $details...);
-}
-
-// Create a single gradient background image.
-// Layered backgrounds require a bit more finess than mixins provide.
-//
-// @include gradient-background-image($gradient...)
-// - $gradient: A list of gradient features (position/angle, color-stops, etc.)
-@mixin gradient-background-image(
-  $gradient...
-) {
-  @include background-image(convert-gradient($gradient...));
-  background-image: linear-gradient($gradient...);
-}
-
-// ----------------------------------------------------------------------------
-// Stripes
-
-// Returns a striped gradient for use anywhere gradients are accepted.
-//
-// stripes($position, $colors)
-// - $position: the starting position or angle of the gradient.
-// - $colors: a list of all the colors to be used.
-@function stripes(
-  $position,
-  $colors
-) {
-  $colors: if(type-of($colors) != 'list', compact($colors), $colors);
-  $gradient: compact();
-  $width: 100% / length($colors);
-
-  @for $i from 1 through length($colors) {
-    $pop: nth($colors,$i);
-    $new: $pop ($width * ($i - 1)), $pop ($width * $i);
-    $gradient: join($gradient, $new, comma);
-  }
-
-  @return linear-gradient($position, $gradient);
-}
-
-// ----------------------------------------------------------------------------
-// Color Palettes
-
-// Returns a full list of tinted and shaded variations on a color.
-//
-// get-palette($color [, $tints, $shades])
-// - $color   : The color that your palette stack will be based around.
-// - $tints   : Optional list of percentage tint amounts.
-// - $shades  : Optional list of percentage shade amounts.
-@function get-palette(
-  $color,
-  $tints: $default-tints,
-  $shades: $default-shades
-) {
-  $tint-stack: tint-stack($color, $tints);
-  $shade-stack: shade-stack($color, $shades);
-  @return remove-duplicates(join(reverse($tint-stack), $shade-stack));
-}
-
-// Creates a background gradient color palette based on a given color
-//
-// palette($color [, $tints, $shades])
-// - $color   : The color that your palette gradient will be based around.
-// - $tints   : Optional list of percentage tint amounts.
-// - $shades  : Optional list of percentage shade amounts.
-@function palette(
-  $color,
-  $tints: $default-tints,
-  $shades: $default-shades
-) {
-  @return stripes(left,get-palette($color, $tints, $shades));
-}

data/stylesheets/accoutrement/_calc.scss

@@ -1,22 +0,0 @@
-// ----------------------------------------------------------------------------
-// Calc
-
-// ----------------------------------------------------------------------------
-// Returns a property/value pair using calc()
-//
-// calc($property, $calc [, $fallback])
-// - $property  : Any css property that accepts calc().
-// - $calc      : A *quoted* calc function, e.g. '100% - 7rem'.
-// - $fallback  : An optional non-calc value to use on older browsers.
-@mixin calc(
-  $property,
-  $calc,
-  $fallback: false
-) {
-  $calc: unquote($calc);
-  @if $fallback { #{$property}: $fallback; }
-  #{$property}: -webkit-calc(#{$calc});
-  #{$property}: -moz-calc(#{$calc});
-  #{$property}: -o-calc(#{$calc});
-  #{$property}: calc(#{$calc});
-}

data/stylesheets/accoutrement/_color.scss

@@ -1,182 +0,0 @@
-// ----------------------------------------------------------------------------
-// Brightness
-
-// Returns the visual brightness of a color.
-//
-// brightness($color)
-// - $color: You know.
-@function brightness($color) {
-  @return round((red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000);
-}
-
-// ----------------------------------------------------------------------------
-// Contrast
-
-// Set the default light and dark contrasts.
-$contrasted-dark-default  : black     !default;
-$contrasted-light-default : white     !default;
-
-// Return a light or dark option based on best visual contrast.
-//
-// contrast($color [, $contrast])
-// - $color: The known color to contrast against.
-// - $contrast: Two colors (light and dark) to pick for best contrast.
-@function contrast(
-  $color,
-  $contrast: $contrasted-dark-default $contrasted-light-default
-) {
-  $contrasted-light: false;
-  $contrasted-dark: false;
-
-  @if length($contrast) == 2 {
-    $light1: brightness(nth($contrast,1));
-    $light2: brightness(nth($contrast,2));
-    $contrasted-light: if($light1 > $light2, nth($contrast,1), nth($contrast,2));
-    $contrasted-dark: if($light1 < $light2, nth($contrast,1), nth($contrast,2));
-  } @else {
-    @warn "Contrast takes two colors (light & dark) for the second argument.";
-  }
-
-  $color-brightness: brightness($color);
-  $light-contrast-brightness: brightness($contrasted-light);
-  $dark-contrast-brightness: brightness($contrasted-dark);
-
-  $light-diff: abs($color-brightness - $light-contrast-brightness);
-  $dark-diff: abs($color-brightness - $dark-contrast-brightness);
-
-  @return if($light-diff > $dark-diff, $contrasted-light, $contrasted-dark);
-}
-
-// ----------------------------------------------------------------------------
-// Color Stacks
-
-// Set the default mixing intervals for use in color stacks.
-$default-amounts  : 20% 40% 60% 70% 80%     !default;
-$default-tints    : $default-amounts        !default;
-$default-shades   : $default-amounts        !default;
-
-// Returns a list of mixed colors at given intervals
-// based on two initial source colors.
-//
-// color-stack($main, $second [, $amounts])
-// - $main    : The main color this stack is based on.
-// - $second  : The color to be mixed in at varrying amounts.
-// - $amounts : Optional list of percentage mix intervals.
-@function color-stack(
-  $main,
-  $second,
-  $amounts: $default-amounts
-) {
-  $stack: $main;
-
-  @each $amount in $amounts {
-    $stack: join($stack, mix($second, $main, $amount));
-  }
-
-  @return $stack;
-}
-
-// Shortcut for returning tint stacks based on a given color.
-//
-// tint-stack($color [, $amounts])
-// - $color   : The color to tint.
-// - $amounts : Optional list of percentage tint amounts.
-@function tint-stack(
-  $color,
-  $amounts: $default-tints
-) {
-  @return color-stack($color, #fff, $amounts);
-}
-
-// Shortcut for returning shade stacks based on a given color.
-//
-// shade-stack($color [, $amounts])
-// - $color       : The color to shade.
-// - $amounts...  : Optional list of percentage shade amounts.
-@function shade-stack(
-  $color,
-  $amounts: $default-shades
-) {
-  @return color-stack($color, #000, $amounts);
-}
-
-// ---------------------------------------------------------------------------
-// Managing Colors
-
-// Returns a given tint or shade of a color,
-// with options for changing saturation and alpha channels as well.
-//
-// color($color [, $alpha, $tints, $shades])
-// - $color   : The color to work from (See "Parsing Colors" detail below)
-// - $tints   : Optional list of percentage tint amounts.
-// - $shades  : Optional list of percentage shade amounts.
-//
-// Parsing Colors: $color == $saturation $color $tint-shade
-// - Any color value will be used as the base color.
-// - Any percentage preceeding the color will scale saturation.
-// - Any intiger, percentage, or keyword will change tint/shade:
-//   - Intigers step through your list of tint/shade amounts.
-//   - Percentages are used directly as tint/shade amounts.
-//   - Positive numbers tint, negative numbers scale.
-//   - Keywords light/lighter/lightest & dark/darker/darkest
-//     use the first, middle, and last amounts in a stack.
-@function color(
-  $color,
-  $alpha: 1,
-  $tints: $default-tints,
-  $shades: $default-shades
-) {
-  $saturation: false;
-  $lightness: false;
-  $hue: hsl(0,0%,50%);
-  $has-hue: false;
-  $index: 0;
-
-  @each $arg in $color {
-    @if type-of($arg) == 'color' {
-      $hue: $arg;
-      $has-hue: true;
-    }
-    @if type-of($arg) == 'number' {
-      @if unit($arg) != '' {
-        @if $has-hue or length($color) == 1 { $lightness: $arg; }
-        @else{ $saturation: $arg; }
-      }
-      @else { $index: $arg; }
-    }
-    @if type-of($arg) == 'string' {
-      $tint-length   : length($tints);
-      $tint-half     : floor($tint-length/2);
-      $shade-length  : length($shades);
-      $shade-half    : floor($shade-length/2);
-      @if $arg == 'light' { $index: 1; }
-      @if $arg == 'lighter' { $index: if($tint-half < 2, 2, $tint-half); }
-      @if $arg == 'lightest' { $index: $tint-length; }
-      @if $arg == 'dark' { $index: -1; }
-      @if $arg == 'darker' { $index: if($shade-half < 2, -2, - $shade-half); }
-      @if $arg == 'darkest' { $index: - $shade-length; }
-    }
-  }
-
-  @if $lightness and $lightness != 0 {
-    @if $lightness > 0 { $hue: tint($hue,$lightness); }
-    @else { $hue: shade($hue,abs($lightness)); }
-  } @else if $index and $index != 0 {
-    $color-stack: compact();
-    @if $index > 0 {
-      $index: $index + 1;
-      $color-stack: tint-stack($hue, $tints);
-    } @else {
-      $index: abs($index) + 1;
-      $color-stack: shade-stack($hue, $shades);
-    }
-    @if $index <= length($color-stack) {
-      $hue: nth($color-stack,$index);
-    } @else {
-      @warn "You don't have #{$index - 1} colors in this stack";
-    }
-  }
-
-  @if $saturation { $hue: scale-color($hue, $saturation: $saturation); }
-  @return rgba($hue, $alpha);
-}

data/stylesheets/accoutrement/_flexbox.scss

@@ -1,297 +0,0 @@
-@import "compass/css3/shared";
-
-// enables 2009 syntax by default
-$flex-legacy        : false   !default;
-
-// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
-// Chrome 21 (prefixed)
-// Opera 12.1 (unprefixed)
-// Firefox 20 (unprefixed)
-$flex-webkit        : true    !default;
-$flex-moz           : false   !default;
-$flex-o             : false   !default;
-$flex-ms            : false   !default;
-$flex-khtml         : false   !default;
-$flex-official      : true    !default;
-
-// March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
-// Demo: http://umaar.github.com/css-flexbox-demo/
-// More: http://www.inserthtml.com/2012/05/css3-flex-box-specification-change-layout-design/
-// Chrome 17 (prefixed)
-// Internet Explorer 10 (prefixed) (http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx)
-// Safari?
-$flex-2012-webkit   : true    !default;
-$flex-2012-moz      : false   !default;
-$flex-2012-ms       : true    !default;
-
-// July 2009 Working Draft (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
-// Firefox <20 (prefixed)
-$flex-2009-webkit   : false   !default;
-$flex-2009-moz      : true    !default;
-
-// --------------------------------
-// Common
-
-@function standard-to-draft-value($value, $version: 2009) {
-  @if $value == flex-start {
-    @return start;
-  } @else if $value == flex-end {
-    @return end;
-  } @else if $value == space-between {
-    @return justify;
-  } @else if $value == space-around {
-    @return if($version == 2009, justify, distribute);
-  }
-  @return $value;
-}
-
-@mixin flex-standard($property, $value) {
-  @include experimental($property, $value,
-    $flex-moz,
-    $flex-webkit,
-    $flex-o,
-    $flex-ms,
-    $flex-khtml,
-    $flex-official);
-}
-
-@mixin flex-2012($property, $value) {
-  @include experimental($property, $value,
-    $flex-2012-moz,
-    $flex-2012-webkit,
-    false,
-    $flex-2012-ms,
-    false,
-    false);
-}
-
-@mixin flex-2009($property, $value) {
-  @include experimental($property, $value,
-    $flex-2009-moz,
-    $flex-2009-webkit,
-    false,
-    false,
-    false,
-    false);
-}
-
-// mixin to use if standard and 2012 have the same property names
-@mixin flex-modern($property, $value) {
-  @include experimental($property, $value,
-    $flex-2012-moz or $flex-moz,
-    $flex-2012-webkit or $flex-webkit,
-    false, // opera
-    $flex-2012-ms or $flex-ms,
-    false, // khtml,
-    true); // official
-}
-
-// --------------------------------
-// Display property
-
-// $type: flex | inline-flex
-@mixin display-flex($type: flex, $legacy: $flex-legacy) {
-  @if $legacy {
-    @include legacy-display-flex($type);
-  }
-
-  @include experimental-value(display, if($type == flex, flexbox, inline-flexbox),
-    $flex-2012-moz,
-    $flex-2012-webkit,
-    false,
-    $flex-2012-ms,
-    false,
-    false);
-  @include experimental-value(display, $type,
-    $flex-moz,
-    $flex-webkit,
-    $flex-o,
-    $flex-ms,
-    $flex-khtml,
-    $flex-official);
-}
-
-@mixin legacy-display-flex($type: flex) {
-  @include experimental-value(display, if($type == flex, box, inline-box),
-    $flex-2009-moz,
-    $flex-2009-webkit,
-    false,
-    false,
-    false,
-    false);
-}
-
-// --------------------------------
-// Flex
-
-// $value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
-@mixin flex($value: 0 1 auto, $legacy: $flex-legacy) {
-  @if $legacy and unitless(nth($value, 1)) {
-    // 2009 version does not have a shorthand, see `legacy-flex-grow`
-    @include legacy-flex-grow(nth($value, 1));
-  }
-
-  @include flex-modern(flex, $value);
-}
-
-// --------------------------------
-
-// $value: Integer
-@mixin flex-grow($value: 0, $legacy: $flex-legacy) {
-  @if $legacy {
-    @include legacy-flex-grow($value);
-  }
-
-  // There is no 2012 version of this property
-  @include flex-standard(flex-grow, $value);
-}
-
-@mixin legacy-flex-grow($value: 0) {
-  @include flex-2009(box-flex, $value);
-}
-
-// --------------------------------
-
-// $value: Integer
-@mixin flex-shrink($value: 1) {
-  // There is no 2009 version of this property
-  // There is no 2012 version of this property
-  @include flex-standard(flex-shrink, $value);
-}
-
-// --------------------------------
-
-// $value: united number (eg: 100px)
-@mixin flex-basis($value: auto) {
-  // There is no 2009 version of this property
-  // There is no 2012 version of this property
-  @include flex-standard(flex-basis, $value);
-}
-
-// --------------------------------
-// Flex-flow
-
-// <'flex-direction'> || <'flex-wrap'>
-@mixin flex-flow($value: row nowrap, $legacy: $flex-legacy) {
-  @if $legacy {
-    @include legacy-flex-flow($value);
-  }
-
-  @include flex-modern(flex-flow, $value);
-}
-
-@mixin legacy-flex-flow($value: row nowrap) {
-  @if length($value) > 1 { // 2009 version doesn't have a shorthand
-    @include legacy-flex-direction(nth($value, 1));
-    @include legacy-flex-wrap(nth($value, 2));
-  } @else {
-    @if $value == row or $value == row-reverse or $value == column or $value == column-reverse {
-      @include legacy-flex-direction($value);
-    } @else {
-      @include legacy-flex-wrap($value);
-    }
-  }
-}
-
-// --------------------------------------------------------------------------------
-
-// $value: row | row-reverse | column | column-reverse
-@mixin flex-direction($value: row, $legacy: $flex-legacy) {
-  @if $legacy {
-    @include legacy-flex-direction($value);
-  }
-
-  @include flex-modern(flex-direction, $value);
-}
-
-@mixin legacy-flex-direction($value: row) {
-  @include flex-2009(box-orient, if($value == row or $value == row-reverse, horizontal, vertical));
-}
-
-// --------------------------------------------------------------------------------
-
-// $value: nowrap | wrap | wrap-reverse
-@mixin flex-wrap($value: nowrap, $legacy: $flex-legacy) {
-  @if $legacy {
-    @include legacy-flex-wrap($value);
-  }
-
-  @include flex-modern(flex-direction, $value);
-}
-
-@mixin legacy-flex-wrap($value: nowrap) {
-  @include flex-2009(box-lines, if($value == nowrap, single, multiple));
-  @include flex-2009(box-direction, if($value == wrap-reverse, reverse, normal));
-}
-
-// --------------------------------
-// "Packing" & Alignment
-
-// Distributing extra space along the "main axis"
-// $value: flex-start | flex-end | center | space-between | space-around
-@mixin justify-content($value: flex-start, $legacy: $flex-legacy) {
-  @if $legacy {
-    @include legacy-justify-content($value);
-  }
-
-  @include flex-2012(flex-pack, standard-to-draft-value($value, 2012));
-  @include flex-standard(justify-content, $value);
-}
-
-@mixin legacy-justify-content($value: flex-start) {
-  @include flex-2009(box-pack, standard-to-draft-value($value, 2009));
-}
-
-// --------------------------------
-
-// Distributing extra space along the "cross axis"
-// $value: flex-start | flex-end | center | space-between | space-around | stretch
-@mixin align-content($value: flex-start, $legacy: $flex-legacy) {
-  @if $legacy {
-    @include legacy-align-content($value);
-  }
-
-  @include flex-2012(flex-line-pack, standard-to-draft-value($value, 2012));
-  @include flex-standard(align-content, $value);
-}
-
-@mixin legacy-align-content($value: flex-start) {
-  @include flex-2009(box-align, standard-to-draft-value($value, 2009));
-}
-
-// --------------------------------
-
-// Align items along the "cross axis"
-// $value: flex-start | flex-end | center | baseline | stretch
-@mixin align-items($value: stretch) { // the flex container
-  // There is no 2009 version of this property
-  @include flex-2012(flex-align, standard-to-draft-value($value, 2012));
-  @include flex-standard(align-items, $value);
-}
-
-// --------------------------------
-// Child properties
-
-// Align items along the "cross axis" -- overrides `align-items` value on individual items
-// $value: auto | flex-start | flex-end | center | baseline | stretch
-@mixin align-self($value: auto) { // children of flex containers
-  // There is no 2009 version of this property
-  @include flex-2012(flex-item-align, standard-to-draft-value($value, 2012));
-  @include flex-standard(align-self, $value);
-}
-
-// --------------------------------
-
-// $value: Integer
-@mixin order($value: 0, $legacy: $flex-legacy) {
-  @if $legacy {
-    @include legacy-order($value);
-  }
-
-  @include flex-2012(flex-order, $value);
-  @include flex-standard(order, $value);
-}
-
-@mixin legacy-order($value: 0) {
-  @include flex-2009(box-ordinal-group, $value);
-}