﻿/*
    Used to manage styles related to SF's forms
    
    1. Bootstrap Overrides / Additions
    2. Data Lists
    3. Input Sizing
    4. Control Specific Styles
    5. Validation
    6. Custom Controls
    7. Static Control
*/

// 1. Bootstrap Overrides / Additions
// -------------------------

/* doesn't appear to be used JME 7/22/2015
.form-actions { // adding BS2 form-actions back
    padding: 12px 16px;
    background-color: @axxxxccent-color;
    color: @axxxxccent-text-color;
}*/

legend {
  font-weight: @font-weight-light;
  color: @text-color;
  border-width: 0;
}

.checkbox-inline:first-child,
.radio-inline:first-child {
  // when inline checkbox lists wrap the first one on the first line sticks out more than subseqent lines. Confirmed that this is the same behavior on the BS site.  
  padding-left: 30px;
}

a.aspNetDisabled {
  opacity: .5;
}

.form-group.sf-literal,
.sf-control-wrapper {
  /*label {
        margin-bottom: 0;
    }*/ // commented out to match default bootstrap behavior (Lanio group member filter) JME 1/18/2016

  p.form-control-static {
    padding-top: 0;
  }
}

.form-group {
  // used to fix the font sizes when a form is placed in a wrapping container that changes the default font size like a jumbotron
  font-size: @font-size-base;
  line-height: @line-height-base;
}

.form-group .checkbox:last-child {
  // used to adjust checkboxes tolook better with labels above
  margin-bottom: 30px;
}

.form-group > .form-group {
  margin-top: 12px;
}

// styling to get sf controls to layout horizontal
.form-horizontal {
  .form-group {
    margin-right: 0; // fighting with bootstrap, this may be a bad idea... 4/3/14 JME
    label {
      //float: left; // commented out in adding horiztonal support to controls JME 5/9/2016
      //padding-right: 12px; // commented out in adding horiztonal support to controls JME 5/9/2016
    }

    .form-control-group,
    .form-control {
      float: left;
    }
  }
}

.form-horizontal {
  &[class*="label-"] {
    .form-group {
      label {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;

        .make-sm-column(2);

        @media (min-width: @screen-sm-min) {
          padding-top: 7px;
          margin-bottom: 0;
          text-align: right;
        }
      }

      .control-wrapper {
        .make-sm-column(10);
      }
    }
  }

  &.label-md {
    .form-group {
      label {
        .make-sm-column(4);
      }
      .control-wrapper {
        .make-sm-column(8);
      }
    }
  }

  &.label-lg {
    .form-group {
      label {
        .make-sm-column(6);
      }
      .control-wrapper {
        .make-sm-column(6);
      }
    }
  }

  &.label-xl {
    .form-group {
      label {
        .make-sm-column(8);
      }
      .control-wrapper {
        .make-sm-column(4);
      }
    }
  }
}


.controls {
  .checkbox:first-child {
    margin-top: 0;
  }
}


// highlight required fields
.form-group.required {
  .control-label:after {
    margin-left: 4px;
    font-family: FontAwesome;
    font-size: 6px;
    color: @required-field-color;
    vertical-align: super;
    content: '\f111';
  }
}

// 2. Data Lists
// -------------------------

dl:not(.dl-horizontal) {
  dt {
    margin-top: 16px;
    margin-bottom: 2px;
    font-weight: @font-weight-bold;

    &:first-child {
      margin-top: 0;
    }
  }

  dd {
    margin-left: 0;
  }
}

// 3. Input Sizing
// -------------------------

// form control sizing for bs3 - to be used only in specific cases
// added on 9/27/13
.form-control.input-width-xs,
.input-group.input-width-xs,
.form-control-group.input-width-xs input {
  width: 60px;
}

.form-control.input-width-sm,
.input-group.input-width-sm,
.form-control-group.input-width-sm input {
  width: 90px;
}

.form-control.input-width-md,
.input-group.input-width-md,
.form-control-group.input-width-md input {
  width: 140px;
}

.form-control.input-width-lg,
.input-group.input-width-lg,
.form-control-group.input-width-lg input {
  width: 210px;
}

.form-control.input-width-xl,
.input-group.input-width-xl,
.form-control-group.input-width-xl input {
  width: 270px;
}

.form-control.input-width-xxl,
.input-group.input-width-xxl,
.form-control-group.input-width-xxl input {
  width: 530px;
}

.form-control-group {
  .clearfix();

  .form-control,
  .input-group {
    float: left;
    margin-right: 6px;
  }

  & > span {
    float: left;
    margin: 8px 6px 0 0;
  }

  & > label {
    float: left;
    margin-top: 8px;
  }
}

// 4. Control Specific Styling
// -------------------------

.month-year-picker .separator,
.month-day-picker .separator {
  float: left;
  margin: 4px 8px 0 -2px;
  font-size: 20px;
  color: lighten(@text-color, 35%);
}

.sf-check-box {
  .checkbox {
    margin-top: 0;
  }
}


// 5. validation
// -------------------------

.validation-error {
  float: left;
  font-weight: @font-weight-light;
  color: @brand-danger;
}

// 5. Custom Controls
// -------------------------
.btn-controlaligned {
  margin-top: 24px;
}


// 6. Custom Controls
// -------------------------


// 7. Static Controls
// -------------------------
.form-group.static-control {
  label {
    margin-bottom: 0;
  }

  .form-control-static {
    padding-top: 0;
  }
}
