archetype 0.0.1.pre.12 → 0.0.1.pre.13

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

@@ -0,0 +1,24 @@
+@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',
+    content   $CONTENT_PLACEHOLDER
+  )),
+  nil
+), $CONFIG_THEME);
+}
+
+.extend-styleguide-test {
+  @include styleguide(extend-styleguide-test);
+}

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

@@ -0,0 +1,85 @@
+@import "archetype";
+
+// this should throw a warning because we can't retrieve the key-value pairs for the top level
+@if not styleguide-component-exists(test-missing-nil, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(test-missing-nil, (), (
+  (default, (
+    color       red,
+    nil
+  ))
+  // missing nil
+), $CONFIG_THEME);
+}
+
+// this should still throw a warning because we can't retrieve the key-value pairs for the properties
+@if not styleguide-component-exists(test-missing-nil-2, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(test-missing-nil-2, (), (
+  (default, (
+    color       yellow
+    // missing nil
+  )),
+  nil
+), $CONFIG_THEME);
+}
+
+// this should still throw a warning because we can't retrieve the key-value pairs for the properties
+@if not styleguide-component-exists(test-missing-comma, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(test-missing-nil-3, (), (
+  (default, (
+    color       blue,
+    (states, (
+      (hover, (
+        color           black,
+        background      green,
+        font-weight     bold
+      ))
+    ))
+  )),
+  nil
+), $CONFIG_THEME);
+}
+
+// this should throw a warning because we probably forgot a comma somewhere
+@if not styleguide-component-exists(test-missing-comma, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(test-missing-comma, (), (
+  (default, (
+    color       white,
+    background  green // missing comma
+    (states, (
+      (hover, (
+        color           black,
+        background      green,
+        font-weight     bold
+      )),
+      nil
+    ))
+  )),
+  nil
+), $CONFIG_THEME);
+}
+
+// this should throw a warning because we used an empty value for a property
+@if not styleguide-component-exists(test-empty-value, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(test-empty-value, (), (
+  (default, (
+    color   // this is ambiguous, but shouldn't cause an error
+  )),
+  nil
+), $CONFIG_THEME);
+}
+
+.test-missing-nil {
+  @include styleguide(test-missing-nil);
+}
+.test-missing-nil-2 {
+  @include styleguide(test-missing-nil-2);
+}
+.test-missing-nil-3 {
+  @include styleguide(test-missing-nil-3);
+}
+.test-missing-comma {
+  @include styleguide(test-missing-comma);
+}
+.test-empty-value {
+  @include styleguide(test-empty-value);
+}

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

@@ -0,0 +1,18 @@
+@import "archetype";
+
+@if not styleguide-component-exists(multi-value-styleguide-test, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(multi-value-styleguide-test, (), (
+  (default, (
+    color           gray,
+    color           rgba(0,0,0, 0.7),
+    background      white,
+    background      transparent,
+    target-browser  (ie lte 7, color, blue),
+    target-browser  (ie 8, color, red),
+    target-browser  (firefox, color, pink)
+  ))
+), $CONFIG_THEME);
+}
+.multi-value-styleguide-test {
+  @include styleguide(multi-value-styleguide-test);
+}

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

@@ -3,7 +3,7 @@
 // - nested selectors
 // - nested `styleguide` calls in nested selectors
 
-@import "archetype"; 
+@import "archetype";
 
 @if not styleguide-component-exists(nested-styleguide-test, $CONFIG_THEME) {
 $a-blackhole: styleguide-add-component(nested-styleguide-test, (), (

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

@@ -1,4 +1,4 @@
-@import "archetype"; 
+@import "archetype";
 
 .simple-button {
   &.disabled {

data/test/fixtures/stylesheets/archetype/source/ui/glyph_icon.scss

@@ -1,5 +1,35 @@
 @import "archetype";
 
+@include base-glyph();
+
 .simple {
   @include glyph-icon(caret-down);
 }
+
+.false {
+  @include glyph-icon(false, $placement: inline);
+}
+
+.size {
+  @include glyph-icon(caret-down, $size: 20px);
+}
+
+$CONFIG_GENERATED_TAG_INLINE: false;
+.not-inline {
+  @include glyph-icon(caret-down);
+}
+
+.ie-uid {
+  @include glyph-icon(caret-down, $ie-uid: my-custom-id);
+  #{$archetype-glyph-selector} {
+    color: pink;
+  }
+}
+
+.content-block {
+  @include glyph-icon(caret-down) {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+}

data/test/fixtures/stylesheets/archetype/source/utilities/associative.scss

@@ -0,0 +1,24 @@
+@import "archetype";
+
+$test: (
+  (one, (
+    '1',
+    '2',
+    '3'
+  )),
+  (two, (
+    '4',
+    '5',
+    '6'
+  ))
+);
+
+.test {
+  a: nth(associative($test, one), 1);     // 1
+  b: nth(associative($test, one), 2);     // 2
+  c: nth(associative($test, two), 2);     // 5
+  d: nth(associative($test, two), 3);     // 6
+  e: nth(associative($test, 'two'), 2);   // 5
+  f: nth(associative($test, 'two'), 3);   // 6
+  g: nth(associative($test, three), 1);   // 1
+}

data/test/fixtures/stylesheets/archetype/source/utilities/custom_output_styler.scss

@@ -1,3 +1,5 @@
+@import "archetype";
+
 // define the test function
 @function has-custom-output-styler($property, $value, $method: pre) {
   @if $property == color {
@@ -9,13 +11,12 @@
   }
   @return false;
 }
+
 // define the custom styler
 @mixin custom-output-styler($property, $value, $method: pre) {
   #{$property}: $value; /* #{$method} override */
 }
 
-@import "archetype";
-
 .test {
   @include styleguide(copy);
-}
+}

data/test/fixtures/stylesheets/archetype/source/utilities/targeting/target-browser.scss

@@ -43,7 +43,7 @@
 
 .target-ie-lte-9 {
   @include target-browser(ie lte 9, border-color, #111);
-  @include target-browser(ie lte 9, background, #2c2c2b); 
+  @include target-browser(ie lte 9, background, #2c2c2b);
 }
 
 .target-ie-7-8-9 {
@@ -68,3 +68,10 @@
 .target-opera {
   @include target-browser(opera, width, 82%);
 }
+
+.target-with-content-block {
+  @include target-browser(ie lte 8) {
+    /* testing content block */
+    color: red;
+  };
+}

data/test/fixtures/stylesheets/archetype/tmp/b.css

@@ -0,0 +1,14 @@
+a {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 22px;
+  color: black;
+}
+
+b {
+  font-size: 24px;
+  font-weight: normal;
+  line-height: 26px;
+  color: white;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
+}

data/test/fixtures/stylesheets/archetype/tmp/base.css

@@ -0,0 +1,349 @@
+@-webkit-keyframes archetype-loader {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes archetype-loader {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-ms-keyframes archetype-loader {
+  from {
+    -ms-transform: rotate(0deg);
+  }
+
+  to {
+    -ms-transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes archetype-loader {
+  from {
+    -o-transform: rotate(0deg);
+  }
+
+  to {
+    -o-transform: rotate(360deg);
+  }
+}
+
+@keyframes archetype-loader {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes archetype-loader-position-medium-1 {
+  from, to {
+    background-position: 0 -230px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@-moz-keyframes archetype-loader-position-medium-1 {
+  from, to {
+    background-position: 0 -230px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@-ms-keyframes archetype-loader-position-medium-1 {
+  from, to {
+    background-position: 0 -230px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@-o-keyframes archetype-loader-position-medium-1 {
+  from, to {
+    background-position: 0 -230px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@keyframes archetype-loader-position-medium-1 {
+  from, to {
+    background-position: 0 -230px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@-webkit-keyframes archetype-loader-position-medium-2 {
+  from, to {
+    background-position: 0 -288px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@-moz-keyframes archetype-loader-position-medium-2 {
+  from, to {
+    background-position: 0 -288px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@-ms-keyframes archetype-loader-position-medium-2 {
+  from, to {
+    background-position: 0 -288px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@-o-keyframes archetype-loader-position-medium-2 {
+  from, to {
+    background-position: 0 -288px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@keyframes archetype-loader-position-medium-2 {
+  from, to {
+    background-position: 0 -288px;
+    width: 58px;
+    height: 58px;
+    margin-left: -29px;
+    margin-top: -29px;
+  }
+}
+
+@-webkit-keyframes archetype-loader-position-small-1 {
+  from, to {
+    background-position: 0 -692px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@-moz-keyframes archetype-loader-position-small-1 {
+  from, to {
+    background-position: 0 -692px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@-ms-keyframes archetype-loader-position-small-1 {
+  from, to {
+    background-position: 0 -692px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@-o-keyframes archetype-loader-position-small-1 {
+  from, to {
+    background-position: 0 -692px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@keyframes archetype-loader-position-small-1 {
+  from, to {
+    background-position: 0 -692px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@-webkit-keyframes archetype-loader-position-small-2 {
+  from, to {
+    background-position: 0 -708px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@-moz-keyframes archetype-loader-position-small-2 {
+  from, to {
+    background-position: 0 -708px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@-ms-keyframes archetype-loader-position-small-2 {
+  from, to {
+    background-position: 0 -708px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@-o-keyframes archetype-loader-position-small-2 {
+  from, to {
+    background-position: 0 -708px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@keyframes archetype-loader-position-small-2 {
+  from, to {
+    background-position: 0 -708px;
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+  }
+}
+
+@-webkit-keyframes archetype-loader-position-large-1 {
+  from, to {
+    background-position: 0 -462px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}
+
+@-moz-keyframes archetype-loader-position-large-1 {
+  from, to {
+    background-position: 0 -462px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}
+
+@-ms-keyframes archetype-loader-position-large-1 {
+  from, to {
+    background-position: 0 -462px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}
+
+@-o-keyframes archetype-loader-position-large-1 {
+  from, to {
+    background-position: 0 -462px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}
+
+@keyframes archetype-loader-position-large-1 {
+  from, to {
+    background-position: 0 -462px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}
+
+@-webkit-keyframes archetype-loader-position-large-2 {
+  from, to {
+    background-position: 0 -577px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}
+
+@-moz-keyframes archetype-loader-position-large-2 {
+  from, to {
+    background-position: 0 -577px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}
+
+@-ms-keyframes archetype-loader-position-large-2 {
+  from, to {
+    background-position: 0 -577px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}
+
+@-o-keyframes archetype-loader-position-large-2 {
+  from, to {
+    background-position: 0 -577px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}
+
+@keyframes archetype-loader-position-large-2 {
+  from, to {
+    background-position: 0 -577px;
+    width: 115px;
+    height: 115px;
+    margin-left: -57.5px;
+    margin-top: -57.5px;
+  }
+}