zhdk/madek

/**
 *  Forms
 *----------------------------------------- */

.ui-form-group
  padding: $space-m $space-s
  position: relative
  > .form-label
    color: $mono-dark
  &.compact
    margin-bottom: -$space-s
    padding: $space-s 0 !important
  &.minimal
    margin-bottom: 0
    padding: 0

.ui-form-group .ui-form-ui-ttip-toggle
  display: inline-block
  float: right
  opacity: $opacity-medium
  &:hover
    opacity: 1

.ui-form-group .apply-to-all
  +position-top-right($space-m, $space-s)
  display: inline-block

/**
 *  Rowed
 *----------------------------------------- */
.ui-form-group.rowed
  padding-right: 42px
  > .form-label
    clear: both
    display: block
    font-weight: 700
    padding-bottom: $space-s
    small
      color: $mono-mid
      font-size: $font-xs
      font-weight: normal
      margin-left: $space-s
      &.clear
        display: block
        clear: both
        margin-left: 0
  > .form-item
    +micro-clearfix
  > .apply-to-all
    +position-top-right(52px, $space-x)
    display: inline-block

.form-checkbox-label
  display: block
  font-size: $font-s
  padding-left: $space-m
  padding-right: $space-x
  position: relative
  input[type="checkbox"]
    +position-top-left(1px, 0)

/**
 *  Columned
 *-----------------------------------------
.ui-form-group.columned
  +micro-clearfix
  border-bottom: 1px solid $mono-weak
  padding-right: 50px
  position: relative
  > .form-label
    +float-left
    font-weight: 700
    padding-top: $space-x
    padding-bottom: $space-s
    width: 175px
    small
      color: $mono-mid
      display: block
      font-size: $font-xs
      font-weight: normal
  > .form-item
    margin-left: 200px
    // form-label width + 40px
    > .form-item-extension
      margin-top: $space-s
      margin-bottom: $space-m
    > .form-person-widget
      margin-top: $space-s

/**
 *  Highglight / Error variations
 *-----------------------------------------

.ui-form-group.error
  background-color: lighten($red, 50%)
  > .form-label
    color: $red
  > .form-item textarea,
  > .form-item input
    +box-shadow(0 0 5px $red)
    border-color: $red

.ui-form-group.highlight
  background-color: lighten($yellow, 50%)
  > .form-label
    color: $yellow
  > .form-item textarea,
  > .form-item input
    +box-shadow(0 0 5px $yellow)
    border-color: $yellow