LESS >> STYLUS (PART 1/2)

kitchen-sink/app/sections/color.html

@@ -6,19 +6,19 @@
     </header>
     <article class="scroll indented">
         <div>
-            <a href="#" class="button big">default</a>
-            <a href="#" class="button big disabled">disabled</a>
-            <a href="#" class="button big red">red</a>
-            <a href="#" class="button big lightgreen">lightgreen</a>
-            <a href="#" class="button big green">green</a>
-            <a href="#" class="button big blue">blue</a>
-            <a href="#" class="button big arcticblue">articblue</a>
-            <a href="#" class="button big orange">orange</a>
-            <a href="#" class="button big magenta">magenta</a>
-            <a href="#" class="button big pink">pink</a>
-            <a href="#" class="button big yellow">yellow</a>
-            <a href="#" class="button big twitter">twitter</a>
-            <a href="#" class="button big facebook">facebook</a>
+            <a href="#" class="button anchor">default</a>
+            <a href="#" class="button anchor disabled">disabled</a>
+            <a href="#" class="button anchor red">red</a>
+            <a href="#" class="button anchor lightgreen">lightgreen</a>
+            <a href="#" class="button anchor green">green</a>
+            <a href="#" class="button anchor blue">blue</a>
+            <a href="#" class="button anchor arcticblue">articblue</a>
+            <a href="#" class="button anchor orange">orange</a>
+            <a href="#" class="button anchor magenta">magenta</a>
+            <a href="#" class="button anchor pink">pink</a>
+            <a href="#" class="button anchor yellow">yellow</a>
+            <a href="#" class="button anchor twitter">twitter</a>
+            <a href="#" class="button anchor facebook">facebook</a>
         </div>
     </article>
 </section>

src/stylesheets/Lungo.base.less

@@ -1,162 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo
- * @class Base
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-a,
-abbr,
-address,
-article,
-aside,
-audio,
-b,
-blockquote,
-body,
-caption,
-cite,
-code,
-dd,
-del,
-dfn,
-dialog,
-div,
-dl,
-dt,
-em,
-fieldset,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hgroup,
-hr,
-html,
-i,
-iframe,
-img,
-ins,
-kbd,
-label,
-legend,
-li,
-mark,
-menu,
-nav,
-object,
-ol,
-p,
-pre,
-q,
-samp,
-section,
-small,
-span,
-strong,
-sub,
-sup,
-table,
-tbody,
-td,
-tfoot,
-th,
-thead,
-time,
-tr,
-ul,
-var,
-video {
-    border: 0;
-    margin: 0;
-    outline: 0;
-    padding: 0;
-    font-size: 100%;
-}
-
-article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
-audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
-audio:not([controls]) { display: none; }
-[hidden] { display: none; }
-
-html {
-    height: 100%;
-    font-size: 100%;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    // max-height: 100%;
-
-    // overflow: hidden;
-    overflow-y: visible !important;
-
-    font-family: Helvetica, Arial, sans-serif;
-    font-size: 13px;
-    line-height: 1.231;
-
-
-    -webkit-user-select:none;
-    -webkit-touch-callout: none;
-    -webkit-box-orient: vertical;
-    -webkit-box-align: stretch;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    display: -webkit-box;
-}
-
-a {
-    text-decoration: none;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-a:hover {
-    opacity: 1;
-}
-
-
-b,
-strong {
-    font-weight: bold;
-}
-
-img {
-    border: 0;
-    -ms-interpolation-mode: bicubic;
-    vertical-align: middle;
-
-    font-size: 0;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-th,
-td,
-caption {
-    vertical-align: top;
-    font-weight: normal;
-    text-align: left;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-
-    -webkit-user-select: none;
-    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}

src/stylesheets/Lungo.base.styl

@@ -0,0 +1,148 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo
+ * @class Base
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+a,
+abbr,
+address,
+article,
+aside,
+audio,
+b,
+blockquote,
+body,
+caption,
+cite,
+code,
+dd,
+del,
+dfn,
+dialog,
+div,
+dl,
+dt,
+em,
+fieldset,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+hr,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+p,
+pre,
+q,
+samp,
+section,
+small,
+span,
+strong,
+sub,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+ul,
+var,
+video
+  border: 0
+  margin: 0
+  outline: 0
+  padding: 0
+  font-size: 100%
+
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
+  display: block
+
+
+audio, canvas, video display: inline-block *display: inline *zoom: 1
+audio:not([controls]) display: none
+[hidden]  display: none
+
+html
+  height: 100%
+  font-size: 100%
+  -webkit-text-size-adjust: 100%
+  -ms-text-size-adjust: 100%
+
+
+body
+  margin: 0
+  padding: 0
+  width: 100%
+  height: 100%
+  overflow-y: visible !important
+  font-size: 13px
+  line-height: 1.231
+
+  -webkit-user-select:none
+  -webkit-touch-callout: none
+  -webkit-box-orient: vertical
+  -webkit-box-align: stretch
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+  display: -webkit-box
+
+  & *
+    box-sizing: border-box
+    margin: 0
+    padding: 0
+    -webkit-user-select: none
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
+
+a
+  text-decoration: none
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+  &:hover
+    opacity: 1
+
+
+b, strong font-weight: bold
+
+
+img
+    border: 0
+    -ms-interpolation-mode: bicubic
+    vertical-align: middle
+    font-size: 0
+
+
+table
+    border-collapse: collapse
+    border-spacing: 0
+
+
+th, td, caption
+  vertical-align: top
+  font-weight: normal
+  text-align: left

src/stylesheets/Lungo.layout.article.less

@@ -1,56 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Layout
- * @class Article
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-
-article {
-    position: absolute;
-    width: inherit;
-    height: auto;
-
-    // width: 100%;
-    // eight: 100%;
-    top: 0;
-    bottom: 0;
-
-    display: none;
-    visibility: hidden;
-    z-index: 0;
-
-    &.current, &:first-child {
-        visibility: visible;
-        display: block;
-        z-index: 1;
-    }
-
-    &.pull {
-        -webkit-transition-property: -webkit-transform;
-        -moz-transition-property: -moz-transform;
-        -ms-transition-property: -ms-transform;
-        -o-transition-property: -o-transform;
-        transition-property: transform;
-        .transition-duration(300ms);
-    }
-
-    & .text {
-        margin: 4px 0 8px;
-        display: block;
-        font-size: 0.9em;
-        font-weight: normal;
-        line-height: 1.4em;
-    }
-}
-
-header:not(.extended) ~ article { top: @header-footer-height; }
-    header.extended ~ article { top: @article_with_header_extended; }
-footer ~ article { bottom: @header-footer-height; }
-
-@media handheld, only screen and (min-width: 768px) {
-    article.aside { .transform(translate3d(0px, 0, 0)); }
-}

src/stylesheets/Lungo.layout.article.styl

@@ -0,0 +1,51 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Layout
+ * @class Article
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+article
+  position: absolute
+  top: 0
+  bottom: 0
+  width: inherit
+  height: auto
+  display: none
+  visibility: hidden
+  z-index: 0
+
+  &.current, &:first-child
+    visibility: visible
+    display: block
+    z-index: 1
+
+  &.pull
+    transition-property(transform)
+    transition-duration(300ms)
+
+  & .text
+    margin: 4px 0 8px
+    display: block
+    font-size: 0.9em
+    font-weight: normal
+    line-height: 1.4em
+
+
+header
+  &:not(.extended) ~ article
+    top: HEADER_FOOTER_HEIGHT
+  &.extended ~ article
+    top: ARTICLE_WITH_HEADER_EXTENDED
+
+footer ~ article
+  bottom: HEADER_FOOTER_HEIGHT
+
+@media handheld, only screen and (min-width: 768px)
+  article.aside
+    transform(translate3d(0px, 0, 0))

src/stylesheets/Lungo.layout.aside.less

@@ -1,98 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Layout
- * @class Aside
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-
-
-section.aside {
-    &:not(.small) { .transform(translateX(@aside-width)); }
-    &.small { .transform(translateX(@aside-width-small)); }
-
-    &.right {
-        .transform(translateX(-@aside-width));
-        &.small { .transform(translateX(-@aside-width-small)); }
-    }
-}
-
-aside {
-    position: absolute;
-    height: inherit;
-    top: 0;
-    bottom: 0;
-    display: none;
-    z-index: -1;
-
-    width: @aside-width;
-
-    &.right { right: 0px; }
-
-    &.show {
-        z-index: 0;
-        display: block;
-    }
-
-    & header, & footer {
-        position: relative;
-        left: none;
-        height: @header-footer-height;
-    }
-
-    & footer {
-        position: absolute;
-        bottom: 0;
-    }
-
-    & .bubble {
-        float: right;
-    }
-
-    &.small {
-        width: @aside-width-small;
-
-        & nav {
-            width: @aside-width-small;
-            text-align: center;
-            & a {
-                display: block;
-                padding: 0px;
-                width: @aside-width-small;
-                height: @aside-width-small;
-                & .icon {
-                    position: absolute;
-                    width: inherit;
-                    font-size: 38px;
-                    line-height: @aside-width-small;
-                }
-                & .bubble {
-                    position: relative;
-                    top: -54px;
-                    right: 6px;
-                }
-                &:first-child {margin-top: 8px; }
-            }
-        }
-    }
-}
-
-/*
-@TODO: Tablets & TV on final release
-@media handheld, only screen and (min-width: 768px) {
-    .autohide[data-router="aside"] {  display: none !important; }
-
-    section.aside {
-        width: auto !important;
-        left: @aside-width;
-        right: 0px !important;
-        .transform(translate3d(0px, 0, 0));
-        -webkit-transition: none;
-
-        &.small{ left: @aside-width-small; }
-    }
-}
-*/

src/stylesheets/Lungo.layout.aside.styl

@@ -0,0 +1,74 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Layout
+ * @class Aside
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+section.aside
+  &:not(.small)
+    transform( translateX(ASIDE_WIDTH) )
+  &.small
+    transform( translateX(ASIDE_WIDTH_SMALL) )
+
+  &.right
+    transform( translateX(-ASIDE_WIDTH) )
+    &.small
+      transform( translateX(-ASIDE_WIDTH_SMALL) )
+
+aside
+  position: absolute
+  top: 0
+  bottom: 0
+  height: inherit
+  width: ASIDE_WIDTH
+  display: none
+  z-index: -1
+
+  &.right
+    right: 0px
+
+  &.show
+    z-index: 0
+    display: block
+
+  & header, footer
+    position: relative
+    left: none
+    height: HEADER_FOOTER_HEIGHT
+
+  & footer
+    position: absolute
+    bottom: 0
+
+  & .bubble
+    float: right
+
+  &.small
+    width: ASIDE_WIDTH_SMALL
+    & nav
+      width: ASIDE_WIDTH_SMALL
+      text-align: center
+      & a
+        display: block
+        padding: 0px
+        width: ASIDE_WIDTH_SMALL
+        height: ASIDE_WIDTH_SMALL
+        & .icon
+          position: absolute
+          width: inherit
+          font-size: 38px
+          line-height: ASIDE_WIDTH_SMALL
+
+        & .bubble
+          position: relative
+          top: -54px
+          right: 6px
+
+        &:first-child
+          margin-top: 8px

src/stylesheets/Lungo.layout.grid.less

@@ -1,48 +0,0 @@
-.row, .rows {
-    width: 100%;
-    margin: 0 auto;
-    *zoom: 1;
-
-    &:before, &:after {
-        content: "";
-        display: table;
-    }
-    &:after { clear: both; }
-
-    &.one   { height: 10%; }
-    &.two   { height: 20%; }
-    &.three { height: 30%; }
-    &.four  { height: 40%; }
-    &.five  { height: 50%; }
-    &.six   { height: 60%; }
-    &.seven { height: 70%; }
-    &.eight { height: 80%; }
-    &.nine  { height: 90%; }
-    &.ten   { height: 100%; }
-}
-
-.column, .columns {
-    float: left;
-    position: relative;
-    display: block;
-    height: 100%;
-
-    &.centered {
-        float: none;
-        margin: 0 auto;
-    }
-
-    &.one   { width: 10%; }
-    &.two   { width: 20%; }
-    &.three { width: 30%; }
-    &.four  { width: 40%; }
-    &.five  { width: 50%; }
-    &.six   { width: 60%; }
-    &.seven { width: 70%; }
-    &.eight { width: 80%; }
-    &.nine  { width: 90%; }
-    &.ten   { width: 100%; }
-}
-
-[class*="column"] + [class*="column"]:last-child { float: right; }
-[class*="column"] + [class*="column"].end { float: left; }

src/stylesheets/Lungo.layout.grid.styl

@@ -0,0 +1,82 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Layout
+ * @class Grid
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+.row, .rows
+  width: 100%
+  margin: 0 auto
+  *zoom: 1
+
+  &:before, &:after
+    content: ""
+    display: table
+
+  &:after
+    clear: both
+
+  &.one
+    height: 10%
+  &.two
+    height: 20%
+  &.three
+    height: 30%
+  &.four
+    height: 40%
+  &.five
+    height: 50%
+  &.six
+    height: 60%
+  &.seven
+    height: 70%
+  &.eight
+    height: 80%
+  &.nine
+    height: 90%
+  &.ten
+    height: 100%
+
+
+.column, .columns
+  float: left
+  position: relative
+  display: block
+  height: 100%
+
+  &.centered
+    float: none
+    margin: 0 auto
+
+
+  &.one
+    width: 10%
+  &.two
+    width: 20%
+  &.three
+    width: 30%
+  &.four
+    width: 40%
+  &.five
+    width: 50%
+  &.six
+    width: 60%
+  &.seven
+    width: 70%
+  &.eight
+    width: 80%
+  &.nine
+    width: 90%
+  &.ten
+    width: 100%
+
+[class*="column"] + [class*="column"]:last-child
+  float: right
+[class*="column"] + [class*="column"].end
+  float: left

src/stylesheets/Lungo.layout.less

@@ -1,142 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo
- * @class Layout
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-
-section {
-    position: absolute;
-    left:  0;
-    top:  0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    display: none;
-
-    -webkit-transition-property: opacity, z-index, -webkit-transform;
-    -moz-transition-property: opacity, z-index, -moz-transform;
-    -ms-transition-property: opacity, z-index, -ms-transform;
-    -o-transition-property: opacity, z-index, -o-transform;
-    transition-property: opacity, z-index, transform;
-    .transition-duration(300ms);
-    .transition-timing-function(@easeOutSine);
-
-    .backface-visibility(hidden);
-    .transform(translateZ(0));
-
-
-
-    &:first-child, &.show {
-        z-index: 1;
-        display: block;
-    }
-
-    &.hide {
-        z-index: -1;
-        display: none;
-    }
-
-    &[data-transition] {
-        display: block !important;
-    }
-
-    &[data-transition="pop"] {
-        opacity: 0;
-        .transform(scale(1.15));
-
-        &:first-child, &.show {
-            .transform(scale(1));
-            opacity: 1;
-        }
-
-        &.hide {
-            .transform(scale(0.9));
-            opacity: 0;
-        }
-    }
-
-    &[data-transition="slide"] {
-        .transform(translateX(100%));
-
-        visibility: visible !important;
-
-        & > header > *, & > article > * {
-            opacity: 0;
-            .transition(opacity 400ms @defaultTrasition);
-        }
-
-        &:first-child, &.show {
-            .transform(translateX(0%));
-            & > header > *, & > article > * { opacity: 1; }
-        }
-
-        &.hide {
-            .transform(translateX(-100%));
-            & > header > *, & > article > * { opacity: 0; }
-        }
-    }
-
-    &[data-transition="cover"] {
-        .transform(translateY(110%));
-        &:first-child, &.show, &.hide {
-            .transform(translateY(0%));
-        }
-    }
-
-    &[data-transition="fade"] {
-        opacity: 0;
-        &:first-child, &.show { opacity: 1; }
-        &:hide {opacity: 0;}
-    }
-}
-
-header, footer  {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    display: block;
-    z-index: 2;
-}
-
-header {
-    top: 0;
-    height: @header-footer-height;
-    line-height: @header-footer-height;
-
-    & .title {
-        margin-left: 4px;
-        float: left;
-        z-index: -1;
-        font-size: 1.2em;
-        font-weight: bold;
-
-        &.with-subtitle {
-            line-height: 34px;
-            & .subtitle {
-                position: relative;
-                top: -4px;
-                display: block;
-                font-size: 0.7em;
-                line-height: 0.7em;}
-        }
-
-        & img { height: 24px; }
-
-        &.centered {
-            position: absolute;
-            left: 0px;
-            right: 0px;
-            text-align: center;
-            display: inline-block; }
-    }
-}
-
-footer {
-    bottom: 0;
-    height: @header-footer-height;
-}

src/stylesheets/Lungo.layout.list.less

@@ -1,104 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Layout
- * @class List
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-
-.list {
-    & li {
-        list-style-type: none;
-        padding: 9px;
-        position: relative;
-
-        &.arrow::after{
-            position: absolute;
-            right: 8px;
-            top: 40%;
-            width: 6px;
-            height: 6px;
-            content: '';
-            border-right: 3px solid #D0D0D8;
-            border-top: 3px solid #D0D0D8;
-            .transform(rotate(45deg));
-        }
-
-        & a { display: block; }
-
-        & .icon, & img {
-            float: left;
-            width: 32px;
-            height: 32px;
-            margin-right: 8px;
-            font-size: 2.6em;
-            line-height: 1.0em;
-            text-align: center;
-        }
-
-        &.thumb {
-            & img, & .icon {
-                margin: -9px 9px -9px -9px;
-                height: 48px !important;
-                width:48px !important;
-                font-size: 3.6em;
-            }
-        }
-
-        &.anchor {
-            font-size: 0.85em;
-            font-weight: bold;
-            padding: 2px 10px;
-
-            & .icon.small {
-                margin-right: 2px;
-            }
-
-            & .bubble { display: none; }
-        }
-
-        & strong {
-            position: relative;
-            font-size: 1.15em; }
-
-        & small {
-            display: block;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            font-size: 0.8em;
-
-            & + .right {
-                margin-top: -12px;
-            }
-        }
-
-    }
-
-    & .bubble {
-        padding-left: 4px;
-        padding-right: 4px;
-    }
-
-    & .right {
-        font-size: 0.8em;
-        font-weight: bold;
-    }
-
-    & .loading .right { font-size: 1.0em; }
-
-    & .right .icon, & small .icon {
-        height: 13px !important;
-        width: 13px !important;
-        margin-right: 1px !important;
-        font-size: 1.2em !important;
-        line-height: 1.1em;
-    }
-
-    &.indented li {
-        margin-bottom: 10px;
-    }
-}

src/stylesheets/Lungo.layout.list.styl

@@ -0,0 +1,92 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Layout
+ * @class List
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+.list
+  & li
+    list-style-type: none
+    padding: 9px
+    position: relative
+
+    &.arrow::after
+      position: absolute
+      right: 8px
+      top: 40%
+      width: 6px
+      height: 6px
+      content: ''
+      border-right: 3px solid #D0D0D8
+      border-top: 3px solid #D0D0D8
+      transform( rotate(45deg) )
+
+    & a
+      display: block
+
+    & .icon, & img
+      float: left
+      width: 32px
+      height: 32px
+      margin-right: 8px
+      font-size: 2.6em
+      line-height: 1.0em
+      text-align: center
+
+    &.thumb
+      & img, & .icon
+        margin: -9px 9px -9px -9px
+        height: 48px !important
+        width:48px !important
+        font-size: 3.6em
+
+    &.anchor
+      font-size: 0.85em
+      font-weight: bold
+      padding: 2px 10px
+      & .icon.small
+        margin-right: 2px
+      & .bubble
+        display: none
+
+    & strong
+      position: relative
+      font-size: 1.15em
+
+    & small
+      display: block
+      overflow: hidden
+      white-space: nowrap
+      text-overflow: ellipsis
+      font-size: 0.8em
+      & + .right
+        margin-top: -12px
+
+
+  & .bubble
+    padding-left: 4px
+    padding-right: 4px
+
+  & .right
+    font-size: 0.8em
+    font-weight: bold
+
+
+  & .loading .right
+    font-size: 1.0em
+
+  & .right .icon, & small .icon
+    height: 13px !important
+    width: 13px !important
+    margin-right: 1px !important
+    font-size: 1.2em !important
+    line-height: 1.1em
+
+  &.indented li
+    margin-bottom: 10px

src/stylesheets/Lungo.layout.nav.less

@@ -1,146 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Layout
- * @class Nav
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-
-nav {
-
-    &.groupbar, footer & {
-        .display-box();
-        .box-pack(justify);
-
-        & > a {
-            .box-flex(1);
-        }
-    }
-
-    & abbr {
-        font-weight: bold;
-    }
-}
-
-header nav {
-    & a {
-        padding: 0 6px;
-        min-width: 30px;
-        z-index: 1000;
-        float: left;
-        height: @header-footer-height;
-        text-align: center;
-
-        & .icon { font-size: 1.7em; }
-
-        & img {
-            width: 16px;
-            height: 16px;
-            top: -1px !important; }
-
-        & .bubble {
-            position: relative;
-            top:  -12px;
-            left: -12px;
-            margin-right: -20px;
-        }
-    }
-
-    &.button a {
-        margin: 5px 5px 5px 0;
-        height: 32px;
-        line-height: 32px;
-        & .icon {  line-height: 33px; }
-        &:first-child { margin: 5px; }
-    }
-
-    & .icon ~ abbr {
-        margin-left: 4px;
-        float: right; }
-
-    & .loading {
-        margin-top: .5em;
-        font-size: 1.6em;
-        & + .icon { display: none; }
-    }
-}
-
-nav.groupbar {
-    position: absolute;
-    top: @header-footer-height;
-    height: @header_groupbar_height;
-    width: 100%;
-    z-index: 2;
-
-    line-height: @header_groupbar_height;
-    & > a {
-        padding: 0px;
-        margin: 0px;
-        height: @header_groupbar_height !important;
-        display: block;
-        text-align: center;
-
-        & .icon {
-            font-size: 1.0em;
-            margin-right: 2px;
-        }
-        & .bubble {
-            position: relative;
-            top: -1px;
-            left: 2px;
-        }
-    }
-}
-
-footer nav {
-    & a {
-        text-align: center;
-        display: block;
-        padding: 0;
-        height:  @header-footer-height;
-    }
-
-    & .icon {
-        font-size: 2.0em !important;
-        line-height: @header-footer-height;
-        width: 32px;
-        display: inline-block;
-    }
-
-    & .bubble {
-        top:  -42px;
-        left: 4px;
-
-        & .loading {
-            top: 0;
-            font-size: 1.4em; }
-    }
-
-    abbr { display: none; }
-
-    & .bubble {
-        position: relative;
-        top:  -12px;
-        left: -12px;
-        margin-right: -20px;
-    }
-
-    &.with-labels {
-        & .icon { line-height: 36px; }
-
-        & abbr {
-            display: block !important;
-            margin-top: -8px;
-            z-index: 1;
-
-            font-size: 11px;
-            line-height: 14px;
-
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis; }
-    }
-}

src/stylesheets/Lungo.layout.nav.styl

@@ -0,0 +1,131 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Layout
+ * @class Nav
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+nav
+  &.groupbar, footer &
+    display-box()
+    box-pack( justify )
+    & > a
+      box-flex( 1 )
+  & abbr
+    font-weight: bold
+
+  header &
+    & a
+      padding: 0 6px
+      min-width: 30px
+      z-index: 1000
+      float: left
+      height: HEADER_FOOTER_HEIGHT
+      text-align: center
+
+      & .icon
+        font-size: 1.7em
+
+      & img
+        width: 16px
+        height: 16px
+        top: -1px !important
+
+      & .bubble
+        position: relative
+        top:  -12px
+        left: -12px
+        margin-right: -20px
+
+      &.button a
+        margin: 5px 5px 5px 0
+        height: 32px
+        line-height: 32px
+        & .icon
+          line-height: 33px
+        &:first-child
+          margin: 5px
+
+      & .icon ~ abbr
+        margin-left: 4px
+        float: right
+
+      & .loading
+        margin-top: .5em
+        font-size: 1.6em
+        & + .icon
+          display: none
+
+
+  &.groupbar
+    position: absolute
+    top: HEADER_FOOTER_HEIGHT
+    height: HEADER_GROUPBAR_HEIGHT
+    width: 100%
+    z-index: 2
+    line-height: HEADER_GROUPBAR_HEIGHT
+    & > a
+      padding: 0px
+      margin: 0px
+      height: HEADER_GROUPBAR_HEIGHT !important
+      display: block
+      text-align: center
+
+      & .icon
+          font-size: 1.0em
+          margin-right: 2px
+
+      & .bubble
+          position: relative
+          top: -1px
+          left: 2px
+
+
+  footer &
+    & a
+      text-align: center
+      display: block
+      padding: 0
+      height:  HEADER_FOOTER_HEIGHT
+
+    & .icon
+      font-size: 2.0em !important
+      line-height: HEADER_FOOTER_HEIGHT
+      width: 32px
+      display: inline-block
+
+    & .bubble
+      top:  -42px
+      left: 4px
+      & .loading
+        top: 0
+        font-size: 1.4em
+
+    abbr
+      display: none
+
+    & .bubble
+      position: relative
+      top:  -12px
+      left: -12px
+      margin-right: -20px
+
+    &.with-labels
+      & .icon
+        line-height: 36px
+      & abbr
+        display: block !important
+        margin-top: -8px
+        z-index: 1
+
+        font-size: 11px
+        line-height: 14px
+
+        overflow: hidden
+        white-space: nowrap
+        text-overflow: ellipsis

src/stylesheets/Lungo.layout.styl

@@ -0,0 +1,123 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+section
+  position: absolute
+  top:  0
+  left:  0
+  width: 100%
+  height: 100%
+  z-index: -1
+  display: none
+
+  transition-property( opacity, z-index, transform )
+  transition-duration( 300ms )
+  transition-timing-function( DEFAULT_TRANSITION )
+  transform( translateZ(0) )
+  backface-visibility( hidden )
+
+  &:first-child, &.show
+    z-index: 1
+    display: block
+
+  &.hide
+    z-index: -1
+    display: none
+
+  &[data-transition]
+    display: block !important
+
+  /* Transition: POP */
+  &[data-transition="pop"]
+    opacity: 0
+    transform( scale(1.15) )
+    &:first-child, &.show
+      transform( scale(1) )
+      opacity: 1
+    &.hide
+      transform( scale(0.9) )
+      opacity: 0
+
+  /* Transition: SLIDE */
+  &[data-transition="slide"]
+    transform( translateX(100%) )
+    visibility: visible !important
+    & > header > *, & > article > *
+      opacity: 0
+      transition( opacity 400ms DEFAULT_TRANSITION )
+    &:first-child, &.show
+      transform( translateX(0%) )
+      & > header > *, & > article > *
+        opacity: 1
+    &.hide
+      transform( translateX(-100%) )
+      & > header > *, & > article > *
+        opacity: 0
+
+  /* Transition: COVER */
+  &[data-transition="cover"]
+    transform( translateY(110%) )
+    &:first-child, &.show, &.hide
+      transform( translateY(0%) )
+
+  /* Transition: FADE */
+  &[data-transition="fade"]
+    opacity: 0
+    &:first-child, &.show
+      opacity: 1
+    &:hide
+      opacity: 0
+
+
+header, footer
+  position: absolute
+  left: 0
+  width: 100%
+  display: block
+  z-index: 2
+
+header
+  top: 0
+  height: HEADER_FOOTER_HEIGHT
+  line-height: HEADER_FOOTER_HEIGHT
+
+  & .title
+    margin-left: 4px
+    float: left
+    z-index: -1
+    font-size: 1.2em
+    font-weight: bold
+
+    &.with-subtitle
+      line-height: 34px
+      & .subtitle
+        position: relative
+        top: -4px
+        display: block
+        font-size: 0.7em
+        line-height: 0.7em
+
+
+    & img
+      height: 24px
+
+    &.centered
+      position: absolute
+      left: 0px
+      right: 0px
+      text-align: center
+      display: inline-block
+
+
+footer
+  bottom: 0
+  height: HEADER_FOOTER_HEIGHT

src/stylesheets/Lungo.theme.default.less

@@ -216,10 +216,9 @@ footer > nav > a, nav.groupbar > a{
 
 
 /* @group .button */
-a.button {
+.button, button {
     .border-radius(@form-border-radius);
 
-    // .box-shadow(~"inset 1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255, 0.2)");
     .box-shadow(~"inset 0 2px 0 rgba(255,255,255, 0.2)");
 
     font-weight: bold;
@@ -227,7 +226,25 @@ a.button {
 
     &:active { .box-shadow(~"inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3)"); }
 }
-
+  // & .button, button
+  //   background-color: color
+  //   color: white
+  //   border-radius 1px
+  //   box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
+  //   border: solid 1px rgba(0,0,0,0.1)
+  //   &:active
+  //     box-shadow inset 0 0 128px rgba(0,0,0,0.25)
+  //     border-color: none
+  //   &.secondary
+  //     background-color: color_secondary
+  //     color: #666
+  //     text-shadow: 0 1px 0 rgba(255,255,255,0.25)
+  //   &.success
+  //     background-color: color_success
+  //   &.alert
+  //     background-color: color_alert
+  //   &.transparent
+  //     background: none !important
 /* @end */
 
 /* @group <form> */

src/stylesheets/Lungo.widgets.button.less

@@ -1,62 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Widgets
- * @class Button
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-
-a.button {
-    display: inline-block;
-    height: 40px;
-    padding: 0 8px;
-    color: #fff !important;
-
-    background: #5a5a5a;
-
-    font-size: 15px;
-    text-align: center;
-    text-decoration: none;
-    line-height: 40px;
-
-    outline: none;
-    .user-select(none);
-
-    &:active, &.active {
-        background: #4b4b4b;}
-
-    &:disabled, &.disabled {
-        background: rgba(255,255,255,0.2);
-        color: #999 !important; }
-
-    & .icon {
-        position: relative;
-        top: 3px;
-        height: 18px;
-        width: 18px;
-        font-size: 18px;
-        line-height: 18px;
-        margin-right: 4px; }
-
-    & img {
-        top:  0px !important; }
-
-    &.big {
-        width: 100%;
-        padding: 0px;
-        margin-bottom: 4px;
-
-        & .icon {
-            margin: 8px -18px 0 12px;
-            float: left; }
-    }
-
-    &.small {
-        height: 20px;
-        padding: 0 6px;
-        font-size: 12px;
-        line-height: 20px; }
-}

src/stylesheets/Lungo.widgets.button.styl

@@ -0,0 +1,51 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class Button
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+.button, button
+  display: inline-block
+  padding: 10px 16px
+  border: none
+  cursor: pointer
+
+  color: #fff !important
+  font-family: inherit
+  font-size: 1.1em
+  text-align: center
+  text-decoration: none
+  outline: none
+
+  &:disabled, &.disabled
+    background: rgba(255,255,255,0.2)
+    color: #999 !important
+
+  & .icon
+    margin-right: 4px
+
+  &.anchor
+    width: 100%
+    margin-bottom: 4px
+    & .icon
+      margin-left: 8px
+      float: left
+
+  &.large
+    height: h = 52px
+    padding: 0 24px
+    font-size: 1.45em
+    font-weight: 300
+    line-height: h
+
+  &.small
+    height: h = 28px
+    padding: 0 12px
+    font-size: 1.0em
+    line-height: (h - 2)

src/stylesheets/Lungo.widgets.colour.less

@@ -1,54 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Widgets
- * @class Colour
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-
-a.grey, .grey{background-color: @grey;}
-a.grey:active { background-color: @grey-active;}
-a.dark-grey, .dark-grey{background-color: @black;}
-a.dark-grey:active{background-color: @black-active;}
-a.red, .red{background-color: @red;}
-a.red:active {background-color: @red-active;}
-a.lightgreen, .lightgreen{background-color: @lightgreen;}
-a.lightgreen:active{background-color: @lightgreen-active;}
-a.green, .green{background-color: @green;}
-a.green:active{background-color: @green-active;}
-a.blue, .blue{background-color: @blue;}
-a.blue:active {background-color: @blue-active;}
-a.arcticblue, .arcticblue{background-color: @arcticblue;}
-a.arcticblue:active {background-color: @arcticblue-active;}
-a.orange, .orange{background-color: @orange;}
-a.orange:active {background-color: @orange-active;}
-a.purple, .purple{background-color: @purple;}
-a.purple:active {background-color: @purple-active;}
-a.magenta, .magenta{background-color: @magenta;}
-a.magenta:active {background-color: @magenta-active;}
-a.pink, .pink{background-color: @pink;}
-a.pink:active {background-color: @pink-active;}
-a.yellow, .yellow{background-color: @yellow;}
-a.yellow:active {background-color: @yellow-active;}
-a.twitter, .twitter:not(span){background-color: @twitter;}
-a.twitter:active {background-color: @twitter-active;}
-a.facebook, .facebook:not(span){background-color: @facebook;}
-a.facebook:active {background-color: @facebook-active;}
-
-li.grey{ box-shadow: inset 4px 0px 0px @grey;}
-li.dark-grey{ box-shadow: inset 4px 0px 0px @black;}
-li.red{ box-shadow: inset 4px 0px 0px @red;}
-li.lightgreen{ box-shadow: inset 4px 0px 0px @lightgreen;}
-li.green{ box-shadow: inset 4px 0px 0px @green;}
-li.blue{ box-shadow: inset 4px 0px 0px @blue;}
-li.arcticblue{ box-shadow: inset 4px 0px 0px @arcticblue;}
-li.orange{ box-shadow: inset 4px 0px 0px @orange;}
-li.purple{ box-shadow: inset 4px 0px 0px @purple;}
-li.magenta{ box-shadow: inset 4px 0px 0px @magenta;}
-li.pink{ box-shadow: inset 4px 0px 0px @pink;}
-li.yellow{ box-shadow: inset 4px 0px 0px @yellow;}
-li.twitter{ box-shadow: inset 4px 0px 0px @twitter;}
-li.facebook{ box-shadow: inset 4px 0px 0px @facebook;}

src/stylesheets/Lungo.widgets.colour.styl

@@ -0,0 +1,69 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class Colour
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+a.grey, .grey
+  background-color: GREY
+a.dark-grey, .dark-grey
+  background-color: BLACK
+a.red, .red
+  background-color: RED
+a.lightgreen, .lightgreen
+  background-color: LIGHTGREEN
+a.green, .green
+  background-color: GREEN
+a.blue, .blue
+  background-color: BLUE
+a.arcticblue, .arcticblue
+  background-color: ARCTICBLUE
+a.orange, .orange
+  background-color: ORANGE
+a.purple, .purple
+  background-color: PURPLE
+a.magenta, .magenta
+  background-color: MAGENTA
+a.pink, .pink
+  background-color: PINK
+a.yellow, .yellow
+  background-color: YELLOW
+a.twitter, .twitter:not(span)
+  background-color: TWITTER
+a.facebook, .facebook:not(span)
+  background-color: FACEBOOK
+
+li.grey
+   box-shadow: inset 4px 0px 0px GREY
+li.dark-grey
+   box-shadow: inset 4px 0px 0px BLACK
+li.red
+   box-shadow: inset 4px 0px 0px RED
+li.lightgreen
+   box-shadow: inset 4px 0px 0px LIGHTGREEN
+li.green
+   box-shadow: inset 4px 0px 0px GREEN
+li.blue
+   box-shadow: inset 4px 0px 0px BLUE
+li.arcticblue
+   box-shadow: inset 4px 0px 0px ARCTICBLUE
+li.orange
+   box-shadow: inset 4px 0px 0px ORANGE
+li.purple
+   box-shadow: inset 4px 0px 0px PURPLE
+li.magenta
+   box-shadow: inset 4px 0px 0px MAGENTA
+li.pink
+   box-shadow: inset 4px 0px 0px PINK
+li.yellow
+   box-shadow: inset 4px 0px 0px YELLOW
+li.twitter
+   box-shadow: inset 4px 0px 0px TWITTER
+li.facebook
+   box-shadow: inset 4px 0px 0px FACEBOOK

src/stylesheets/Lungo.widgets.form.less

@@ -1,194 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Widgets
- * @class Form
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-
-@form-input-height: 30px;
-@rounded-radius: 2px;
-@range_progress_height: 12px;
-
-
-form {
-
-    &.wrapper input:not([type=checkbox]), textarea, select {
-        margin: 3px 0px 3px 0px;
-    }
-
-    &.rounded {
-        & input:not([type=range]), textarea, select {
-            width: 94%;
-            padding: 1.0% 3% ;
-
-            &:first-of-type { .border-radius(@rounded-radius @rounded-radius 0px 0px); }
-            &:last-of-type  { .border-radius(0px 0px @rounded-radius @rounded-radius); }
-        }
-    }
-
-    label:not(.select) {
-        font-size: 13px;
-        margin-bottom: 3px;
-        display: block; }
-
-    input, textarea, select, .progress {
-        margin-bottom: 8px; }
-
-    input:not([type=range]), textarea, select {
-        display: block;
-        width: 94%;
-        padding: 0 3%;
-        height: @form-input-height;
-        font-size: 15px;
-        line-height: 16px;
-        font-weight: bold;
-
-        -webkit-appearance: none;
-        -webkit-user-select: text;
-        -webkit-font-smoothing: antialiased;
-    }
-
-    textarea {
-        padding-top: 1.5%;
-        min-height: 48px; }
-
-
-    /* @group search */
-    input[type=search] {
-        width: 86%;
-        display: inline-block;
-
-        & + .button {
-            float: right;
-            padding: 0px;
-            width: 11%;
-            height: @form-input-height;
-            & .icon{
-                top: -3px;
-                float: none;
-            }
-        }
-    }
-
-    select {
-        width: 100%;
-        height: @form-input-height; }
-
-        label.select {
-            position: relative;
-            display: inline-block;
-            width: 100%; }
-
-        .select:after {
-            text-align: center;
-            position: absolute;
-            top: 3px;
-            right: 0;
-            bottom: 0;
-            height: @form-input-height;
-            width: @form-input-height;
-
-            content: "▼";
-            pointer-events:none;
-            line-height: 33px; }
-
-        .no-pointer-events .select:after {
-            content: none;
-    }
-
-    input[type=range] {
-        -webkit-appearance: none;
-        outline: none;
-
-        &:not(.checkbox) {
-            height: @range_progress_height;
-            width: 100%;
-            padding: 0px;
-            margin-top: 2px;
-            border: 0;
-            cursor: ew-resize;
-
-            &::-webkit-slider-thumb { top: -1px; }
-        }
-
-        &.checkbox {
-            width:70px;
-            height: 30px;
-            padding: 1px 2px;
-            font-family:'lungojsicon';
-
-            &:after {
-                content: "\0055";
-                position: relative;
-                float: right;
-                top: -23px;
-                padding: 0 8px;
-                font-size: 1.5em; }
-
-            &.active:after {
-                float: left;
-                content: "\0051";
-                font-weight: bold;
-                font-size: 1.6em; }
-        }
-
-        &::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 30px;
-            height: 24px;
-            position:relative;
-            margin:2px 2px 2px 2px;
-            border: none; }
-
-        &::-webkit-slider-thumb::after {
-          width:12px;
-          height:12px;
-          display:block;
-          content:"";
-          position:relative;
-          border-radius: 8px;
-          z-index:9;
-          top:6px;
-          left:9px; }
-    }
-
-    .progress {
-        width: 100%;
-        margin-bottom: 8px;
-
-        .labels {
-            font-size: 1.0em;
-            display: block;
-            & span:last-child { float: right; }
-        }
-
-        & .bar {
-            height: @range_progress_height;
-            line-height: @range_progress_height;
-            display: block;
-
-            & .value {
-                display:block;
-                height: inherit;
-                width: 0%;
-                .transition( width 500ms @defaultTrasition);
-
-                & .label {
-                    float: right;
-                    margin-right: 4px;
-                    font-size: 0.75em; }
-            }
-        }
-    }
-
-    @media screen and (-webkit-min-device-pixel-ratio:0) {
-        .custom-select select {padding-right:30px;}
-    }
-
-}
-
-

src/stylesheets/Lungo.widgets.form.styl

@@ -0,0 +1,172 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class Form
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+
+FORM_INPUT_HEIGHT = 30px
+ROUNDED_RADIUS = 2px
+PROGRESS_HEIGHT = 12px
+
+form, .form
+  &.wrapper input:not([type=checkbox]), textarea, select
+    margin: 3px 0px 3px 0px
+
+  & label:not(.select)
+    font-size: 0.95em
+    font-weight: 400
+
+  & input, textarea, select, .progress
+    margin-bottom: 8px
+
+  & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea
+    display: block
+    width: 100%
+    padding: 6px
+    height: FORM_INPUT_HEIGHT
+    transition all 0.15s linear
+    font-family: inherit
+    font-size: 14px
+
+    -webkit-appearance: none
+    -webkit-user-select: text
+    -webkit-font-smoothing: antialiased
+    &:focus
+      outline: none !important;
+
+  & textarea
+    min-height: 48px
+
+  input[type=search]
+    width: 89%
+    display: inline-block
+
+    & + .button
+      float: right
+      padding: 0px
+      width: 10%
+      height: FORM_INPUT_HEIGHT
+      line-height: FORM_INPUT_HEIGHT
+
+  & select
+    width: 100%
+    height: FORM_INPUT_HEIGHT
+
+    label.select
+      position: relative
+      display: inline-block
+      width: 100%
+
+    .select:after
+      text-align: center
+      position: absolute
+      top: 3px
+      right: 0
+      bottom: 0
+      height: FORM_INPUT_HEIGHT
+      width: FORM_INPUT_HEIGHT
+
+      content: "▼"
+      pointer-events:none
+      line-height: 33px
+
+    .no-pointer-events .select:after
+      content: none
+
+
+  & input[type=range]
+    -webkit-appearance: none
+    outline: none
+
+    &:not(.checkbox)
+      height: PROGRESS_HEIGHT
+      width: 100%
+      padding: 0px
+      margin-top: 2px
+      border: 0
+      cursor: ew-resize
+
+      &::-webkit-slider-thumb
+        top: -1px
+
+    &.checkbox
+      width:70px
+      height: 30px
+      padding: 1px 2px
+      font-family:'lungojsicon'
+
+      &:after
+        content: "\0055"
+        position: relative
+        float: right
+        top: -23px
+        padding: 0 8px
+        font-size: 1.5em
+
+      &.active:after
+        float: left
+        content: "\0051"
+        font-weight: bold
+        font-size: 1.6em
+
+
+    &::-webkit-slider-thumb
+        -webkit-appearance: none
+        width: 30px
+        height: 24px
+        position:relative
+        margin:2px 2px 2px 2px
+        border: none
+
+    &::-webkit-slider-thumb::after
+      width:12px
+      height:12px
+      display:block
+      content:""
+      position:relative
+      border-radius: 8px
+      z-index:9
+      top:6px
+      left:9px
+
+
+  & .progress
+    width: 100%
+    margin-bottom: 8px
+
+    .labels
+      font-size: 1.0em
+      display: block
+      & span:last-child
+        float: right
+
+
+    & .bar
+      height: PROGRESS_HEIGHT
+      line-height: PROGRESS_HEIGHT
+      display: block
+
+      & .value
+        display:block
+        height: inherit
+        width: 0%
+        transition( width 500ms DEFAULT_TRANSITION )
+
+        & .label
+          float: right
+          margin-right: 4px
+          font-size: 0.75em
+
+
+@media screen and (-webkit-min-device-pixel-ratio:0)
+  .custom-select
+    select
+      padding-right:30px
+

src/stylesheets/Lungo.widgets.pull.less

@@ -1,42 +0,0 @@
-@import "constants.less";
-
-section > [data-control="pull"] {
-    position: absolute;
-    z-index: -1;
-    top: @header-footer-height;
-    width: 100%;
-    height: 80px;
-    padding: 10px 0;
-    text-align: center;
-
-    & > .icon {
-        display: inline-block;
-        width: 48px;
-        height: 48px;
-        font-size: 44px;
-        line-height: 48px;
-
-        .transition(all 300ms @defaultTrasition);
-    }
-
-    & > .loading {
-        display: none;
-        left: 0%; }
-
-    & > strong {
-        position: relative;
-        top: -16px;
-        margin-left: 4px;
-        font-size: 1.1em;}
-
-    &.rotate {
-        & > .icon {
-            .transform(rotate(180deg));
-        }
-
-    }
-    &.refresh {
-        & > .icon { display: none; }
-        & > .loading { display: inline-block; }
-    }
-}

src/stylesheets/Lungo.widgets.pull.styl

@@ -0,0 +1,48 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class Pull
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+section > [data-control="pull"]
+  position: absolute
+  z-index: -1
+  top: HEADER_FOOTER_HEIGHT
+  width: 100%
+  height: 80px
+  padding: 10px 0
+  text-align: center
+
+  & > .icon
+    display: inline-block
+    width: 48px
+    height: 48px
+    font-size: 44px
+    line-height: 48px
+    transition( all 300ms @defaultTrasition )
+
+  & > .loading
+    display: none
+    left: 0%
+
+  & > strong
+    position: relative
+    top: -16px
+    margin-left: 4px
+    font-size: 1.1em
+
+  &.rotate
+    & > .icon
+      transform( rotate(180deg) )
+
+  &.refresh
+    & > .icon
+      display: none
+    & > .loading
+      display: inline-block

src/stylesheets/Lungo.widgets.splash.less

@@ -1,44 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Widgets
- * @class Splash
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-@import "constants.less";
-.splash{
-    text-align: center;
-    font-size: 1.2em;
-
-    & > form {
-        margin: 28px;
-    }
-
-    & img {
-        max-width: 206px;
-        margin: 20% auto 0%;
-    }
-
-    & h1 {
-        margin-top: 20%;
-        font-size: 2.2em;
-        font-weight: bold;
-    }
-
-    & .button {
-        margin-top: 10px;
-    }
-
-    & .copyright {
-        position: absolute;
-        width: 100%;
-        bottom: 8px;
-        left: 0px;
-        font-size: 0.8em;
-        font-style: normal;
-        padding: 0px;
-    }
-}
-
-

src/stylesheets/Lungo.widgets.splash.styl

@@ -0,0 +1,39 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class Splash
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+.splash
+  text-align: center
+  font-size: 1.2em
+
+  & > form
+    margin: 28px
+
+  & img
+    max-width: 206px
+    margin: 20% auto 0%
+
+  & h1
+    margin-top: 20%
+    font-size: 2.2em
+    font-weight: bold
+
+  & .button
+    margin-top: 10px
+
+  & .copyright
+    position: absolute
+    width: 100%
+    bottom: 8px
+    left: 0px
+    font-size: 0.8em
+    font-style: normal
+    padding: 0px

src/stylesheets/css/Lungo.base.css

@@ -94,17 +94,9 @@ section {
 }
 audio,
 canvas,
-video {
-  display: inline-block;
-  *display: inline;
-  *zoom: 1;
-}
-audio:not([controls]) {
-  display: none;
-}
-[hidden] {
-  display: none;
-}
+video display: inline-block *display: inline *zoom: 1,
+audio:not([controls]) display: none,
+[hidden] display: none,
 html {
   height: 100%;
   font-size: 100%;
@@ -117,27 +109,31 @@ body {
   width: 100%;
   height: 100%;
   overflow-y: visible !important;
-  font-family: Helvetica, Arial, sans-serif;
   font-size: 13px;
   line-height: 1.231;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
   display: -webkit-box;
 }
+body * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: rgba(255,255,255,0);
+}
 a {
   text-decoration: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 a:hover {
   opacity: 1;
 }
 b,
-strong {
-  font-weight: bold;
-}
+strong font-weight: bold,
 img {
   border: 0;
   -ms-interpolation-mode: bicubic;
@@ -155,9 +151,3 @@ caption {
   font-weight: normal;
   text-align: left;
 }
-* {
-  margin: 0;
-  padding: 0;
-  -webkit-user-select: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}

src/stylesheets/css/Lungo.layout.article.css

@@ -6,14 +6,12 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
 article {
   position: absolute;
-  width: inherit;
-  height: auto;
   top: 0;
   bottom: 0;
+  width: inherit;
+  height: auto;
   display: none;
   visibility: hidden;
   z-index: 0;
@@ -25,10 +23,10 @@ article:first-child {
   z-index: 1;
 }
 article.pull {
-  -webkit-transition-property: -webkit-transform;
-  -moz-transition-property: -moz-transform;
-  -ms-transition-property: -ms-transform;
-  -o-transition-property: -o-transform;
+  -webkit-transition-property: transform;
+  -moz-transition-property: transform;
+  -ms-transition-property: transform;
+  -o-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: 300ms;
   -moz-transition-duration: 300ms;

src/stylesheets/css/Lungo.layout.aside.css

@@ -6,44 +6,42 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
 section.aside:not(.small) {
-  -webkit-transform: translatex(264px);
-  -moz-transform: translatex(264px);
-  -ms-transform: translatex(264px);
-  -o-transform: translatex(264px);
-  transform: translatex(264px);
+  -webkit-transform: translateX(264px);
+  -moz-transform: translateX(264px);
+  -ms-transform: translateX(264px);
+  -o-transform: translateX(264px);
+  transform: translateX(264px);
 }
 section.aside.small {
-  -webkit-transform: translatex(64px);
-  -moz-transform: translatex(64px);
-  -ms-transform: translatex(64px);
-  -o-transform: translatex(64px);
-  transform: translatex(64px);
+  -webkit-transform: translateX(64px);
+  -moz-transform: translateX(64px);
+  -ms-transform: translateX(64px);
+  -o-transform: translateX(64px);
+  transform: translateX(64px);
 }
 section.aside.right {
-  -webkit-transform: translatex(-264px);
-  -moz-transform: translatex(-264px);
-  -ms-transform: translatex(-264px);
-  -o-transform: translatex(-264px);
-  transform: translatex(-264px);
+  -webkit-transform: translateX(-ASIDE_WIDTH);
+  -moz-transform: translateX(-ASIDE_WIDTH);
+  -ms-transform: translateX(-ASIDE_WIDTH);
+  -o-transform: translateX(-ASIDE_WIDTH);
+  transform: translateX(-ASIDE_WIDTH);
 }
 section.aside.right.small {
-  -webkit-transform: translatex(-64px);
-  -moz-transform: translatex(-64px);
-  -ms-transform: translatex(-64px);
-  -o-transform: translatex(-64px);
-  transform: translatex(-64px);
+  -webkit-transform: translateX(-ASIDE_WIDTH_SMALL);
+  -moz-transform: translateX(-ASIDE_WIDTH_SMALL);
+  -ms-transform: translateX(-ASIDE_WIDTH_SMALL);
+  -o-transform: translateX(-ASIDE_WIDTH_SMALL);
+  transform: translateX(-ASIDE_WIDTH_SMALL);
 }
 aside {
   position: absolute;
-  height: inherit;
   top: 0;
   bottom: 0;
+  height: inherit;
+  width: 264px;
   display: none;
   z-index: -1;
-  width: 264px;
 }
 aside.right {
   right: 0px;
@@ -92,19 +90,3 @@ aside.small nav a .bubble {
 aside.small nav a:first-child {
   margin-top: 8px;
 }
-/*
-@TODO: Tablets & TV on final release
-@media handheld, only screen and (min-width: 768px) {
-    .autohide[data-router="aside"] {  display: none !important; }
-
-    section.aside {
-        width: auto !important;
-        left: @aside-width;
-        right: 0px !important;
-        .transform(translate3d(0px, 0, 0));
-        -webkit-transition: none;
-
-        &.small{ left: @aside-width-small; }
-    }
-}
-*/

src/stylesheets/css/Lungo.layout.css

@@ -6,41 +6,43 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
 section {
   position: absolute;
-  left: 0;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   display: none;
-  -webkit-transition-property: opacity, z-index, -webkit-transform;
-  -moz-transition-property: opacity, z-index, -moz-transform;
-  -ms-transition-property: opacity, z-index, -ms-transform;
-  -o-transition-property: opacity, z-index, -o-transform;
-  transition-property: opacity, z-index, transform;
+  -webkit-transition-property: opacity z-index transform;
+  -moz-transition-property: opacity z-index transform;
+  -ms-transition-property: opacity z-index transform;
+  -o-transition-property: opacity z-index transform;
+  transition-property: opacity z-index transform;
   -webkit-transition-duration: 300ms;
   -moz-transition-duration: 300ms;
   -ms-transition-duration: 300ms;
   -o-transition-duration: 300ms;
   transition-duration: 300ms;
-  -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition-timing-function: easeOutSine;
+  -moz-transition-timing-function: easeOutSine;
+  -ms-transition-timing-function: easeOutSine;
+  -o-transition-timing-function: easeOutSine;
+  transition-timing-function: easeOutSine;
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;
-  -webkit-transform: translatez(0);
-  -moz-transform: translatez(0);
-  -ms-transform: translatez(0);
-  -o-transform: translatez(0);
-  transform: translatez(0);
+/* Transition: POP */
+/* Transition: SLIDE */
+/* Transition: COVER */
+/* Transition: FADE */
 }
 section:first-child,
 section.show {
@@ -80,62 +82,62 @@ section[data-transition="pop"].hide {
   opacity: 0;
 }
 section[data-transition="slide"] {
-  -webkit-transform: translatex(100%);
-  -moz-transform: translatex(100%);
-  -ms-transform: translatex(100%);
-  -o-transform: translatex(100%);
-  transform: translatex(100%);
+  -webkit-transform: translateX(100%);
+  -moz-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  -o-transform: translateX(100%);
+  transform: translateX(100%);
   visibility: visible !important;
 }
-section[data-transition="slide"]  > header > *,
-section[data-transition="slide"]  > article > * {
+section[data-transition="slide"] > header > *,
+section[data-transition="slide"] > article > * {
   opacity: 0;
-  -webkit-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: opacity 400ms easeOutSine;
+  -moz-transition: opacity 400ms easeOutSine;
+  -ms-transition: opacity 400ms easeOutSine;
+  -o-transition: opacity 400ms easeOutSine;
+  transition: opacity 400ms easeOutSine;
 }
 section[data-transition="slide"]:first-child,
 section[data-transition="slide"].show {
-  -webkit-transform: translatex(0%);
-  -moz-transform: translatex(0%);
-  -ms-transform: translatex(0%);
-  -o-transform: translatex(0%);
-  transform: translatex(0%);
-}
-section[data-transition="slide"]:first-child  > header > *,
-section[data-transition="slide"].show  > header > *,
-section[data-transition="slide"]:first-child  > article > *,
-section[data-transition="slide"].show  > article > * {
+  -webkit-transform: translateX(0%);
+  -moz-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  -o-transform: translateX(0%);
+  transform: translateX(0%);
+}
+section[data-transition="slide"]:first-child > header > *,
+section[data-transition="slide"].show > header > *,
+section[data-transition="slide"]:first-child > article > *,
+section[data-transition="slide"].show > article > * {
   opacity: 1;
 }
 section[data-transition="slide"].hide {
-  -webkit-transform: translatex(-100%);
-  -moz-transform: translatex(-100%);
-  -ms-transform: translatex(-100%);
-  -o-transform: translatex(-100%);
-  transform: translatex(-100%);
-}
-section[data-transition="slide"].hide  > header > *,
-section[data-transition="slide"].hide  > article > * {
+  -webkit-transform: translateX(-100%);
+  -moz-transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  -o-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+section[data-transition="slide"].hide > header > *,
+section[data-transition="slide"].hide > article > * {
   opacity: 0;
 }
 section[data-transition="cover"] {
-  -webkit-transform: translatey(110%);
-  -moz-transform: translatey(110%);
-  -ms-transform: translatey(110%);
-  -o-transform: translatey(110%);
-  transform: translatey(110%);
+  -webkit-transform: translateY(110%);
+  -moz-transform: translateY(110%);
+  -ms-transform: translateY(110%);
+  -o-transform: translateY(110%);
+  transform: translateY(110%);
 }
 section[data-transition="cover"]:first-child,
 section[data-transition="cover"].show,
 section[data-transition="cover"].hide {
-  -webkit-transform: translatey(0%);
-  -moz-transform: translatey(0%);
-  -ms-transform: translatey(0%);
-  -o-transform: translatey(0%);
-  transform: translatey(0%);
+  -webkit-transform: translateY(0%);
+  -moz-transform: translateY(0%);
+  -ms-transform: translateY(0%);
+  -o-transform: translateY(0%);
+  transform: translateY(0%);
 }
 section[data-transition="fade"] {
   opacity: 0;

src/stylesheets/css/Lungo.layout.grid.css

@@ -1,3 +1,11 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Layout
+ * @class Grid
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
 .row,
 .rows {
   width: 100%;

src/stylesheets/css/Lungo.layout.list.css

@@ -6,8 +6,6 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
 .list li {
   list-style-type: none;
   padding: 9px;
@@ -20,8 +18,8 @@
   width: 6px;
   height: 6px;
   content: '';
-  border-right: 3px solid #D0D0D8;
-  border-top: 3px solid #D0D0D8;
+  border-right: 3px solid #d0d0d8;
+  border-top: 3px solid #d0d0d8;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
@@ -38,7 +36,7 @@
   height: 32px;
   margin-right: 8px;
   font-size: 2.6em;
-  line-height: 1.0em;
+  line-height: 1em;
   text-align: center;
 }
 .list li.thumb img,
@@ -82,7 +80,7 @@
   font-weight: bold;
 }
 .list .loading .right {
-  font-size: 1.0em;
+  font-size: 1em;
 }
 .list .right .icon,
 .list small .icon {

src/stylesheets/css/Lungo.layout.nav.css

@@ -6,19 +6,10 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
 nav.groupbar,
 footer nav {
   display: -webkit-box;
   display: -moz-box;
-  display: -ms-box;
-  display: -o-box;
-  display: box;
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-box;
-  display: -o-box;
   display: box;
   -webkit-box-pack: justify;
   -moz-box-pack: justify;
@@ -26,13 +17,8 @@ footer nav {
   -o-box-pack: justify;
   box-pack: justify;
 }
-nav.groupbar  > a,
-footer nav   > a {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-box;
-  display: -o-box;
-  display: box;
+nav.groupbar > a,
+footer nav > a {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   -ms-box-flex: 1;
@@ -64,26 +50,26 @@ header nav a .bubble {
   left: -12px;
   margin-right: -20px;
 }
-header nav.button a {
+header nav a.button a {
   margin: 5px 5px 5px 0;
   height: 32px;
   line-height: 32px;
 }
-header nav.button a .icon {
+header nav a.button a .icon {
   line-height: 33px;
 }
-header nav.button a:first-child {
+header nav a.button a:first-child {
   margin: 5px;
 }
-header nav .icon ~ abbr {
+header nav a .icon ~ abbr {
   margin-left: 4px;
   float: right;
 }
-header nav .loading {
-  margin-top: .5em;
+header nav a .loading {
+  margin-top: 0.5em;
   font-size: 1.6em;
 }
-header nav .loading  + .icon {
+header nav a .loading + .icon {
   display: none;
 }
 nav.groupbar {
@@ -94,18 +80,18 @@ nav.groupbar {
   z-index: 2;
   line-height: 30px;
 }
-nav.groupbar  > a {
+nav.groupbar > a {
   padding: 0px;
   margin: 0px;
   height: 30px !important;
   display: block;
   text-align: center;
 }
-nav.groupbar  > a .icon {
-  font-size: 1.0em;
+nav.groupbar > a .icon {
+  font-size: 1em;
   margin-right: 2px;
 }
-nav.groupbar  > a .bubble {
+nav.groupbar > a .bubble {
   position: relative;
   top: -1px;
   left: 2px;
@@ -117,7 +103,7 @@ footer nav a {
   height: 44px;
 }
 footer nav .icon {
-  font-size: 2.0em !important;
+  font-size: 2em !important;
   line-height: 44px;
   width: 32px;
   display: inline-block;

src/stylesheets/css/Lungo.widgets.button.css

@@ -6,59 +6,52 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
-a.button {
+.button,
+button {
   display: inline-block;
-  height: 40px;
-  padding: 0 8px;
+  padding: 10px 16px;
+  border: none;
+  cursor: pointer;
   color: #fff !important;
-  background: #5a5a5a;
-  font-size: 15px;
+  font-family: inherit;
+  font-size: 1.1em;
   text-align: center;
   text-decoration: none;
-  line-height: 40px;
   outline: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
 }
-a.button:active,
-a.button.active {
-  background: #4b4b4b;
-}
-a.button:disabled,
-a.button.disabled {
-  background: rgba(255, 255, 255, 0.2);
+.button:disabled,
+button:disabled,
+.button.disabled,
+button.disabled {
+  background: rgba(255,255,255,0.2);
   color: #999 !important;
 }
-a.button .icon {
-  position: relative;
-  top: 3px;
-  height: 18px;
-  width: 18px;
-  font-size: 18px;
-  line-height: 18px;
+.button .icon,
+button .icon {
   margin-right: 4px;
 }
-a.button img {
-  top: 0px !important;
-}
-a.button.big {
+.button.anchor,
+button.anchor {
   width: 100%;
-  padding: 0px;
   margin-bottom: 4px;
 }
-a.button.big .icon {
-  margin: 8px -18px 0 12px;
+.button.anchor .icon,
+button.anchor .icon {
+  margin-left: 8px;
   float: left;
 }
-a.button.small {
-  height: 20px;
-  padding: 0 6px;
-  font-size: 12px;
-  line-height: 20px;
+.button.large,
+button.large {
+  height: 52px;
+  padding: 0 24px;
+  font-size: 1.45em;
+  font-weight: 300;
+  line-height: 52px;
+}
+.button.small,
+button.small {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 1em;
+  line-height: 26px;
 }

src/stylesheets/css/Lungo.widgets.colour.css

@@ -6,145 +6,157 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
 a.grey,
 .grey {
-  background-color: #cccccc;
-}
-a.grey:active {
-  background-color: #b5b5b5;
+  background-color: #ccc;
 }
 a.dark-grey,
 .dark-grey {
-  background-color: #000000;
-}
-a.dark-grey:active {
-  background-color: #000000;
+  background-color: #000;
 }
 a.red,
 .red {
   background-color: #e33100;
 }
-a.red:active {
-  background-color: #c5280f;
-}
 a.lightgreen,
 .lightgreen {
   background-color: #91bd09;
 }
-a.lightgreen:active {
-  background-color: #7ea41a;
-}
 a.green,
 .green {
   background-color: #009600;
 }
-a.green:active {
-  background-color: #00770e;
-}
 a.blue,
 .blue {
   background-color: #237fd7;
 }
-a.blue:active {
-  background-color: #1a69b6;
-}
 a.arcticblue,
 .arcticblue {
   background-color: #2daebf;
 }
-a.arcticblue:active {
-  background-color: #238e9e;
-}
 a.orange,
 .orange {
   background-color: #ff5c00;
 }
-a.orange:active {
-  background-color: #da4e15;
-}
 a.purple,
 .purple {
   background-color: #7b658d;
 }
-a.purple:active {
-  background-color: #574765;
-}
 a.magenta,
 .magenta {
   background-color: #a9014b;
 }
-a.magenta:active {
-  background-color: #831239;
-}
 a.pink,
 .pink {
   background-color: #ff007f;
 }
-a.pink:active {
-  background-color: #de2870;
-}
 a.yellow,
 .yellow {
   background-color: #ffb515;
 }
-a.yellow:active {
-  background-color: #dfa020;
-}
 a.twitter,
 .twitter:not(span) {
   background-color: #35cdff;
 }
-a.twitter:active {
-  background-color: #2bafda;
-}
 a.facebook,
 .facebook:not(span) {
   background-color: #3b5998;
 }
-a.facebook:active {
-  background-color: #2c4579;
-}
 li.grey {
-  box-shadow: inset 4px 0px 0px #cccccc;
+  -webkit-box-shadow: inset 4px 0px 0px #ccc;
+  -moz-box-shadow: inset 4px 0px 0px #ccc;
+  -ms-box-shadow: inset 4px 0px 0px #ccc;
+  -o-box-shadow: inset 4px 0px 0px #ccc;
+  box-shadow: inset 4px 0px 0px #ccc;
 }
 li.dark-grey {
-  box-shadow: inset 4px 0px 0px #000000;
+  -webkit-box-shadow: inset 4px 0px 0px #000;
+  -moz-box-shadow: inset 4px 0px 0px #000;
+  -ms-box-shadow: inset 4px 0px 0px #000;
+  -o-box-shadow: inset 4px 0px 0px #000;
+  box-shadow: inset 4px 0px 0px #000;
 }
 li.red {
+  -webkit-box-shadow: inset 4px 0px 0px #e33100;
+  -moz-box-shadow: inset 4px 0px 0px #e33100;
+  -ms-box-shadow: inset 4px 0px 0px #e33100;
+  -o-box-shadow: inset 4px 0px 0px #e33100;
   box-shadow: inset 4px 0px 0px #e33100;
 }
 li.lightgreen {
+  -webkit-box-shadow: inset 4px 0px 0px #91bd09;
+  -moz-box-shadow: inset 4px 0px 0px #91bd09;
+  -ms-box-shadow: inset 4px 0px 0px #91bd09;
+  -o-box-shadow: inset 4px 0px 0px #91bd09;
   box-shadow: inset 4px 0px 0px #91bd09;
 }
 li.green {
+  -webkit-box-shadow: inset 4px 0px 0px #009600;
+  -moz-box-shadow: inset 4px 0px 0px #009600;
+  -ms-box-shadow: inset 4px 0px 0px #009600;
+  -o-box-shadow: inset 4px 0px 0px #009600;
   box-shadow: inset 4px 0px 0px #009600;
 }
 li.blue {
+  -webkit-box-shadow: inset 4px 0px 0px #237fd7;
+  -moz-box-shadow: inset 4px 0px 0px #237fd7;
+  -ms-box-shadow: inset 4px 0px 0px #237fd7;
+  -o-box-shadow: inset 4px 0px 0px #237fd7;
   box-shadow: inset 4px 0px 0px #237fd7;
 }
 li.arcticblue {
+  -webkit-box-shadow: inset 4px 0px 0px #2daebf;
+  -moz-box-shadow: inset 4px 0px 0px #2daebf;
+  -ms-box-shadow: inset 4px 0px 0px #2daebf;
+  -o-box-shadow: inset 4px 0px 0px #2daebf;
   box-shadow: inset 4px 0px 0px #2daebf;
 }
 li.orange {
+  -webkit-box-shadow: inset 4px 0px 0px #ff5c00;
+  -moz-box-shadow: inset 4px 0px 0px #ff5c00;
+  -ms-box-shadow: inset 4px 0px 0px #ff5c00;
+  -o-box-shadow: inset 4px 0px 0px #ff5c00;
   box-shadow: inset 4px 0px 0px #ff5c00;
 }
 li.purple {
+  -webkit-box-shadow: inset 4px 0px 0px #7b658d;
+  -moz-box-shadow: inset 4px 0px 0px #7b658d;
+  -ms-box-shadow: inset 4px 0px 0px #7b658d;
+  -o-box-shadow: inset 4px 0px 0px #7b658d;
   box-shadow: inset 4px 0px 0px #7b658d;
 }
 li.magenta {
+  -webkit-box-shadow: inset 4px 0px 0px #a9014b;
+  -moz-box-shadow: inset 4px 0px 0px #a9014b;
+  -ms-box-shadow: inset 4px 0px 0px #a9014b;
+  -o-box-shadow: inset 4px 0px 0px #a9014b;
   box-shadow: inset 4px 0px 0px #a9014b;
 }
 li.pink {
+  -webkit-box-shadow: inset 4px 0px 0px #ff007f;
+  -moz-box-shadow: inset 4px 0px 0px #ff007f;
+  -ms-box-shadow: inset 4px 0px 0px #ff007f;
+  -o-box-shadow: inset 4px 0px 0px #ff007f;
   box-shadow: inset 4px 0px 0px #ff007f;
 }
 li.yellow {
+  -webkit-box-shadow: inset 4px 0px 0px #ffb515;
+  -moz-box-shadow: inset 4px 0px 0px #ffb515;
+  -ms-box-shadow: inset 4px 0px 0px #ffb515;
+  -o-box-shadow: inset 4px 0px 0px #ffb515;
   box-shadow: inset 4px 0px 0px #ffb515;
 }
 li.twitter {
+  -webkit-box-shadow: inset 4px 0px 0px #35cdff;
+  -moz-box-shadow: inset 4px 0px 0px #35cdff;
+  -ms-box-shadow: inset 4px 0px 0px #35cdff;
+  -o-box-shadow: inset 4px 0px 0px #35cdff;
   box-shadow: inset 4px 0px 0px #35cdff;
 }
 li.facebook {
+  -webkit-box-shadow: inset 4px 0px 0px #3b5998;
+  -moz-box-shadow: inset 4px 0px 0px #3b5998;
+  -ms-box-shadow: inset 4px 0px 0px #3b5998;
+  -o-box-shadow: inset 4px 0px 0px #3b5998;
   box-shadow: inset 4px 0px 0px #3b5998;
 }

src/stylesheets/css/Lungo.widgets.form.css

@@ -6,96 +6,124 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
-form {
-  /* @group search */
-
-}
 form.wrapper input:not([type=checkbox]),
+.form.wrapper input:not([type=checkbox]),
 form textarea,
-form select {
+.form textarea,
+form select,
+.form select {
   margin: 3px 0px 3px 0px;
 }
-form.rounded input:not([type=range]),
-form.rounded textarea,
-form.rounded select {
-  width: 94%;
-  padding: 1.0% 3% ;
-}
-form.rounded input:not([type=range]):first-of-type,
-form.rounded textarea:first-of-type,
-form.rounded select:first-of-type {
-  -webkit-border-radius: 2px 2px 0px 0px;
-  -moz-border-radius: 2px 2px 0px 0px;
-  border-radius: 2px 2px 0px 0px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-}
-form.rounded input:not([type=range]):last-of-type,
-form.rounded textarea:last-of-type,
-form.rounded select:last-of-type {
-  -webkit-border-radius: 0px 0px 2px 2px;
-  -moz-border-radius: 0px 0px 2px 2px;
-  border-radius: 0px 0px 2px 2px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-}
-form label:not(.select) {
-  font-size: 13px;
-  margin-bottom: 3px;
-  display: block;
+form label:not(.select),
+.form label:not(.select) {
+  font-size: 0.95em;
+  font-weight: 400;
 }
 form input,
+.form input,
 form textarea,
+.form textarea,
 form select,
-form .progress {
+.form select,
+form .progress,
+.form .progress {
   margin-bottom: 8px;
 }
-form input:not([type=range]),
+form input[type="text"],
+.form input[type="text"],
+form input[type="password"],
+.form input[type="password"],
+form input[type="date"],
+.form input[type="date"],
+form input[type="datetime"],
+.form input[type="datetime"],
+form input[type="email"],
+.form input[type="email"],
+form input[type="number"],
+.form input[type="number"],
+form input[type="search"],
+.form input[type="search"],
+form input[type="tel"],
+.form input[type="tel"],
+form input[type="time"],
+.form input[type="time"],
+form input[type="url"],
+.form input[type="url"],
+form select,
+.form select,
 form textarea,
-form select {
+.form textarea {
   display: block;
-  width: 94%;
-  padding: 0 3%;
+  width: 100%;
+  padding: 6px;
   height: 30px;
-  font-size: 15px;
-  line-height: 16px;
-  font-weight: bold;
+  -webkit-transition: all 0.15s linear;
+  -moz-transition: all 0.15s linear;
+  -ms-transition: all 0.15s linear;
+  -o-transition: all 0.15s linear;
+  transition: all 0.15s linear;
+  font-family: inherit;
+  font-size: 14px;
   -webkit-appearance: none;
   -webkit-user-select: text;
   -webkit-font-smoothing: antialiased;
 }
-form textarea {
-  padding-top: 1.5%;
+form input[type="text"]:focus,
+.form input[type="text"]:focus,
+form input[type="password"]:focus,
+.form input[type="password"]:focus,
+form input[type="date"]:focus,
+.form input[type="date"]:focus,
+form input[type="datetime"]:focus,
+.form input[type="datetime"]:focus,
+form input[type="email"]:focus,
+.form input[type="email"]:focus,
+form input[type="number"]:focus,
+.form input[type="number"]:focus,
+form input[type="search"]:focus,
+.form input[type="search"]:focus,
+form input[type="tel"]:focus,
+.form input[type="tel"]:focus,
+form input[type="time"]:focus,
+.form input[type="time"]:focus,
+form input[type="url"]:focus,
+.form input[type="url"]:focus,
+form select:focus,
+.form select:focus,
+form textarea:focus,
+.form textarea:focus {
+  outline: none !important;
+}
+form textarea,
+.form textarea {
   min-height: 48px;
 }
-form input[type=search] {
-  width: 86%;
+form input[type=search],
+.form input[type=search] {
+  width: 89%;
   display: inline-block;
 }
-form input[type=search] + .button {
+form input[type=search] + .button,
+.form input[type=search] + .button {
   float: right;
   padding: 0px;
-  width: 11%;
+  width: 10%;
   height: 30px;
+  line-height: 30px;
 }
-form input[type=search] + .button .icon {
-  top: -3px;
-  float: none;
-}
-form select {
+form select,
+.form select {
   width: 100%;
   height: 30px;
 }
-form label.select {
+form select label.select,
+.form select label.select {
   position: relative;
   display: inline-block;
   width: 100%;
 }
-form .select:after {
+form select .select:after,
+.form select .select:after {
   text-align: center;
   position: absolute;
   top: 3px;
@@ -107,14 +135,17 @@ form .select:after {
   pointer-events: none;
   line-height: 33px;
 }
-form .no-pointer-events .select:after {
+form select .no-pointer-events .select:after,
+.form select .no-pointer-events .select:after {
   content: none;
 }
-form input[type=range] {
+form input[type=range],
+.form input[type=range] {
   -webkit-appearance: none;
   outline: none;
 }
-form input[type=range]:not(.checkbox) {
+form input[type=range]:not(.checkbox),
+.form input[type=range]:not(.checkbox) {
   height: 12px;
   width: 100%;
   padding: 0px;
@@ -122,16 +153,19 @@ form input[type=range]:not(.checkbox) {
   border: 0;
   cursor: ew-resize;
 }
-form input[type=range]:not(.checkbox)::-webkit-slider-thumb {
+form input[type=range]:not(.checkbox)::-webkit-slider-thumb,
+.form input[type=range]:not(.checkbox)::-webkit-slider-thumb {
   top: -1px;
 }
-form input[type=range].checkbox {
+form input[type=range].checkbox,
+.form input[type=range].checkbox {
   width: 70px;
   height: 30px;
   padding: 1px 2px;
   font-family: 'lungojsicon';
 }
-form input[type=range].checkbox:after {
+form input[type=range].checkbox:after,
+.form input[type=range].checkbox:after {
   content: "\0055";
   position: relative;
   float: right;
@@ -139,13 +173,15 @@ form input[type=range].checkbox:after {
   padding: 0 8px;
   font-size: 1.5em;
 }
-form input[type=range].checkbox.active:after {
+form input[type=range].checkbox.active:after,
+.form input[type=range].checkbox.active:after {
   float: left;
   content: "\0051";
   font-weight: bold;
   font-size: 1.6em;
 }
-form input[type=range]::-webkit-slider-thumb {
+form input[type=range]::-webkit-slider-thumb,
+.form input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 30px;
   height: 24px;
@@ -153,50 +189,61 @@ form input[type=range]::-webkit-slider-thumb {
   margin: 2px 2px 2px 2px;
   border: none;
 }
-form input[type=range]::-webkit-slider-thumb::after {
+form input[type=range]::-webkit-slider-thumb::after,
+.form input[type=range]::-webkit-slider-thumb::after {
   width: 12px;
   height: 12px;
   display: block;
   content: "";
   position: relative;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
   border-radius: 8px;
   z-index: 9;
   top: 6px;
   left: 9px;
 }
-form .progress {
+form .progress,
+.form .progress {
   width: 100%;
   margin-bottom: 8px;
 }
-form .progress .labels {
-  font-size: 1.0em;
+form .progress .labels,
+.form .progress .labels {
+  font-size: 1em;
   display: block;
 }
-form .progress .labels span:last-child {
+form .progress .labels span:last-child,
+.form .progress .labels span:last-child {
   float: right;
 }
-form .progress .bar {
+form .progress .bar,
+.form .progress .bar {
   height: 12px;
   line-height: 12px;
   display: block;
 }
-form .progress .bar .value {
+form .progress .bar .value,
+.form .progress .bar .value {
   display: block;
   height: inherit;
   width: 0%;
-  -webkit-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
-}
-form .progress .bar .value .label {
+  -webkit-transition: width 500ms easeOutSine;
+  -moz-transition: width 500ms easeOutSine;
+  -ms-transition: width 500ms easeOutSine;
+  -o-transition: width 500ms easeOutSine;
+  transition: width 500ms easeOutSine;
+}
+form .progress .bar .value .label,
+.form .progress .bar .value .label {
   float: right;
   margin-right: 4px;
   font-size: 0.75em;
 }
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  form .custom-select select {
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  .custom-select select {
     padding-right: 30px;
   }
 }

src/stylesheets/css/Lungo.widgets.notification.css

@@ -1,5 +1,11 @@
-/* DIMENSIONS */
-/* COLORS */
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class Pull
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
 .notification {
   position: absolute;
   width: 100%;
@@ -9,24 +15,19 @@
   display: none;
 }
 .notification.modal {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: ;
 }
 .notification .window {
   position: relative;
   opacity: 0;
-  -webkit-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: all  easeOutSine;
+  -moz-transition: all  easeOutSine;
+  -ms-transition: all  easeOutSine;
+  -o-transition: all  easeOutSine;
+  transition: all  easeOutSine;
 }
 .notification .window.show {
   opacity: 1;
-  -webkit-transition-delay: 200ms;
-  -moz-transition-delay: 200ms;
-  -ms-transition-delay: 200ms;
-  -o-transition-delay: 200ms;
-  transition-delay: 200ms;
 }
 .notification .window strong,
 .notification .window small {
@@ -38,108 +39,5 @@
 .notification .window:not(.special) {
   left: 50%;
   top: 50%;
-  width: 104px;
-  margin: -52px auto auto -52px;
-  padding: 8px;
-  background-color: rgba(0, 0, 0, 0.8);
-  text-align: center;
-  -webkit-transform: scale(0.8);
-  -moz-transform: scale(0.8);
-  -ms-transform: scale(0.8);
-  -o-transform: scale(0.8);
-  transform: scale(0.8);
-}
-.notification .window:not(.special).show {
-  -webkit-transform: scale(1);
-  -moz-transform: scale(1);
-  -ms-transform: scale(1);
-  -o-transform: scale(1);
-  transform: scale(1);
-}
-.notification .window:not(.special) .icon {
-  display: block;
-  font-size: 4.0em;
-}
-.notification .window:not(.special) .icon.loading {
-  margin-top: 24px;
-  margin-bottom: 20px;
-}
-.notification .window:not(.special) small {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.notification .window.confirm,
-.notification .window.notify {
-  top: 0;
-  font-size: 1.1em !important;
-  -webkit-transform: translate3d(0, -100%, 0);
-  -moz-transform: translate3d(0, -100%, 0);
-  -ms-transform: translate3d(0, -100%, 0);
-  -o-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-}
-.notification .window.confirm.show,
-.notification .window.notify.show {
-  -webkit-transform: translate3d(0, 0%, 0);
-  -moz-transform: translate3d(0, 0%, 0);
-  -ms-transform: translate3d(0, 0%, 0);
-  -o-transform: translate3d(0, 0%, 0);
-  transform: translate3d(0, 0%, 0);
-}
-.notification .window.confirm .icon,
-.notification .window.notify .icon {
-  float: left;
-  font-size: 2.0em;
-  margin: -3px 10px 0 0;
-}
-.notification .window.confirm {
-  opacity: 1;
-  padding: 10px 12px;
-}
-.notification .window.confirm p {
-  height: 44px;
-}
-.notification .window.confirm .button {
-  width: 42%;
-}
-.notification .window.confirm .button:last-child {
-  float: right;
-}
-.notification .window.notify {
-  padding: 8px;
-  top: 0;
-}
-.notification .window.url {
-  left: 0;
-  top: 0;
-  width: 280px;
-  height: auto;
-  margin: 64px auto 0px;
-  padding: 0px;
-}
-.notification .window.url .close {
-  position: absolute;
-  top: -14px;
-  right: -14px;
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: normal;
-  width: 24px;
-  height: 24px;
-  border-radius: 14px;
-}
-.notification .window.working span {
-  -webkit-animation: notification-working 1s infinite;
-}
-@-webkit-keyframes notification-working {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+  width: ;
 }

src/stylesheets/css/Lungo.widgets.pull.css

@@ -1,5 +1,11 @@
-/* DIMENSIONS */
-/* COLORS */
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class Pull
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
 section > [data-control="pull"] {
   position: absolute;
   z-index: -1;
@@ -15,11 +21,11 @@ section > [data-control="pull"] > .icon {
   height: 48px;
   font-size: 44px;
   line-height: 48px;
-  -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: all 300ms;
+  -moz-transition: all 300ms;
+  -ms-transition: all 300ms;
+  -o-transition: all 300ms;
+  transition: all 300ms;
 }
 section > [data-control="pull"] > .loading {
   display: none;

src/stylesheets/css/Lungo.widgets.splash.css

@@ -6,13 +6,11 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
 .splash {
   text-align: center;
   font-size: 1.2em;
 }
-.splash  > form {
+.splash > form {
   margin: 28px;
 }
 .splash img {

src/stylesheets/import/constants.styl

@@ -0,0 +1,30 @@
+/* DIMENSIONS */
+HEADER_FOOTER_HEIGHT = 44px
+HEADER_GROUPBAR_HEIGHT = 30px
+
+ARTICLE_BOTTOM = (HEADER_FOOTER_HEIGHT - 1)
+ARTICLE_WITH_HEADER_EXTENDED = (HEADER_FOOTER_HEIGHT + HEADER_GROUPBAR_HEIGHT)
+
+BORDER_RADIUS = 2px
+
+ASIDE_WIDTH = 264px
+ASIDE_WIDTH_SMALL = 64px
+
+DEFAULT_TRANSITION = easeOutSine
+
+/* COLORS */
+WHITE =             #fff
+BLACK =             #000
+GREY =              #ccc
+RED =               #e33100
+LIGHTGREEN =        #91bd09
+GREEN =             #009600
+BLUE =              #237fd7
+ARCTICBLUE =        #2daebf
+ORANGE =            #ff5c00
+PURPLE =            #7b658d
+MAGENTA =           #a9014b
+PINK =              #ff007f
+YELLOW =            #ffb515
+TWITTER =           #35cdff
+FACEBOOK =          #3b5998

src/stylesheets/import/css/constants.css

@@ -0,0 +1,2 @@
+/* DIMENSIONS */
+/* COLORS */

src/stylesheets/import/css/vendor.css

@@ -0,0 +1,2 @@
+/* ====================== FLEXBOX ====================== */
+/* ====================== TRANSITIONS ====================== */

src/stylesheets/import/vendor.styl

@@ -0,0 +1,56 @@
+vendor(prop, args)
+  -webkit-{prop} args
+  -moz-{prop} args
+  -ms-{prop} args
+  -o-{prop} args
+  {prop} args
+
+border-radius()
+  vendor('border-radius', arguments)
+
+box-shadow()
+  vendor('box-shadow', arguments)
+
+text-shadow()
+  vendor('text-shadow', arguments)
+
+background-image()
+  vendor('background-image', arguments)
+
+backface-visibility()
+  vendor('backface-visibility', arguments)
+
+
+/* ====================== FLEXBOX ====================== */
+display-box()
+  display -webkit-box
+  display -moz-box
+  display box
+
+box-pack()
+  vendor('box-pack', arguments)
+
+box-flex()
+  vendor('box-flex', arguments)
+
+box-orient()
+  vendor('box-orient', arguments)
+
+/* ====================== TRANSITIONS ====================== */
+transition()
+  vendor('transition', arguments)
+
+transition-delay()
+  vendor('transition-delay', arguments)
+
+transition-property()
+  vendor('transition-property', arguments)
+
+transition-duration()
+  vendor('transition-duration', arguments)
+
+transition-timing-function()
+  vendor('transition-timing-function', arguments)
+
+transform()
+  vendor('transform', arguments)

src/stylesheets/lungo.widgets.notification.styl

@@ -0,0 +1,137 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class Pull
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+@notification_opacity = rgba(0,0,0,0.5)
+@keyframe = 200ms
+
+@modal_opacity = rgba(0,0,0,0.8)
+@modal_size = 104px
+@modal_size_middle = 52px
+
+.notification
+  position: absolute
+  width: 100%
+  height: 100%
+  z-index: 3
+  background: none
+  display: none
+
+  &.modal
+    background-color: @notification_opacity
+
+  & .window
+    position: relative
+    opacity: 0
+    transition( all @keyframe DEFAULT_TRANSITION )
+
+    &.show
+      opacity: 1
+      Transition-delay( @keyframe )
+
+    & strong, small
+      display: block
+
+
+    & small
+      font-size: 0.7em
+
+    &:not(.special)
+      left: 50%
+      top: 50%
+      width: @modal_size
+      margin: -@modal_size_middle auto auto -@modal_size_middle
+      padding: 8px
+      background-color: @modal_opacity
+      text-align: center
+      transform( scale(0.8) )
+
+      &.show
+        transform( scale(1.0) )
+
+      & .icon
+        display: block
+        font-size: 4.0em
+        &.loading
+          margin-top: 24px
+          margin-bottom: 20px
+
+      & small
+        overflow: hidden
+        white-space: nowrap
+        text-overflow: ellipsis
+
+
+
+//         &.confirm, &.notify
+//             top: 0
+//             font-size: 1.1em !important
+//             .transform(translate3d(0, -100%, 0))
+
+//             &.show  .transform(translate3d(0, 0%, 0))
+
+//             & .icon
+//                 float: left
+//                 font-size: 2.0em
+//                 margin: -3px 10px 0 0
+
+
+
+//         &.confirm
+//             opacity: 1
+//             padding: 10px 12px
+
+//             & p  height: 44px
+
+//             & .button
+//                width: 42%
+//                &:last-child float: right
+
+
+
+//         &.notify
+//             padding: 8px
+//             top:  0
+
+
+//         &.url
+//             left: 0
+//             top: 0
+//             width: 280px
+//             height: auto
+//             margin: 64px auto 0px
+//             padding: 0px
+
+//             & .close
+//                 position: absolute
+//                 top: -14px
+//                 right: -14px
+
+//                 font-size: 14px
+//                 line-height: 24px
+//                 font-weight: normal
+//                 width: 24px
+//                 height: 24px
+//                 border-radius: 14px
+
+
+
+
+
+// .notification .window.working span
+//     -webkit-animation: notification-working 1s infinite
+
+
+// @-webkit-keyframes notification-working
+//     0% opacity: 1
+//     50% opacity: 0
+//     100% opacity: 1
+