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

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/invalid_structures.css

@@ -0,0 +1,21 @@
+.test-missing-nil {
+  color: red;
+}
+
+.test-missing-nil-2 {
+  color: yellow;
+}
+
+.test-missing-nil-3 {
+  color: blue;
+}
+.test-missing-nil-3.hover, .test-missing-nil-3:hover, .test-missing-nil-3.focus, .test-missing-nil-3:focus {
+  color: black;
+  background: green;
+  font-weight: bold;
+}
+
+.test-missing-comma {
+  color: white;
+  background: green;
+}

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

@@ -0,0 +1,13 @@
+.multi-value-styleguide-test {
+  color: gray;
+  color: rgba(0, 0, 0, 0.7);
+  background: white;
+  background: transparent;
+  *color: blue;
+}
+.ie.ie8 .multi-value-styleguide-test {
+  color: red;
+}
+.multi-value-styleguide-test, .multi-value-styleguide-test x:-moz-any-link {
+  color: pink;
+}

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,109 @@
+@font-face {
+  font-family: "FontAwesome";
+  src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot');
+  src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot?#iefix') format('eot'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.svg#FontAwesome') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "FontAwesome-0.0.1";
+  src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot');
+  src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot?#iefix') format('eot'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.svg#FontAwesome') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
 .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-0.0.1', '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-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 100%;
+  color: inherit;
+  content: "\f0d7";
+}
+
+.false {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 100%;
+  color: inherit;
+}
+
+.size {
+  *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-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:20px;color:inherit;",this.insertBefore(this.el));
+}
+.size:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 20px;
+  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-0.0.1", "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-0.0.1', '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-0.0.1", "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-0.0.1', '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;
+}
+
+.content-block {
+  *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));
+}
+.content-block:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -11,3 +112,16 @@
   color: inherit;
   content: "\f0d7";
 }
+.content-block #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 100%;
+  color: inherit;
+}
+.content-block:before, .content-block #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}

data/test/fixtures/stylesheets/archetype/expected/utilities/associative.css

@@ -0,0 +1,9 @@
+.test {
+  a: "1";
+  b: "2";
+  c: "5";
+  d: "6";
+  e: "5";
+  f: "6";
+  g: "1";
+}

data/test/fixtures/stylesheets/archetype/expected/utilities/custom_output_styler.css

@@ -0,0 +1,8 @@
+.test {
+  font-size: 13px;
+  line-height: 17px;
+  /* post override */
+  color: #222222;
+  /* pre override */
+  font-weight: normal;
+}

data/test/fixtures/stylesheets/archetype/expected/utilities/targeting/target-browser.css

@@ -98,3 +98,8 @@
 .target-opera, .target-opera x:-o-prefocus {
   width: 82%;
 }
+
+.ie.lte8 .target-with-content-block {
+  /* testing content block */
+  color: red;
+}

data/test/fixtures/stylesheets/archetype/source/base.scss

@@ -0,0 +1,3 @@
+@import "archetype";
+
+@include generate-loader-keyframes();

data/test/fixtures/stylesheets/archetype/source/hacks/transparent_focusable.scss

@@ -0,0 +1,5 @@
+@import "archetype";
+
+.test {
+  @include transparent-focusable();
+}

data/test/fixtures/stylesheets/archetype/source/locale.scss

@@ -0,0 +1,43 @@
+@import "archetype";
+
+// test for a simple locale
+.en_US {
+  @if(locale(en_US)) {
+    content: "en_US";
+  }
+}
+
+// test for a wildcard territory
+.en_wild {
+  @if(locale(en_)) {
+    content: "en_*";
+  }
+}
+
+// test for a wildcard language
+.wild_US {
+  @if(locale(_US)) {
+    content: "*_US";
+  }
+}
+
+// multiple locales, one valid
+.one {
+  @if(locale(de_DE fr_FR pt_ en_US)) {
+    content: "one of de_DE fr_FR pt_ en_US";
+  }
+}
+
+// multiple locales, none valid
+.not {
+  @if(not locale(ja_JP pt_BR _GB de_)) {
+    content: "not one of ja_JP pt_BR _GB de_";
+  }
+}
+
+// test that the lang() alias works
+.lang {
+  @if(lang(en_US)) {
+    content: "en_US";
+  }
+}

data/test/fixtures/stylesheets/archetype/source/styleguide/alerts.scss

@@ -0,0 +1,21 @@
+@import "archetype";
+
+@each $type in (error success notice yield) {
+  .alert.#{$type} {
+    @include styleguide($type alert);
+    .dismiss {
+      @include styleguide(close in a $type alert);
+    }
+  }
+}
+
+$CONFIG_GENERATED_TAG_INLINE: false;
+
+@each $type in (error success notice yield) {
+  .alert.#{$type} {
+    @include styleguide($type alert);
+    .dismiss {
+      @include styleguide(close in a $type alert);
+    }
+  }
+}

data/test/fixtures/stylesheets/archetype/source/styleguide/buttons.scss

@@ -1,4 +1,4 @@
-@import "archetype"; 
+@import "archetype";
 
 @each $context in container, bristol, punchcut {
   .#{$context} {
@@ -12,3 +12,7 @@
     }
   }
 }
+
+.test-exclude {
+  @include styleguide(small secondary button in a container, $exclude: width height border-radius padding font-size line-height cursor);
+}

data/test/fixtures/stylesheets/archetype/source/styleguide/drop.scss

@@ -0,0 +1,101 @@
+@import "archetype";
+
+@if not styleguide-component-exists(dropping-styles-test, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(dropping-styles-test, (), (
+  (default, (
+    display         block,
+    color           red,
+    background      green,
+    (states, (
+      (hover, (
+        styleguide  module,
+        border      (2px solid red),
+        (selectors, (
+          ('.test', (
+            padding  100px,
+            margin   20px
+          )),
+          nil
+        ))
+      )),
+      nil
+    ))
+  )),
+  (parent, (
+    display         none,
+    color           black
+  )),
+  (heir, (
+    inherit (parent),
+    nil
+  )),
+  (dropped, (
+    drop            true,
+    color           yellow
+  )),
+  (dropped2, (
+    drop            true,
+    color           yellow,
+    (states, (
+      (hover, (
+        color       blue,
+        nil
+      )),
+      (active, (
+        color       green,
+        width       100%
+      )),
+      nil
+    ))
+  )),
+  (dropped3, (
+    color           purple,
+    (states, (
+      drop          hover,  // TODO: this is currently throwing an ambiguous warning, need to investigate
+      nil
+    )),
+    nil
+  )),
+  (dropped4, (
+    color           purple,
+    (states, (
+      (hover, (
+        drop        selectors,
+        nil
+      )),
+      nil
+    ))
+  )),
+  nil
+), $CONFIG_THEME);
+}
+
+.dropping-styles-test {
+  /* should contain hover state and .test selector */
+  @include styleguide(dropping-styles-test);
+  &.parent {
+    /* should contain hover state and .test selector */
+    @include styleguide(parent dropping-styles-test);
+  }
+  &.heir {
+    /* should contain hover state and .test selector */
+    @include styleguide(heir dropping-styles-test);
+  }
+  &.dropped {
+    /* should only contain color:yellow */
+    @include styleguide(dropped dropping-styles-test);
+  }
+  &.dropped2 {
+    /* should contain color:yellow, custom :hover, :active */
+    @include styleguide(dropped2 dropping-styles-test);
+  }
+  &.dropped3 {
+    /* should only contain color:purple */
+    @include styleguide(dropped3 dropping-styles-test);
+  }
+  // TODO fix this guy: drops nested multiple levels deep don't resolve yet :(
+  //&.dropped4 {
+  //  /* should contain color:purple, :hover, but no `.test` selector */
+  //  @include styleguide(dropped4 dropping-styles-test);
+  //}
+}

data/test/fixtures/stylesheets/archetype/source/styleguide/extend.scss

@@ -0,0 +1,23 @@
+@import "archetype";
+
+.some-extend-class {
+  color: red;
+}
+
+%some-extend-placeholder {
+  background: green;
+}
+
+@if not styleguide-component-exists(extend-styleguide-test, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(extend-styleguide-test, (), (
+  (default, (
+    extend    '.some-extend-class',
+    extend    '%some-extend-placeholder'
+  )),
+  nil
+), $CONFIG_THEME);
+}
+
+.extend-styleguide-test {
+  @include styleguide(extend-styleguide-test);
+}