theme.layout.list.styl

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

.list
  section & li
    background: #fff
    font-weight: 300
    &:not(.anchor)
      border-bottom: inset 1px LIST_border
    &.color
      box-shadow: inset 4px 0 COLOR
    &.accept
      box-shadow: inset 4px 0 SUCCESS
    &.cancel
      box-shadow: inset 4px 0 DANGER
    &.warning
      box-shadow: inset 4px 0 WARNING
    &.arrow::after
      border-color: LIST_border

    &, a
      &.contrast
        background: LIST_border
      &.selectable:active, &.theme, &.active
        background: lighten(THEME, 15%)
      &.light
        background: LIST_border
        color: lighten(TEXT, 50%)
      &.contrast, &.selectable:active, &.theme
        &, small, & .on-right:not(.tag), strong, .arrow::after
          color: #fff
        &.arrow::after
          border-color: #fff
      & small, & .on-right:not(.tag)
        color: lighten(TEXT, 50%)

      & .on-right
        font-weight: 400

    &:not(.big) img
      border-radius BORDER_radius

  &:not(.indented) li
    &.dark, &.theme, &.light
      border-bottom-color: rgba(0,0,0,0.1)

  aside & li
    background: none
    &, & a
      color: lighten(ASIDE, 50%)
      &:not(.active) .tag:not(.icon)
        background-color: ASIDE
      &.active .tag:not(.icon)
        background-color: lighten(ASIDE, 10%)

    & .icon
      color: lighten(ASIDE, 70%)

    & small
      color: lighten(ASIDE, 25%)

    &.active, &:active
      background-color: darken(ASIDE, 5%)
    &:hover
      background-color: darken(ASIDE, 10%)
    &.active, &:active, &:hover
      &, & a
        color: WHITE
      & .icon
        color: THEME
      & small
        color: lighten(ASIDE, 50%)