archetype 1.0.0.alpha.2 → 1.0.0.alpha.3

data/lib/archetype/sass_extensions/functions/util/spacing.rb

@@ -35,7 +35,7 @@ module Archetype::SassExtensions::Util::Spacing
   # - {Number} the calculated spacing
   #
   def _spacing(unit = null, direction = identifier(horizontal), abuse = bool(false))
-    return null if is_null(unit).value
+    return null if helpers.is_null(unit)
     unit = _archetype_integerize(unit, abuse)
     direction = helpers.to_str(direction) == 'vertical' ? 'VERTICAL' : 'HORIZONTAL'
     config = "CONFIG_#{direction}_SPACING"

data/stylesheets/archetype/hacks/_hacks.scss

@@ -117,7 +117,7 @@ $a-blackhole: require-archetype-modules(archetype/config);
     $cmd: (unquote('#{$this}.el=document.createElement("#{prefixed-tag($name)}"),#{$this}.el.id="#{$uid}"'));
     $method: if($placement == before, insertBefore, appendChild);
     @if $content and not is_null($content) {
-      $cmd: append($cmd, unquote('#{$this}.el.innerHTML="#{-ie-pseudo-content($content)}"'));
+      $cmd: append($cmd, unquote('#{$this}.el.innerText="#{-ie-pseudo-content($content)}"'));
     }
     @if $styles and not is_null($styles) and $styles != '' and $CONFIG_GENERATED_TAG_INLINE {
       // sets the icon styles on the node if we're using inline styles...

data/stylesheets/archetype/styleguide/_styleguide.scss

@@ -13,11 +13,13 @@
   $definition: compact($is, $is-2, $is-3, $is-4, $is-5, $is-6, $is-7, $is-8, $is-9, $is-10);
   @if length($definition) > 0 {
     $styles: _styleguide($definition, $state, $theme);
+    $tmp: -styleguide-shift-context($definition);
     // output the styles
     $archetype-origin-function: styleguide !global;
     @include to-styles($styles, $exclude: $exclude, $here: $here) {
       @content;
     };
+    $tmp: -styleguide-shift-context();
     $archetype-origin-function: null !global;
   }
 }

data/stylesheets/archetype/util/_styles.scss

@@ -3,29 +3,6 @@
 // throw an error if archetype/util has not been registered
 $a-blackhole: require-archetype-modules(archetype/util);
 
-// this is a proxy for output-style
-// this contains mixins that will eventually call output-style in one form or another
-// @mixin     _outputStyle
-// @private
-// @param     $property {String} the CSS property to output
-// @param     $value {*} the CSS value to output
-@mixin _outputStyle($property, $value: null) {
-  @if not is-null($value) {
-    @if($property == target-browser) {
-      @include target-browser(nth($value,1), nth($value,2), nth($value,3));
-    }
-    @else if($property == font-family) {
-      @include font-family($value);
-    }
-    @else if($property == font-style) {
-      @include font-style($value);
-    }
-    @else {
-      @include output-style($property, $value);
-    }
-  }
-}
-
 @function check-for-custom-styler($property, $value, $method: pre) {
   @return mixin-exists('custom-output-styler') and function-exits('has-custom-output-styler') and has-custom-output-styler($property, $value, $method);
 }
@@ -38,118 +15,181 @@ $a-blackhole: require-archetype-modules(archetype/util);
   @if type-of($property) == map {
     @include to-styles($property);
   }
-  @elseif( not is-null($property) and length(-archetype-list($value)) > 0 and not is-null(first-value-of(-archetype-list($value))) and not index($CONFIG_DISABLED_CSS, $property)) {
-    // for mixins, we need to do some custom work
-    // check to see if we have a custom output styler (pre)
-    @if check-for-custom-styler($property, $value, pre) {
-      @include custom-output-styler($property, $value, $method: pre);
-    }
-    // we're going to assume that any mixins that get invoked here have been properly imported
-    //  if not, they will simply throw a compilation error
-    // border-radius
-    @else if($property == border-radius)        { @include border-radius($value...); }
-    // box-sizing
-    @else if($property == box-sizing)           { @include box-sizing($value...); }
-    // box-shadow
-    @else if($property == box-shadow)           { @include box-shadow($value...); }
-    // text-shadow
-    @else if($property == text-shadow)          { @include text-shadow($value); }
-    // filter-gradient
-    @else if($property == filter-gradient)      { @include filter-gradient($value...); }
-    // background
-    @else if($property == background)           { @include background($value...); }
-    // background-image
-    @else if($property == background-image)     { @include background-image($value...); }
-    // background-clip
-    @else if($property == background-clip)      { @include background-clip($value...); }
-    // background-size
-    @else if($property == background-size)      { @include background-size($value...); }
-    // background-origin
-    @else if($property == background-origin)    { @include background-origin($value...); }
-    // IE filters
-    @else if($property == ie-filter)            { @include ie-filter($value...); }
-    // hide-text
-    @else if($property == hide-text)            { @include hide-text($direction: if($value == true, $hide-text-direction, $value...)); }
-    // inline-block
-    @else if($property == inline-block)         { @include inline-block($value...); }
-    // opacity
-    @else if($property == opacity)              { @include opacity($value...); }
-    // min-width
-    @else if($property == min-width)            { @include min-width($value...); }
-    // min-height
-    @else if($property == min-height)           { @include min-height($value...); }
-    // max-width
-    @else if($property == max-width)            { @include max-width($value...); }
-    // max-height
-    @else if($property == max-height)           { @include max-height($value...); }
-    // stretch
-    @else if($property == stretch)              { @include stretch($value...); }
-    // appearance
-    @else if($property == appearance)           { @include appearance($value...); }
-    // unhide-element
-    @else if($property == unhide-element)       { @include unhide-element($value...); }
-    // ellipsis
-    @else if($property == ellipsis)             { @include ellipsis($value...); }
-    // scale
-    @else if($property == scale)                { @include scale($value...); }
-    // z-index
-    @else if($property == z-index)              { @include z-index($value...); }
-    @else if($property == glyph-icon)           { @include glyph-icon($value...); }
-    @else if($property == extend)               {
-      @each $v in -archetype-list($value) {
-        @extend #{$v};
+  @else {
+    $property: -archetype-normalize-property($property);
+    @if( not is-null($property) and length(-archetype-list($value)) > 0 and not is-null(first-value-of(-archetype-list($value))) and not index($CONFIG_DISABLED_CSS, $property)) {
+      // if the value is the special `-archetype-no-value`, pass along an empty value
+      @if $value == -archetype-no-value {
+        $value: ();
       }
-    }
-    // animations
-    @else if($property == animation) {
-      @include animation($value...);
-    }
-    // hasLayout
-    @else if($property == has-layout) {
-      // if value is true, don't pass it along
-      @if($value == true) {
-        @include has-layout();
+
+      // for mixins, we need to do some custom work
+      // check to see if we have a custom output styler (pre)
+      @if check-for-custom-styler($property, $value, pre) {
+        @include custom-output-styler($property, $value, $method: pre);
       }
-      @else {
-        @include has-layout($value...);
+
+      // make a dynamic function call
+      @else if($property == function) {
+        @if type-of($value) == string {
+          $value: -archetype-list($value);
+        }
+        @if function-exists(nth($value, 1)) {
+          $fn: nth($value, 1);
+          $args: if(length($value) < 2, (), nth($value, 2));
+          @include to-styles( call($fn, $args...) );
+        }
       }
-    }
-    // clearfix
-    @else if($property == clearfix) {
-      @if($value == legacy-pie-clearfix) {
-        @include legacy-pie-clearfix();
+
+      // we're going to assume that any mixins that get invoked here have been properly imported
+      //  if not, they will simply throw a compilation error
+
+      // check that we aren't already inside of these mixins before calling them
+      @else if($property == font-family and not -archetype-within-mixin(font-family)) { @include font-family($value); }
+      @else if($property == font-style and not -archetype-within-mixin(font-style)) { @include font-style($value); }
+
+      // target-browser
+      @else if($property == target-browser)       { @include target-browser($value...); }
+      // border-radius
+      @else if($property == border-radius)        { @include border-radius($value...); }
+      // box-sizing
+      @else if($property == box-sizing)           { @include box-sizing($value...); }
+      // box-shadow
+      @else if($property == box-shadow)           { @include box-shadow($value...); }
+      // text-shadow
+      @else if($property == text-shadow)          { @include text-shadow($value); }
+      // filter-gradient
+      @else if($property == filter-gradient)      { @include filter-gradient($value...); }
+      // background
+      @else if($property == background)           { @include background($value...); }
+      // background-image
+      @else if($property == background-image)     { @include background-image($value...); }
+      // background-clip
+      @else if($property == background-clip)      { @include background-clip($value...); }
+      // background-size
+      @else if($property == background-size)      { @include background-size($value...); }
+      // background-origin
+      @else if($property == background-origin)    { @include background-origin($value...); }
+      // IE filters
+      @else if($property == ie-filter)            { @include ie-filter($value...); }
+      // hide-text
+      @else if($property == hide-text)            { @include hide-text($value...); }
+      // inline-block
+      @else if($property == inline-block)         { @include inline-block($value...); }
+      // opacity
+      @else if($property == opacity)              { @include opacity($value...); }
+      // min-width
+      @else if($property == min-width)            { @include min-width($value...); }
+      // min-height
+      @else if($property == min-height)           { @include min-height($value...); }
+      // max-width
+      @else if($property == max-width)            { @include max-width($value...); }
+      // max-height
+      @else if($property == max-height)           { @include max-height($value...); }
+      // stretch
+      @else if($property == stretch)              { @include stretch($value...); }
+      // appearance
+      @else if($property == appearance)           { @include appearance($value...); }
+      // hide-element
+      @else if($property == hide-element)         { @include hide-element($value...); }
+      // unhide-element
+      @else if($property == unhide-element)       { @include unhide-element($value...); }
+      // unstyled-button
+      @else if($property == unstyled-button)      { @include unstyled-button($value...); }
+      // ellipsis
+      @else if($property == ellipsis)             { @include ellipsis($value...); }
+      // scale
+      @else if($property == scale)                { @include scale($value...); }
+      // z-index
+      @else if($property == z-index)              { @include z-index($value...); }
+      // glyphs
+      @else if($property == glyph-icon)           { @include glyph-icon($value...); }
+      @else if($property == glyph-stroke)         { @include glyph-stroke($value...); }
+      // animations
+      @else if($property == animation)            { @include animation($value...); }
+      // hasLayout
+      @else if($property == has-layout)           { @include has-layout($value...); }
+      // IE :before/:after
+      @else if($property == ie-pseudo)            { @include ie-pseudo($value...); }
+      @else if($property == ie-pseudo-before)     { @include ie-pseudo-before($value...); }
+      @else if($property == ie-pseudo-after)      { @include ie-pseudo-after($value...); }
+      // transparent-focusable
+      @else if($property == transparent-focusable)  { @include transparent-focusable($value); }
+      // triangle
+      @else if($property == triangle)             { @include triangle($value...); }
+      // styleguide-diff
+      @else if($property == styleguide-diff)      { @include styleguide-diff($value...); }
+      // clearfix
+      @else if($property == clearfix) {
+        @if($value == legacy-pie-clearfix) {
+          @include legacy-pie-clearfix();
+        }
+        @else if($value == pie-clearfix) {
+          @include pie-clearfix();
+        }
+        @else {
+          @include clearfix($value...);
+        }
       }
-      @else if($value == pie-clearfix) {
-        @include pie-clearfix();
+      // special case for @extend
+      @else if($property == extend or $property == '@extend') {
+        @each $v in -archetype-list($value) {
+          @extend #{$v};
+        }
       }
-      @else {
-        @include clearfix();
+      // special case for @media
+      @else if($property == media or $property == '@media') {
+        @each $query, $styles in $value {
+          @media #{$query} {
+            @include to-styles($styles);
+          }
+        }
       }
-    }
-    // :before/:after
-    @else if($property == ie-pseudo-before or $property == ie-pseudo-after) {
-      $value: -archetype-list($value);
-      $content: false;
-      $tag: '';
-      @if length($value) > 1 {
-        $content: nth($value, 2);
-        @if length($value) > 2 {
-          $tag: nth($value, 3);
+      // special case for @keyframes
+      @else if($property == keyframes or $property == '@keyframes') {
+        @each $name, $def in $value {
+          @each $frame, $styles in $def {
+            @include keyframes($name) {
+              @at-root #{$frame} {
+                @include to-styles($styles);
+              }
+            }
+          }
+        }
+      }
+      // breakpoint
+      @else if($property == breakpoint) {
+        @each $key, $styles in $value {
+          @include breakpoint($key) {
+            @include to-styles($styles);
+          }
         }
       }
-      @if $property == ie-pseudo-before {
-        @include ie-pseudo-before(nth($value, 1), $content, $tag);
+      // high-resolution
+      @else if($property == high-resolution) {
+        @include high-resolution {
+          @include to-styles($value);
+        }
       }
+      // switch-locale
+      @else if($property == switch-locale) {
+        @each $locale, $styles in $value {
+          @include switch-locale($locale) {
+            @include to-styles($styles);
+          }
+        }
+      }
+
+      // check to see if we have a custom output styler (post)
+      @else if check-for-custom-styler($property, $value, post) {
+        @include custom-output-styler($property, $value, $method: post);
+      }
+      // otherwise just use a key-value pair
       @else {
-        @include ie-pseudo-after(nth($value, 1), $content, $tag);
+        // strip off the special `{raw}` keyword
+        #{str-replace($property, '{raw}', '')}: $value;
       }
     }
-    // check to see if we have a custom output styler (post)
-    @else if check-for-custom-styler($property, $value, post) {
-      @include custom-output-styler($property, $value, $method: post);
-    }
-    // otherwise just use a key-value pair
-    @else { #{$property}: $value; }
   }
 }
 
@@ -261,7 +301,7 @@ $a-blackhole: require-archetype-modules(archetype/util);
             }
             // otherwise, just output it
             @else if($selectors == true and $states == true ) {
-              @include _outputStyle($property, $value);
+              @include output-style($property, $value);
             }
           }
         }
@@ -414,7 +454,7 @@ $a-blackhole: require-archetype-modules(archetype/util);
 // @mixin     font-family
 // @param     $family {String} the font stack to output
 @mixin font-family($family: null) {
-  @include safe(font-family, $family);
+ @include safe(font-family, $family);
 }
 
 // safely use text-transform:uppercase without localization issues

data/stylesheets/archetype/util/_targeting.scss

@@ -3,12 +3,15 @@
 // throw an error if archetype/util has not been registered
 $a-blackhole: require-archetype-modules(archetype/util);
 
+@function _getTargetedSelectorScope($selector, $merge: false) {
+  @return unquote(if($merge, '&.#{$selector}', '.#{$selector} &'));
+}
+
 // given a list of browsers and versions, this will consolidate them into a
 // normalized list of targeted browsers
 // @function  _getTargetedBrowsers
 // @private
 // @param     $browsers {List} the browsers/versions to target
-// @param     $using {String} an optional string to append to the end of each item
 // @param     $vendors {List} the list of supported vendors for class targeting
 // @param     $threshold {Number} the minimum browser usage threshold to support
 // @return    $list {List} the normalized list of targeted browsers
@@ -17,8 +20,7 @@ $a-blackhole: require-archetype-modules(archetype/util);
 // _getTargetedBrowsers(ie lte 7) => (.ie.lte7)
 // _getTargetedBrowsers(ie 6 7) => (.ie.ie6, .ie.ie7)
 // _getTargetedBrowsers(ie 10 lt 9) => (.ie.ie10, .ie.lte8)
-// _getTargetedBrowsers(ie 6, $using: '&') => (.ie.ie6&) // e.g. for merging with other selectors
-@function _getTargetedBrowsers($browsers, $using: '', $vendors: $CONFIG_BROWSER_VENDORS_CLASS, $threshold: $critical-usage-threshold) {
+@function _getTargetedBrowsers($browsers, $merge: false, $vendors: $CONFIG_BROWSER_VENDORS_CLASS, $threshold: $critical-usage-threshold) {
   $browsers: -archetype-list($browsers);
   $vendors: -archetype-list($vendors);
   $comparators: (eq lt lte);
@@ -41,10 +43,12 @@ $a-blackhole: require-archetype-modules(archetype/util);
     @else if(index(-archetype-list($vendors), $item)) {
       $vendor: $item;
       // keep track of unversioned vendors
-      $unversioned: append($unversioned, unquote('.#{$vendor}#{$using}'), comma);
+
+      $unversioned: append($unversioned, _getTargetedSelectorScope($vendor, $merge), comma);
     }
     // otherwise assume it's a version
     @else if(type-of($item) == number) {
+      $unversioned: list-remove($unversioned, index($unversioned, _getTargetedSelectorScope($vendor, $merge)));
       $tmp: if($vendor == ie, $item, 9999); // we only support versions for IE, otherwise, set an obsurdly high version
       // if it's equalitative, prefix the vendor onto the version
       @if(not $comparator or $comparator == eq) {
@@ -55,9 +59,8 @@ $a-blackhole: require-archetype-modules(archetype/util);
         $item: #{$comparator}#{($item + $version-adjust)};
       }
       @if($vendor and support-legacy-browser($vendor, "#{$tmp}", $threshold: $critical-usage-threshold)) {
-        $item: '.#{$vendor}.#{$item}#{$using}';
-        $list: append($list, unquote($item), comma);
-        $unversioned: list-remove($unversioned, index($unversioned, '.#{$vendor}#{$using}'));
+        $item: _getTargetedSelectorScope('#{$vendor}.#{$item}', $merge);
+        $list: append($list, $item, comma);
       }
       // restore temps
       $version-adjust: 0;
@@ -83,55 +86,59 @@ $a-blackhole: require-archetype-modules(archetype/util);
 // =target-browser(ie 8, border, 10px);
 // =target-browser(ie lte 7, padding, 0);
 @mixin target-browser($browsers, $property: null, $value: null, $merge: false, $inline: true, $threshold: $critical-usage-threshold) {
+  // if the previous context was target-browser or target-os, we can only use inline methods
+  $only-inline: $inline and (-archetype-mixin-called-recursively() or -archetype-within-mixin(target-os));
   @if($CONFIG_BROWSER_ALLOW_HACKS) {
-    // target webkit, Safari3+, Chrome1+
-    @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, webkit-all) )) {
-      @if $CONFIG_BROWSER_WARN_ON_HACK {
-        @warn "[archetype:target:browser] using hack for webkit-all";
+    @if not $only-inline {
+      // target webkit, Safari3+, Chrome1+
+      @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, webkit-all) )) {
+        @if $CONFIG_BROWSER_WARN_ON_HACK {
+          @warn "[archetype:target:browser] using hack for webkit-all";
+        }
+        // @link http://paulirish.com/2009/browser-specific-css-hacks/
+        @media screen and (-webkit-min-device-pixel-ratio:0) {
+          & {
+            /* [archetype:target:browser:begin] --- webkit --- */
+            @include output-style($property, $value);
+            @content;
+            /* [archetype:target:browser:end]   --- webkit --- */
+          }
+        }
       }
-      // @link http://paulirish.com/2009/browser-specific-css-hacks/
-      @media screen and (-webkit-min-device-pixel-ratio:0) {
-        & {
-          /* [archetype:target:browser:begin] --- webkit --- */
+      // target gecko
+      @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, gecko-all) )) {
+        @if $CONFIG_BROWSER_WARN_ON_HACK {
+          @warn "[archetype:target:browser] using hack for gecko-all";
+        }
+        // @link http://paulirish.com/2009/browser-specific-css-hacks/
+        &, x:-moz-any-link {
+          /* [archetype:target:browser:begin] --- gecko --- */
           @include output-style($property, $value);
           @content;
-          /* [archetype:target:browser:end]   --- webkit --- */
+          /* [archetype:target:browser:end]   --- gecko --- */
         }
       }
-    }
-    // target gecko
-    @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, gecko-all) )) {
-      @if $CONFIG_BROWSER_WARN_ON_HACK {
-        @warn "[archetype:target:browser] using hack for gecko-all";
-      }
-      // @link http://paulirish.com/2009/browser-specific-css-hacks/
-      &, x:-moz-any-link {
-        /* [archetype:target:browser:begin] --- gecko --- */
-        @include output-style($property, $value);
-        @content;
-        /* [archetype:target:browser:end]   --- gecko --- */
-      }
-    }
-    // target opera
-    @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, opera-all) )) {
-      @if $CONFIG_BROWSER_WARN_ON_HACK {
-        @warn "[archetype:target:browser] using hack for opera-all";
-      }
-      // @link http://paulirish.com/2009/browser-specific-css-hacks/
-      &, x:-o-prefocus {
-        /* [archetype:target:browser:begin] --- opera --- */
-        @include output-style($property, $value);
-        @content;
-        /* [archetype:target:browser:end]   --- opera --- */
+      // target opera
+      @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, opera-all) )) {
+        @if $CONFIG_BROWSER_WARN_ON_HACK {
+          @warn "[archetype:target:browser] using hack for opera-all";
+        }
+        // @link http://paulirish.com/2009/browser-specific-css-hacks/
+        &, x:-o-prefocus {
+          /* [archetype:target:browser:begin] --- opera --- */
+          @include output-style($property, $value);
+          @content;
+          /* [archetype:target:browser:end]   --- opera --- */
+        }
       }
     }
     // if there's only one target browser and it's IE6 or IE lte 7, we can use an inline hack
     @if $inline and type-of($property) != map {
-      $tmp: _getTargetedBrowsers($browsers, $threshold: $threshold);
+      $tmp: _getTargetedBrowsers($browsers, $merge: false, $threshold: $threshold);
       @if(length($tmp) == 1) {
         $support: ();
-        @if(support-legacy-browser('ie', '6', $threshold: $critical-usage-threshold)) { $support: append($support, '.ie.ie6'); }
-        @if(support-legacy-browser('ie', '7', $threshold: $critical-usage-threshold)) { $support: append($support, '.ie.lte7'); }
+        @if(support-legacy-browser('ie', '6', $threshold: $critical-usage-threshold)) { $support: append($support, '.ie.ie6 &'); }
+        @if(support-legacy-browser('ie', '7', $threshold: $critical-usage-threshold)) { $support: append($support, '.ie.lte7 &'); }
         $idx: index2($support, $tmp);
         @if($idx) {
           $prefix: nth(('_', '*'), $idx);
@@ -143,14 +150,16 @@ $a-blackhole: require-archetype-modules(archetype/util);
       }
     }
   }
-  // target via class names
-  $classes: _getTargetedBrowsers($browsers, $using: if($merge, '&', ' &'), $threshold: $threshold);
-  @if(length($classes) > 0) {
-    #{$classes} {
-      /* [archetype:target:browser:begin] --- #{$browsers} --- */
-      @include output-style($property, $value);
-      @content;
-      /* [archetype:target:browser:end]   --- #{$browsers} --- */
+  @if not $only-inline {
+    // target via class names
+    $classes: _getTargetedBrowsers($browsers, $merge: $merge, $threshold: $threshold);
+    @if(length($classes) > 0) {
+      #{$classes} {
+        /* [archetype:target:browser:begin] --- #{$browsers} --- */
+        @include output-style($property, $value);
+        @content;
+        /* [archetype:target:browser:end]   --- #{$browsers} --- */
+      }
     }
   }
 }
@@ -164,7 +173,6 @@ $a-blackhole: require-archetype-modules(archetype/util);
 // @content
 @mixin target-os($os: (), $property: null, $value: null, $merge: false) {
   $os: -archetype-list($os);
-  $using: if($merge, '&', ' &');
   $classes: ();
   // if `default` is in the list of OS's, then output without a prefix
   @if(index($os, default)) {
@@ -174,7 +182,7 @@ $a-blackhole: require-archetype-modules(archetype/util);
   @each $vendor, $aliases in $CONFIG_OS_VENDORS_CLASS {
     // if it matches the requested os
     @if index2($aliases, $os) {
-      $item: unquote('.#{$vendor}#{$using}');
+      $item: _getTargetedSelectorScope($vendor, $merge);
       // if it's not already on the stack, push it
       @if(not index($classes, $item)) {
         $classes: append($classes, $item, comma);