archetype 0.0.1.pre.1 → 0.0.1.pre.3.00dfd9a

data/stylesheets/archetype/_grid.scss

@@ -0,0 +1,3 @@
+@import "config";
+@import "util";
+@import "grid/grid";

data/stylesheets/archetype/_hacks.scss

@@ -0,0 +1,72 @@
+// @category  hacks
+@import "util";
+
+// hack to support negative margins in legacy IE
+// @mixin     hack-negative-margin
+@mixin hack-negative-margin() {
+  @if($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+    @include has-layout();
+    position: relative;
+  }
+}
+
+// max-height hack
+// @mixin     max-height
+// @param     $value {String} the height
+@mixin max-height($value) {
+  @include hacked-maximum(height, $value);
+}
+
+// max-width hack
+// @mixin     max-width
+// @param     $value {String} the width
+@mixin max-width($value) {
+  @include hacked-maximum(width, $value);
+}
+
+// generic max-* hack wrapper
+// @mixin     hacked-maximum
+// @param     $property {String} property [height|width]
+// @param     $value {String} the value
+@mixin hacked-maximum($property, $value) {
+  max-#{$property}: $value;
+  @include bang-hack($property, auto, $value);
+}
+
+// proxy for ie-pseudo
+// @mixin    ie-pseudo-before
+// @param    $styles {String} the styles to apply to the pseudo-element
+// @param    $content {String} the content to insert into the element (similar to css `content` attribute)
+// @param    $name {String} the name of the element
+@mixin ie-pseudo-before($styles: false, $content: false, $name: '') {
+  @include ie-pseudo($styles, $content, before, $name);
+}
+
+// proxy for ie-pseudo
+// @mixin    ie-pseudo-after
+// @param    $styles {String} the styles to apply to the pseudo-element
+// @param    $content {String} the content to insert into the element (similar to css `content` attribute)
+// @param    $name {String} the name of the element
+@mixin ie-pseudo-after($styles: false, $content: false, $name: '') {
+  @include ie-pseudo($styles, $content, after, $name);
+}
+
+// this creates a one-type executing expression that inserts an element relative to `this` element.
+// this allows some level of support for :before/:after in IE6/7
+// inspired by http://nicolasgallagher.com/better-float-containment-in-ie/
+// @mixin    ie-pseudo
+// @param    $styles {String} the styles to apply to the pseudo-element
+// @param    $content {String} the content to insert into the element (similar to css `content` attribute)
+// @param    $placement {String} [before|after] simulate :before or :after behavior
+// @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 {
+    $method: if($placement == before, insertBefore, appendChild);
+    $content: if($content and $content != nil, 'this.el.innerHTML="#{-ie-pseudo-content($content)}",', '');
+    @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}",', '');
+    *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("#{prefixed-tag($name)}"),#{$content}#{$styles}this.#{$method}(this.el));
+  }
+}

data/stylesheets/archetype/_init.scss

@@ -0,0 +1,23 @@
+// include configs
+@import "archetype/config";
+
+// include Compass mixins
+@import "compass";
+
+// utility mixins and helper functions
+@import "archetype/util";
+
+// custom hacks
+@import "archetype/hacks";
+
+// ui
+@import "archetype/ui";
+
+// grids
+@import "archetype/grid";
+
+// styleguide
+@import "archetype/styleguide";
+
+// base
+@import "archetype/base";

data/stylesheets/archetype/_styleguide.scss

@@ -0,0 +1,6 @@
+@import "config";
+@import "util";
+@import "styleguide/styleguide";
+@import "styleguide/primitives";
+@import "styleguide/helpers";
+@import "styleguide/components";

data/stylesheets/archetype/_ui.scss

@@ -0,0 +1,326 @@
+// @category   ui
+@import "hacks";
+@import "compass/layout/stretching";
+
+// computes the border position to use
+// @function  _getTriangleBorderDirection
+// @private
+// @param     $direction {String} the direction the arrow is pointing (top, left, top left, etc)
+// @return    {List} the computed border position (e.g. top, left, bottom)
+@function _getTriangleBorderDirection($direction) {
+  @if(length($direction) == 1) {
+    @return opposite-position($direction);
+  }
+  @return if(index($direction, top), bottom, top);
+}
+
+// computes the border width for the triangle
+// @function  _getTriangleBorderWidth
+// @private
+// @param     $width {Number} the width of the arrow
+// @param     $height {Number} the height of the arrow
+// @param     $direction {String} the direction the arrow is pointing (top, left, top left, etc)
+// @return    {List} the computed border widths
+@function _getTriangleBorderWidth($width, $height, $direction) {
+  @if(length($direction) == 1) {
+    // TOP
+    @if($direction == top) {
+      @return 0 ($width/2) $height;
+    }
+    // BOTTOM
+    @else if($direction == bottom) {
+      @return $height ($width/2) 0;
+    }
+    // LEFT
+    @else if($direction == left) {
+      @return ($height/2) $width ($height/2) 0;
+    }
+    // RIGHT
+    @else if($direction == right) {
+      @return ($height/2) 0 ($height/2) $width;
+    }
+  }
+  @else if(index($direction, top)) {
+    // TOP LEFT
+    @if(index($direction, left)) {
+      @return 0 $width $height 0;
+    }
+    // TOP RIGHT
+    @else {
+      @return 0 0 $height $width;
+    }
+  }
+  @else if(index($direction, bottom)) {
+    // BOTTOM LEFT
+    @if(index($direction, left)) {
+      @return $height $width 0 0;
+    }
+    // BOTTOM RIGHT
+    @else {
+      @return $height 0 0 $width;
+    }
+  }
+  @return 0;
+}
+
+// generates a cross-browser triangle using borders
+// @mixin     triangle
+// @param     $direction {String} the direction the arrow is pointing (top, left, top left, etc)
+// @param     $width {Number} the width of the arrow
+// @param     $height {Number} the height of the arrow
+// @param     $color {Color} the color of the arrow
+@mixin triangle($direction: bottom, $width: 1em, $height: false, $color: #aaa) {
+  $direction: rtl($direction);
+  // if no height was specified, assume it's identitcal to width
+  @if(not $height) {
+    $height: $width;
+  }
+  // zero out it's content
+  height: 0;
+  width : 0;
+  // IE6 needs some extra love
+  @include target-browser(ie 6, font-size, 0);
+  @include target-browser(ie 6, line-height, 0);
+  border: {
+    // for IE6, transparent borders are simulated using `dashed` styles instead of a chroma filter
+    // IE won't render a `dashed` border-style unless (width * 5) >= border-width
+    // since width is always 0, dashed borders aren't rendered
+    // @link http://hedgerwow.appspot.com/demo/arrows
+    style: dashed;
+    // transparent for all other browsers
+    color: transparent;
+    width: _getTriangleBorderWidth($width, $height, $direction);
+    #{_getTriangleBorderDirection($direction)}: {
+      color: $color;
+      style: solid;
+    }
+  }
+}
+
+// makes your element centered vertically and horizontally in a parent element
+// @mixin   centered-box
+@mixin centered-box() {
+  @include stretch();
+  margin: auto;
+}
+
+// hide element visibly but preserve screen-reader support
+// @mixin     hide-element
+// @credit    Jonathan Snook
+// @link      http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+@mixin hide-element() {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  @include target-browser(ie lte 7, clip, rect(1px 1px 1px 1px));
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// mixin for generating a fade box which fades from transparent to white
+// @mixin     fade-box
+// @param     $width {String} the width of the overlay
+// @param     $height {String} the height of the overlay
+// @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
+  @if $direction == left {
+    @include ie-filter(gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1));
+  }
+  @else {
+    @include ie-filter(gradient(startColorstr='#00ffffff', endColorstr='#ffffff'));
+  }
+  @include background-image(linear-gradient($direction, rgba(255,255,255,0.4), rgba(255,255,255,1)) );
+  @include pseudo-element($width: $width, $height: $height, $position: absolute);
+  text-align: center;
+  bottom: 0;
+  #{if($direction == left, right, left)}: 0;
+}
+
+// create a stroke line around text (or font icon)
+// @mixin     stroke
+// @param     $width {Number} the width of the stroke
+// @param     $color {Color} the color of the stroke
+// @param     $shadow {List} an additional drop shadow to attach
+@mixin glyph-stroke($width: 1px, $color: black, $shadow: false) {
+  @include box-shadow(compact(0 $width 0 $color, 0 -1*$width 0 $color, $width 0 0 $color, -1*$width 0 0 $color, $shadow));
+}
+
+// create a glyph icon
+// @mixin     glyph-icon
+// @param     $icon {String} the icon name
+// @param     $size {Number} the size of the icon
+// @param     $color {Color} the color of the font
+// @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: 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: 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
+    @if $icon {
+      $char-code: nth-cyclic(-compass-list($char-code), if(comparable($CONFIG_GLYPHS_THRESHOLD, $size) and $size <= $CONFIG_GLYPHS_THRESHOLD, 2, 1));
+    }
+    $selector: if(index(before after, $placement), '&:#{$placement}', '&');
+    #{$selector} {
+      font-family: $CONFIG_GLYPHS_NAME;
+      font-weight: $CONFIG_GLYPHS_WEIGHT;
+      font-style: $CONFIG_GLYPHS_STYLE;
+      text-decoration: inherit;
+      speak: none;
+      @include if-set(font-size, $size);
+      @include if-set(color, $color);
+      @if $icon {
+        content: $char-code;
+      }
+    }
+    @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;";
+      @if($size != nil) {
+        $styles: $styles + "font-size:#{$size};"
+      }
+      @if($color != nil) {
+        $styles: $styles + "color:#{$color};"
+      }
+      @if($ie-styles) {
+        $styles: $styles + $ie-styles;
+      }
+      @include ie-pseudo($styles: $styles, $content: $char-code, $placement: $placement, $name: glyph);
+    }
+  }
+}
+
+// generate rotational and position keyframes for loading spinners
+// @mixin     generate-loader-keyframes
+@mixin generate-loader-keyframes() {
+  @if not $CONFIG_DISABLE_STYLEGUIDE_SPRITES {
+    // generate rotating keyframes
+    @include -generate-loader-keyframes-360();
+    // generate specific keyframes
+    @each $size in $CONFIG_LOADERS {
+      @if $size != nil {
+        $values: nth($size, 2);
+        $size: nth($size, 1);
+        @each $context in (1 2) {
+          $name: unquote('#{$size}-#{$context}');
+          $icon: nth-cyclic(associative($values, default), $context);
+          $position: styleguide-sprite-position($CONFIG_SPRITE_LOADERS, $icon);
+          $sprite-file: styleguide-sprite-file($CONFIG_SPRITE_LOADERS, $icon);
+          $width: styleguide-image-width($sprite-file);
+          $height: styleguide-image-height($sprite-file);
+          @include -generate-loader-keyframes-position($name, $position, $width, $height);
+        }
+      }
+    }
+  }
+}
+
+// generate rotational keyframes for loading spinners
+// @mixin     -generate-loader-keyframes-360
+// @private
+@mixin -generate-loader-keyframes-360() {
+  @if do-once("archetype/ui/generate-keyframe/#{$CONFIG_KEYFRAME_LOADERS}") {
+    @if archetype-version('compass >= 0.13') {
+      @include keyframes($CONFIG_KEYFRAME_LOADERS) {
+        from { @include rotate(0deg); }
+        to { @include rotate(360deg); }
+      }
+    }
+    @else {
+      @-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); }
+      }
+      @-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); }
+      }
+      @keyframes #{$CONFIG_KEYFRAME_LOADERS} {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+    }
+  }
+}
+
+// generate position keyframes for loading spinners
+// @mixin     -generate-loader-keyframes-position
+// @private
+// @param     $name {String} the name for this keyframe
+// @param     $position {List} the background-position of the spinner image
+// @param     $width {Number} the width of the spinner image
+// @param     $height {Number} the height of the spinner image
+@mixin -generate-loader-keyframes-position($name, $position, $width, $height) {
+  $name: unquote('#{$CONFIG_KEYFRAME_LOADERS}-position-#{$name}');
+  @if do-once("archetype/ui/generate-keyframe/#{$name}") {
+    @if archetype-version('compass >= 0.13') {
+      @include keyframes($name) {
+        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
+      }
+    }
+    @else {
+      @-webkit-keyframes #{$name} {
+        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
+      }
+      @-moz-keyframes #{$name} {
+        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
+      }
+      @-ms-keyframes #{$name} {
+        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
+      }
+      @-o-keyframes #{$name} {
+        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
+      }
+      @keyframes #{$name} {
+        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
+      }
+    }
+  }
+}
+
+// a helper to generate the required CSS for the position keyframe
+// @mixin     -generate-loader-keyframes-position-css
+// @private
+// @param     $position {List} the background-position of the spinner image
+// @param     $width {Number} the width of the spinner image
+// @param     $height {Number} the height of the spinner image
+@mixin -generate-loader-keyframes-position-css($position, $width, $height) {
+  background-position: $position;
+  width: $width;
+  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/_util.scss

@@ -0,0 +1,12 @@
+// utility functions and convenience methods
+// @category   utilities
+@import "config";
+// import dependencies
+@import "util/units";
+@import "util/lists";
+@import "util/misc";
+@import "util/spacing";
+@import "util/debug";
+@import "util/rtl";
+@import "util/styles";
+@import "util/targeting";