archetype 0.0.1.pre.3.00dfd9a → 0.0.1.pre.3.6ed259b

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/_styles.scss

@@ -32,8 +32,12 @@
 @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
+    // 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
@@ -51,7 +55,7 @@
     // background-size
     @else if($property == background-size)      { @include background-size($value); }
     // background-origin
-    @else if($property == background-origin)      { @include background-origin($value); }
+    @else if($property == background-origin)    { @include background-origin($value); }
     // IE filters
     @else if($property == ie-filter)            { @include ie-filter($value); }
     // hide-text
@@ -70,6 +74,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); }
@@ -93,6 +99,7 @@
     @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 == extend)               { @extend #{$value}; }
     // animations
     @else if($property == animation) {
       @if archetype-version('compass >= 0.13') {
@@ -154,6 +161,10 @@
         @include ie-pseudo-after(nth($value, 1), $content, $tag);
       }
     }
+    // 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; }
   }
@@ -463,4 +474,4 @@
     $tag: '-#{$tag}';
   }
   @return '#{$prefix}#{$tag}';
-}
+}

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";

data/templates/_theme/components/README

@@ -0,0 +1 @@
+// place your component partials in this directory

data/templates/_theme/primitives/README

@@ -0,0 +1 @@
+// place your primitive partials in this directory

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/expected/hacks/ie_pseudo.css

@@ -1,11 +1,11 @@
 .before {
-  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype"),this.el.style.cssText="color: red; background: green;",this.insertBefore(this.el));
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.style.cssText="color: red; background: green;",this.insertBefore(this.el));
 }
 
 .after-content {
-  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype"),this.el.innerHTML="➽",this.appendChild(this.el));
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="➽",this.appendChild(this.el));
 }
 
 .before-style-content {
-  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype"),this.el.innerHTML="testing ➽if this works",this.el.style.cssText="color: red; background: green;",this.insertBefore(this.el));
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="testing ➽if this works",this.el.style.cssText="color: red; background: green;",this.insertBefore(this.el));
 }

data/test/fixtures/stylesheets/archetype/expected/hacks/transparent_focusable.css

@@ -0,0 +1,4 @@
+.test {
+  background: transparent "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+  *background: transparent url(https://);
+}

data/test/fixtures/stylesheets/archetype/expected/styleguide/buttons.css

@@ -6,6 +6,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -81,6 +82,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -156,6 +158,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -231,6 +234,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -306,6 +310,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -381,6 +386,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -456,6 +462,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -531,6 +538,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -606,6 +614,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -682,6 +691,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -757,6 +767,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -832,6 +843,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -907,6 +919,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -982,6 +995,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -1057,6 +1071,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -1132,6 +1147,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -1207,6 +1223,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -1282,6 +1299,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -1358,6 +1376,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -1433,6 +1452,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -1508,6 +1528,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -1583,6 +1604,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -1658,6 +1680,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -1733,6 +1756,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -1808,6 +1832,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -1883,6 +1908,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -1958,6 +1984,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-border-radius: 3px;
@@ -2033,6 +2060,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;

data/test/fixtures/stylesheets/archetype/expected/styleguide/extend.css

@@ -0,0 +1,7 @@
+.some-extend-class, .extend-styleguide-test {
+  color: red;
+}
+
+.extend-styleguide-test {
+  background: green;
+}

data/test/fixtures/stylesheets/archetype/expected/styleguide/selective_state.css

@@ -6,6 +6,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -52,6 +53,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;
@@ -96,6 +98,7 @@
   margin: 0;
   overflow: visible;
   text-decoration: none !important;
+  text-align: center;
   width: auto;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   -webkit-border-radius: 3px;

data/test/fixtures/stylesheets/archetype/expected/ui/glyph_icon.css

@@ -1,8 +1,8 @@
 .simple {
-  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:100%;color:inherit;",this.insertBefore(this.el));
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:100%;color:inherit;",this.insertBefore(this.el));
 }
 .simple:before {
-  font-family: FontAwesome;
+  font-family: "FontAwesome";
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -13,7 +13,7 @@
 }
 
 .false {
-  font-family: FontAwesome;
+  font-family: "FontAwesome";
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -23,10 +23,10 @@
 }
 
 .size {
-  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:20px;color:inherit;",this.insertBefore(this.el));
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:20px;color:inherit;",this.insertBefore(this.el));
 }
 .size:before {
-  font-family: FontAwesome;
+  font-family: "FontAwesome";
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -35,3 +35,50 @@
   color: inherit;
   content: "\f0d7";
 }
+
+.not-inline {
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.not-inline:before {
+  font-family: "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 100%;
+  color: inherit;
+  content: "\f0d7";
+}
+.not-inline #ie-pseudo-archetype-uid-RANDOM_UID {
+  "font-family: 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 100%;
+  color: inherit;
+}
+
+.ie-uid {
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="my-custom-id",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.ie-uid:before {
+  font-family: "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 100%;
+  color: inherit;
+  content: "\f0d7";
+}
+.ie-uid #my-custom-id {
+  "font-family: 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 100%;
+  color: inherit;
+}
+.ie-uid:before, .ie-uid #my-custom-id {
+  color: pink;
+}