Change @imports

example/components/lungo/lungo.css

@@ -102,7 +102,7 @@ aside.small nav a:first-child{margin-top:8px}
 .list .right .icon,.list small .icon{height:13px !important;width:13px !important;margin-right:1px !important;font-size:1.2em !important;line-height:1.1em}
 .list.indented li{margin-bottom:10px}
 
-nav.groupbar,footer nav{display:-webkit-box;display:-moz-box;display:box;-webkit-box-pack:justify;-moz-box-pack:justify;box-pack:justify;width:100%;}
+nav.groupbar,footer nav{display:-webkit-box;display:-moz-box;display:-ms-box;display:-o-box;display:box;-webkit-box-pack:justify;-moz-box-pack:justify;box-pack:justify;width:100%;}
 nav.groupbar > a,footer nav > a{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}
 header nav a{padding:0 11px !important;z-index:1000;float:left}
 header nav .button,header nav button{margin:6px 2px 0 2px;line-height:31px !important;}

example/components/lungo/theme.lungo.css

@@ -6,6 +6,7 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
+/* @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl") */
 @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
 /* -------------------------- THEME -------------------------- */
 body {

packages/lungo/theme.lungo.css

@@ -6,6 +6,7 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
+/* @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl") */
 @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
 /* -------------------------- THEME -------------------------- */
 body {
@@ -30,8 +31,6 @@ a.theme:active {
   color: #666;
   -webkit-text-shadow: 0 1px 0 #fff;
   -moz-text-shadow: 0 1px 0 #fff;
-  -ms-text-shadow: 0 1px 0 #fff;
-  -o-text-shadow: 0 1px 0 #fff;
   text-shadow: 0 1px 0 #fff;
 }
 /* -------------------------- LAYOUT COLORS -------------------------- */
@@ -42,14 +41,10 @@ section > header {
   background-color: #0093d5;
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
-  -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
-  -o-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
   box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
   color: #fff;
   -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
-  -ms-border-radius: 4px 4px 0 0;
-  -o-border-radius: 4px 4px 0 0;
   border-radius: 4px 4px 0 0;
 }
 section > footer,
@@ -57,8 +52,6 @@ section nav.groupbar {
   background-color: #222;
   -webkit-box-shadow: inset 0 3px 0 #1d1d1d;
   -moz-box-shadow: inset 0 3px 0 #1d1d1d;
-  -ms-box-shadow: inset 0 3px 0 #1d1d1d;
-  -o-box-shadow: inset 0 3px 0 #1d1d1d;
   box-shadow: inset 0 3px 0 #1d1d1d;
 }
 section > article,
@@ -73,15 +66,11 @@ section > [data-control="pull"].splash {
 section.aside {
   -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
   -moz-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
-  -ms-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
-  -o-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
   box-shadow: -1px 0 2px rgba(0,0,0,0.2);
 }
 section.aside.right {
   -webkit-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
   -moz-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
-  -ms-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
-  -o-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
   box-shadow: 1px 0 2px rgba(0,0,0,0.2);
 }
 aside {
@@ -95,8 +84,6 @@ aside > footer {
 aside > header {
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
-  -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
-  -o-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
   box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
 }
 /* -------------------------- NAVIGATION -------------------------- */
@@ -104,8 +91,6 @@ section > header > nav a:not(.button) {
   color: #00608a;
   -webkit-text-shadow: 0 1px 0 #20baff;
   -moz-text-shadow: 0 1px 0 #20baff;
-  -ms-text-shadow: 0 1px 0 #20baff;
-  -o-text-shadow: 0 1px 0 #20baff;
   text-shadow: 0 1px 0 #20baff;
 }
 section > header > nav a:not(.button):active {
@@ -114,8 +99,6 @@ section > header > nav a:not(.button):active {
 section > nav.groupbar > a.active {
   -webkit-box-shadow: inset 0 -3px 0 #0093d5;
   -moz-box-shadow: inset 0 -3px 0 #0093d5;
-  -ms-box-shadow: inset 0 -3px 0 #0093d5;
-  -o-box-shadow: inset 0 -3px 0 #0093d5;
   box-shadow: inset 0 -3px 0 #0093d5;
 }
 section > footer > nav > a,
@@ -129,8 +112,6 @@ nav.groupbar > a.active {
 section > footer > nav > a {
   -webkit-box-shadow: 1px 0 0 #1d1d1d;
   -moz-box-shadow: 1px 0 0 #1d1d1d;
-  -ms-box-shadow: 1px 0 0 #1d1d1d;
-  -o-box-shadow: 1px 0 0 #1d1d1d;
   box-shadow: 1px 0 0 #1d1d1d;
 }
 section > footer > nav > a.active {
@@ -138,8 +119,6 @@ section > footer > nav > a.active {
   background-color: #1d1d1d;
   -webkit-box-shadow: inset 0 3px 0 #0093d5;
   -moz-box-shadow: inset 0 3px 0 #0093d5;
-  -ms-box-shadow: inset 0 3px 0 #0093d5;
-  -o-box-shadow: inset 0 3px 0 #0093d5;
   box-shadow: inset 0 3px 0 #0093d5;
 }
 aside nav a {
@@ -158,22 +137,16 @@ section .list li:not(.anchor) {
 section .list li.secondary {
   -webkit-box-shadow: inset 4px 0px 0px #bfbfbf;
   -moz-box-shadow: inset 4px 0px 0px #bfbfbf;
-  -ms-box-shadow: inset 4px 0px 0px #bfbfbf;
-  -o-box-shadow: inset 4px 0px 0px #bfbfbf;
   box-shadow: inset 4px 0px 0px #bfbfbf;
 }
 section .list li.accept {
   -webkit-box-shadow: inset 4px 0px 0px #3fb58e;
   -moz-box-shadow: inset 4px 0px 0px #3fb58e;
-  -ms-box-shadow: inset 4px 0px 0px #3fb58e;
-  -o-box-shadow: inset 4px 0px 0px #3fb58e;
   box-shadow: inset 4px 0px 0px #3fb58e;
 }
 section .list li.cancel {
   -webkit-box-shadow: inset 4px 0px 0px #ee6557;
   -moz-box-shadow: inset 4px 0px 0px #ee6557;
-  -ms-box-shadow: inset 4px 0px 0px #ee6557;
-  -o-box-shadow: inset 4px 0px 0px #ee6557;
   box-shadow: inset 4px 0px 0px #ee6557;
 }
 section .list li,
@@ -272,8 +245,6 @@ aside .list li .icon {
   color: #fff;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
-  -ms-border-radius: 2px;
-  -o-border-radius: 2px;
   border-radius: 2px;
   font-weight: 700 !important;
 }
@@ -286,8 +257,6 @@ aside .list li .icon {
 footer .tag:not(.icon) {
   -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
   -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
-  -ms-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
-  -o-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
   box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
 }
 /* -------------------------- NOTIFICATION -------------------------- */
@@ -302,8 +271,6 @@ footer .tag:not(.icon) {
   color: #222;
   -webkit-box-shadow: 0 0 8px #000;
   -moz-box-shadow: 0 0 8px #000;
-  -ms-box-shadow: 0 0 8px #000;
-  -o-box-shadow: 0 0 8px #000;
   box-shadow: 0 0 8px #000;
 }
 .notification .window:not(.growl) button,
@@ -311,14 +278,10 @@ footer .tag:not(.icon) {
   background: #fff !important;
   -webkit-box-shadow: none !important;
   -moz-box-shadow: none !important;
-  -ms-box-shadow: none !important;
-  -o-box-shadow: none !important;
   box-shadow: none !important;
   color: #007db5 !important;
   -webkit-border-radius: 0px !important;
   -moz-border-radius: 0px !important;
-  -ms-border-radius: 0px !important;
-  -o-border-radius: 0px !important;
   border-radius: 0px !important;
   border: none !important;
   margin-bottom: 1px;
@@ -337,13 +300,9 @@ header button {
   background-color: #007db5;
   -webkit-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
   -moz-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
-  -ms-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
-  -o-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
   box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
   border-radius: 4px;
 }
 header .button:active,
@@ -354,19 +313,13 @@ article .button,
 article button {
   -webkit-border-radius: FORM-border-radius;
   -moz-border-radius: FORM-border-radius;
-  -ms-border-radius: FORM-border-radius;
-  -o-border-radius: FORM-border-radius;
   border-radius: FORM-border-radius;
   color: #fff;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
-  -ms-border-radius: 2px;
-  -o-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
   -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
-  -ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
-  -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
   border: solid 1px rgba(0,0,0,0.1);
 }
@@ -374,8 +327,6 @@ article .button:active,
 article button:active {
   -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
   -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
-  -ms-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
-  -o-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
   box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
   border-color: none;
 }
@@ -451,13 +402,9 @@ form textarea,
   border: 1px solid #ddd;
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-  -ms-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-  -o-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
-  -ms-border-radius: 0px;
-  -o-border-radius: 0px;
   border-radius: 0px;
 }
 form input[type="text"].error,
@@ -579,8 +526,6 @@ form input[type=range],
 .form input[type=range] {
   -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
-  -ms-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
-  -o-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
 }
 form input[type=range]:not(.checkbox),
@@ -605,8 +550,6 @@ form input[type=range]::-webkit-slider-thumb,
 .form input[type=range]::-webkit-slider-thumb {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
-  -ms-border-radius: 2px;
-  -o-border-radius: 2px;
   border-radius: 2px;
   background-color: #e7eae2;
   border: solid 1px #d0d4c6;

src/stylesheets/constants.styl

@@ -20,6 +20,6 @@ FONT_SIZE_BIG       = 1.2em
 
 TRANSITION_TIME     = 350ms
 
-// @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl")
+/* @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl") */
 @import "vendor.styl"
 

src/stylesheets/lungo.layout.styl

@@ -8,7 +8,6 @@
  */
 
 @import "constants.styl"
-@import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl")
 
 body
   &[data-position="absolute"] > section

src/stylesheets/theme.lungo.styl

@@ -7,7 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-// @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl")
+/* @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl") */
 @import "vendor.styl"
 @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
 

src/stylesheets/vendor.styl

@@ -1,8 +1,8 @@
 vendor(prop, args)
   -webkit-{prop} args
   -moz-{prop} args
-  -ms-{prop} args
-  -o-{prop} args
+  // -ms-{prop} args
+  // -o-{prop} args
   {prop} args
 
 border-radius()