Change @imports

packages/lungo/theme.lungo.css

@@ -30,17 +30,26 @@ 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 -------------------------- */
+section {
+  background-color: #222;
+}
 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,
@@ -48,6 +57,8 @@ 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,
@@ -62,11 +73,15 @@ 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 {
@@ -80,6 +95,8 @@ 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 -------------------------- */
@@ -87,6 +104,8 @@ 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 {
@@ -95,6 +114,8 @@ 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,
@@ -108,6 +129,8 @@ 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 {
@@ -115,6 +138,8 @@ 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 {
@@ -133,16 +158,22 @@ 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,
@@ -216,13 +247,17 @@ aside .list li:not(:first-child) {
 aside .list li:not(:last-child) {
   border-bottom: solid 1px #141414;
 }
-aside .list li.active {
+aside .list li.active,
+aside .list li:active {
   background: #0093d5;
   border-color: transparent;
 }
 aside .list li.active strong,
+aside .list li:active strong,
 aside .list li.active small,
-aside .list li.active .icon {
+aside .list li:active small,
+aside .list li.active .icon,
+aside .list li:active .icon {
   color: #fff;
 }
 aside .list li strong {
@@ -237,6 +272,8 @@ 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;
 }
@@ -249,6 +286,8 @@ 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 -------------------------- */
@@ -263,6 +302,8 @@ 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,
@@ -270,10 +311,14 @@ 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;
@@ -292,9 +337,13 @@ 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,
@@ -305,13 +354,19 @@ 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);
 }
@@ -319,6 +374,8 @@ 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;
 }
@@ -394,9 +451,13 @@ 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,
@@ -518,6 +579,8 @@ 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),
@@ -542,6 +605,8 @@ 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/import/constants.styl

@@ -19,3 +19,7 @@ FONT_SIZE_SMALL     = 0.9em
 FONT_SIZE_BIG       = 1.2em
 
 TRANSITION_TIME     = 350ms
+
+// @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl")
+@import "vendor.styl"
+

src/stylesheets/lungo.icon.brand.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 
 @font-face

src/stylesheets/lungo.icon.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 @font-face
   font-family: 'lungojsicon'

src/stylesheets/lungo.layout.article.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 article
   position: absolute

src/stylesheets/lungo.layout.aside.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 section.aside
   &:not(.small)

src/stylesheets/lungo.layout.grid.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 .row, .rows
   width: 100%

src/stylesheets/lungo.layout.list.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 .list
   & li

src/stylesheets/lungo.layout.nav.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 nav
   &.groupbar, footer &

src/stylesheets/lungo.layout.styl

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

src/stylesheets/lungo.widgets.button.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 
 .button, button

src/stylesheets/lungo.widgets.form.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 FORM_INPUT_HEIGHT = 30px
 PROGRESS_HEIGHT = 15px

src/stylesheets/lungo.widgets.loading.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 .loading
   position: relative

src/stylesheets/lungo.widgets.notification.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 OPACITY = rgba(0,0,0,0.75)
 LOADING = 104px

src/stylesheets/lungo.widgets.pull.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 section.show > [data-control="pull"]
   position: absolute

src/stylesheets/lungo.widgets.splash.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 .splash
   text-align: center

src/stylesheets/lungo.widgets.styl

@@ -7,8 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/constants.styl"
-@import "import/vendor.styl"
+@import "constants.styl"
 
 .overthrow-enabled .overthrow
   overflow: auto

src/stylesheets/theme.lungo.styl

@@ -7,7 +7,8 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "import/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")
 
 WHITE = white
@@ -52,7 +53,6 @@ body
     color: #666
     text-shadow: 0 1px 0 white
 
-
 /* -------------------------- LAYOUT COLORS -------------------------- */
 section
   background-color: DARK
@@ -60,7 +60,7 @@ section
     background-color: THEME
     box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
     color: #fff
-    border-radius: 4px 4px 0 0
+    border-radius 4px 4px 0 0
 
   & > footer, & nav.groupbar
     background-color: DARK

src/stylesheets/import/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()
@@ -20,22 +20,64 @@ background-image()
 backface-visibility()
   vendor('backface-visibility', arguments)
 
-
 /* ====================== FLEXBOX ====================== */
 display-box()
   display -webkit-box
   display -moz-box
+  display -ms-box
+  display -o-box
   display box
 
 box-pack()
   vendor('box-pack', arguments)
 
+box-align()
+  vendor('box-align', arguments)
+
 box-flex()
   vendor('box-flex', arguments)
 
 box-orient()
   vendor('box-orient', arguments)
 
+box-direction()
+  vendor('box-direction', arguments)
+
+ordinal-group()
+  vendor('box-ordinal-group', arguments)
+
+box-lines()
+  vendor('box-lines', arguments)
+
+/* ====================== BOXFLEX ====================== */
+display-flex()
+  display -webkit-flex
+  display -moz-flex
+  display -ms-flex
+  display -o-flex
+  display flex
+
+flex-flow()
+  vendor('flex-flow', arguments)
+
+justify-content()
+  vendor('justify-content', arguments)
+
+align-content()
+  vendor('align-content', arguments)
+
+align-items()
+  vendor('align-items', arguments)
+
+order()
+  vendor('order', arguments)
+
+flex()
+  vendor('flex', arguments)
+
+align-self()
+  vendor('align-self', arguments)
+
 /* ====================== TRANSITIONS ====================== */
 transition()
   vendor('transition', arguments)