Reorder stylesheets

example/components/lungo.brownie

@@ -1 +1 @@
-Subproject commit 72e2217c1b7894907ed507a462c6f9d0ac7c0fdb
+Subproject commit e9b011ec211cf237e90c3327ce57148901b10af9

example/components/lungo.theme/__init.styl

@@ -0,0 +1,33 @@
+@import "../CSSmethods/vendor.styl"
+
+/* -------------------------- THEME -------------------------- */
+CONTENT         = #f5f5f5
+COLOR           = #333
+COLOR_secondary = #95a5a6
+COLOR_cancel    = #e74c3c
+COLOR_success   = #2ecc71
+
+
+DARK            = #222
+DARK_light      = lighten(DARK, 25%)
+DARK_dark       = darken(DARK, 15%)
+DARK_darkest    = darken(DARK, 30%)
+LIST_color      = lighten(COLOR, 5%)
+LIST_color_2nd  = lighten(COLOR, 35%)
+LIST_border     = lighten(COLOR, 90%)
+NAV_LINK        = #888
+NAV_LINK_ACTIVE = #FFF
+THEME           = #0093D5
+THEME_light     = lighten(THEME, 15%)
+THEME_dark      = darken(THEME, 15%)
+
+
+BORDER_radius   = 2px
+
+/* -------------------------- FORM -------------------------- */
+FORM_color      = darken(#e5e5e5, 5%)
+// FORM_color = #dce4ec
+
+
+FORM_border        = 2px
+FORM_border_radius = 4px

example/components/lungo.theme/theme.base.styl

@@ -0,0 +1,25 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Base
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
+@import "__init.styl"
+
+body
+  background-color: #000
+  color: COLOR
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-weight: 400
+  font-size: 13px
+  line-height: 1.3em
+  letter-spacing: -0.05em
+
+  & .theme
+    background-color: THEME-light
+    &:active
+      background-color: THEME

example/components/lungo.theme/theme.layout.list.styl

@@ -0,0 +1,66 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+.list
+  section & li
+    background: #fff
+    &:not(.anchor)
+      border-bottom: inset 1px LIST_border
+    &.secondary
+      box-shadow: inset 4px 0px 0px COLOR_secondary
+    &.accept
+      box-shadow: inset 4px 0px 0px COLOR_success
+    &.cancel
+      box-shadow: inset 4px 0px 0px COLOR_cancel
+    &.arrow::after
+      border-color: COLOR_secondary
+
+    &, a
+      color: LIST_color
+      &.anchor
+        background: DARK
+      &.dark
+        background: DARK_light
+      &.selectable:active, &.theme, &.active
+        background: THEME_light
+      &.light
+        background:  LIST_border
+        color: LIST_color_2nd
+      &.dark, &.selectable:active, &.theme, &.anchor
+        &, small, & .right:not(.tag), strong, .arrow::after
+          color: #fff
+        &.arrow::after
+          border-color: #fff
+      & small, & .right:not(.tag)
+        color: LIST_color_2nd
+
+  &:not(.indented) li
+    &.dark, &.theme, &.light
+      border-bottom-color: rgba(0,0,0,0.1)
+
+  aside & li
+    background: none
+    &:not(:first-child)
+      border-top: solid 1px  DARK
+    &:not(:last-child)
+      border-bottom: solid 1px DARKEST
+    &:active
+      background: DARK_darkest
+    &.active
+      background: THEME
+    &.active, &:active
+      border-color: transparent
+      & strong, & small, & .icon
+        color: #fff
+    & strong
+      color: #999
+    & small, .icon
+      color: #666

example/components/lungo.theme/theme.layout.nav.styl

@@ -0,0 +1,64 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+nav
+  section > header > &
+    & a:not(.button)
+      color: darken(THEME, 35%)
+      text-shadow 0 1px 0 lighten(THEME, 25%)
+      &:active
+        color: darken(THEME, 50%)
+
+  section > &[data-control=groupbar] > a.active
+    box-shadow inset 0 -3px 0 THEME
+
+  section > footer > & > a, &[data-control=groupbar] > a
+    color: NAV_LINK
+    &.active
+      color: NAV_LINK_ACTIVE
+
+  section > footer > & > a
+    box-shadow 1px 0 0 DARK_dark
+    &.active
+      color:  NAV_LINK_ACTIVE
+      background-color: DARK_dark
+      box-shadow inset 0 3px 0 THEME
+
+  aside & a
+    color: lighten(DARK, 20%)
+    &:active
+      color: lighten(DARK, 50%)
+
+  &[data-control=menu]
+    COLOR = DARK
+    background: COLOR
+    box-shadow 0 2px 0 rgba(0,0,0,0.15)
+    &.icons
+      background: rgba(0,0,0,0.8)
+      & > a
+        color: lighten(COLOR, 35%)
+        &:active > .icon
+          text-shadow: 0 0 32px #fff
+        & > .icon
+          color: #fff
+    &:not(.icons)
+      & > a
+        color: #fff
+        text-shadow 0 1px 0 #111
+        border-bottom: 1px solid darken(COLOR, 40%)
+        border-top: 1px solid lighten(COLOR, 5%)
+        &:active
+          background: #111
+          border-color: transparent
+        & > .icon
+          color: lighten(COLOR, 25%)
+    & > a
+      font-weight: 700

example/components/lungo.theme/theme.layout.styl

@@ -0,0 +1,41 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+body > section
+  background-color: DARK
+  & > header
+    background-color: THEME
+    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
+    color: #fff
+    border-radius (BORDER_radius * 2.5) (BORDER_radius * 2.5) 0 0
+
+  & > footer, & nav[data-control=groupbar]
+    background-color: DARK
+    box-shadow inset 0 3px 0 DARK_dark
+  & > article, & > [data-control="pull"]
+    background-color: CONTENT
+    &.splash
+      background: THEME
+      color: #fff
+  &.aside
+    box-shadow -1px 0 2px rgba(0,0,0,0.2)
+    &.right
+      box-shadow 1px 0 2px rgba(0,0,0,0.2)
+
+DARKEST = darken(DARK_darkest, 15%)
+body > aside
+  background-color: DARK_dark
+  color: #fff
+  & > header, > footer
+    background-color: DARK_darkest
+  & > header
+    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 DARK, inset 0 -1px 0 DARKEST
+

example/components/lungo.theme/theme.widget.button.styl

@@ -0,0 +1,48 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+header
+  & .button, button
+    color: #fff
+    background-color: THEME_dark
+    box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
+    border-radius (BORDER_radius * 2)
+    &:active
+      background-color: darken(THEME, 40%)
+
+article
+  & .button, button
+    color: #fff !important
+    border-radius (BORDER_radius * 2)
+    box-shadow inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.15)
+    // 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
+    &, abbr
+      font-weight: 400
+    & .icon
+      opacity: 0.65
+      text-shadow: 0 -1px 0 rgba(0,0,0,0.25)
+
+  & button, .button, .tag:not(.icon)
+    &
+      background-color: THEME_dark
+    &.secondary
+      background-color: COLOR_secondary
+    &.accept
+      background-color: COLOR_success
+    &.cancel
+      background-color: COLOR_cancel
+    &[disabled], :disabled, &.disabled
+      background: FORM_color
+      color: #999 !important
+      box-shadow: none !important

example/components/lungo.theme/theme.widget.form.styl

@@ -0,0 +1,115 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+form, .form
+  & label
+    color: #aaa
+    font-weight: 300
+
+  & fieldset
+    background: #fff
+    border-bottom: 1px solid CONTENT
+    & .icon
+      color: #ccc
+    &.radius-top
+      border-radius (BORDER_radius * 2) (BORDER_radius * 2) 0 0
+    &.radius-bottom
+      border-radius 0 0 (BORDER_radius * 2) (BORDER_radius * 2)
+    &.radius
+      border-radius (BORDER_radius * 2)
+    &.shadow
+      border-bottom: 1px solid rgba(0,0,0,0.1)
+
+  & 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, label.select
+    background-color: white
+    color: rgba(0, 0, 0, 0.75)
+    &.border
+      border: FORM_border solid FORM_color
+      border-radius: FORM_border_radius
+    &.error, &:required
+      color: COLOR_cancel !important
+      border-color: COLOR_cancel !important
+    &.success
+      color: COLOR_success !important
+      border-color: COLOR_success !important
+    &:focus, &:active, &:hover
+      color: THEME_dark
+      border-color: THEME
+      &:after
+        background-color: THEME
+    &[disabled]
+      background: FORM_color
+      border-color: FORM_color
+      color: darken(FORM_color, 25%)
+
+  & .select:after
+    background: FORM_color
+    color: #fff
+
+  & input[type=range]
+    background-color: FORM_color
+    color: darken(FORM_color, 25%)
+    border-radius: (FORM_border_radius * 4)
+    &:active
+      background-color: THEME_light !important
+      color: #fff
+      &::-webkit-slider-thumb
+        background-color: darken(THEME, 25%) !important
+    &::-webkit-slider-thumb
+      border-radius (FORM_border_radius * 4)
+      background-color: darken(FORM_color, 25%)
+
+  & [data-progress]
+    background-color: #ddd
+    & .value
+      background-color: THEME_light
+    &, & .value
+      border-radius (FORM_border_radius * 3)
+
+  & [data-control-checkbox]
+    background: FORM_color
+    color: darken(FORM_color, 25%)
+    font-weight: 700
+    border-radius: (FORM_border_radius * 4)
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.25), 0px 1px 0px rgba(255,255,255,0.25)
+
+    & label
+      border-radius: (FORM_border_radius * 4)
+      background: darken(FORM_color, 25%)
+
+    &.checked
+      background-color: THEME_light
+      color: #fff !important
+      & label
+        background-color: darken(THEME, 25%)
+
+    // Expand
+    &.twitter
+      font-family:'lungojsicon'
+      font-size: 1.3em
+      line-height: 1.4em
+      &:before
+        content: "\f099"
+      &:after
+        content: "\f099"
+        text-shadow: 0 1px 0 #fff
+    &.ok
+      font-family:'lungojsicon'
+      font-size: 1.3em
+      line-height: 1.4em
+      &.checked
+        background-color: COLOR_success
+        & label
+          background-color: darken(COLOR_success, 25%)
+      &:before
+        content: "\f00c"
+      &:after
+        content: "\f00d"

example/components/lungo.theme/theme.widget.notification.styl

@@ -0,0 +1,43 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification
+  color: #fff
+  &:not(.push)
+    background-color: rgba(0,0,0,0.6)
+  & .window
+    &.growl
+      background: rgba(0,0,0,0.75)
+    &:not(.growl)
+      box-shadow(0 0 8px #444)
+      & button, .button
+        background: #fff
+        color: THEME_dark
+    &.confirm, &.html
+      background: #e6e6e6
+      color: #222
+    &.error
+      background: COLOR_cancel
+    &.success
+      background: COLOR_success
+    &.error, &.success
+      color: #fff
+      & small
+        opacity: 0.75
+        font-weight: 100
+    &.html
+      & .title
+        background: THEME
+        color: #fff
+    &.push
+      background: rgba(0,0,0,0.65)

example/components/lungo.theme/theme.widget.styl

@@ -0,0 +1,25 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+[data-control="pull"]
+    text-shadow: 0 1px 0 #fff
+
+/* -------------------------- TAG -------------------------- */
+.tag:not(.icon)
+  color: #fff
+  border-radius BORDER_radius
+  font-weight: 700 !important
+  &.count
+    background-color: THEME
+  header .count
+    background-color: THEME-dark !important
+  footer &
+    box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)

example/index.html

@@ -46,10 +46,8 @@
 
     <!-- Main Stylesheet -->
     <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.icon.css">
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
-    <link rel="stylesheet" href="components/lungo.brownie/theme.lungo.css" id="theme-stylesheet">
-
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css" id="theme-stylesheet">
+    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
     <!-- App Stylesheet -->
     <link rel="stylesheet" href="stylesheets/app.css">
 </head>

example/test.html

@@ -14,11 +14,8 @@
 
     <!-- Main Stylesheet -->
     <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.icon.css">
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
-
-    <link rel="stylesheet" href="components/lungo.brownie/theme.lungo.css" id="theme-stylesheet">
-
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
+    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
     <!-- App Stylesheet -->
     <link rel="stylesheet" href="stylesheets/app.css">
 </head>

grunt.js

@@ -41,14 +41,14 @@ module.exports = function(grunt) {
           'build/src/boot/*.js',
           'build/src/element/*.js'],
         stylesheets: [
-            'src/**/lungo.base.styl',
-            'src/**/lungo.layout.styl',
-            'src/**/lungo.layout.*.styl',
-            'src/**/lungo.widgets.styl',
-            'src/**/lungo.widgets.*.styl',
-            'src/**/lungo.media.*.styl'],
-        icons: ['src/**/lungo.icon**.styl'],
-        themes: ['src/**/theme**.styl']
+            'src/stylesheets/lungo.base.styl',
+            'src/stylesheets/lungo.layout.styl',
+            'src/stylesheets/lungo.layout.*.styl',
+            'src/stylesheets/lungo.widget.styl',
+            'src/stylesheets/lungo.widget.*.styl',
+            'src/stylesheets/lungo.media.*.styl'],
+        theme: ['src/stylesheets/theme/*.styl'],
+        icons: ['src/stylesheets/lungo.icon**.styl']
     },
 
     coffee: {
@@ -78,28 +78,28 @@ module.exports = function(grunt) {
 
     stylus: {
       stylesheets: {
-        options: { compress: true, paths: ['src/stylesheets/import'] },
+        options: { compress: true },
         files: { '<%=meta.endpoint%>/<%=meta.file%><%=meta.version%>/<%=meta.file%>.css': '<config:resources.stylesheets>' }
       },
       icons: {
-        options: { compress: true },
+        options: { compress: false },
         files: { '<%=meta.endpoint%>/<%=meta.file%>.icon/**.css': '<config:resources.icons>' }
       },
-      themes: {
-        options: { flatten: true },
-        files: { '<%=meta.endpoint%>/<%=meta.file%><%=meta.version%>/**.css': '<config:resources.themes>' }
+      theme: {
+        options: { compress: true, flatten: true },
+        files: { '<%=meta.endpoint%>/<%=meta.file%><%=meta.version%>/<%=meta.file%>.theme.css': '<config:resources.theme>' }
       }
     },
 
     copy: {
       theme: {
-        files: { '<%=meta.endpoint%>/<%=meta.file%>.theme/': ['<config:resources.themes>'] }
+        files: { '<%=meta.endpoint%>/<%=meta.file%>.theme/': ['<config:resources.theme>'] }
       }
     },
 
     watch: {
       files: ['<config:resources.coffeescripts>', '<config:resources.stylesheets>', '<config:resources.themes>'],
-      tasks: 'coffee concat min stylus:stylesheets stylus:themes'
+      tasks: 'coffee concat min stylus:stylesheets stylus:theme'
     }
   });
 

src/stylesheets/lungo.layout.list.styl

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

src/stylesheets/lungo.layout.nav.styl

@@ -7,7 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "constants.styl"
+@import "__init.styl"
 
 HEADER_GROUPBAR_HEIGHT = 32px
 

src/stylesheets/lungo.layout.styl

@@ -7,7 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "constants.styl"
+@import "__init.styl"
 
 body, html
   height: 100%

src/stylesheets/lungo.media.phone.styl

@@ -1,4 +1,4 @@
-@import "constants.styl"
+@import "__init.styl"
 
 /* ==== Any phone ==== */
 @media only screen and (max-width: 767px)

src/stylesheets/lungo.media.tablet.styl

@@ -1,4 +1,4 @@
-@import "constants.styl"
+@import "__init.styl"
 
 /* ==== Tablet ==== */
 @media only screen and (min-width: 768px)

src/stylesheets/lungo.widgets.button.styl

@@ -7,7 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "constants.styl"
+@import "__init.styl"
 
 .button, button
   display: inline-block

src/stylesheets/lungo.widgets.form.styl

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

src/stylesheets/lungo.widgets.loading.styl

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

src/stylesheets/lungo.widgets.notification.styl

@@ -7,7 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "constants.styl"
+@import "__init.styl"
 
 LOADING = 104px
 WINDOW_WIDTH = 280px

src/stylesheets/lungo.widgets.pull.styl

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

src/stylesheets/lungo.widgets.styl

@@ -7,7 +7,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-@import "constants.styl"
+@import "__init.styl"
 
 
 /* ================================  CLASSES  ================================ */

src/stylesheets/theme.lungo.styl

@@ -1,366 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Theme
- * @class Default
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "theme.lungo.colour.styl"
-
-/* -------------------------- DEFAULTS -------------------------- */
-body
-  background-color: #000
-  color: COLOR
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
-  font-weight: 400
-  font-size: 13px
-  line-height: 1.3em
-  letter-spacing: -0.05em
-
-  & .theme
-    background-color: THEME-light
-    &:active
-      background-color: THEME
-
-/* -------------------------- LAYOUT COLORS -------------------------- */
-body > section
-  background-color: DARK
-  & > header
-    background-color: THEME
-    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
-    color: #fff
-    border-radius (BORDER_radius * 2.5) (BORDER_radius * 2.5) 0 0
-
-  & > footer, & nav[data-control=groupbar]
-    background-color: DARK
-    box-shadow inset 0 3px 0 DARK_dark
-  & > article, & > [data-control="pull"]
-    background-color: CONTENT
-    &.splash
-      background: THEME
-      color: #fff
-  &.aside
-    box-shadow -1px 0 2px rgba(0,0,0,0.2)
-    &.right
-      box-shadow 1px 0 2px rgba(0,0,0,0.2)
-
-DARKEST = darken(DARK_darkest, 15%)
-body > aside
-  background-color: DARK_dark
-  color: #fff
-  & > header, > footer
-    background-color: DARK_darkest
-  & > header
-    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 DARK, inset 0 -1px 0 DARKEST
-
-
-/* -------------------------- NAVIGATION -------------------------- */
-nav
-  section > header > &
-    & a:not(.button)
-      color: darken(THEME, 35%)
-      text-shadow 0 1px 0 lighten(THEME, 25%)
-      &:active
-        color: darken(THEME, 50%)
-
-  section > &[data-control=groupbar] > a.active
-    box-shadow inset 0 -3px 0 THEME
-
-  section > footer > & > a, &[data-control=groupbar] > a
-    color: NAV_LINK
-    &.active
-      color: NAV_LINK_ACTIVE
-
-  section > footer > & > a
-    box-shadow 1px 0 0 DARK_dark
-    &.active
-      color:  NAV_LINK_ACTIVE
-      background-color: DARK_dark
-      box-shadow inset 0 3px 0 THEME
-
-  aside & a
-    color: lighten(DARK, 20%)
-    &:active
-      color: lighten(DARK, 50%)
-
-  &[data-control=menu]
-    COLOR = DARK
-    background: COLOR
-    box-shadow 0 2px 0 rgba(0,0,0,0.15)
-    &.icons
-      background: rgba(0,0,0,0.8)
-      & > a
-        color: lighten(COLOR, 35%)
-        &:active > .icon
-          text-shadow: 0 0 32px #fff
-        & > .icon
-          color: #fff
-    &:not(.icons)
-      & > a
-        color: #fff
-        text-shadow 0 1px 0 #111
-        border-bottom: 1px solid darken(COLOR, 40%)
-        border-top: 1px solid lighten(COLOR, 5%)
-        &:active
-          background: #111
-          border-color: transparent
-        & > .icon
-          color: lighten(COLOR, 25%)
-    & > a
-      font-weight: 700
-
-
-
-/* -------------------------- LISTS -------------------------- */
-.list
-  section & li
-    background: #fff
-    &:not(.anchor)
-      border-bottom: inset 1px LIST_border
-    &.secondary
-      box-shadow: inset 4px 0px 0px COLOR_secondary
-    &.accept
-      box-shadow: inset 4px 0px 0px COLOR_success
-    &.cancel
-      box-shadow: inset 4px 0px 0px COLOR_cancel
-    &.arrow::after
-      border-color: COLOR_secondary
-
-    &, a
-      color: LIST_color
-      &.anchor
-        background: DARK
-      &.dark
-        background: DARK_light
-      &.selectable:active, &.theme, &.active
-        background: THEME_light
-      &.light
-        background:  LIST_border
-        color: LIST_color_2nd
-      &.dark, &.selectable:active, &.theme, &.anchor
-        &, small, & .right:not(.tag), strong, .arrow::after
-          color: #fff
-        &.arrow::after
-          border-color: #fff
-      & small, & .right:not(.tag)
-        color: LIST_color_2nd
-
-  &:not(.indented) li
-    &.dark, &.theme, &.light
-      border-bottom-color: rgba(0,0,0,0.1)
-
-  aside & li
-    background: none
-    &:not(:first-child)
-      border-top: solid 1px  DARK
-    &:not(:last-child)
-      border-bottom: solid 1px DARKEST
-    &:active
-      background: DARK_darkest
-    &.active
-      background: THEME
-    &.active, &:active
-      border-color: transparent
-      & strong, & small, & .icon
-        color: #fff
-    & strong
-      color: #999
-    & small, .icon
-      color: #666
-
-
-/* -------------------------- PULL -------------------------- */
-[data-control="pull"]
-    text-shadow: 0 1px 0 #fff
-
-/* -------------------------- TAG -------------------------- */
-.tag:not(.icon)
-  color: #fff
-  border-radius BORDER_radius
-  font-weight: 700 !important
-  &.count
-    background-color: THEME
-  header .count
-    background-color: THEME-dark !important
-  footer &
-    box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
-
-/* -------------------------- NOTIFICATION -------------------------- */
-.notification
-  color: #fff
-  &:not(.push)
-    background-color: rgba(0,0,0,0.6)
-  & .window
-    &.growl
-      background: rgba(0,0,0,0.75)
-    &:not(.growl)
-      box-shadow(0 0 8px #444)
-      & button, .button
-        background: #fff
-        color: THEME_dark
-    &.confirm, &.html
-      background: #e6e6e6
-      color: #222
-    &.error
-      background: COLOR_cancel
-    &.success
-      background: COLOR_success
-    &.error, &.success
-      color: #fff
-      & small
-        opacity: 0.75
-        font-weight: 100
-    &.html
-      & .title
-        background: THEME
-        color: #fff
-    &.push
-      background: rgba(0,0,0,0.65)
-
-/* -------------------------- BUTTONS -------------------------- */
-header
-  & .button, button
-    color: #fff
-    background-color: THEME_dark
-    box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
-    border-radius (BORDER_radius * 2)
-    &:active
-      background-color: darken(THEME, 40%)
-
-article
-  & .button, button
-    color: #fff !important
-    border-radius (BORDER_radius * 2)
-    box-shadow inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.15)
-    // 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
-    &, abbr
-      font-weight: 400
-    & .icon
-      opacity: 0.65
-      text-shadow: 0 -1px 0 rgba(0,0,0,0.25)
-
-  & button, .button, .tag:not(.icon)
-    &
-      background-color: THEME_dark
-    &.secondary
-      background-color: COLOR_secondary
-    &.accept
-      background-color: COLOR_success
-    &.cancel
-      background-color: COLOR_cancel
-    &[disabled], :disabled, &.disabled
-      background: FORM_color
-      color: #999 !important
-      box-shadow: none !important
-
-/* -------------------------- FORMS -------------------------- */
-form, .form
-  & label
-    color: #aaa
-    font-weight: 300
-
-  & fieldset
-    background: #fff
-    border-bottom: 1px solid CONTENT
-    & .icon
-      color: #ccc
-    &.radius-top
-      border-radius (BORDER_radius * 2) (BORDER_radius * 2) 0 0
-    &.radius-bottom
-      border-radius 0 0 (BORDER_radius * 2) (BORDER_radius * 2)
-    &.radius
-      border-radius (BORDER_radius * 2)
-    &.shadow
-      border-bottom: 1px solid rgba(0,0,0,0.1)
-
-  & 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, label.select
-    background-color: white
-    color: rgba(0, 0, 0, 0.75)
-    &.border
-      border: FORM_border solid FORM_color
-      border-radius: FORM_border_radius
-    &.error, &:required
-      color: COLOR_cancel !important
-      border-color: COLOR_cancel !important
-    &.success
-      color: COLOR_success !important
-      border-color: COLOR_success !important
-    &:focus, &:active, &:hover
-      color: THEME_dark
-      border-color: THEME
-      &:after
-        background-color: THEME
-    &[disabled]
-      background: FORM_color
-      border-color: FORM_color
-      color: darken(FORM_color, 25%)
-
-  & .select:after
-    background: FORM_color
-    color: #fff
-
-  & input[type=range]
-    background-color: FORM_color
-    color: darken(FORM_color, 25%)
-    border-radius: (FORM_border_radius * 4)
-    &:active
-      background-color: THEME_light !important
-      color: #fff
-      &::-webkit-slider-thumb
-        background-color: darken(THEME, 25%) !important
-    &::-webkit-slider-thumb
-      border-radius (FORM_border_radius * 4)
-      background-color: darken(FORM_color, 25%)
-
-  & [data-progress]
-    background-color: #ddd
-    & .value
-      background-color: THEME_light
-    &, & .value
-      border-radius (FORM_border_radius * 3)
-
-  & [data-control-checkbox]
-    background: FORM_color
-    color: darken(FORM_color, 25%)
-    font-weight: 700
-    border-radius: (FORM_border_radius * 4)
-    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.25), 0px 1px 0px rgba(255,255,255,0.25)
-
-    & label
-      border-radius: (FORM_border_radius * 4)
-      background: darken(FORM_color, 25%)
-
-    &.checked
-      background-color: THEME_light
-      color: #fff !important
-      & label
-        background-color: darken(THEME, 25%)
-
-    // Expand
-    &.twitter
-      font-family:'lungojsicon'
-      font-size: 1.3em
-      line-height: 1.4em
-      &:before
-        content: "\f099"
-      &:after
-        content: "\f099"
-        text-shadow: 0 1px 0 #fff
-    &.ok
-      font-family:'lungojsicon'
-      font-size: 1.3em
-      line-height: 1.4em
-      &.checked
-        background-color: COLOR_success
-        & label
-          background-color: darken(COLOR_success, 25%)
-      &:before
-        content: "\f00c"
-      &:after
-        content: "\f00d"
-

src/stylesheets/theme.lungo.colour.styl

@@ -1,5 +1,4 @@
-@import "CSSmethods/vendor.styl"
-// @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
+@import "../CSSmethods/vendor.styl"
 
 /* -------------------------- THEME -------------------------- */
 CONTENT         = #f5f5f5
@@ -9,7 +8,6 @@ COLOR_cancel    = #e74c3c
 COLOR_success   = #2ecc71
 
 
-
 DARK            = #222
 DARK_light      = lighten(DARK, 25%)
 DARK_dark       = darken(DARK, 15%)

src/stylesheets/theme/theme.base.styl

@@ -0,0 +1,25 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Base
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
+@import "__init.styl"
+
+body
+  background-color: #000
+  color: COLOR
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-weight: 400
+  font-size: 13px
+  line-height: 1.3em
+  letter-spacing: -0.05em
+
+  & .theme
+    background-color: THEME-light
+    &:active
+      background-color: THEME

src/stylesheets/theme/theme.layout.list.styl

@@ -0,0 +1,66 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+.list
+  section & li
+    background: #fff
+    &:not(.anchor)
+      border-bottom: inset 1px LIST_border
+    &.secondary
+      box-shadow: inset 4px 0px 0px COLOR_secondary
+    &.accept
+      box-shadow: inset 4px 0px 0px COLOR_success
+    &.cancel
+      box-shadow: inset 4px 0px 0px COLOR_cancel
+    &.arrow::after
+      border-color: COLOR_secondary
+
+    &, a
+      color: LIST_color
+      &.anchor
+        background: DARK
+      &.dark
+        background: DARK_light
+      &.selectable:active, &.theme, &.active
+        background: THEME_light
+      &.light
+        background:  LIST_border
+        color: LIST_color_2nd
+      &.dark, &.selectable:active, &.theme, &.anchor
+        &, small, & .right:not(.tag), strong, .arrow::after
+          color: #fff
+        &.arrow::after
+          border-color: #fff
+      & small, & .right:not(.tag)
+        color: LIST_color_2nd
+
+  &:not(.indented) li
+    &.dark, &.theme, &.light
+      border-bottom-color: rgba(0,0,0,0.1)
+
+  aside & li
+    background: none
+    &:not(:first-child)
+      border-top: solid 1px  DARK
+    &:not(:last-child)
+      border-bottom: solid 1px DARKEST
+    &:active
+      background: DARK_darkest
+    &.active
+      background: THEME
+    &.active, &:active
+      border-color: transparent
+      & strong, & small, & .icon
+        color: #fff
+    & strong
+      color: #999
+    & small, .icon
+      color: #666

src/stylesheets/theme/theme.layout.nav.styl

@@ -0,0 +1,64 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+nav
+  section > header > &
+    & a:not(.button)
+      color: darken(THEME, 35%)
+      text-shadow 0 1px 0 lighten(THEME, 25%)
+      &:active
+        color: darken(THEME, 50%)
+
+  section > &[data-control=groupbar] > a.active
+    box-shadow inset 0 -3px 0 THEME
+
+  section > footer > & > a, &[data-control=groupbar] > a
+    color: NAV_LINK
+    &.active
+      color: NAV_LINK_ACTIVE
+
+  section > footer > & > a
+    box-shadow 1px 0 0 DARK_dark
+    &.active
+      color:  NAV_LINK_ACTIVE
+      background-color: DARK_dark
+      box-shadow inset 0 3px 0 THEME
+
+  aside & a
+    color: lighten(DARK, 20%)
+    &:active
+      color: lighten(DARK, 50%)
+
+  &[data-control=menu]
+    COLOR = DARK
+    background: COLOR
+    box-shadow 0 2px 0 rgba(0,0,0,0.15)
+    &.icons
+      background: rgba(0,0,0,0.8)
+      & > a
+        color: lighten(COLOR, 35%)
+        &:active > .icon
+          text-shadow: 0 0 32px #fff
+        & > .icon
+          color: #fff
+    &:not(.icons)
+      & > a
+        color: #fff
+        text-shadow 0 1px 0 #111
+        border-bottom: 1px solid darken(COLOR, 40%)
+        border-top: 1px solid lighten(COLOR, 5%)
+        &:active
+          background: #111
+          border-color: transparent
+        & > .icon
+          color: lighten(COLOR, 25%)
+    & > a
+      font-weight: 700

src/stylesheets/theme/theme.layout.styl

@@ -0,0 +1,41 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+body > section
+  background-color: DARK
+  & > header
+    background-color: THEME
+    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
+    color: #fff
+    border-radius (BORDER_radius * 2.5) (BORDER_radius * 2.5) 0 0
+
+  & > footer, & nav[data-control=groupbar]
+    background-color: DARK
+    box-shadow inset 0 3px 0 DARK_dark
+  & > article, & > [data-control="pull"]
+    background-color: CONTENT
+    &.splash
+      background: THEME
+      color: #fff
+  &.aside
+    box-shadow -1px 0 2px rgba(0,0,0,0.2)
+    &.right
+      box-shadow 1px 0 2px rgba(0,0,0,0.2)
+
+DARKEST = darken(DARK_darkest, 15%)
+body > aside
+  background-color: DARK_dark
+  color: #fff
+  & > header, > footer
+    background-color: DARK_darkest
+  & > header
+    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 DARK, inset 0 -1px 0 DARKEST
+

src/stylesheets/theme/theme.widget.button.styl

@@ -0,0 +1,48 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+header
+  & .button, button
+    color: #fff
+    background-color: THEME_dark
+    box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
+    border-radius (BORDER_radius * 2)
+    &:active
+      background-color: darken(THEME, 40%)
+
+article
+  & .button, button
+    color: #fff !important
+    border-radius (BORDER_radius * 2)
+    box-shadow inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.15)
+    // 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
+    &, abbr
+      font-weight: 400
+    & .icon
+      opacity: 0.65
+      text-shadow: 0 -1px 0 rgba(0,0,0,0.25)
+
+  & button, .button, .tag:not(.icon)
+    &
+      background-color: THEME_dark
+    &.secondary
+      background-color: COLOR_secondary
+    &.accept
+      background-color: COLOR_success
+    &.cancel
+      background-color: COLOR_cancel
+    &[disabled], :disabled, &.disabled
+      background: FORM_color
+      color: #999 !important
+      box-shadow: none !important

src/stylesheets/theme/theme.widget.form.styl

@@ -0,0 +1,115 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+form, .form
+  & label
+    color: #aaa
+    font-weight: 300
+
+  & fieldset
+    background: #fff
+    border-bottom: 1px solid CONTENT
+    & .icon
+      color: #ccc
+    &.radius-top
+      border-radius (BORDER_radius * 2) (BORDER_radius * 2) 0 0
+    &.radius-bottom
+      border-radius 0 0 (BORDER_radius * 2) (BORDER_radius * 2)
+    &.radius
+      border-radius (BORDER_radius * 2)
+    &.shadow
+      border-bottom: 1px solid rgba(0,0,0,0.1)
+
+  & 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, label.select
+    background-color: white
+    color: rgba(0, 0, 0, 0.75)
+    &.border
+      border: FORM_border solid FORM_color
+      border-radius: FORM_border_radius
+    &.error, &:required
+      color: COLOR_cancel !important
+      border-color: COLOR_cancel !important
+    &.success
+      color: COLOR_success !important
+      border-color: COLOR_success !important
+    &:focus, &:active, &:hover
+      color: THEME_dark
+      border-color: THEME
+      &:after
+        background-color: THEME
+    &[disabled]
+      background: FORM_color
+      border-color: FORM_color
+      color: darken(FORM_color, 25%)
+
+  & .select:after
+    background: FORM_color
+    color: #fff
+
+  & input[type=range]
+    background-color: FORM_color
+    color: darken(FORM_color, 25%)
+    border-radius: (FORM_border_radius * 4)
+    &:active
+      background-color: THEME_light !important
+      color: #fff
+      &::-webkit-slider-thumb
+        background-color: darken(THEME, 25%) !important
+    &::-webkit-slider-thumb
+      border-radius (FORM_border_radius * 4)
+      background-color: darken(FORM_color, 25%)
+
+  & [data-progress]
+    background-color: #ddd
+    & .value
+      background-color: THEME_light
+    &, & .value
+      border-radius (FORM_border_radius * 3)
+
+  & [data-control-checkbox]
+    background: FORM_color
+    color: darken(FORM_color, 25%)
+    font-weight: 700
+    border-radius: (FORM_border_radius * 4)
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.25), 0px 1px 0px rgba(255,255,255,0.25)
+
+    & label
+      border-radius: (FORM_border_radius * 4)
+      background: darken(FORM_color, 25%)
+
+    &.checked
+      background-color: THEME_light
+      color: #fff !important
+      & label
+        background-color: darken(THEME, 25%)
+
+    // Expand
+    &.twitter
+      font-family:'lungojsicon'
+      font-size: 1.3em
+      line-height: 1.4em
+      &:before
+        content: "\f099"
+      &:after
+        content: "\f099"
+        text-shadow: 0 1px 0 #fff
+    &.ok
+      font-family:'lungojsicon'
+      font-size: 1.3em
+      line-height: 1.4em
+      &.checked
+        background-color: COLOR_success
+        & label
+          background-color: darken(COLOR_success, 25%)
+      &:before
+        content: "\f00c"
+      &:after
+        content: "\f00d"

src/stylesheets/theme/theme.widget.notification.styl

@@ -0,0 +1,43 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification
+  color: #fff
+  &:not(.push)
+    background-color: rgba(0,0,0,0.6)
+  & .window
+    &.growl
+      background: rgba(0,0,0,0.75)
+    &:not(.growl)
+      box-shadow(0 0 8px #444)
+      & button, .button
+        background: #fff
+        color: THEME_dark
+    &.confirm, &.html
+      background: #e6e6e6
+      color: #222
+    &.error
+      background: COLOR_cancel
+    &.success
+      background: COLOR_success
+    &.error, &.success
+      color: #fff
+      & small
+        opacity: 0.75
+        font-weight: 100
+    &.html
+      & .title
+        background: THEME
+        color: #fff
+    &.push
+      background: rgba(0,0,0,0.65)

src/stylesheets/theme/theme.widget.styl

@@ -0,0 +1,25 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "__init.styl"
+
+[data-control="pull"]
+    text-shadow: 0 1px 0 #fff
+
+/* -------------------------- TAG -------------------------- */
+.tag:not(.icon)
+  color: #fff
+  border-radius BORDER_radius
+  font-weight: 700 !important
+  &.count
+    background-color: THEME
+  header .count
+    background-color: THEME-dark !important
+  footer &
+    box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)