Lungo.js/src/stylesheets/theme.lungo.styl

/**
 * Stylesheet
 *
 * @namespace Lungo.Theme
 * @class Default
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

/* @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl") */
@import "CSSmethods/vendor.styl"
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")


/* -------------------------- THEME -------------------------- */
CONTENT         = #f4f5f5
COLOR           = #333
COLOR_secondary = #BFBFBF
COLOR_cancel    = #EE6557
COLOR_accept    = #3FB58E
DARK            = #222
DARK_light      = lighten(DARK, 25%)
DARK_dark       = darken(DARK, 15%)
DARK_darkest    = darken(DARK, 30%)
FORM_radius     = 1px
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%)


/* -------------------------- DEFAULTS -------------------------- */
body
  background-color: DARK
  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 -------------------------- */
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 4px 4px 0 0

  & > footer, & nav.groupbar
    background-color: DARK
    box-shadow inset 0 3px 0 DARK_dark
  & > article, & > [data-control="pull"]
    background-color: CONTENT
    &.splash
      background: DARK
      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%)
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 > &.groupbar > a.active
    box-shadow inset 0 -3px 0 THEME

  section > footer > & > a, &.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)
    & > a
      color: #fff
      text-shadow 0 1px 0 #111
      font-weight: 700
      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%)


/* -------------------------- 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_accept
    &.cancel
      box-shadow: inset 4px 0px 0px COLOR_cancel
    &, & 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)
          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


/* -------------------------- TAG -------------------------- */
.tag:not(.icon)
  color: #fff
  border-radius 2px
  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)


[data-control="pull"]
    text-shadow: 0 1px 0 #fff


/* -------------------------- NOTIFICATION -------------------------- */
.notification
  color: #fff
  & .window
    &.growl
      background: rgba(0,0,0,0.8)

    &:not(.growl)
      background: #e6e6e6
      color: #222
      box-shadow(0 0 8px #000)
      & button, .button
        background: #fff !important
        box-shadow: none !important
        color: THEME_dark !important
        border-radius 0px !important
        border: none !important
        margin-bottom: 1px

      &.error
        background: darken(COLOR_cancel, 25%)
        color: #fff
      &.success
        background: darken(COLOR_accept, 25%)
        color: #fff


/* -------------------------- BUTTONS -------------------------- */
header
  & .button, button
    background-color: THEME_dark
    box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
    border-radius 4px
    &:active
      background-color: darken(THEME, 40%)

article
  & .button, button
    border-radius(FORM-border-radius)
    color: white
    border-radius 2px
    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
      color: #666 !important
    &[disabled]
      background-color: black

  & button, .button, .tag:not(.icon)
    &
      background-color: THEME_dark
    &.secondary
      background-color: COLOR_secondary
    &.accept
      background-color: COLOR_accept
    &.cancel
      background-color: COLOR_cancel


/* -------------------------- FORMS -------------------------- */
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: #aaa
    font-weight: 300

  & fieldset
    background: #fff
    border-bottom: solid 1px #eee
    & .icon
      color: #ccc

  & 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_radius
    border-bottom-right-radius: FORM_radius

  & input[type=range]
    box-shadow  FORM_shadow_form

    &:not(.checkbox)
      background-color: #ddd
      &:active
        background-color: THEME_light

    &.checkbox
      background-color: #aaa
      color: rgba(255,255,255,0.6)
      &.active
        color: #fff
        background-color: THEME_light

    &::-webkit-slider-thumb
      border-radius: 2px
      background-color: lighten(FORM_border_color, 50%)
      border: solid 1px FORM_border_color
    &::-webkit-slider-thumb::after
      background: FORM_border_color

  & .progress
    & .bar
      background-color: #ddd
      & .value
        background-color: THEME_light