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

/**
 * 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