Lungo.js/src/stylesheets/theme/theme.widget.form.styl

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

form, .form
  & label
    color: darken(FORM_color, 50%)
    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: #fff
    color: rgba(0, 0, 0, 0.75)
    &.border
      border: FORM_border solid FORM_color
      // border-radius: FORM_border_radius
      border-radius: 0.2em
    &.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 / 2)
    &:active
      background-color: THEME !important
      color: #fff
    &::-webkit-slider-thumb
      border-radius: 1em
      background-color: darken(#fff, 2%)
      border: 1px solid FORM_color
      box-shadow: 0 1px 4px hsla(0, 0%,0%,.15)

  /* -------------------------- PROGRESS -------------------------- */
  & [data-progress]
    background-color: #ddd
    & .value
      background-color: THEME
    &, & .value
      border-radius: (FORM_border_radius / 2)

  /* -------------------------- CHECKBOX -------------------------- */
  & input[type=checkbox]
    background-color: darken(#fff, 2%)
    border: 1px solid FORM_color
    box-shadow: inset 0 0 0 1px FORM_color
    &:after
      background-color: #fff
      border: 1px solid FORM_color

    &:checked
      border-color: SUCCESS
      box-shadow: inset 0 0 0 13px SUCCESS

      &:after
        border-color: SUCCESS