archetype 0.0.1.pre.3.55c4182 → 0.0.1.pre.3.83f0d7a

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: fd37881a20697b5141c48ba115124957e6332e3d
+  data.tar.gz: 0ed65c39dbb264d66901c12780388d4c4ea9a069
+SHA512:
+  metadata.gz: d50d86a02eb1f61af101de19725af81282fb8d5b24a7fe7ba0991af3b7e2b460ff658a0ab7d6ee1a221c7173cc46fb4463d7f36c2839e5ec2a26e8945efe3cd2
+  data.tar.gz: fe7c83bb70a19d4c6b8606928ddde1091905a5bae9527846d66be9e9513a7b27fafd5f4ac3daa9e520e31e49a2a3886cbf7eede80b7e1fc425aab6ab8b2fe3eb

data/CHANGELOG.md

@@ -11,14 +11,20 @@
 - added `styleguide-component-exists()` method to check if a component/extension has already been registered in the theme
 - added `memoize` compiler configuration to allow enabling/disabling the internal styleguide memoizer
 - `glyph-icon()` can now take `false` as an icon name and not output anything
+- added `unstyled-button()` method to remove default styling from a `<button>` element
+- added `prefixed-tag()` method for consistency when generating tag names
+- added Chinese font stacks
 
 ### Resolved Issues:
 
 - quotes on strings passed to `associative()` weren't being stripped correctly
+- fixed some minor glyph issues
 
 ### Tests:
 
 - added test case for fallback CSS properties
+- added test case for generating loading spinner keyframe animations
+- updated test cases for minor changes
 
 ## 0.0.1.pre.2 (unreleased)
 

data/LICENSE

@@ -1,5 +1,5 @@
 Archetype
-Copyright (c) 2012 LinkedIn
+Copyright (c) 2013 LinkedIn Corp.  All rights reserved.
 Apache Software License 2.0
 
 

data/README.md

@@ -1,6 +1,6 @@
 # Archetype
 
-[![Build Status](https://travis-ci.org/eoneill/archetype.png)](https://travis-ci.org/eoneill/archetype)
+[![Build Status](https://travis-ci.org/linkedin/archetype.png)](https://travis-ci.org/linkedin/archetype)
 
 Archetype is a UI pattern and component library for quickly iterating on and maintaining scalable web interfaces.
 

data/stylesheets/archetype/_config.scss

@@ -46,7 +46,7 @@ $CONFIG_Z_INDEX_BASE:             0 !default;
 $CONFIG_Z_LAYERS_OFFSET:          100 !default;                                                     // the offset between z-layers
 $CONFIG_Z_LAYERS:                 (default dialog navigation) !default;                             // the orders for the z-layers
 
-// compass 
+// compass
 $COMPASS_RTL_SUPPORT:             false !default;                                                   // does your Compass version support RTL? set to true if Compass mixins support RTL
 
 // sprites
@@ -304,12 +304,12 @@ $CONFIG_BROWSER_WARN_ON_HACK:     false !default;
 $CONFIG_BROWSER_VENDORS_HACK: (
   (webkit-all, safari webkit chrome),
   (gecko-all,  firefox gecko mozilla),
-  (opera-all,  opera)
+  (opera-all,  opera) // NOTE: this may stop working once Opera switches over to using WebKit/Blink
 ) !default;
 
 // os targeting
 $CONFIG_OS_VENDORS_CLASS: (
-  (os-win,   windows win winxp win7),
+  (os-win,   windows win winxp win7 win8),
   (os-mac,   apple mac osx),
   (os-linux, linux),
   (os-other, other misc unknown)
@@ -321,21 +321,30 @@ $CORE_SAFE_FONTS: (
   (sans-serif, (
     (default, (
       (default          (sans-serif)),
-      (ko_KR            ('Malgun Gothic', default))
+      (ko_KR            ('Malgun Gothic', default)),
+      (zh_TW            (SimSun, default)),
+      (zh_CN            (SimSun, default))
     )),
     (win, (
       (default          (Arial, sans-serif)),
       (ja_JP            (メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', default)),
+      (zh_TW            ('微軟正黑體', 'Microsoft JhengHei', PMingLiu, '宋体', SimSun, default)),
+      (zh_CN            ('华文细黑', 'STHeiti Light', '微软雅黑体', 'Microsoft Yahei', '新宋体', NSimSun, '宋体', SimSun, default)),
       (ko_KR            nil)
     )),
     (mac, (
       (default          (Helvetica, Arial, sans-serif)),
+      (zh_TW            ('黑體-繁', 'Heiti TC', '儷黑Pro', 'LiHei Pro', PMingLiu, '宋体', SimSun, default)),
+      (zh_CN            ('黑体-简', 'Heiti SC', '华文细黑', 'STHeiti Light', '华文黑体', STHeiti, default)),
       (ja_JP            ('Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', 'MS PGothic', default)),
       (ko_KR            nil)
     )),
     (linux, (
       (default          (Helvetica, FreeSans, 'Liberation Sans', Helmet, Arial, sans-serif)),
-      (CJK              nil)
+      (zh_TW            (PMingLiu, '宋体', SimSun, default)),
+      (zh_CN            ('新宋体', NSimSun, '宋体', SimSun, default)),
+      (ja_JP            nil),
+      (ko_KR            nil)
     ))
   )),
   (serif, (

data/stylesheets/archetype/_hacks.scss

@@ -67,9 +67,6 @@
       $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}';
-    }
-    *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("#{$CONFIG_GENERATED_TAG_PREFIX}#{$name}"),#{$content}#{$styles}this.#{$method}(this.el));
+    *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("#{prefixed-tag($name)}"),#{$content}#{$styles}this.#{$method}(this.el));
   }
 }

data/stylesheets/archetype/_ui.scss

@@ -124,7 +124,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));
   }
@@ -167,13 +167,13 @@
   @else {
     @if $size == default {
       $default-size: nil;
-      @if icon {
+      @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 {
+    @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}', '&');
@@ -189,7 +189,7 @@
         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;";
       @if($size != nil) {
@@ -314,4 +314,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/util/_styles.scss

@@ -452,3 +452,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/test/fixtures/stylesheets/archetype/expected/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;
+  }
+}