LESS to STYLUS

kitchen-sink/app/sections/aside.html

@@ -6,8 +6,8 @@
     </header>
     <article id="aside-example" class="indented">
         <div>
-            <a href="#left" data-router="aside" data-icon="left" class="button big blue">Example of normal aside</a>
-            <a href="#right" data-router="aside" data-icon="right" class="button big red">Example of mini right aside</a>
+            <a href="#left" data-router="aside" data-icon="left" class="button anchor blue">Example of normal aside</a>
+            <a href="#right" data-router="aside" data-icon="right" class="button anchor red">Example of mini right aside</a>
         </div>
     </article>
 </section>

kitchen-sink/app/sections/form.html

@@ -41,10 +41,10 @@
                 <input type="range" min="0" max="1" class="checkbox right active" value="1">
             </div>
                 <div class="four columns left">
-                    <a href="#" class="button big theme" data-label="Accept" data-icon="check"></a>
+                    <a href="#" class="button anchor theme" data-label="Accept" data-icon="check"></a>
                 </div>
                 <div class="four columns right">
-                    <a href="#" class="button big red" data-label="Cancel" data-icon="close"></a>
+                    <a href="#" class="button anchor red" data-label="Cancel" data-icon="close"></a>
                 </div>
         </form>
 

kitchen-sink/app/sections/notification.html

@@ -7,17 +7,17 @@
 
     <article class="list scroll indented">
         <div>
-            <a href="#" class="button big" data-label="Normal" data-action="normal"></a>
-            <a href="#" class="button big" data-label="Normal + Animation" data-action="animate"></a>
-            <a href="#" class="button big" data-label="Loading" data-label="Loading" data-action="loading"></a>
-            <a href="#" class="button big" data-label="Confirm" data-action="confirm"></a>
-            <a href="#" class="button big" data-label="Html" data-action="html"></a>
+            <a href="#" class="button anchor" data-label="Normal" data-action="normal"></a>
+            <a href="#" class="button anchor" data-label="Normal + Animation" data-action="animate"></a>
+            <a href="#" class="button anchor" data-label="Loading" data-label="Loading" data-action="loading"></a>
+            <a href="#" class="button anchor" data-label="Confirm" data-action="confirm"></a>
+            <a href="#" class="button anchor" data-label="Html" data-action="html"></a>
 
-            <a href="#" class="button big green" data-label="Success" data-action="success"></a>
-            <a href="#" class="button big red" data-label="Error" data-action="error"></a>
-            <a href="#" class="button big yellow" data-label="Alert" data-action="alert"></a>
+            <a href="#" class="button anchor green" data-label="Success" data-action="success"></a>
+            <a href="#" class="button anchor red" data-label="Error" data-action="error"></a>
+            <a href="#" class="button anchor yellow" data-label="Alert" data-action="alert"></a>
 
-            <a href="#" class="button big blue" data-label="Chaining" data-action="chaining"></a>
+            <a href="#" class="button anchor blue" data-label="Chaining" data-action="chaining"></a>
         </div>
     </article>
 </section>

kitchen-sink/app/sections/splash.html

@@ -5,7 +5,7 @@
             <input type="text" placeholder="Your username" id="txt-signup-name" value="">
             <input type="password" placeholder="Your password" id="txt-signup-password" value="">
             <a href="#" class="button blue big" data-icon="checkmark" data-icon="user">Login</a>
-            <a href="#back" data-router="section" class="button big" data-icon="left">Return to Kichensink</a>
+            <a href="#back" data-router="section" class="button anchor" data-icon="left">Return to Kichensink</a>
         </form>
     </article>
 </section>

kitchen-sink/index.html

@@ -113,7 +113,7 @@
                 </li>
 
                 <li>
-                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button big theme" data-label="Tweet me"></a>
+                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
 
                 </li>
             </ul>
@@ -162,10 +162,8 @@
     <script src="../src/boot/Lungo.Boot.Section.js"></script>
     <script src="../src/boot/Lungo.Boot.Article.js"></script>
 
-
     <script src="../src/Lungo.Scroll.js"></script>
 
-
     <!-- LungoJS - Sandbox App -->
     <script>
         Lungo.init({

kitchen-sink/index.package.html

@@ -93,7 +93,7 @@
                 </li>
 
                 <li>
-                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button big theme" data-label="Tweet me"></a>
+                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
 
                 </li>
             </ul>

src/stylesheets/Lungo.theme.default.less

@@ -1,386 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Theme
- * @class Default
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "mixins.less";
-@import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700");
-@import url("http://fonts.googleapis.com/css?family=Exo:200,400,700");
-@import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
-
-
-@theme: #0093D5;
-    @theme-light:  #39ABE1;
-
-@theme: #2A95D3;
-    @theme-light:  #25AEEB;
-@theme-dark: #222;
-    @theme-dark-current: #111;
-    @theme-dark-nav: #888;
-    @theme-dark-nav-active: #fff;
-@theme-contrast: #444;
-@aside: #191919;
-
-@color: #484a49;
-
-
-@notification-error: #e33100;
-@notification-alert: #ffb515;
-@notification-success: #009600;
-
-
-@form-border-radius: 1px;
-
-.app {
-    background: #000;
-    font-family: "Titillium Web", "Exo","Open Sans Condensed", Helvetica, Arial, sans-serif;
-}
-
-.theme, li.theme, a.theme {
-    background: @theme-light;
-    &:active { background: @theme;}
-}
-
-/* @group <header> & <footer> & <article> */
-section > header {
-    background-color: @theme;
-    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)");
-
-    & .title {
-        color: #fff;
-        text-shadow: 0 1px 0 rgba(0,0,0,0.2);
-    }
-
-    & .subtitle {
-        color: #fff;
-        opacity: 0.7;
-    }
-}
-
-section > footer {
-    background-color: @theme-dark;
-    .box-shadow(inset 0 3px 0 #333);
-    & > nav a {
-        .box-shadow(1px 0 0 #151515);
-        &.current {
-            color:  @theme-dark-nav-active;
-            background: @theme-dark-current;
-            .box-shadow(~"-1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3");
-        }
-    }
-
-}
-
-section > article, section > [data-control="pull"] { background: #f4f5f5; }
-
-[data-control="pull"] {
-    color: #666;
-    text-shadow: 0 1px 0 white;
-}
-
-aside {
-    color: #fff;
-    background: @aside;
-
-    & header, footer {
-        background: @theme-dark-current;
-        text-shadow: none;
-    }
-    & header {
-        .box-shadow(inset 0 -1px 0 rgba(0,0,0,0.2));
-    }
-    & article { background: none; }
-
-    & nav a {
-        &.current .icon { color: white; }
-        &:not(.current) .icon {color:@theme-dark-nav;}
-    }
-
-    & .list li {
-        background: none;
-        border-bottom-color: @theme-dark;
-
-        &.current {
-            background: @theme;
-            border-bottom-color: @theme;
-
-            & strong, & small, & .icon { color: #fff; }
-        }
-        & strong, & small, & .icon { color: @theme-dark-nav; }
-    }
-}
-
-section.aside {
-    .box-shadow(~"-1px 0 0 rgba(0,0,0,0.2)");
-    &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
-}
-
-/* @end */
-
-/* @group <nav> */
-header nav {
-    & a { color: #fff; }
-
-    &.box {
-        &:not(.right) a { .box-shadow(~"1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2)"); }
-        &.right a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
-        & a:active { background: rgba(0,0,0,0.1); }
-    }
-
-    &.button a {
-        border-radius: @form-border-radius;
-        .linear-gradient(top, ~','rgba(0,0,0,0.0), ~','rgba(0,0,0,0.1));
-        box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0, 0, 0, .5);
-        &:active { background: rgba(0,0,0,0.2); }
-    }
-}
-
-section > nav.groupbar {
-    background-color: @theme-dark;
-    & > a.current { .box-shadow(inset 0 -3px 0 @theme); }
-}
-
-footer > nav > a, nav.groupbar > a{
-    color: @theme-dark-nav;
-    &.current { color:  @theme-dark-nav-active; }
-}
-
-/* @end */
-
-/* @group <aside> */
-
-
-/* @group .list */
-@list-border: #ddd;
-@list-color: #2a2a2a;
-
-.list {
-    & li {
-        background: #fff;
-        border-bottom: inset 1px @list-border;
-
-        &, & a { color: @list-color; }
-
-        &.dark {
-            background: @theme-contrast;
-            &, & a { color: #fff; }
-        }
-
-        &.selectable:active, &.theme {
-            background: @theme-light;
-            &, & a { color: #fff; }
-        }
-
-         &.light {
-            background:  @list-border;
-            text-shadow: 0 1px 0 #eee;
-            &, & a { color: @theme-dark-nav; }
-        }
-
-        &.anchor {
-            background: @theme-dark;
-            border-bottom: none;
-            &, & a { color: #fff !important; }
-        }
-
-        & small, & .right:not(.bubble) { opacity: 0.8; }
-    }
-
-    &:not(.indented) li {
-        &.dark, &.theme, &.light {
-            border-bottom-color: rgba(0,0,0,0.1);
-        }
-    }
-
-    &.indented li {
-
-    }
-}
-
-
-
-/* @end */
-
-/* @group widgets */
-.splash {
-    background: @theme-dark;
-    color: #fff;
-    text-shadow: 0 1px 0px rgba(0,0,0,0.2);
-}
-
-
-
-
-/* @group .button */
-.button, button {
-    .border-radius(@form-border-radius);
-
-    .box-shadow(~"inset 0 2px 0 rgba(255,255,255, 0.2)");
-
-    font-weight: bold;
-    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-
-    &: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> */
-@box-shadow-form: ~'inset 0 1px 2px rgba(0,0,0,0.1)';
-@box-shadow-form-active: ~'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef';
-@form-border-color: #D0D4C6;
-label { color: #999; }
-
-input:not([type=range]), textarea, select {
-    border: 1px solid @form-border-color;
-    .border-radius(@form-border-radius);
-    .box-shadow(@box-shadow-form);
-    color: #858585;
-    font-family: Helvetica, Arial, sans-serif;
-    background: #fff;
-
-    &:focus {
-        color: #484a49;
-        border-color: @theme;
-        .box-shadow(0 0 1px @theme-light);
-    }
-
-    &[disabled] {
-        background: #ddd;
-        border-color: #999;
-        color: #999; }
-}
-
-.select:after {
-    background: @form-border-color;
-    color: white;
-    border-top-right-radius: @form-border-radius;
-    border-bottom-right-radius: @form-border-radius;
-}
-
-/* @group range */
-input[type=range] {
-    .box-shadow(@box-shadow-form);
-    .border-radius(@form-border-radius);
-
-    &:not(.checkbox) {
-        background-color: #c7c7c7;
-        &:active { background-color: @theme-light;  }
-    }
-
-    &.checkbox {
-        background-color: #aaaaaa;
-        color: rgba(255,255,255,0.6);
-        &.active { background-color: @theme-light; }
-    }
-
-    &::-webkit-slider-thumb {
-        border-radius: @form-border-radius;
-        .box-shadow(~"1px 0 rgba(0,0,0,0.2), -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.2), 0 -1px rgba(0,0,0,0.2)");
-        background: #fff; }
-
-    &::-webkit-slider-thumb::after {
-        background: #ddd; }
-}
-/* @end */
-
-/* @group .progress */
-.progress {
-    .labels {
-        font-size: 12px;
-        font-weight: bold;
-        line-height: 18px;
-        color: #858585;
-    }
-
-    & .bar {
-        .box-shadow(@box-shadow-form);
-        background: #c7c7c7;
-        .border-radius(@form-border-radius);
-
-        & .value {
-            background-color: @theme-light;
-            .border-radius(@form-border-radius);
-
-            & .label {
-                float: right;
-                margin-right: 3px;
-                font-weight: bold;
-                color: rgba(0,0,0,0.6);
-                text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
-                font-size: 12px;
-            }
-        }
-    }
-}
-/* @end */
-
-
-/* @group .bubble */
-.bubble {
-    color: #fff;
-    .border-radius(2px);
-
-    &.count { background: @theme; }
-}
-    header .count {
-        background: @theme-dark !important;
-    }
-
-    footer .bubble {
-        .box-shadow(~'inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)');
-    }
-
-    article .list .bubble {
-        .box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
-    }
-
-    aside .list .bubble { background: rgba(0,0,0,0.25); }
-/* @end */
-
-/* @group .bubble */
-.notification {
-    color: #fff;
-    & .window {
-        &.confirm { background: #333; }
-
-        &.notify {
-            text-shadow: 0 1px 0px rgba(0,0,0,0.1);
-            .box-shadow(~'inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25)');
-
-            &.error { background: @notification-error; }
-            &.alert { background: @notification-alert; }
-            &.success { background: @notification-success; }
-        }
-
-        &.url {
-            & .close {
-                background: #000;
-                border: solid 2px #fff;
-                box-shadow: 0 0 4px black;
-            }
-        }
-    }
-}

src/stylesheets/Lungo.theme.default.styl

@@ -0,0 +1,312 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/vendor.styl"
+@import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700");
+@import url("http://fonts.googleapis.com/css?family=Exo:200,400,700");
+@import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
+
+THEME = #0093D5
+THEME_light =  #39ABE1
+THEME = #2A95D3
+THEME_light =  #25AEEB
+THEME_dark = #222
+THEME_dark_current = #111
+THEME_dark_nav = #888
+THEME_dark_nav_active = #fff
+THEME_contrast = #444
+ASIDE_COLOR = #191919
+COLOR = #484a49
+NOTIFICATION_error = #e33100
+NOTIFICATION_alert = #ffb515
+NOTIFICATION_success = #009600
+FORM_border_radius = 1px
+
+.app
+  background: #000
+  font-family: "Titillium Web", "Exo","Open Sans Condensed", Helvetica, Arial, sans-serif
+
+.theme
+  &, li&, a&
+    background:
+      THEME-light
+    &:active
+      background: THEME
+
+
+[data-control="pull"]
+    color: #666
+    text-shadow: 0 1px 0 white
+
+
+section
+  & > header
+    background-color: THEME
+    box-shadow inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)
+    & .title
+      color: #fff
+      text-shadow 0 1px 0 rgba(0,0,0,0.2)
+    & .subtitle
+      color: #fff
+      opacity: 0.7
+
+  & > footer
+    background-color: THEME-dark
+    box-shadow inset 0 3px 0 #333
+    & > nav a
+      box-shadow 1px 0 0 #151515
+      &.current
+        color:  THEME_dark_nav_active
+        background: THEME_dark_current
+        box-shadow -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3
+
+  & > article, & > [data-control="pull"]
+    background: #f4f5f5
+
+  &.aside
+    box-shadow -1px 0 0 rgba(0,0,0,0.2)
+    &.right
+      box-shadow 4px 0 8px rgba(0,0,0,0.5)
+
+
+aside
+  color: #fff
+  background: ASIDE_COLOR
+
+  & header, footer
+    background: THEME_dark_current
+    text-shadow: none
+  & header
+    box-shadow inset 0 -1px 0 rgba(0,0,0,0.2)
+  & article
+    background: none
+  & nav a
+    &.current .icon
+      color: white
+    &:not(.current) .icon
+      color: THEME_dark_nav
+
+  & .list li
+    background: none
+    border-bottom-color: THEME_dark !important
+
+    &.current
+      background: THEME
+      border-bottom-color: THEME
+      & strong, & small, & .icon
+        color: #fff
+
+    & strong, small, .icon
+      color: THEME_dark_nav
+
+
+header nav
+  & a
+    color: #fff
+  &.box
+    &:not(.right) a
+      box-shadow 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2)
+    &.right a
+      box-shadow -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)
+    & a:active
+      background: rgba(0,0,0,0.1)
+  &.button a
+    border-radius: FORM-border-radius
+
+    // linear-gradient( top,  ','rgba(0,0,0,0.0),  ','rgba(0,0,0,0.1) )
+
+    box-shadow 0 1px 0 rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0, 0, 0, .5)
+    &:active
+      background: rgba(0,0,0,0.2)
+
+
+section > nav.groupbar
+  background-color: THEME-dark
+  & > a.current
+    box-shadow inset 0 -3px 0 THEME
+
+
+footer > nav > a, nav.groupbar > a
+  color: THEME_dark_nav
+  &.current
+    color: THEME_dark_nav_active
+
+
+
+LIST-border = #ddd
+LIST-color = #2a2a2a
+
+.list
+  & li
+    background: #fff
+    border-bottom: inset 1px LIST-border
+
+    &, & a
+      color: LIST-color
+
+      &.dark
+        background: THEME_contrast
+        &, & a
+          color: #fff
+
+      &.selectable:active, &.theme
+        background: THEME_light
+        &, & a
+          color: #fff
+
+      &.light
+        background:  LIST-border
+        text-shadow: 0 1px 0 #eee
+        &, & a
+          color: THEME_dark_nav
+
+      &.anchor
+        background: THEME_dark
+        border-bottom: none
+        &, & a
+          color: #fff !important
+
+      & small, & .right:not(.bubble)
+        opacity: 0.8
+
+  &:not(.indented) li
+    &.dark, &.theme, &.light
+      border-bottom-color: rgba(0,0,0,0.1)
+
+.splash
+  background: THEME-dark
+  color: #fff
+  text-shadow: 0 1px 0px rgba(0,0,0,0.2)
+
+.button, button
+  border-radius(FORM-border-radius)
+  font-weight: bold
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.3)
+  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
+
+FORM_shadow_form =  'inset 0 1px 2px rgba(0,0,0,0.1)'
+FORM_shadow_form_active =  'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef'
+FORM_border_color = #D0D4C6
+
+form, .form
+  & label
+    color: #999
+
+  & 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
+    background-color: white
+    color: rgba(0, 0, 0, 0.75)
+    border: 1px solid #ddd
+    box-shadow inset 0 1px 2px rgba(0, 0, 0, 0.1)
+    border-radius (0px)
+    &.error, &:required
+      border-color: color_alert
+      color: color_alert
+      background-color: rgba(198, 15, 19, 0.1)
+    &:focus
+      background: #FAFAFA;
+      border-color: THEME;
+      color: rgba(0, 0, 0, 0.75)
+    &[disabled]
+        background: #eee
+        border-color: #aaa
+        color: #999
+
+  & .select:after
+    background: FORM_border_color
+    color: white
+    border-top-right-radius: FORM_border_radius
+    border-bottom-right-radius: FORM_border_radius
+
+  & input[type=range]
+    box-shadow  FORM_shadow_form
+    border-radius FORM_border_radius
+
+    &:not(.checkbox)
+      background-color: #c7c7c7
+      &:active
+        background-color: THEME_light
+
+
+    &.checkbox
+      background-color: #aaaaaa
+      color: rgba(255,255,255,0.6)
+      &.active
+        background-color: THEME_light
+
+
+    &::-webkit-slider-thumb
+      border-radius: FORM-border-radius
+      box-shadow 1px 0 rgba(0,0,0,0.2), -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.2), 0 -1px rgba(0,0,0,0.2)
+      background: #fff
+
+    &::-webkit-slider-thumb::after
+      background: #ddd
+
+
+  & .progress
+    .labels
+      font-size: 12px
+      font-weight: bold
+      line-height: 18px
+      color: #858585
+
+    & .bar
+      background: #c7c7c7
+      & .value
+        background-color: THEME-light
+        & .label
+          float: right
+          margin-right: 3px
+          font-weight: bold
+          color: rgba(0,0,0,0.6)
+          text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important
+          font-size: 12px
+
+.bubble
+  color: #fff
+  border-radius 2px
+  &.count
+    background: THEME
+  header .count
+    background: THEME-dark !important
+  footer .bubble
+    box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
+  article .list .bubble
+    box-shadow inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)
+  aside
+    .list .bubble
+      background: rgba(0,0,0,0.25)
+
+.notification
+  color: #fff
+  & .window
+    &.confirm
+      background: #333
+    &.notify
+      text-shadow: 0 1px 0px rgba(0,0,0,0.1)
+      .box-shadow( inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25) )
+      &.error
+        background: NOTIFICATION-error
+      &.alert
+        background: NOTIFICATION-alert
+      &.success
+        background: NOTIFICATION-success
+    &.url
+      & .close
+        background: #000
+        border: solid 2px #fff
+        box-shadow: 0 0 4px black
+

src/stylesheets/Lungo.widgets.less

@@ -1,65 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo
- * @class Widgets
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-// .overthrow {
-//     overflow: hidden; /* clearfix */
-// }
-
-.overthrow-enabled .overthrow {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.scroll {
-    overflow-x: hidden;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
-    -webkit-box-flex: 1;
-
-    &.horizontal {
-        overflow-x: scroll;
-        overflow-y: hidden;
-        white-space: nowrap;
-        /*
-        & > * {
-            min-width: 4096px;
-            & > * { float: left; }
-        }
-        */
-    }
-
-    // BUG (iOS) POSITION: relative childrens
-    & > * { -webkit-transform: translate3d(0, 0, 0); }
-}
-
-:not(.icon) {
-    &.left { float: left; }
-    &.right { float: right;}
-}
-
-.hidden { display: none; }
-.indented > * { margin: 10px; }
-.margined { margin: 3%; }
-
-.wrapper { padding: 8px 8px; }
-
-.icon.small { font-size: 1.3em; }
-
-.framed { border: 2px solid #fff;}
-.round { .border-radius(4px); }
-
-.bubble {
-    display: inline-block;
-    padding: 2px 3px;
-    min-width: 12px;
-    font-size: 0.75em;
-    font-weight: bold;
-    line-height: 13px;
-    text-align: center; }

src/stylesheets/Lungo.widgets.loading.less

@@ -1,161 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Widgets
- * @class Loading
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-
-.loading {
-    position: relative;
-    left: 50%;
-    height: 1em;
-    width: 1em;
-    margin-left: -.5em;
-
-    .transform-origin(.5em .5em);
-    font-size: 48px;
-
-    &.disable {
-        -webkit-animation: none;
-        -moz-animation: none;
-        display: none
-    }
-
-    & > span {
-        left:         50%;
-        margin-left:  -0.05em;
-
-        &, &::before, &::after {
-            display:                  block;
-            position:                 absolute;
-            width:                    .1em;
-            height:                   .25em;
-            top:                      0;
-            .transform-origin(.05em .5em);
-            border-radius:            .1em;
-        }
-
-        &::before, &::after{ content: " "; }
-
-        &.top{ .transform(rotate(0deg)); }
-        &.right{ .transform(rotate(90deg)); }
-        &.bottom{ .transform(rotate(180deg)); }
-        &.left{ .transform(rotate(270deg)); }
-
-        &::before{ .transform(rotate(30deg)); }
-        &::after{ .transform(rotate(-30deg)); }
-
-        &.top           {  background-color: rgba(0,0,0,0.99); }
-        &.top::after    {  background-color: rgba(0,0,0,0.90); }
-        &.left::before  {  background-color: rgba(0,0,0,0.80); }
-        &.left          {  background-color: rgba(0,0,0,0.70); }
-        &.left::after   {  background-color: rgba(0,0,0,0.60); }
-        &.bottom::before{  background-color: rgba(0,0,0,0.50); }
-        &.bottom        {  background-color: rgba(0,0,0,0.40); }
-        &.bottom::after {  background-color: rgba(0,0,0,0.35); }
-        &.right::before {  background-color: rgba(0,0,0,0.30); }
-        &.right         {  background-color: rgba(0,0,0,0.25); }
-        &.right::after  {  background-color: rgba(0,0,0,0.20); }
-        &.top::before   {  background-color: rgba(0,0,0,0.15); }
-    }
-
-    &.white > span {
-        &.top           {  background-color: rgba(255,255,255,0.99); }
-        &.top::after    {  background-color: rgba(255,255,255,0.90); }
-        &.left::before  {  background-color: rgba(255,255,255,0.80); }
-        &.left          {  background-color: rgba(255,255,255,0.70); }
-        &.left::after   {  background-color: rgba(255,255,255,0.60); }
-        &.bottom::before{  background-color: rgba(255,255,255,0.50); }
-        &.bottom        {  background-color: rgba(255,255,255,0.40); }
-        &.bottom::after {  background-color: rgba(255,255,255,0.35); }
-        &.right::before {  background-color: rgba(255,255,255,0.30); }
-        &.right         {  background-color: rgba(255,255,255,0.25); }
-        &.right::after  {  background-color: rgba(255,255,255,0.20); }
-        &.top::before   {  background-color: rgba(255,255,255,0.15); }
-    }
-}
-
-section.show .loading, section.current .loading, .notification .loading {
-    -webkit-animation:  rotatingLoader .5s  infinite linear;
-    -moz-animation:  rotatingLoader .5s  infinite linear;
-}
-
-@-webkit-keyframes rotatingLoader{
-    0%{     .transform(rotate(0deg));   }
-    8.32%{  .transform(rotate(0deg));   }
-
-    8.33%{  .transform(rotate(30deg));  }
-    16.65%{ .transform(rotate(30deg));  }
-
-    16.66%{ .transform(rotate(60deg));  }
-    24.99%{ .transform(rotate(60deg));  }
-
-    25%{    .transform(rotate(90deg));  }
-    33.32%{ .transform(rotate(90deg));  }
-
-    33.33%{ .transform(rotate(120deg)); }
-    41.65%{ .transform(rotate(120deg)); }
-
-    41.66%{ .transform(rotate(150deg)); }
-    49.99%{ .transform(rotate(150deg)); }
-
-    50%{    .transform(rotate(180deg)); }
-    58.32%{ .transform(rotate(180deg)); }
-
-    58.33%{ .transform(rotate(210deg)); }
-    66.65%{ .transform(rotate(210deg)); }
-
-    66.66%{ .transform(rotate(240deg)); }
-    74.99%{ .transform(rotate(240deg)); }
-
-    75%{    .transform(rotate(270deg)); }
-    83.32%{ .transform(rotate(270deg)); }
-
-    83.33%{ .transform(rotate(300deg)); }
-    91.65%{ .transform(rotate(300deg)); }
-
-    91.66%{ .transform(rotate(330deg)); }
-    100%{   .transform(rotate(330deg)); }
-}
-
-@-moz-keyframes rotatingLoader{
-    0%{     .transform(rotate(0deg));   }
-    8.32%{  .transform(rotate(0deg));   }
-
-    8.33%{  .transform(rotate(30deg));  }
-    16.65%{ .transform(rotate(30deg));  }
-
-    16.66%{ .transform(rotate(60deg));  }
-    24.99%{ .transform(rotate(60deg));  }
-
-    25%{    .transform(rotate(90deg));  }
-    33.32%{ .transform(rotate(90deg));  }
-
-    33.33%{ .transform(rotate(120deg)); }
-    41.65%{ .transform(rotate(120deg)); }
-
-    41.66%{ .transform(rotate(150deg)); }
-    49.99%{ .transform(rotate(150deg)); }
-
-    50%{    .transform(rotate(180deg)); }
-    58.32%{ .transform(rotate(180deg)); }
-
-    58.33%{ .transform(rotate(210deg)); }
-    66.65%{ .transform(rotate(210deg)); }
-
-    66.66%{ .transform(rotate(240deg)); }
-    74.99%{ .transform(rotate(240deg)); }
-
-    75%{    .transform(rotate(270deg)); }
-    83.32%{ .transform(rotate(270deg)); }
-
-    83.33%{ .transform(rotate(300deg)); }
-    91.65%{ .transform(rotate(300deg)); }
-
-    91.66%{ .transform(rotate(330deg)); }
-    100%{   .transform(rotate(330deg)); }
-}

src/stylesheets/Lungo.widgets.loading.styl

@@ -0,0 +1,213 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class Loading
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+.loading
+  position: relative
+  left: 50%
+  height: 1em
+  width: 1em
+  margin-left: -.5em
+  transform-origin(.5em .5em)
+  font-size: 48px
+  &.disable
+    -webkit-animation: none
+    -moz-animation: none
+    display: none
+
+  & > span
+    left: 50%
+    margin-left: -0.05em
+
+    &, &::before, &::after
+      display: block
+      position: absolute
+      width: .1em
+      height: .25em
+      top: 0
+      transform-origin( .05em .5em )
+      border-radius( .1em )
+
+    &::before, &::after
+      content: " "
+
+    &.top
+      transform(rotate(0deg))
+    &.right
+      transform(rotate(90deg))
+    &.bottom
+      transform(rotate(180deg))
+    &.left
+      transform(rotate(270deg))
+    &::before
+      transform(rotate(30deg))
+    &::after
+      transform(rotate(-30deg))
+
+    &.top
+      background-color: rgba(0,0,0,0.99)
+    &.top::after
+      background-color: rgba(0,0,0,0.90)
+    &.left::before
+      background-color: rgba(0,0,0,0.80)
+    &.left
+      background-color: rgba(0,0,0,0.70)
+    &.left::after
+      background-color: rgba(0,0,0,0.60)
+    &.bottom::before
+      background-color: rgba(0,0,0,0.50)
+    &.bottom
+      background-color: rgba(0,0,0,0.40)
+    &.bottom::after
+      background-color: rgba(0,0,0,0.35)
+    &.right::before
+      background-color: rgba(0,0,0,0.30)
+    &.right
+      background-color: rgba(0,0,0,0.25)
+    &.right::after
+      background-color: rgba(0,0,0,0.20)
+    &.top::before
+      background-color: rgba(0,0,0,0.15)
+
+
+  &.white > span
+    &.top
+      background-color: rgba(255,255,255,0.99)
+    &.top::after
+      background-color: rgba(255,255,255,0.90)
+    &.left::before
+      background-color: rgba(255,255,255,0.80)
+    &.left
+      background-color: rgba(255,255,255,0.70)
+    &.left::after
+      background-color: rgba(255,255,255,0.60)
+    &.bottom::before
+      background-color: rgba(255,255,255,0.50)
+    &.bottom
+      background-color: rgba(255,255,255,0.40)
+    &.bottom::after
+      background-color: rgba(255,255,255,0.35)
+    &.right::before
+      background-color: rgba(255,255,255,0.30)
+    &.right
+      background-color: rgba(255,255,255,0.25)
+    &.right::after
+      background-color: rgba(255,255,255,0.20)
+    &.top::before
+      background-color: rgba(255,255,255,0.15)
+
+
+section.show, section.current, .notification
+  & .loading
+    -webkit-animation: rotatingLoader .5s  infinite linear
+    moz-animation:  rotatingLoader .5s  infinite linear
+
+
+@-webkit-keyframes rotatingLoader
+  0%
+    transform(rotate(0deg))
+  8.32%
+    transform(rotate(0deg))
+  8.33%
+    transform(rotate(30deg))
+  16.65%
+    transform(rotate(30deg))
+  16.66%
+    transform(rotate(60deg))
+  24.99%
+    transform(rotate(60deg))
+  25%
+    transform(rotate(90deg))
+  33.32%
+    transform(rotate(90deg))
+  33.33%
+    transform(rotate(120deg))
+  41.65%
+    transform(rotate(120deg))
+  41.66%
+    transform(rotate(150deg))
+  49.99%
+    transform(rotate(150deg))
+  50%
+    transform(rotate(180deg))
+  58.32%
+    transform(rotate(180deg))
+  58.33%
+    transform(rotate(210deg))
+  66.65%
+    transform(rotate(210deg))
+  66.66%
+    transform(rotate(240deg))
+  74.99%
+    transform(rotate(240deg))
+  75%
+    transform(rotate(270deg))
+  83.32%
+    transform(rotate(270deg))
+  83.33%
+    transform(rotate(300deg))
+  91.65%
+    transform(rotate(300deg))
+  91.66%
+    transform(rotate(330deg))
+  100%
+    transform(rotate(330deg))
+
+
+@-moz-keyframes rotatingLoader
+  0%
+    transform(rotate(0deg))
+  8.32%
+    transform(rotate(0deg))
+  8.33%
+    transform(rotate(30deg))
+  16.65%
+    transform(rotate(30deg))
+  16.66%
+    transform(rotate(60deg))
+  24.99%
+    transform(rotate(60deg))
+  25%
+    transform(rotate(90deg))
+  33.32%
+    transform(rotate(90deg))
+  33.33%
+    transform(rotate(120deg))
+  41.65%
+    transform(rotate(120deg))
+  41.66%
+    transform(rotate(150deg))
+  49.99%
+    transform(rotate(150deg))
+  50%
+    transform(rotate(180deg))
+  58.32%
+    transform(rotate(180deg))
+  58.33%
+    transform(rotate(210deg))
+  66.65%
+    transform(rotate(210deg))
+  66.66%
+    transform(rotate(240deg))
+  74.99%
+    transform(rotate(240deg))
+  75%
+    transform(rotate(270deg))
+  83.32%
+    transform(rotate(270deg))
+  83.33%
+    transform(rotate(300deg))
+  91.65%
+    transform(rotate(300deg))
+  91.66%
+    transform(rotate(330deg))
+  100%
+    transform(rotate(330deg))

src/stylesheets/Lungo.widgets.styl

@@ -0,0 +1,63 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Layout
+ * @class Widgets
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/constants.styl"
+@import "import/vendor.styl"
+
+.overthrow-enabled .overthrow
+  overflow: auto
+  -webkit-overflow-scrolling: touch
+
+.scroll
+  overflow-x: hidden
+  overflow-y: scroll
+  -webkit-overflow-scrolling: touch
+  -webkit-box-flex: 1
+
+  &.horizontal
+    overflow-x: scroll
+    overflow-y: hidden
+    white-space: nowrap
+  /* BUG (iOS) POSITION: relative childrens */
+  & > *
+    -webkit-transform: translate3d(0, 0, 0)
+
+:not(.icon)
+  &.left
+    float: left
+  &.right
+    float: right
+
+.hidden
+  display: none
+.indented > *
+  margin: 10px
+.margined
+  margin: 3%
+
+.wrapper
+  padding: 8px 8px
+
+.icon.small
+  font-size: 1.3em
+
+.framed
+  border: 2px solid #fff
+
+.round
+  border-radius( 4px )
+
+.bubble
+  display: inline-block
+  padding: 2px 3px
+  min-width: 12px
+  font-size: 0.75em
+  font-weight: bold
+  line-height: 13px
+  text-align: center

src/stylesheets/css/Lungo.theme.default.css

@@ -1,8 +1,3 @@
-@import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700");
-
-@import url("http://fonts.googleapis.com/css?family=Exo:200,400,700");
-
-@import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
 /**
  * Stylesheet
  *
@@ -11,6 +6,9 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
+@import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700");
+@import url("http://fonts.googleapis.com/css?family=Exo:200,400,700");
+@import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
 .app {
   background: #000;
   font-family: "Titillium Web", "Exo", "Open Sans Condensed", Helvetica, Arial, sans-serif;
@@ -18,14 +16,19 @@
 .theme,
 li.theme,
 a.theme {
-  background: #25aeeb;
+  background: THEME-light;
 }
 .theme:active,
 li.theme:active,
 a.theme:active {
   background: #2a95d3;
 }
-/* @group <header> & <footer> & <article> */
+[data-control="pull"] {
+  color: #666;
+  -webkit-text-shadow: 0 1px 0 #fff;
+  -moz-text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #fff;
+}
 section > header {
   background-color: #2a95d3;
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
@@ -34,37 +37,45 @@ section > header {
 }
 section > header .title {
   color: #fff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+  -webkit-text-shadow: 0 1px 0 rgba(0,0,0,0.2);
+  -moz-text-shadow: 0 1px 0 rgba(0,0,0,0.2);
+  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
 }
 section > header .subtitle {
   color: #fff;
   opacity: 0.7;
 }
 section > footer {
-  background-color: #222222;
-  -webkit-box-shadow: inset 0 3px 0 #333333;
-  -moz-box-shadow: inset 0 3px 0 #333333;
-  box-shadow: inset 0 3px 0 #333333;
+  background-color: THEME-dark;
+  -webkit-box-shadow: inset 0 3px 0 #333;
+  -moz-box-shadow: inset 0 3px 0 #333;
+  box-shadow: inset 0 3px 0 #333;
 }
-section > footer  > nav a {
+section > footer > nav a {
   -webkit-box-shadow: 1px 0 0 #151515;
   -moz-box-shadow: 1px 0 0 #151515;
   box-shadow: 1px 0 0 #151515;
 }
-section > footer  > nav a.current {
-  color: #ffffff;
-  background: #111111;
-  -webkit-box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3;
-  -moz-box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3;
-  box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3;
+section > footer > nav a.current {
+  color: #fff;
+  background: #111;
+  -webkit-box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2a95d3;
+  -moz-box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2a95d3;
+  box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2a95d3;
 }
 section > article,
 section > [data-control="pull"] {
   background: #f4f5f5;
 }
-[data-control="pull"] {
-  color: #666;
-  text-shadow: 0 1px 0 white;
+section.aside {
+  -webkit-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
+  box-shadow: -1px 0 0 rgba(0,0,0,0.2);
+}
+section.aside.right {
+  -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  box-shadow: 4px 0 8px rgba(0,0,0,0.5);
 }
 aside {
   color: #fff;
@@ -72,26 +83,28 @@ aside {
 }
 aside header,
 aside footer {
-  background: #111111;
+  background: #111;
+  -webkit-text-shadow: none;
+  -moz-text-shadow: none;
   text-shadow: none;
 }
 aside header {
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
+  -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
 }
 aside article {
   background: none;
 }
 aside nav a.current .icon {
-  color: white;
+  color: #fff;
 }
 aside nav a:not(.current) .icon {
-  color: #888888;
+  color: #888;
 }
 aside .list li {
   background: none;
-  border-bottom-color: #222222;
+  border-bottom-color: #222 !important;
 }
 aside .list li.current {
   background: #2a95d3;
@@ -105,20 +118,8 @@ aside .list li.current .icon {
 aside .list li strong,
 aside .list li small,
 aside .list li .icon {
-  color: #888888;
+  color: #888;
 }
-section.aside {
-  -webkit-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
-  -moz-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
-  box-shadow: -1px 0 0 rgba(0,0,0,0.2);
-}
-section.aside.right {
-  -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
-  -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
-  box-shadow: 4px 0 8px rgba(0,0,0,0.5);
-}
-/* @end */
-/* @group <nav> */
 header nav a {
   color: #fff;
 }
@@ -133,263 +134,380 @@ header nav.box.right a {
   box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
 }
 header nav.box a:active {
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0,0,0,0.1);
 }
 header nav.button a {
-  border-radius: 1px;
-  background-image: -webkit-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
-  background-image: -moz-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
-  background-image: -ms-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
-  background-image: -o-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
-  background-image: linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.5);
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0,0,0,0.5);
+  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0,0,0,0.5);
+  box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0,0,0,0.5);
 }
 header nav.button a:active {
-  background: rgba(0, 0, 0, 0.2);
+  background: rgba(0,0,0,0.2);
 }
 section > nav.groupbar {
-  background-color: #222222;
+  background-color: THEME-dark;
 }
-section > nav.groupbar  > a.current {
+section > nav.groupbar > a.current {
   -webkit-box-shadow: inset 0 -3px 0 #2a95d3;
   -moz-box-shadow: inset 0 -3px 0 #2a95d3;
   box-shadow: inset 0 -3px 0 #2a95d3;
 }
 footer > nav > a,
 nav.groupbar > a {
-  color: #888888;
+  color: #888;
 }
 footer > nav > a.current,
 nav.groupbar > a.current {
-  color: #ffffff;
+  color: #fff;
 }
-/* @end */
-/* @group <aside> */
-/* @group .list */
 .list li {
   background: #fff;
-  border-bottom: inset 1px #dddddd;
+  border-bottom: inset 1px #ddd;
 }
 .list li,
 .list li a {
   color: #2a2a2a;
 }
-.list li.dark {
-  background: #444444;
+.list li.dark,
+.list li a.dark {
+  background: #444;
 }
 .list li.dark,
-.list li.dark a {
+.list li a.dark,
+.list li.dark a,
+.list li a.dark a {
   color: #fff;
 }
 .list li.selectable:active,
-.list li.theme {
+.list li a.selectable:active,
+.list li.theme,
+.list li a.theme {
   background: #25aeeb;
 }
 .list li.selectable:active,
+.list li a.selectable:active,
 .list li.theme,
+.list li a.theme,
 .list li.selectable:active a,
-.list li.theme a {
+.list li a.selectable:active a,
+.list li.theme a,
+.list li a.theme a {
   color: #fff;
 }
-.list li.light {
-  background: #dddddd;
+.list li.light,
+.list li a.light {
+  background: #ddd;
+  -webkit-text-shadow: 0 1px 0 #eee;
+  -moz-text-shadow: 0 1px 0 #eee;
   text-shadow: 0 1px 0 #eee;
 }
 .list li.light,
-.list li.light a {
-  color: #888888;
+.list li a.light,
+.list li.light a,
+.list li a.light a {
+  color: #888;
 }
-.list li.anchor {
-  background: #222222;
+.list li.anchor,
+.list li a.anchor {
+  background: #222;
   border-bottom: none;
 }
 .list li.anchor,
-.list li.anchor a {
+.list li a.anchor,
+.list li.anchor a,
+.list li a.anchor a {
   color: #fff !important;
 }
 .list li small,
-.list li .right:not(.bubble) {
+.list li a small,
+.list li .right:not(.bubble),
+.list li a .right:not(.bubble) {
   opacity: 0.8;
 }
 .list:not(.indented) li.dark,
 .list:not(.indented) li.theme,
 .list:not(.indented) li.light {
-  border-bottom-color: rgba(0, 0, 0, 0.1);
+  border-bottom-color: rgba(0,0,0,0.1);
 }
-/* @end */
-/* @group widgets */
 .splash {
-  background: #222222;
+  background: THEME-dark;
+  color: #fff;
+  -webkit-text-shadow: 0 1px 0px rgba(0,0,0,0.2);
+  -moz-text-shadow: 0 1px 0px rgba(0,0,0,0.2);
+  text-shadow: 0 1px 0px rgba(0,0,0,0.2);
+}
+.button,
+button {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  font-weight: bold;
+  -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
+  -moz-text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
   color: #fff;
-  text-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
-}
-/* @group .button */
-a.button {
   -webkit-border-radius: 1px;
   -moz-border-radius: 1px;
   border-radius: 1px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-  -webkit-box-shadow: inset 0 2px 0 rgba(255,255,255, 0.2);
-  -moz-box-shadow: 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;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
-}
-a.button:active {
-  -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
-  -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
-  box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
-}
-/* @end */
-/* @group <form> */
-label {
+  -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);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  border: solid 1px rgba(0,0,0,0.1);
+}
+.button:active,
+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);
+  box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  border-color: none;
+}
+form label,
+.form label {
   color: #999;
 }
-input:not([type=range]),
-textarea,
-select {
-  border: 1px solid #d0d4c6;
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
+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 textarea {
+  background-color: #fff;
+  color: rgba(0,0,0,0.75);
+  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);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-  color: #858585;
-  font-family: Helvetica, Arial, sans-serif;
-  background: #fff;
-}
-input:not([type=range]):focus,
-textarea:focus,
-select:focus {
-  color: #484a49;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+form input[type="text"].error,
+.form input[type="text"].error,
+form input[type="password"].error,
+.form input[type="password"].error,
+form input[type="date"].error,
+.form input[type="date"].error,
+form input[type="datetime"].error,
+.form input[type="datetime"].error,
+form input[type="email"].error,
+.form input[type="email"].error,
+form input[type="number"].error,
+.form input[type="number"].error,
+form input[type="search"].error,
+.form input[type="search"].error,
+form input[type="tel"].error,
+.form input[type="tel"].error,
+form input[type="time"].error,
+.form input[type="time"].error,
+form input[type="url"].error,
+.form input[type="url"].error,
+form select.error,
+.form select.error,
+form textarea.error,
+.form textarea.error,
+form input[type="text"]:required,
+.form input[type="text"]:required,
+form input[type="password"]:required,
+.form input[type="password"]:required,
+form input[type="date"]:required,
+.form input[type="date"]:required,
+form input[type="datetime"]:required,
+.form input[type="datetime"]:required,
+form input[type="email"]:required,
+.form input[type="email"]:required,
+form input[type="number"]:required,
+.form input[type="number"]:required,
+form input[type="search"]:required,
+.form input[type="search"]:required,
+form input[type="tel"]:required,
+.form input[type="tel"]:required,
+form input[type="time"]:required,
+.form input[type="time"]:required,
+form input[type="url"]:required,
+.form input[type="url"]:required,
+form select:required,
+.form select:required,
+form textarea:required,
+.form textarea:required {
+  border-color: color_alert;
+  color: color_alert;
+  background-color: rgba(198,15,19,0.1);
+}
+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 {
+  background: #fafafa;
   border-color: #2a95d3;
-  -webkit-box-shadow: 0 0 1px #25aeeb;
-  -moz-box-shadow: 0 0 1px #25aeeb;
-  box-shadow: 0 0 1px #25aeeb;
-}
-input:not([type=range])[disabled],
-textarea[disabled],
-select[disabled] {
-  background: #ddd;
-  border-color: #999;
+  color: rgba(0,0,0,0.75);
+}
+form input[type="text"][disabled],
+.form input[type="text"][disabled],
+form input[type="password"][disabled],
+.form input[type="password"][disabled],
+form input[type="date"][disabled],
+.form input[type="date"][disabled],
+form input[type="datetime"][disabled],
+.form input[type="datetime"][disabled],
+form input[type="email"][disabled],
+.form input[type="email"][disabled],
+form input[type="number"][disabled],
+.form input[type="number"][disabled],
+form input[type="search"][disabled],
+.form input[type="search"][disabled],
+form input[type="tel"][disabled],
+.form input[type="tel"][disabled],
+form input[type="time"][disabled],
+.form input[type="time"][disabled],
+form input[type="url"][disabled],
+.form input[type="url"][disabled],
+form select[disabled],
+.form select[disabled],
+form textarea[disabled],
+.form textarea[disabled] {
+  background: #eee;
+  border-color: #aaa;
   color: #999;
 }
-.select:after {
+form .select:after,
+.form .select:after {
   background: #d0d4c6;
-  color: white;
+  color: #fff;
   border-top-right-radius: 1px;
   border-bottom-right-radius: 1px;
 }
-/* @group range */
-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);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+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)';
+  box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   -webkit-border-radius: 1px;
   -moz-border-radius: 1px;
   border-radius: 1px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
 }
-input[type=range]:not(.checkbox) {
+form input[type=range]:not(.checkbox),
+.form input[type=range]:not(.checkbox) {
   background-color: #c7c7c7;
 }
-input[type=range]:not(.checkbox):active {
+form input[type=range]:not(.checkbox):active,
+.form input[type=range]:not(.checkbox):active {
   background-color: #25aeeb;
 }
-input[type=range].checkbox {
-  background-color: #aaaaaa;
-  color: rgba(255, 255, 255, 0.6);
+form input[type=range].checkbox,
+.form input[type=range].checkbox {
+  background-color: #aaa;
+  color: rgba(255,255,255,0.6);
 }
-input[type=range].checkbox.active {
+form input[type=range].checkbox.active,
+.form input[type=range].checkbox.active {
   background-color: #25aeeb;
 }
-input[type=range]::-webkit-slider-thumb {
-  border-radius: 1px;
+form input[type=range]::-webkit-slider-thumb,
+.form input[type=range]::-webkit-slider-thumb {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
   -webkit-box-shadow: 1px 0 rgba(0,0,0,0.2), -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.2), 0 -1px rgba(0,0,0,0.2);
   -moz-box-shadow: 1px 0 rgba(0,0,0,0.2), -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.2), 0 -1px rgba(0,0,0,0.2);
   box-shadow: 1px 0 rgba(0,0,0,0.2), -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.2), 0 -1px rgba(0,0,0,0.2);
   background: #fff;
 }
-input[type=range]::-webkit-slider-thumb::after {
+form input[type=range]::-webkit-slider-thumb::after,
+.form input[type=range]::-webkit-slider-thumb::after {
   background: #ddd;
 }
-/* @end */
-/* @group .progress */
-.progress .labels {
+form .progress .labels,
+.form .progress .labels {
   font-size: 12px;
   font-weight: bold;
   line-height: 18px;
   color: #858585;
 }
-.progress .bar {
-  -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);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+form .progress .bar,
+.form .progress .bar {
   background: #c7c7c7;
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
 }
-.progress .bar .value {
-  background-color: #25aeeb;
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
+form .progress .bar .value,
+.form .progress .bar .value {
+  background-color: THEME-light;
 }
-.progress .bar .value .label {
+form .progress .bar .value .label,
+.form .progress .bar .value .label {
   float: right;
   margin-right: 3px;
   font-weight: bold;
-  color: rgba(0, 0, 0, 0.6);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+  color: rgba(0,0,0,0.6);
+  -webkit-text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
+  -moz-text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
+  text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
   font-size: 12px;
 }
-/* @end */
-/* @group .bubble */
 .bubble {
   color: #fff;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
 }
 .bubble.count {
   background: #2a95d3;
 }
-header .count {
-  background: #222222 !important;
+.bubble header .count {
+  background: THEME-dark !important;
 }
-footer .bubble {
+.bubble footer .bubble {
   -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);
   box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
 }
-article .list .bubble {
+.bubble article .list .bubble {
   -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
   -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
   box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
 }
-aside .list .bubble {
-  background: rgba(0, 0, 0, 0.25);
+.bubble aside .list .bubble {
+  background: rgba(0,0,0,0.25);
 }
-/* @end */
-/* @group .bubble */
 .notification {
   color: #fff;
 }
@@ -397,22 +515,35 @@ aside .list .bubble {
   background: #333;
 }
 .notification .window.notify {
-  text-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25);
-  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25);
-}
+  -webkit-text-shadow: 0 1px 0px rgba(0,0,0,0.1);
+  -moz-text-shadow: 0 1px 0px rgba(0,0,0,0.1);
+  text-shadow: 0 1px 0px rgba(0,0,0,0.1);
+}
+.notification .window.notify .box-shadow( inset 0 1px 0 rgba(255,
+.notification .window.notify 255,
+.notification .window.notify 255,
+.notification .window.notify 0.2),
+.notification .window.notify inset 0-1px0rgba(0,
+.notification .window.notify 0,
+.notification .window.notify 0,
+.notification .window.notify 0.2),
+.notification .window.notify 0px1px2pxrgba(0,
+.notification .window.notify 0,
+.notification .window.notify 0,
+.notification .window.notify 0.25) ),
 .notification .window.notify.error {
-  background: #e33100;
+  background: NOTIFICATION-error;
 }
 .notification .window.notify.alert {
-  background: #ffb515;
+  background: NOTIFICATION-alert;
 }
 .notification .window.notify.success {
-  background: #009600;
+  background: NOTIFICATION-success;
 }
 .notification .window.url .close {
   background: #000;
   border: solid 2px #fff;
-  box-shadow: 0 0 4px black;
+  -webkit-box-shadow: 0 0 4px #000;
+  -moz-box-shadow: 0 0 4px #000;
+  box-shadow: 0 0 4px #000;
 }

src/stylesheets/css/Lungo.widgets.css

@@ -1,13 +1,11 @@
 /**
  * Stylesheet
  *
- * @namespace Lungo
+ * @namespace Lungo.Layout
  * @class Widgets
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
 .overthrow-enabled .overthrow {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -17,20 +15,14 @@
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   -webkit-box-flex: 1;
+/* BUG (iOS) POSITION: relative childrens */
 }
 .scroll.horizontal {
   overflow-x: scroll;
   overflow-y: hidden;
   white-space: nowrap;
-  /*
-        & > * {
-            min-width: 4096px;
-            & > * { float: left; }
-        }
-        */
-
 }
-.scroll  > * {
+.scroll > * {
   -webkit-transform: translate3d(0, 0, 0);
 }
 :not(.icon).left {
@@ -60,10 +52,9 @@
 .round {
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
   border-radius: 4px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
 }
 .bubble {
   display: inline-block;

src/stylesheets/css/Lungo.widgets.loading.css

@@ -6,8 +6,6 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* DIMENSIONS */
-/* COLORS */
 .loading {
   position: relative;
   left: 50%;
@@ -26,148 +24,152 @@
   -moz-animation: none;
   display: none;
 }
-.loading  > span {
+.loading > span {
   left: 50%;
   margin-left: -0.05em;
 }
-.loading  > span,
-.loading  > span::before,
-.loading  > span::after {
+.loading > span,
+.loading > span::before,
+.loading > span::after {
   display: block;
   position: absolute;
-  width: .1em;
-  height: .25em;
+  width: 0.1em;
+  height: 0.25em;
   top: 0;
   -webkit-transform-origin: 0.05em 0.5em;
   -moz-transform-origin: 0.05em 0.5em;
   -ms-transform-origin: 0.05em 0.5em;
   -o-transform-origin: 0.05em 0.5em;
   transform-origin: 0.05em 0.5em;
-  border-radius: .1em;
-}
-.loading  > span::before,
-.loading  > span::after {
+  -webkit-border-radius: 0.1em;
+  -moz-border-radius: 0.1em;
+  -ms-border-radius: 0.1em;
+  -o-border-radius: 0.1em;
+  border-radius: 0.1em;
+}
+.loading > span::before,
+.loading > span::after {
   content: " ";
 }
-.loading  > span.top {
+.loading > span.top {
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
-.loading  > span.right {
+.loading > span.right {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
-.loading  > span.bottom {
+.loading > span.bottom {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }
-.loading  > span.left {
+.loading > span.left {
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   transform: rotate(270deg);
 }
-.loading  > span::before {
+.loading > span::before {
   -webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
 }
-.loading  > span::after {
+.loading > span::after {
   -webkit-transform: rotate(-30deg);
   -moz-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
 }
-.loading  > span.top {
-  background-color: rgba(0, 0, 0, 0.99);
+.loading > span.top {
+  background-color: rgba(0,0,0,0.99);
 }
-.loading  > span.top::after {
-  background-color: rgba(0, 0, 0, 0.9);
+.loading > span.top::after {
+  background-color: rgba(0,0,0,0.9);
 }
-.loading  > span.left::before {
-  background-color: rgba(0, 0, 0, 0.8);
+.loading > span.left::before {
+  background-color: rgba(0,0,0,0.8);
 }
-.loading  > span.left {
-  background-color: rgba(0, 0, 0, 0.7);
+.loading > span.left {
+  background-color: rgba(0,0,0,0.7);
 }
-.loading  > span.left::after {
-  background-color: rgba(0, 0, 0, 0.6);
+.loading > span.left::after {
+  background-color: rgba(0,0,0,0.6);
 }
-.loading  > span.bottom::before {
-  background-color: rgba(0, 0, 0, 0.5);
+.loading > span.bottom::before {
+  background-color: rgba(0,0,0,0.5);
 }
-.loading  > span.bottom {
-  background-color: rgba(0, 0, 0, 0.4);
+.loading > span.bottom {
+  background-color: rgba(0,0,0,0.4);
 }
-.loading  > span.bottom::after {
-  background-color: rgba(0, 0, 0, 0.35);
+.loading > span.bottom::after {
+  background-color: rgba(0,0,0,0.35);
 }
-.loading  > span.right::before {
-  background-color: rgba(0, 0, 0, 0.3);
+.loading > span.right::before {
+  background-color: rgba(0,0,0,0.3);
 }
-.loading  > span.right {
-  background-color: rgba(0, 0, 0, 0.25);
+.loading > span.right {
+  background-color: rgba(0,0,0,0.25);
 }
-.loading  > span.right::after {
-  background-color: rgba(0, 0, 0, 0.2);
+.loading > span.right::after {
+  background-color: rgba(0,0,0,0.2);
 }
-.loading  > span.top::before {
-  background-color: rgba(0, 0, 0, 0.15);
+.loading > span.top::before {
+  background-color: rgba(0,0,0,0.15);
 }
 .loading.white > span.top {
-  background-color: rgba(255, 255, 255, 0.99);
+  background-color: rgba(255,255,255,0.99);
 }
 .loading.white > span.top::after {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255,255,255,0.9);
 }
 .loading.white > span.left::before {
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255,255,255,0.8);
 }
 .loading.white > span.left {
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255,255,255,0.7);
 }
 .loading.white > span.left::after {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255,255,255,0.6);
 }
 .loading.white > span.bottom::before {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255,255,255,0.5);
 }
 .loading.white > span.bottom {
-  background-color: rgba(255, 255, 255, 0.4);
+  background-color: rgba(255,255,255,0.4);
 }
 .loading.white > span.bottom::after {
-  background-color: rgba(255, 255, 255, 0.35);
+  background-color: rgba(255,255,255,0.35);
 }
 .loading.white > span.right::before {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255,255,255,0.3);
 }
 .loading.white > span.right {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgba(255,255,255,0.25);
 }
 .loading.white > span.right::after {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255,255,255,0.2);
 }
 .loading.white > span.top::before {
-  background-color: rgba(255, 255, 255, 0.15);
+  background-color: rgba(255,255,255,0.15);
 }
 section.show .loading,
 section.current .loading,
 .notification .loading {
-  -webkit-animation: rotatingLoader .5s  infinite linear;
-  -moz-animation: rotatingLoader .5s  infinite linear;
+  -webkit-animation: rotatingLoader 0.5s infinite linear;
+  moz-animation: rotatingLoader 0.5s infinite linear;
 }
 @-webkit-keyframes rotatingLoader {
   0% {
@@ -177,6 +179,7 @@ section.current .loading,
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
+
   8.32% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -184,6 +187,7 @@ section.current .loading,
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
+
   8.33% {
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
@@ -191,6 +195,7 @@ section.current .loading,
     -o-transform: rotate(30deg);
     transform: rotate(30deg);
   }
+
   16.65% {
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
@@ -198,6 +203,7 @@ section.current .loading,
     -o-transform: rotate(30deg);
     transform: rotate(30deg);
   }
+
   16.66% {
     -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
@@ -205,6 +211,7 @@ section.current .loading,
     -o-transform: rotate(60deg);
     transform: rotate(60deg);
   }
+
   24.99% {
     -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
@@ -212,6 +219,7 @@ section.current .loading,
     -o-transform: rotate(60deg);
     transform: rotate(60deg);
   }
+
   25% {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
@@ -219,6 +227,7 @@ section.current .loading,
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
   }
+
   33.32% {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
@@ -226,6 +235,7 @@ section.current .loading,
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
   }
+
   33.33% {
     -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
@@ -233,6 +243,7 @@ section.current .loading,
     -o-transform: rotate(120deg);
     transform: rotate(120deg);
   }
+
   41.65% {
     -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
@@ -240,6 +251,7 @@ section.current .loading,
     -o-transform: rotate(120deg);
     transform: rotate(120deg);
   }
+
   41.66% {
     -webkit-transform: rotate(150deg);
     -moz-transform: rotate(150deg);
@@ -247,6 +259,7 @@ section.current .loading,
     -o-transform: rotate(150deg);
     transform: rotate(150deg);
   }
+
   49.99% {
     -webkit-transform: rotate(150deg);
     -moz-transform: rotate(150deg);
@@ -254,6 +267,7 @@ section.current .loading,
     -o-transform: rotate(150deg);
     transform: rotate(150deg);
   }
+
   50% {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
@@ -261,6 +275,7 @@ section.current .loading,
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }
+
   58.32% {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
@@ -268,6 +283,7 @@ section.current .loading,
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }
+
   58.33% {
     -webkit-transform: rotate(210deg);
     -moz-transform: rotate(210deg);
@@ -275,6 +291,7 @@ section.current .loading,
     -o-transform: rotate(210deg);
     transform: rotate(210deg);
   }
+
   66.65% {
     -webkit-transform: rotate(210deg);
     -moz-transform: rotate(210deg);
@@ -282,6 +299,7 @@ section.current .loading,
     -o-transform: rotate(210deg);
     transform: rotate(210deg);
   }
+
   66.66% {
     -webkit-transform: rotate(240deg);
     -moz-transform: rotate(240deg);
@@ -289,6 +307,7 @@ section.current .loading,
     -o-transform: rotate(240deg);
     transform: rotate(240deg);
   }
+
   74.99% {
     -webkit-transform: rotate(240deg);
     -moz-transform: rotate(240deg);
@@ -296,6 +315,7 @@ section.current .loading,
     -o-transform: rotate(240deg);
     transform: rotate(240deg);
   }
+
   75% {
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
@@ -303,6 +323,7 @@ section.current .loading,
     -o-transform: rotate(270deg);
     transform: rotate(270deg);
   }
+
   83.32% {
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
@@ -310,6 +331,7 @@ section.current .loading,
     -o-transform: rotate(270deg);
     transform: rotate(270deg);
   }
+
   83.33% {
     -webkit-transform: rotate(300deg);
     -moz-transform: rotate(300deg);
@@ -317,6 +339,7 @@ section.current .loading,
     -o-transform: rotate(300deg);
     transform: rotate(300deg);
   }
+
   91.65% {
     -webkit-transform: rotate(300deg);
     -moz-transform: rotate(300deg);
@@ -324,6 +347,7 @@ section.current .loading,
     -o-transform: rotate(300deg);
     transform: rotate(300deg);
   }
+
   91.66% {
     -webkit-transform: rotate(330deg);
     -moz-transform: rotate(330deg);
@@ -331,6 +355,7 @@ section.current .loading,
     -o-transform: rotate(330deg);
     transform: rotate(330deg);
   }
+
   100% {
     -webkit-transform: rotate(330deg);
     -moz-transform: rotate(330deg);
@@ -347,6 +372,7 @@ section.current .loading,
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
+
   8.32% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -354,6 +380,7 @@ section.current .loading,
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
+
   8.33% {
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
@@ -361,6 +388,7 @@ section.current .loading,
     -o-transform: rotate(30deg);
     transform: rotate(30deg);
   }
+
   16.65% {
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
@@ -368,6 +396,7 @@ section.current .loading,
     -o-transform: rotate(30deg);
     transform: rotate(30deg);
   }
+
   16.66% {
     -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
@@ -375,6 +404,7 @@ section.current .loading,
     -o-transform: rotate(60deg);
     transform: rotate(60deg);
   }
+
   24.99% {
     -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
@@ -382,6 +412,7 @@ section.current .loading,
     -o-transform: rotate(60deg);
     transform: rotate(60deg);
   }
+
   25% {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
@@ -389,6 +420,7 @@ section.current .loading,
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
   }
+
   33.32% {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
@@ -396,6 +428,7 @@ section.current .loading,
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
   }
+
   33.33% {
     -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
@@ -403,6 +436,7 @@ section.current .loading,
     -o-transform: rotate(120deg);
     transform: rotate(120deg);
   }
+
   41.65% {
     -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
@@ -410,6 +444,7 @@ section.current .loading,
     -o-transform: rotate(120deg);
     transform: rotate(120deg);
   }
+
   41.66% {
     -webkit-transform: rotate(150deg);
     -moz-transform: rotate(150deg);
@@ -417,6 +452,7 @@ section.current .loading,
     -o-transform: rotate(150deg);
     transform: rotate(150deg);
   }
+
   49.99% {
     -webkit-transform: rotate(150deg);
     -moz-transform: rotate(150deg);
@@ -424,6 +460,7 @@ section.current .loading,
     -o-transform: rotate(150deg);
     transform: rotate(150deg);
   }
+
   50% {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
@@ -431,6 +468,7 @@ section.current .loading,
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }
+
   58.32% {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
@@ -438,6 +476,7 @@ section.current .loading,
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }
+
   58.33% {
     -webkit-transform: rotate(210deg);
     -moz-transform: rotate(210deg);
@@ -445,6 +484,7 @@ section.current .loading,
     -o-transform: rotate(210deg);
     transform: rotate(210deg);
   }
+
   66.65% {
     -webkit-transform: rotate(210deg);
     -moz-transform: rotate(210deg);
@@ -452,6 +492,7 @@ section.current .loading,
     -o-transform: rotate(210deg);
     transform: rotate(210deg);
   }
+
   66.66% {
     -webkit-transform: rotate(240deg);
     -moz-transform: rotate(240deg);
@@ -459,6 +500,7 @@ section.current .loading,
     -o-transform: rotate(240deg);
     transform: rotate(240deg);
   }
+
   74.99% {
     -webkit-transform: rotate(240deg);
     -moz-transform: rotate(240deg);
@@ -466,6 +508,7 @@ section.current .loading,
     -o-transform: rotate(240deg);
     transform: rotate(240deg);
   }
+
   75% {
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
@@ -473,6 +516,7 @@ section.current .loading,
     -o-transform: rotate(270deg);
     transform: rotate(270deg);
   }
+
   83.32% {
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
@@ -480,6 +524,7 @@ section.current .loading,
     -o-transform: rotate(270deg);
     transform: rotate(270deg);
   }
+
   83.33% {
     -webkit-transform: rotate(300deg);
     -moz-transform: rotate(300deg);
@@ -487,6 +532,7 @@ section.current .loading,
     -o-transform: rotate(300deg);
     transform: rotate(300deg);
   }
+
   91.65% {
     -webkit-transform: rotate(300deg);
     -moz-transform: rotate(300deg);
@@ -494,6 +540,7 @@ section.current .loading,
     -o-transform: rotate(300deg);
     transform: rotate(300deg);
   }
+
   91.66% {
     -webkit-transform: rotate(330deg);
     -moz-transform: rotate(330deg);
@@ -501,6 +548,7 @@ section.current .loading,
     -o-transform: rotate(330deg);
     transform: rotate(330deg);
   }
+
   100% {
     -webkit-transform: rotate(330deg);
     -moz-transform: rotate(330deg);

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

@@ -2,7 +2,7 @@
  * Stylesheet
  *
  * @namespace Lungo.Widgets
- * @class Pull
+ * @class Notification
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
@@ -15,16 +15,16 @@
   display: none;
 }
 .notification.modal {
-  background-color: ;
+  background-color: rgba(0,0,0,0.5);
 }
 .notification .window {
   position: relative;
   opacity: 0;
-  -webkit-transition: all  easeOutSine;
-  -moz-transition: all  easeOutSine;
-  -ms-transition: all  easeOutSine;
-  -o-transition: all  easeOutSine;
-  transition: all  easeOutSine;
+  -webkit-transition: all 200ms easeOutSine;
+  -moz-transition: all 200ms easeOutSine;
+  -ms-transition: all 200ms easeOutSine;
+  -o-transition: all 200ms easeOutSine;
+  transition: all 200ms easeOutSine;
 }
 .notification .window.show {
   opacity: 1;
@@ -39,5 +39,114 @@
 .notification .window:not(.special) {
   left: 50%;
   top: 50%;
-  width: ;
+  width: 104px;
+  margin: -MODAL_SIZE_middle auto auto -MODAL_SIZE_middle;
+  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: 4em;
+}
+.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: 2em;
+  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;
+  -webkit-border-radius: 14px;
+  -moz-border-radius: 14px;
+  -ms-border-radius: 14px;
+  -o-border-radius: 14px;
+  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;
+  }
 }

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()
@@ -54,3 +54,6 @@ transition-timing-function()
 
 transform()
   vendor('transform', arguments)
+
+transform-origin()
+  vendor('transform-origin', arguments)

src/stylesheets/lungo.widgets.notification.styl

@@ -2,7 +2,7 @@
  * Stylesheet
  *
  * @namespace Lungo.Widgets
- * @class Pull
+ * @class Notification
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
@@ -10,12 +10,11 @@
 @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
+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
@@ -26,16 +25,16 @@
   display: none
 
   &.modal
-    background-color: @notification_opacity
+    background-color: OPACITY
 
   & .window
     position: relative
     opacity: 0
-    transition( all @keyframe DEFAULT_TRANSITION )
+    transition( all KEYFRAME DEFAULT_TRANSITION )
 
     &.show
       opacity: 1
-      Transition-delay( @keyframe )
+      Transition-delay( KEYFRAME )
 
     & strong, small
       display: block
@@ -47,10 +46,10 @@
     &:not(.special)
       left: 50%
       top: 50%
-      width: @modal_size
-      margin: -@modal_size_middle auto auto -@modal_size_middle
+      width: MODAL_SIZE
+      margin: -MODAL_SIZE_middle auto auto -MODAL_SIZE_middle
       padding: 8px
-      background-color: @modal_opacity
+      background-color: MODAL_OPACITY
       text-align: center
       transform( scale(0.8) )
 
@@ -69,69 +68,61 @@
         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) )
 
-//         &.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
+      & .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
+
+
+  & .window.working span
+    -webkit-animation: notification-working 1s infinite
+
+@-webkit-keyframes notification-working
+    0%
+      opacity: 1
+    50%
+      opacity: 0
+    100%
+      opacity: 1