archetype 0.0.1.pre.12 → 0.0.1.pre.13

data/stylesheets/archetype/grid/_grid.scss

@@ -68,7 +68,7 @@
 // @param     $left {Number} the number of units to dent left
 // @param     $right {Number} the number of units to dent right
 // @param     $direction {String} [in|out] the direction to dent
-// @param     $abuse {Bool} @see _getUnit
+// @param     $abuse {Boolean} @see _getUnit
 // @return    $dent {List} list of dents
 @function _gridDent($list: false, $left: 0, $right: 0, $direction: in, $abuse: false) {
   $factor: if($direction == out, -1, 1) * $CONFIG_GRID_SPACING_FACTOR;
@@ -92,7 +92,7 @@
 // @param     $list {List} list of indents
 // @param     $left {Number} the number of units to indent left
 // @param     $right {Number} the number of units to indent right
-// @param     $abuse {Bool} @see _getUnit
+// @param     $abuse {Boolean} @see _getUnit
 // @return    {List} list of indents
 @function grid-indent($list: false, $left: 0, $right: 0, $abuse: false) {
   @return _gridDent($list, $left, $right, $direction: in, $abuse: $abuse);
@@ -103,7 +103,7 @@
 // @param     $list {List} list of outdents
 // @param     $left {Number} the number of units to outdent left
 // @param     $right {Number} the number of units to outdent right
-// @param     $abuse {Bool} @see _getUnit
+// @param     $abuse {Boolean} @see _getUnit
 // @return    {List} list of outdents
 @function grid-outdent($list: false, $left: 0, $right: 0, $abuse: false) {
   @return _gridDent($list, $left, $right, $direction: out, $abuse: $abuse);
@@ -217,7 +217,7 @@
 
 // this lets rows clear the floated containers
 // @mixin     grid-row
-// @param     $debug {Bool} use debug stylings
+// @param     $debug {Boolean} use debug stylings
 @mixin grid-row($debug: false) {
   @include grid-block(true);
   @include debug-hover-box(rgb(255, 0, 255), $if: ($debug or $CONFIG_GRID_DEBUG));
@@ -225,7 +225,7 @@
 
 // output the block methods
 // @mixin     grid-block
-// @param     $row {Bool} is this block a row
+// @param     $row {Boolean} is this block a row
 @mixin grid-block($row: false) {
   // FLOAT
   @if($CONFIG_GRID_ALIGN_METHOD == float){
@@ -257,7 +257,7 @@
       //text-space-collapse: collapse;
     }
     @else {
-      // if reading direction is differernt from the grid direction,
+      // if reading direction is different from the grid direction,
       // reset the reading direction of the inner container
       @if(reading-direction() != $CONFIG_GRID_DIRECTION) {
         direction: reading-direction();
@@ -283,7 +283,7 @@
       border-spacing: $CONFIG_GRID_GUTTER 0;
     }
     @else {
-      // if reading direction is differernt from the grid direction,
+      // if reading direction is different from the grid direction,
       // reset the reading direction of the inner container
       @if(reading-direction() != $CONFIG_GRID_DIRECTION) {
         direction: reading-direction();
@@ -302,7 +302,7 @@
 // @mixin     grid-canvas
 // @param     $columns {Number} the number or fraction of columns to span, if fraction, must specify $of
 // @param     $of {Number} the total number of columns spanned, only use with fractional $columns
-// @param     $debug {Bool} use debug stylings
+// @param     $debug {Boolean} use debug stylings
 @mixin grid-canvas($columns: false, $of: false, $debug: false) {
   @include grid($columns: $columns, $of: $of, $debug: $debug, $canvas: true);
 }
@@ -310,15 +310,15 @@
 // the main grid mixin
 // @mixin     grid
 // @param     $columns {Number} the number or fraction of columns to span, if fraction, must specify $of
-// @param     $first {Bool} is this the first grid block of a row
+// @param     $first {Boolean} is this the first grid block of a row
 // @param     $of {Number} the total number of columns spanned, only use with fractional $columns
 // @param     $indent {List} the grid indents @see grid-indent
 // @param     $outdent {List} the grid outdents @see grid-outdent
 // @param     $offset {List} the grid offsets @see grid-offset, grid-push, grid-pull
-// @param     $canvas {Bool} treat this grid block as a canvas; a canvas is a non-floated, centered grid-block
-// @param     $row {Bool} @see grid-row
-// @param     $center {Bool} whether or not to center the grid block
-// @param     $debug {Bool} use debug stylings
+// @param     $canvas {Boolean} treat this grid block as a canvas; a canvas is a non-floated, centered grid-block
+// @param     $row {Boolean} @see grid-row
+// @param     $center {Boolean} whether or not to center the grid block
+// @param     $debug {Boolean} use debug stylings
 @mixin grid($columns: false, $first: false, $of: false, $indent: false, $outdent: false, $offset: false, $offset-method: $CONFIG_GRID_OFFSET_METHOD, $canvas: false, $row: false, $center: false, $debug: false) {
   @if($row) {
     @include grid-row($debug: $debug);

data/stylesheets/archetype/styleguide/components/_buttons.scss

@@ -15,6 +15,7 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTT
     margin                  0,
     overflow                visible,
     text-decoration         (none !important),
+    text-align              center,
     width                   auto,
     text-shadow             $CONFIG_SHADOW_BUTTON_TEXT,
     // sizing

data/stylesheets/archetype/util/_debug.scss

@@ -2,8 +2,8 @@
 
 // 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
+// @param     $if {Boolean} optional override for $CONFIG_DEBUG
+// @return    {Boolean} 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
@@ -13,7 +13,7 @@
 // a debug helper, print out a message
 // @mixin     debug-message
 // @param     $message {String} the message to output
-// @param     $if {Bool} override $CONFIG_DEBUG
+// @param     $if {Boolean} override $CONFIG_DEBUG
 @mixin debug-message($message, $if: nil) {
   @if(is-debug-enabled($if)) {
     @if archetype-version('sass >= 3.2') {
@@ -29,7 +29,7 @@
 // @mixin     debug-hover-box
 // @param     $color {String} the color to draw the border
 // @param     $opacity {Number}
-// @param     $if {Bool} override $CONFIG_DEBUG
+// @param     $if {Boolean} override $CONFIG_DEBUG
 @mixin debug-hover-box($color: rgb(0, 255, 255), $opacity: 0.9, $if: nil) {
   @if(is-debug-enabled($if)) {
     &:hover {

data/stylesheets/archetype/util/_lists.scss

@@ -5,7 +5,7 @@
 // @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
+// @return    $new-list {Boolean} the list with removed index
 @function list-remove($list: (), $idx: false, $separator: auto) {
   @return list-replace($list: $list, $idx: $idx, $value: nil, $separator: $separator);
 }

data/stylesheets/archetype/util/_misc.scss

@@ -20,7 +20,7 @@ $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
+// @return    {Boolean} true if the first time invoked, false otherwise
 @function do-once($name) {
   @if index($REGISTRY_DO_ONCE, $name) {
     @return false;

data/stylesheets/archetype/util/_rtl.scss

@@ -5,7 +5,7 @@
 // @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
+// @return    {Boolean|List|String} the augmented value
 @function rtl($value: false, $method: false, $force: false) {
   $dir: if($force, $force, reading-direction());
   @if($value == false) {

data/stylesheets/archetype/util/_spacing.scss

@@ -5,7 +5,7 @@
 // @private
 // @param     $unit {Number} unit of measurement
 // @param     $direction {String} [horizontal|vertical] spacing
-// @param     $abuse {Bool} @see _getUnit
+// @param     $abuse {Boolean} @see _getUnit
 // @return    {String} the calculated spacing
 @function _spacing($unit: nil, $direction: horizontal, $abuse: false) {
   @if $unit == nil {
@@ -19,7 +19,7 @@
 // horizonatl spacing calculations
 // @function  horizontal-spacing
 // @param     $unit {Number} unit of measurement
-// @param     $abuse {Bool} @see _getUnit
+// @param     $abuse {Boolean} @see _getUnit
 // @return    {String} the calculated horizontal spacing
 @function horizontal-spacing($unit, $abuse: false) {
   @return _spacing($unit, $abuse: $abuse);
@@ -28,7 +28,7 @@
 // vertical spacing calculations
 // @function  vertical-spacing
 // @param     $unit {Number} unit of measurement
-// @param     $abuse {Bool} @see _getUnit
+// @param     $abuse {Boolean} @see _getUnit
 // @return    {String} the calculated vertical spacing
 @function vertical-spacing($unit, $abuse: false) {
   @return _spacing($unit, $direction: vertical, $abuse: $abuse);
@@ -40,7 +40,7 @@
 // @param     $top {Number} the units to offset from the top
 // @param     $bottom {Number} the units to offset from the bottom
 // @param     $method {String} [margin|padding] offset method
-// @param     $abuse {Bool} @see _getUnit
+// @param     $abuse {Boolean} @see _getUnit
 @mixin vertical-spacing($list: false, $top: nil, $bottom: nil, $method: false, $abuse: false) {
   $list: get-collection($list, ($top $bottom), $min: 2);
   @include _spacing($list, vertical, $method: $method, $abuse: $abuse);
@@ -51,7 +51,7 @@
 // @param     $left {Number} the units to offset from the left
 // @param     $right {Number} the units to offset from the right
 // @param     $method {String} [margin|padding] offset method
-// @param     $abuse {Bool} @see _getUnit
+// @param     $abuse {Boolean} @see _getUnit
 @mixin horizontal-spacing($list: false, $left: nil, $right: nil, $method: false, $abuse: false) {
   $list: get-collection($list, ($left $right), $min: 2);
   @include _spacing($list, $method: $method, $abuse: $abuse);
@@ -62,7 +62,7 @@
 // @private
 // @param     $units {List} the list of units e.g. (1) => $left:1 $right:1; (1 0) => $left:1 $right:0;
 // @param     $method {String} [margin|padding] offset method
-// @param     $abuse {Bool} @see _getUnit
+// @param     $abuse {Boolean} @see _getUnit
 @mixin _spacing($units, $direction: horizontal, $method: false, $abuse: false) {
   @if(not $method) {
     $method: $CONFIG_SPACING_METHOD;

data/stylesheets/archetype/util/_styles.scss

@@ -10,7 +10,6 @@
 // @param     $value {*} the CSS value to output
 @mixin _outputStyle($property, $value: nil) {
   @if($value != nil) {
-    // !!DO NOT COPY TO ARCHETYPE - this mixin is specific to _round_button.scss
     @if($property == round-button-ie-support) {
       @include round-button-ie-support($value)
     }
@@ -40,9 +39,9 @@
 // @param     $property {String} the CSS property to output
 // @param     $value {*} the CSS value to output
 @mixin output-style($property, $value: nil) {
-  @if($property != nil and nth(-compass-list($value), 1) != nil and not index($CONFIG_DISABLED_CSS, $property)) {
+
+  @if($property != nil and length(-compass-list($value)) > 0 and first-value-of(-compass-list($value)) != nil and not index($CONFIG_DISABLED_CSS, $property)) {
     // for mixins, we need to do some custom work
-    // has-custom-output-styler: copy & pasted from latest github repo 10/3/2013
     // check to see if we have a custom output styler (pre)
     @if has-custom-output-styler($property, $value, pre) == true {
       @include custom-output-styler($property, $value, $method: pre);
@@ -87,8 +86,14 @@
     @else if($property == stretch)              { @include stretch(); }
     // appearance
     @else if($property == appearance)           { @include appearance($value); }
-    @else if($property == glyph-icon)           { @include glyph-icon(nth($value, 1), nth($value, 2), nth($value, 3), nth($value, 4), nth($value, 5)); }
+    // unhide-element
+    @else if($property == unhide-element)       { @include unhide-element(); }
+    // ellipsis
+    @else if($property == ellipsis)             { @include ellipsis(); }
+    // scale
     @else if($property == scale)                { @include scale($value); }
+    @else if($property == glyph-icon)           { @include glyph-icon(nth($value, 1), nth($value, 2), nth($value, 3), nth($value, 4), nth($value, 5)); }
+    @else if($property == extend)               { @extend #{$value}; }
     // animations
     @else if($property == animation) {
       @if archetype-version('compass >= 0.13') {
@@ -158,7 +163,6 @@
     }
     //ellipsis
     @else if($property == ellipsis)   { @include ellipsis(); }
-    // has-custom-output-styler: copy & pasted from latest github repo 10/3/2013
     // check to see if we have a custom output styler (post)
     @else if has-custom-output-styler($property, $value, post) == true {
       @include custom-output-styler($property, $value, $method: post);
@@ -169,10 +173,10 @@
 }
 
 // convert a list of key-value pairs into CSS rules
-// @mixin to-styles
-// @param $list {List} a key-value paired list of ($property $value)
-// @param $states {Boolean|List} if true, output all states; if false, output no states; if a list, output only the states in the list
-// @param $exclude {List} a list of styles to exclude from output
+// @mixin     to-styles
+// @param     $list {List} a key-value paired list of ($property $value)
+// @param     $states {Boolean|List} if true, output all states; if false, output no states; if a list, output only the states in the list
+// @param     $exclude {List} a list of styles to exclude from output
 @mixin to-styles($list: (), $states: true, $selectors: true, $exclude: ()) {
   $exclude: -compass-list($exclude);
   $states-data: ();
@@ -228,7 +232,14 @@
 }
 
 @function _getSelectorSelector($selector) {
-  @return first-value-of(-compass-list($selector));
+  $selector: first-value-of(-compass-list($selector));
+  @if $selector == $CORE_GLYPH_SELECTOR_VAR {
+    $selector: $archetype-glyph-selector;
+  }
+  @elseif $selector == $CORE_GLYPH_SELECTOR_VAR {
+    $selector: $archetype-pseudo-selector;
+  }
+  @return $selector;
 }
 
 // mixin for outputting filters in legacy IE

data/stylesheets/archetype/util/_targeting.scss

@@ -3,7 +3,7 @@
 @function _isLegacySupported($vendor, $comparator, $version) {
   // we currently only check for legacy IE support
   @if $vendor != ie { @return true; }
-  $compass-not-legacy-ie-version: 9; // the version if IE that Compass starts considering `legacy`
+  $compass-not-legacy-ie-version: 9;  // the version if IE that Compass starts considering `legacy`
   $min-ie-legacy-support: 999;
   @if($legacy-support-for-ie8) { $min-ie-legacy-support: 8; }
   @if($legacy-support-for-ie7) { $min-ie-legacy-support: 7; }

data/test/fixtures/stylesheets/archetype/config.rb

@@ -11,9 +11,11 @@ http_images_path  = "/assets/images"
 http_fonts_path   = "/assets/fonts"
 line_comments     = false
 environment       = :production
+testing           = true
 
 asset_cache_buster do |path, file|
   "busted=true"
 end
 
 disable_warnings = true
+

data/test/fixtures/stylesheets/archetype/source/base.scss

@@ -0,0 +1,3 @@
+@import "archetype";
+
+@include generate-loader-keyframes();

data/test/fixtures/stylesheets/archetype/source/hacks/transparent_focusable.scss

@@ -0,0 +1,5 @@
+@import "archetype";
+
+.test {
+  @include transparent-focusable();
+}

data/test/fixtures/stylesheets/archetype/source/locale.scss

@@ -0,0 +1,43 @@
+@import "archetype";
+
+// test for a simple locale
+.en_US {
+  @if(locale(en_US)) {
+    content: "en_US";
+  }
+}
+
+// test for a wildcard territory
+.en_wild {
+  @if(locale(en_)) {
+    content: "en_*";
+  }
+}
+
+// test for a wildcard language
+.wild_US {
+  @if(locale(_US)) {
+    content: "*_US";
+  }
+}
+
+// multiple locales, one valid
+.one {
+  @if(locale(de_DE fr_FR pt_ en_US)) {
+    content: "one of de_DE fr_FR pt_ en_US";
+  }
+}
+
+// multiple locales, none valid
+.not {
+  @if(not locale(ja_JP pt_BR _GB de_)) {
+    content: "not one of ja_JP pt_BR _GB de_";
+  }
+}
+
+// test that the lang() alias works
+.lang {
+  @if(lang(en_US)) {
+    content: "en_US";
+  }
+}

data/test/fixtures/stylesheets/archetype/source/styleguide/alerts.scss

@@ -0,0 +1,21 @@
+@import "archetype";
+
+@each $type in (error success notice yield) {
+  .alert.#{$type} {
+    @include styleguide($type alert);
+    .dismiss {
+      @include styleguide(close in a $type alert);
+    }
+  }
+}
+
+$CONFIG_GENERATED_TAG_INLINE: false;
+
+@each $type in (error success notice yield) {
+  .alert.#{$type} {
+    @include styleguide($type alert);
+    .dismiss {
+      @include styleguide(close in a $type alert);
+    }
+  }
+}

data/test/fixtures/stylesheets/archetype/source/styleguide/buttons.scss

@@ -1,4 +1,4 @@
-@import "archetype"; 
+@import "archetype";
 
 @each $context in container, bristol, punchcut {
   .#{$context} {
@@ -12,3 +12,7 @@
     }
   }
 }
+
+.test-exclude {
+  @include styleguide(small secondary button in a container, $exclude: width height border-radius padding font-size line-height cursor);
+}

data/test/fixtures/stylesheets/archetype/source/styleguide/drop.scss

@@ -0,0 +1,101 @@
+@import "archetype";
+
+@if not styleguide-component-exists(dropping-styles-test, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(dropping-styles-test, (), (
+  (default, (
+    display         block,
+    color           red,
+    background      green,
+    (states, (
+      (hover, (
+        styleguide  module,
+        border      (2px solid red),
+        (selectors, (
+          ('.test', (
+            padding  100px,
+            margin   20px
+          )),
+          nil
+        ))
+      )),
+      nil
+    ))
+  )),
+  (parent, (
+    display         none,
+    color           black
+  )),
+  (heir, (
+    inherit (parent),
+    nil
+  )),
+  (dropped, (
+    drop            true,
+    color           yellow
+  )),
+  (dropped2, (
+    drop            true,
+    color           yellow,
+    (states, (
+      (hover, (
+        color       blue,
+        nil
+      )),
+      (active, (
+        color       green,
+        width       100%
+      )),
+      nil
+    ))
+  )),
+  (dropped3, (
+    color           purple,
+    (states, (
+      drop          hover,  // TODO: this is currently throwing an ambiguous warning, need to investigate
+      nil
+    )),
+    nil
+  )),
+  (dropped4, (
+    color           purple,
+    (states, (
+      (hover, (
+        drop        selectors,
+        nil
+      )),
+      nil
+    ))
+  )),
+  nil
+), $CONFIG_THEME);
+}
+
+.dropping-styles-test {
+  /* should contain hover state and .test selector */
+  @include styleguide(dropping-styles-test);
+  &.parent {
+    /* should contain hover state and .test selector */
+    @include styleguide(parent dropping-styles-test);
+  }
+  &.heir {
+    /* should contain hover state and .test selector */
+    @include styleguide(heir dropping-styles-test);
+  }
+  &.dropped {
+    /* should only contain color:yellow */
+    @include styleguide(dropped dropping-styles-test);
+  }
+  &.dropped2 {
+    /* should contain color:yellow, custom :hover, :active */
+    @include styleguide(dropped2 dropping-styles-test);
+  }
+  &.dropped3 {
+    /* should only contain color:purple */
+    @include styleguide(dropped3 dropping-styles-test);
+  }
+  // TODO fix this guy: drops nested multiple levels deep don't resolve yet :(
+  //&.dropped4 {
+  //  /* should contain color:purple, :hover, but no `.test` selector */
+  //  @include styleguide(dropped4 dropping-styles-test);
+  //}
+}