archetype 0.0.1.pre.3.811928f → 0.0.1.pre.4

data/stylesheets/archetype/_hacks.scss

@@ -61,15 +61,27 @@
 // @param    $name {String} the name of the element
 @mixin ie-pseudo($styles: false, $content: false, $placement: before, $name: '') {
   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    $this: 't';
+    $cmd: (unquote('#{$this}.el=document.createElement("#{prefixed-tag($name)}")'));
     $method: if($placement == before, insertBefore, appendChild);
-    $content: if($content and $content != nil, 'this.el.innerHTML="#{-ie-pseudo-content($content)}",', '');
+    @if $content and $content != nil {
+      $cmd: append($cmd, unquote('#{$this}.el.innerHTML="#{-ie-pseudo-content($content)}"'), comma);
+    }
     @if $CONFIG_GENERATED_TAG_CSS {
       $styles: if($styles and $styles != nil, #{$CONFIG_GENERATED_TAG_CSS}#{$styles}, $CONFIG_GENERATED_TAG_CSS);
     }
-    $styles: if($styles and $styles != nil, 'this.el.style.cssText="#{$styles}",', '');
-    @if $name != '' {
-      $name: '-#{$name}';
+    @if $styles and $styles != nil {
+      // sets the icon styles on the node
+      $cmd: append($cmd, unquote('#{$this}.el.style.cssText="#{$styles}"'), comma);
     }
-    *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("#{$CONFIG_GENERATED_TAG_PREFIX}#{$name}"),#{$content}#{$styles}this.#{$method}(this.el));
+    // if we're using the insertBefore method, we need to specify the node reference to the first childNode
+    $reference-node: if($placement == before, ',#{$this}.childNodes[0]||null', '');
+    $cmd: append($cmd, unquote('#{$this}.#{$method}(#{$this}.el#{$reference-node})'), comma);
+    $runOnce: unquote('this.runtimeStyle.zoom="1"'); // this ensures the expression is only invoked once
+
+    // we execute in a setTimeout to decouple from the current UI thread
+    //  this prevents an edge case in IE crashing with an `Operation Aborted` if the node hasn't finished rendering yet
+    //  http://www.nczonline.net/blog/2008/03/17/the-dreaded-operation-aborted-error/
+    *zoom: expression(#{$runOnce},(function(#{$this}){setTimeout(function(){#{$cmd}})}(this)));
   }
 }

data/stylesheets/archetype/_ui.scss

@@ -117,6 +117,21 @@
   clip: rect(1px, 1px, 1px, 1px);
 }
 
+// revert hide element with config
+// @mixin     unhide-element
+// @link      http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+// @param     $position {String} value for the position property
+// @param     $height {String} value for the height property
+// @param     $width {String} value for the width property
+// @param     $overflow {String} value for the overflow property
+@mixin unhide-element($position: static, $height:auto, $width:auto, $overflow:visible) {
+  position: $position !important;
+  height: $height;
+  width: $width;
+  overflow: $overflow;
+  clip: auto;
+}
+
 // mixin for generating a fade box which fades from transparent to white
 // @mixin     fade-box
 // @param     $width {String} the width of the overlay
@@ -124,7 +139,7 @@
 // @param     $direction {String} top=vertical left=horizontal
 @mixin fade-box($width: 100%, $height: 100%, $direction: top) {
   $direction: rtl($direction);
-  // TODO - update this when Compass supports IE alpha channels 
+  // TODO - update this when Compass supports IE alpha channels
   @if $direction == left {
     @include ie-filter(gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1));
   }
@@ -155,21 +170,30 @@
 // @param     $placement {String} where to place the icon [before|after|inline]
 // @param     $ie-styles {String} styles to apply to IE6/7 (this is needed because the faux :before isn't extensible)
 @mixin glyph-icon($icon, $size: default, $color: inherit, $placement: before, $ie-styles: false) {
-  $char-mapping: -compass-list(associative($CONFIG_GLYPHS_MAPPINGS, $icon, $strict: true));
-  $char-code: nth($char-mapping, 1);
+  $char-mapping: nil;
+  $char-code: nil;
+  @if $icon {
+    $char-mapping: -compass-list(associative($CONFIG_GLYPHS_MAPPINGS, $icon, $strict: true));
+    $char-code: nth($char-mapping, 1);
+  }
   @if $char-code == nil and $icon != false {
     @warn "could not find character mapping for `#{icon}`";
   }
   @else {
     @if $size == default {
-      $default-size: nth-cyclic($char-mapping, 2);
+      $default-size: nil;
+      @if $icon {
+        $default-size: nth-cyclic($char-mapping, 2);
+      }
       $size: if(type-of($default-size) == number, $default-size, 100%);
     }
     // if the size is under a given threshold, use a halfling, if available
-    $char-code: nth-cyclic(-compass-list($char-code), if(comparable($CONFIG_GLYPHS_THRESHOLD, $size) and $size <= $CONFIG_GLYPHS_THRESHOLD, 2, 1));
+    @if $icon {
+      $char-code: nth(-compass-list($char-code), 1);
+    }
     $selector: if(index(before after, $placement), '&:#{$placement}', '&');
     #{$selector} {
-      font-family: $CONFIG_GLYPHS_NAME;
+      font-family: '#{$CONFIG_GLYPHS_NAME}-#{$CONFIG_GLYPHS_VERSION}', '#{$CONFIG_GLYPHS_NAME}';
       font-weight: $CONFIG_GLYPHS_WEIGHT;
       font-style: $CONFIG_GLYPHS_STYLE;
       text-decoration: inherit;
@@ -180,9 +204,9 @@
         content: $char-code;
       }
     }
-    @if($selector != '&') {
+    @if($selector != '&' and $ie-styles != nil) {
       // support for IE6/7
-      $styles: "font-family:'#{$CONFIG_GLYPHS_NAME}';font-weight:#{$CONFIG_GLYPHS_WEIGHT};font-style:#{$CONFIG_GLYPHS_STYLE};text-decoration:inherit;";
+      $styles: "font-family:'#{$CONFIG_GLYPHS_NAME}-#{$CONFIG_GLYPHS_VERSION}', '#{$CONFIG_GLYPHS_NAME}';font-weight:#{$CONFIG_GLYPHS_WEIGHT};font-style:#{$CONFIG_GLYPHS_STYLE};text-decoration:inherit;";
       @if($size != nil) {
         $styles: $styles + "font-size:#{$size};"
       }
@@ -234,25 +258,33 @@
       }
     }
     @else {
-      @-webkit-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-        from { -webkit-transform: rotate(0deg); }
-        to { -webkit-transform: rotate(360deg); }
+      @if $experimental-support-for-webkit {
+          @-webkit-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
+          from { -webkit-transform: rotate(0deg); }
+          to { -webkit-transform: rotate(360deg); }
+          }
       }
-      @-moz-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-        from { -moz-transform: rotate(0deg); }
-        to { -moz-transform: rotate(360deg); }
+      @if $experimental-support-for-mozilla {
+          @-moz-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
+          from { -moz-transform: rotate(0deg); }
+          to { -moz-transform: rotate(360deg); }
+          }
       }
-      @-ms-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-        from { -ms-transform: rotate(0deg); }
-        to { -ms-transform: rotate(360deg); }
+      @if $experimental-support-for-microsoft {
+          @-ms-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
+          from { -ms-transform: rotate(0deg); }
+          to { -ms-transform: rotate(360deg); }
+          }
       }
-      @-o-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-        from { -o-transform: rotate(0deg); }
-        to { -o-transform: rotate(360deg); }
+      @if $experimental-support-for-opera {
+          @-o-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
+          from { -o-transform: rotate(0deg); }
+          to { -o-transform: rotate(360deg); }
+          }
       }
       @keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
       }
     }
   }
@@ -305,4 +337,13 @@
   height: $height;
   margin-left: $width / -2;
   margin-top: $height / -2;
-}
+}
+
+// a method for removing default styling from a button
+// @mixin     unstyled-button
+@mixin unstyled-button() {
+  background: none;
+  border: none;
+  padding: 0;
+  @include appearance(none);
+}

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

@@ -111,6 +111,7 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTT
   )),
   // IMPORTANCE in CONTEXTS
   ((primary in-dark), (
+    inherit (in-dark),
     (states, (
       (hover, (
         background-color    $CONFIG_COLOR_BG_BUTTON_PRIMARY_DARK_HOVER,
@@ -118,10 +119,10 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTT
         background-image    $CONFIG_GRADIENT_BUTTON_PRIMARY_DARK_HOVER
       )),
       nil
-    )),
-    nil
+    ))
   )),
   ((secondary in-dark), (
+    inherit (in-dark),
     (states, (
       (hover, (
         background-color    $CONFIG_COLOR_BG_BUTTON_SECONDARY_DARK_HOVER,
@@ -129,10 +130,10 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTT
         background-image    $CONFIG_GRADIENT_BUTTON_SECONDARY_DARK_HOVER
       )),
       nil
-    )),
-    nil
+    ))
   )),
   ((spotlight in-dark), (
+    inherit (in-dark),
     (states, (
       (hover, (
         background-color    $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT_DARK_HOVER,
@@ -140,8 +141,7 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTT
         background-image    $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_DARK_HOVER
       )),
       nil
-    )),
-    nil
+    ))
   )),
   // in the punchcut context (inherit from in-dark)
   (primary in-punchcut, (

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

@@ -7,6 +7,7 @@ $STYLEGUIDE_HEADLINES: () !default;
 @if not styleguide-component-exists($STYLEGUIDE_HEADLINES_ID, $CONFIG_THEME) {
 $a-blackhole: styleguide-add-component($STYLEGUIDE_HEADLINES_ID,  $STYLEGUIDE_HEADLINES, (
   (default, (
+    font-family         headline,
     font-size           nth($CONFIG_FONT_HEADLINE_LARGE, 1),
     font-weight         bold,
     line-height         nth-cyclic($CONFIG_FONT_HEADLINE_LARGE, 2),

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

@@ -56,6 +56,8 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_LINKS_ID,  $STYLEGUIDE_LINKS,
     (states, (
       (hover, (
         color               nth($CONFIG_COLOR_BRAND, 1),
+        cursor              pointer,
+        target-browser      (ie, cursor, hand),
         text-decoration     none
       )),
       nil

data/stylesheets/archetype/util/_styles.scss

@@ -10,7 +10,11 @@
 // @param     $value {*} the CSS value to output
 @mixin _outputStyle($property, $value: nil) {
   @if($value != nil) {
-    @if($property == target-browser) {
+    // !!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)
+    }
+    @else if($property == target-browser) {
       @include target-browser(nth($value,1), nth($value,2), nth($value,3));
     }
     @else if($property == font-family) {
@@ -19,12 +23,21 @@
     @else if($property == font-style) {
       @include font-style($value);
     }
+    @else if($property == hide-element) {
+      @include hide-element();
+    }
     @else {
       @include output-style($property, $value);
     }
   }
 }
 
+// Themes can override this function & custom-output-styler to add their own
+// custom style includes.
+@function has-custom-output-styler($property, $value, $method:pre){
+  @return false;
+}
+
 // output a property or augment it to use a mixin
 // @mixin     output-style
 // @param     $property {String} the CSS property to output
@@ -32,8 +45,13 @@
 @mixin output-style($property, $value: nil) {
   @if($property != nil and nth(-compass-list($value), 1) != 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);
+    }
     // border-radius
-    @if($property == border-radius)             { @include border-radius(rtl($value, border-radius)); }
+    @else if($property == border-radius)             { @include border-radius(rtl($value, border-radius)); }
     // box-sizing
     @else if($property == box-sizing)           { @include box-sizing($value); }
     // box-shadow
@@ -70,6 +88,8 @@
     @else if($property == max-height)           { @include max-height($value); }
     // stretch
     @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); }
@@ -87,22 +107,30 @@
     @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 == float)                { @include float($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)); }
+    @else if($property == scale)                { @include scale($value); }
     // animations
     @else if($property == animation) {
       @if archetype-version('compass >= 0.13') {
         @include animation($value);
       }
       @else {
-        -webkit-animation: $value;
-        -moz-animation: $value;
-        -ms-animation: $value;
-        -o-animation: $value;
+        @if $experimental-support-for-webkit {
+          -webkit-animation: $value;
+        }
+        @if $experimental-support-for-mozilla {
+          -moz-animation: $value;
+        }
+        @if $experimental-support-for-microsoft {
+          -ms-animation: $value;
+        }
+        @if $experimental-support-for-opera {
+          -o-animation: $value;
+        }
         animation: $value;
       }
     }
@@ -134,8 +162,6 @@
       @if(length($value) > 1) { @include z-index(nth($value, 1), nth($value, 2)); }
       @else { @include z-index($value); }
     }
-    // make sure content is always quoted
-    @else if($property == content) { #{$property}: quote($value); }
     // :before/:after
     @else if($property == ie-pseudo-before or $property == ie-pseudo-after) {
       $value: -compass-list($value);
@@ -154,6 +180,13 @@
         @include ie-pseudo-after(nth($value, 1), $content, $tag);
       }
     }
+    //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);
+    }
     // otherwise just use a key-value pair
     @else { #{$property}: $value; }
   }
@@ -165,7 +198,7 @@
 // @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     $exclude {List} a list of styles to exclude from output
 @mixin to-styles($list: (), $states: true, $selectors: true, $exclude: ()) {
-  $exclude: compact($exclude, nil);
+  $exclude: -compass-list($exclude);
   $states-data: ();
   $selectors-data: ();
   @each $item in $list {
@@ -180,7 +213,7 @@
           $selectors-data: $value;
         }
         @else if($selectors == true and $states == true) {
-          @include _outputStyle($property, unquote($value));
+          @include _outputStyle($property, $value);
         }
       }
     }
@@ -211,7 +244,7 @@
 
 // this is identical to to-styles, but we need to avoid Sass' recursion check :(
 @mixin _toStyles2($list: (), $states: true, $selectors: true, $exclude: ()) {
-  $exclude: compact($exclude, nil);
+  $exclude: -compass-list($exclude);
   $states-data: ();
   $selectors-data: ();
   @each $item in $list {
@@ -226,7 +259,7 @@
           $selectors-data: $value;
         }
         @else if($selectors == true and $states == true) {
-          @include _outputStyle($property, unquote($value));
+          @include _outputStyle($property, $value);
         }
       }
     }
@@ -262,7 +295,7 @@
       $property: nth($item, 1);
       $value: nth($item, 2);
       @if(not index($exclude, $property)) {
-        @include _outputStyle($property, unquote($value));
+        @include _outputStyle($property, $value);
       }
     }
   }
@@ -452,3 +485,15 @@
   }
   z-index: ($value + $layer);
 }
+
+// generate a tag name with a prefix
+// @function  prefixed-tag
+// @param     $tag {String} the tag to prefix
+// @param     $prefix {String} the prefix to prepend to the tag
+// @return    {String} the prefix joined with the tag
+@function prefixed-tag($tag: '', $prefix: $CONFIG_GENERATED_TAG_PREFIX) {
+  @if $tag != '' {
+    $tag: '-#{$tag}';
+  }
+  @return '#{$prefix}#{$tag}';
+}

data/stylesheets/archetype/util/_targeting.scss

@@ -150,7 +150,7 @@
           $prefix: nth(('_', '*'), $idx);
           $value: if(index($CORE_CSS_RTL_VALUE_SUPPORT, $property), rtl($value, $property), $value);
           // NOTE: RTL support on properties like `border-left-width` won't fully work until Compass/Sass support string replace methods
-          @include debug-message("[archetype:target-browser:being] --- #{$browsers} ---");
+          @include debug-message("[archetype:target-browser:begin] --- #{$browsers} ---");
           @include output-style(#{$prefix}#{rtl($property)}, $value);
           @include debug-message("[archetype:target-browser:end]   --- #{$browsers} ---");
           $value: nil;

data/templates/_theme/_components.scss

@@ -0,0 +1,3 @@
+// import your components here!
+// e.g.
+// @import "components/my_component";

data/templates/_theme/_config.scss

@@ -0,0 +1 @@
+$CONFIG_THEME: "__THEME_NAME__" !default;

data/templates/_theme/_core.scss

@@ -0,0 +1,13 @@
+// setup theme configs and styles
+@import "config";
+@import "primitives";
+
+// extend the __THEME_EXTENDS__ theme
+@import "__THEME_EXTENDS__";
+//@import "../__THEME_EXTENDS__/core";
+
+// import helper functions
+@import "helpers";
+
+// finally initialize our custom components
+@import "components";

data/templates/_theme/_helpers.scss

@@ -0,0 +1 @@
+// helper methods go here

data/templates/_theme/_primitives.scss

@@ -0,0 +1,3 @@
+// import your primitives here!
+// e.g.
+// @import "primitives/my_primitive";