archetype 0.0.1.pre.7 → 0.0.1.pre.8

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)
     }
@@ -43,9 +42,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);
@@ -90,29 +89,14 @@
     @else if($property == stretch)              { @include stretch(); }
     // appearance
     @else if($property == appearance)           { @include appearance($value); }
-    // bunch of RTL support
-    @else if($property == margin)               { @include margin($value); }
-    @else if($property == margin-left)          { @include margin-left($value); }
-    @else if($property == margin-right)         { @include margin-right($value); }
-    @else if($property == padding)              { @include padding($value); }
-    @else if($property == padding-left)         { @include padding-left($value); }
-    @else if($property == padding-right)        { @include padding-right($value); }
-    @else if($property == border-width)         { @include border-width($value); }
-    @else if($property == border-left-width)    { @include border-left-width($value); }
-    @else if($property == border-right-width)   { @include border-right-width($value); }
-    @else if($property == border-color)         { @include border-color($value); }
-    @else if($property == border-left-color)    { @include border-left-color($value); }
-    @else if($property == border-right-color)   { @include border-right-color($value); }
-    @else if($property == border-style)         { @include border-style($value); }
-    @else if($property == border-left-style)    { @include border-left-style($value); }
-    @else if($property == border-right-style)   { @include border-right-style($value); }
-    @else if($property == clear)                { @include clear($value); }
-    @else if($property == text-align)           { @include text-align($value); }
-    @else if($property == background-position)  { @include background-position($value); }
-    @else if($property == left)                 { @include left($value); }
-    @else if($property == right)                { @include right($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') {
@@ -182,7 +166,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);
@@ -195,7 +178,7 @@
 // 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 {Bool|List} if true, output all states; if false, output no states; if a list, output only the states in the list
+// @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);
@@ -206,100 +189,37 @@
       $property: nth($item, 1);
       $value: nth($item, 2);
       @if(not index($exclude, $property)) {
-        @if($property == states and $states != false) {
-          $states-data: $value;
-        }
-        @else if($property == selectors and $selectors != false) {
-          $selectors-data: $value;
-        }
-        @else if($selectors == true and $states == true) {
-          @include _outputStyle($property, $value);
-        }
-      }
-    }
-  }
-  // deal with the states
-  @if length($states-data) > 0 {
-    @each $state in $states-data {
-      $value: nth($state, 2);
-      $state: first-value-of($state);
-      @if(index(-compass-list($states), $state) or $states == true) {
-        #{_getStateSelector($state)} {
-          @include _toStyles2($value, true, true, $exclude);
+        // deal with the states
+        @if($property == states and $states != false and length($value) > 0) {
+          @each $state in $value {
+            $val: nth($state, 2);
+            $state: first-value-of($state);
+            @if(index(-compass-list($states), $state) or $states == true) {
+              #{_getStateSelector($state)} {
+                @include to-styles($val, true, true, $exclude);
+              }
+            }
+          }
         }
-      }
-    }
-  }
-  // deal with the nested selectors
-  @if length($selectors-data) > 0 {
-    @each $selector in $selectors-data {
-      @if(index(-compass-list($selectors), $selector) or $selectors == true) {
-        #{first-value-of($selector)} {
-          @include _toStyles2(nth($selector, 2), true, true, $exclude);
+        // deal with the nested selectors
+        @else if($property == selectors and $selectors != false and length($value) > 0) {
+          @each $selector in $value {
+            @if(index(-compass-list($selectors), $selector) or $selectors == true) {
+              #{_getSelectorSelector($selector)} {
+                @include to-styles(nth($selector, 2), true, true, $exclude);
+              }
+            }
+          }
         }
-      }
-    }
-  }
-}
+        // otherwise, just output it
+        @else if($selectors == true and $states == true ) {
+          @include _outputStyle($property, unquote($value));
 
-// this is identical to to-styles, but we need to avoid Sass' recursion check :(
-@mixin _toStyles2($list: (), $states: true, $selectors: true, $exclude: ()) {
-  $exclude: -compass-list($exclude);
-  $states-data: ();
-  $selectors-data: ();
-  @each $item in $list {
-    @if(length($item) > 1) {
-      $property: nth($item, 1);
-      $value: nth($item, 2);
-      @if(not index($exclude, $property)) {
-        @if($property == states and $states != false) {
-          $states-data: $value;
-        }
-        @else if($property == selectors and $selectors != false) {
-          $selectors-data: $value;
-        }
-        @else if($selectors == true and $states == true) {
-          @include _outputStyle($property, $value);
-        }
-      }
-    }
-  }
-  // deal with the states
-  @if length($states-data) > 0 {
-    @each $state in $states-data {
-      $value: nth($state, 2);
-      $state: first-value-of($state);
-      @if(index(-compass-list($states), $state) or $states == true) {
-        #{_getStateSelector($state)} {
-          @include _toStyles_final($value, $exclude);
-        }
-      }
-    }
-  }
-  // deal with the nested selectors
-  @if length($selectors-data) > 0 {
-    @each $selector in $selectors-data {
-      @if(index(-compass-list($selectors), $selector) or $selectors == true) {
-        #{first-value-of($selector)} {
-          @include _toStyles_final(nth($selector, 2), $exclude);
         }
       }
     }
   }
 }
-// this is a dumbed down version of to-styles. this is the final step and won't go any deeper
-@mixin _toStyles_final($list: (), $exclude: ()) {
-  $exclude: -compass-list($exclude);
-  @each $item in $list {
-    @if(length($item) > 1) {
-      $property: nth($item, 1);
-      $value: nth($item, 2);
-      @if(not index($exclude, $property)) {
-        @include _outputStyle($property, $value);
-      }
-    }
-  }
-}
 
 // helper function to compute the selector for various states
 // @function  _getStateSelector
@@ -314,6 +234,17 @@
   @return $selector;
 }
 
+@function _getSelectorSelector($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
 // @mixin     ie-filter
 // @param     $value {String|List} a set of filters to output, sans `progid:DXImageTransform.Microsoft` prefix

data/stylesheets/archetype/util/_targeting.scss

@@ -5,11 +5,10 @@
   @if $vendor != ie { @return true; }
   $compass-not-legacy-ie-version: 9;  // the version if IE that Compass starts considering `legacy`
   $min-ie-legacy-support: 999;
-  $supported-legacy-ie: ();
-  @if($legacy-support-for-ie8) { $min-ie-legacy-support: 8; $supported-legacy-ie: append($supported-legacy-ie, 8); }
-  @if($legacy-support-for-ie7) { $min-ie-legacy-support: 7; $supported-legacy-ie: append($supported-legacy-ie, 7); }
-  @if($legacy-support-for-ie6) { $min-ie-legacy-support: 6; $supported-legacy-ie: append($supported-legacy-ie, 6); }
-  @return if($comparator == lte, $version >= $min-ie-legacy-support, index($supported-legacy-ie, $version));
+  @if($legacy-support-for-ie8) { $min-ie-legacy-support: 8; }
+  @if($legacy-support-for-ie7) { $min-ie-legacy-support: 7; }
+  @if($legacy-support-for-ie6) { $min-ie-legacy-support: 6; }
+  @return ($version >= $min-ie-legacy-support);
 }
 
 // given a list of browsers and versions, this will consolidate them into a

data/test/fixtures/stylesheets/archetype/saved/hacks/ie_pseudo.css

@@ -0,0 +1,11 @@
+.before {
+  *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype"), t.el.style.cssText="color: red; background: green;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this)));
+}
+
+.after-content {
+  *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype"), t.el.innerHTML="➽", t.appendChild(t.el)})}(this)));
+}
+
+.before-style-content {
+  *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype"), t.el.innerHTML="testing ➽if this works", t.el.style.cssText="color: red; background: green;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this)));
+}