Added FirefoxOS theme

src/stylesheets/theme/firefoxos/__init.styl

@@ -0,0 +1,23 @@
+@import "../../CSSmethods/vendor.styl"
+
+/* -------------------------- COLOUR -------------------------- */
+THEME               = #E66000 /* #FF9500 || #E66000 */
+COLOR               = #4D4E53 /* #2C3E50 */
+DANGER              = #8b0d0c
+SUCCESS             = #00539F
+WARNING             = #FF9500
+DISABLED            = #acb8b9
+BACKGROUND          = #EAEFF2
+/* -------------------------- VARIATIONS -------------------------- */
+LIST_border         = lighten(COLOR, 90%)
+NAV_LINK            = lighten(COLOR, 25%)
+NAV_LINK_ACTIVE     = #FFF
+/* ------------------------- TRANSITION ------------------------- */
+TRANSITION_time     = 400ms
+TRANSITION_easing   = ease
+/* ------------------------- RADIUS ------------------------- */
+BORDER_radius       = 1px
+/* -------------------------- FORM -------------------------- */
+FORM_color          = darken(#e5e5e5, 5%)
+FORM_border         = 2px
+FORM_border_radius  = (BORDER_radius * FORM_border)

src/stylesheets/theme/firefoxos/theme.base.styl

@@ -0,0 +1,24 @@
+/**
+ * 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")
+
+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/firefoxos/theme.layout.list.styl

@@ -0,0 +1,63 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+.list
+  section & li
+    background: #fff
+    &:not(.anchor)
+      border-bottom: inset 1px LIST_border
+    &.color
+      box-shadow: inset 4px 0px 0px COLOR
+    &.accept
+      box-shadow: inset 4px 0px 0px SUCCESS
+    &.cancel
+      box-shadow: inset 4px 0px 0px DANGER
+    &.warning
+      box-shadow: inset 4px 0px 0px WARNING
+    &.arrow::after
+      border-color: lighten(COLOR, 75%)
+
+    &, a
+      &.contrast
+        background: COLOR
+      &.selectable:active, &.theme, &.active
+        background: lighten(THEME, 15%)
+      &.light
+        background: LIST_border
+        color: lighten(COLOR, 20%)
+      &.contrast, &.selectable:active, &.theme
+        &, small, & .right:not(.tag), strong, .arrow::after
+          color: #fff
+        &.arrow::after
+          border-color: #fff
+      & small, & .right:not(.tag)
+        color: lighten(COLOR, 20%)
+
+  &: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  lighten(COLOR, 5%)
+    &:not(:last-child)
+      border-bottom: solid 1px darken(COLOR, 20%)
+    &:active
+      background: darken(COLOR, 5%)
+    &.active
+      background: THEME
+    &.active, &:active
+      border-color: transparent
+      & strong, & small, & .icon
+        color: #fff
+    & strong
+      color: lighten(COLOR, 75%)
+    & small, .icon
+      color: lighten(COLOR, 40%)

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

@@ -0,0 +1,61 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+nav
+  section > header > &
+    & a:not(.button)
+      color: darken(THEME, 35%)
+      text-shadow 0 1px 0 lighten(THEME, 25%)
+      &:active
+        color: darken(THEME, 50%)
+
+  section > footer > & > a, &[data-control=groupbar] > a
+    color: NAV_LINK
+    &.active
+      color: NAV_LINK_ACTIVE
+
+  section > &[data-control=groupbar] > a.active
+    transition box-shadow TRANSITION_time TRANSITION_easing
+    box-shadow inset 0 -4px 0 THEME
+
+  section > footer > & > a
+    box-shadow inset 0 1px 0 darken(COLOR, 50%), inset 0 2px 0 lighten(COLOR, 20%)
+    &.active
+      box-shadow inset 0 0 16px darken(COLOR, 75%)
+      background-color: darken(COLOR, 10%)
+
+  aside & a
+    color: lighten(COLOR, 20%)
+    &:active
+      color: lighten(COLOR, 50%)
+
+  &[data-control=menu]
+    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, 20%)
+        border-top: 1px solid lighten(COLOR, 5%)
+        &:active
+          background: darken(COLOR, 15%)
+          border-color: transparent
+        & > .icon
+          color: lighten(COLOR, 25%)
+    & > a
+      font-weight: 600

src/stylesheets/theme/firefoxos/theme.layout.styl

@@ -0,0 +1,45 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+body > section
+  background-color: COLOR
+  &, & a
+    color: COLOR
+  & > header
+    C = THEME
+    background-color: THEME
+    box-shadow 0 2px 0px rgba(0,0,0,0.1), inset 0 1px 1px lighten(C, 25%), inset 0 -1px 0 darken(C, 20%)
+    color: #fff
+
+  & > footer, & nav[data-control=groupbar]
+    background-color: COLOR
+  & > article, & > [data-control="pull"]
+    background-color: BACKGROUND
+    &.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)
+
+  &[data-pull] > article.active
+    box-shadow: 0 -1px 0 rgba(0,0,0,0.05)
+
+body > aside
+  background-color: COLOR
+  color: #fff
+  C = darken(COLOR, 20%)
+  & > header, > footer
+    background-color: C
+  & > header
+    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 lighten(C, 10%), inset 0 -1px 0 darken(C, 20%)
+
+body > * > header > .title
+  font-weight: 700

src/stylesheets/theme/firefoxos/theme.media.styl

@@ -0,0 +1,14 @@
+
+/* ==== Any tablet ==== */
+@media only screen and (min-width: 768px)
+  body
+    & > section[data-children]
+      margin-right: 0.5em
+
+
+/* ==== Any phone ==== */
+@media only screen and (max-width: 767px)
+  body
+    & > section
+      & > header
+        border-radius 0px

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

@@ -0,0 +1,57 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+header
+  & .button, button
+    width: 39px
+    padding: 0px
+    color: #fff
+    text-shadow: 0 1px 1px darken(THEME, 25%)
+  &:active
+    text-shadow: 0 0 1px lighten(THEME, 75%)
+
+  & .right .button, .right button
+    margin-right: 0px !important
+    box-shadow inset 1px 0 0 darken(THEME, 20%), inset 2px 0 0 lighten(THEME, 20%)
+
+
+article
+  & .button, button
+
+    color: #fff !important
+    box-shadow inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.15)
+    border: solid 1px rgba(0,0,0,0.1)
+    text-shadow: 0 1px 0 rgba(0,0,0,0.1)
+    border-radius (BORDER_radius * 2)
+
+    &:active
+      box-shadow inset 0 0 128px rgba(0,0,0,0.25)
+      border-color: none
+    &, abbr
+      font-weight: 600
+    & .icon
+      opacity: 0.65
+      text-shadow: 0 -1px 0 rgba(0,0,0,0.25)
+
+  & button, .button, .tag:not(.icon)
+    &
+      background-color: darken(THEME, 15%)
+    &.color
+      background-color: lighten(COLOR, 10%)
+    &.accept
+      background-color: SUCCESS
+    &.cancel
+      background-color: DANGER
+    &.warning
+      background-color: WARNING
+    &[disabled], :disabled, &.disabled
+      background: FORM_color
+      color: #999 !important
+      box-shadow: none !important
+      text-shadow: none !important

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

@@ -0,0 +1,122 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+form, .form
+  & label
+    color: #aaa
+    font-weight: 300
+
+  & fieldset
+    background: #fff
+    border-bottom: 1px solid BACKGROUND
+    & .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: DANGER !important
+      border-color: DANGER !important
+    &.success
+      color: SUCCESS !important
+      border-color: SUCCESS !important
+    &:focus, &:active, &:hover
+      color: THEME
+      border-color: THEME
+    &[disabled]
+      background: FORM_color
+      border-color: FORM_color
+      color: darken(FORM_color, 25%)
+
+
+  /* -------------------------- SELECT -------------------------- */
+  & select, label.select
+    &:after
+      color: FORM_color
+    &:focus, &:active, &:hover
+      &:after
+        color: THEME
+
+  /* -------------------------- RANGE -------------------------- */
+  & input[type=range]
+    background-color: FORM_color
+    color: darken(FORM_color, 25%)
+    border-radius: (FORM_border_radius * 4)
+    &:active
+      background-color: THEME !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%)
+
+  /* -------------------------- PROGRESS -------------------------- */
+  & [data-progress]
+    background-color: #ddd
+    & .value
+      background-color: THEME
+    &, & .value
+      border-radius (FORM_border_radius * 3)
+
+  /* -------------------------- CHECKBOX -------------------------- */
+  & [data-control-checkbox]
+    background: FORM_color
+    color: darken(FORM_color, 25%)
+    font-weight: 700
+    border-radius: FORM_border_radius
+    // 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
+      background: darken(FORM_color, 25%)
+    &.checked
+      background-color: THEME
+      color: #fff !important
+      & label
+        background-color: darken(THEME, 25%)
+
+    &.accept
+      &.checked
+        background-color: SUCCESS
+        & label
+          background-color: darken(SUCCESS, 25%)
+    &.cancel
+      &.checked
+        background-color: DANGER
+        & label
+          background-color: darken(DANGER, 25%)
+
+    // Expand
+    &.icon
+      font-family:'lungojsicon'
+      font-size: 1.3em
+      line-height: 1.4em
+
+      &.twitter
+        &:before
+          content: "\f099"
+        &:after
+          content: "\f099"
+      &.ok
+        &:before
+          content: "\f00c"
+        &:after
+          content: "\f00d"

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

@@ -0,0 +1,50 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification
+  color: #fff
+  &:not(.push)
+    background-color: rgba(0,0,0,0.6)
+  & .window
+    &:not(.push)
+      border-radius FORM_border_radius
+    &.growl
+      background: rgba(0,0,0,0.75)
+      & strong
+        opacity: 0.75
+        font-weight: 400
+    &:not(.growl)
+      box-shadow(0 0 8px #444)
+      & button, .button
+        background: #fff
+        color: THEME
+    &.confirm, &.html
+      background: #e6e6e6
+      color: #222
+    &.error
+      background: DANGER
+    &.success
+      background: SUCCESS
+    &.error, &.success
+      color: #fff
+      & small
+        opacity: 0.75
+        font-weight: 100
+    &.html
+      & .title
+        background: THEME
+        color: #fff
+        border-radius FORM_border_radius FORM_border_radius 0px 0px
+    &.push
+      background: rgba(0,0,0,0.75)
+
+    & button, & .button
+      &:last-child
+        border-radius 0px 0px FORM_border_radius FORM_border_radius

src/stylesheets/theme/firefoxos/theme.widget.styl

@@ -0,0 +1,40 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+/* =================================  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)
+
+/* ===============================  MESSAGE  =============================== */
+body > section > article > .empty
+  & > .icon, > strong, > small
+    text-shadow: 0 1px 0 lighten(BACKGROUND, 95%)
+  & > .icon, > small
+    color: darken(BACKGROUND, 20%)
+  & > strong
+    color: darken(BACKGROUND, 40%)
+
+/* =================================  PULL  =============================== */
+body > section > [data-control="pull"]
+  background-color: darken(BACKGROUND, 15%)
+  color: darken(BACKGROUND, 50%)
+  text-shadow: 0 1px 1px BACKGROUND
+  & > strong
+    font-weight: 700
+  &.rotate
+    color: darken(BACKGROUND, 75%)
+