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

/**
 * 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=Titillium+Web:200,400,700")
// @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")

WHITE = white

/* -------------------------- THEME -------------------------- */
CONTENT         = #f4f5f5
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      = #333
LIST_color_2nd  = lighten(LIST_color, 35%)
LIST_border     = lighten(LIST_color, 90%)
NAV_LINK        = #888
NAV_LINK_ACTIVE = WHITE
THEME           = #0093D5
THEME_light     = lighten(THEME, 15%)
THEME_dark      = darken(THEME, 15%)
//?
COLOR = #484a49


body
  background-color: DARK
  font-family: "Helvetica Neue", "Open Sans", "Titillium Web",  Helvetica, Arial, sans-serif
  font-weight: 400
  font-size: 13px
  line-height: 1.3em
  letter-spacing: -0.05em

.theme
  &, li&, a&
    background-color: THEME-light
    &:active
      background-color: THEME

[data-control="pull"]
    color: #666
    text-shadow: 0 1px 0 white


/* -------------------------- LAYOUT COLORS -------------------------- */
section
  & > header
    background-color: THEME
    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
    color: #fff
  & > footer, & nav.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%)
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
      color: #fff
    &.box
      &:not(.right) a
        box-shadow 1px 0 0 THEME_light, inset -1px 0 0 THEME_dark
      &.right a
        box-shadow -1px 0 0 THEME_light, inset 1px 0 0 THEME_dark
      & a:active
        background: THEME_dark

  section > &.groupbar > a.current
    box-shadow inset 0 -3px 0 THEME

  section > footer > & > a, &.groupbar > a
    color: NAV_LINK
    &.current
      color: NAV_LINK_ACTIVE

  section > footer > & > a
    box-shadow 1px 0 0 DARK_dark
    &.current
      color:  NAV_LINK_ACTIVE
      background-color: DARK_dark
      box-shadow inset 0 3px 0 THEME

  aside &
    & a
      &.current .icon
        color: white
      &:not(.current) .icon
        color: NAV_LINK
    &.box
      &:not(.right) a
        box-shadow 1px 0 0 DARK, inset -1px 0 0 DARKEST
      &.right a
        box-shadow -1px 0 0 DARK, inset 1px 0 0 DARKEST
      & a:active
        background: DARKEST


/* -------------------------- 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
    &.current
      background: THEME
      border-color: transparent
      & strong, & small, & .icon
        color: #fff
    & strong
      color: #999
    & small, .icon
      color: #666


/* -------------------------- TAG -------------------------- */
.tag
  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)

/* -------------------------- NOTIFICATION -------------------------- */
.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: COLOR_cancel
      &.alert
        background: COLOR_secondary
      &.success
        background: COLOR_accept
    &.url
      & .close
        background: #000
        border: solid 2px #fff
        box-shadow: 0 0 4px black


/* -------------------------- BUTTONS -------------------------- */
a.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
  &
    background-color: THEME_dark
  &.secondary
    background-color: COLOR_secondary
  &.accept
    background-color: COLOR_accept
  &.cancel
    background-color: COLOR_cancel




/* -------------------------- BUTTONS -------------------------- */

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

  & input[type=range]
    box-shadow  FORM_shadow_form
    border-radius FORM_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
      background: #fff

    &::-webkit-slider-thumb::after
      background: #ddd


  & .progress
    .labels
      font-size: 12px
      line-height: 18px
      color: #858585

    & .bar
      background: #c7c7c7
      & .value
        background-color: THEME-light
        & .label
          float: right
          margin-right: 3px
          color: rgba(0,0,0,0.6)
          text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important
          font-size: 12px