responsivewebframework/src/less/form.less

Jalasoft Foundation Front End Framework ========================================

.form-horizontal-grid {
  width: 100%;
  position: relative;


  & .col-1, .col-2, .col-3, .col-4, .col-5, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
    padding-left: 12px;
    padding-right: 12px;
  }

  & .col-1 {
    width: 8.333333%;
  }
  & .col-2 {
    width: 16.6666667%;
  }
  & .col-3 {
    width: 25%;
  }
  & .col-4 {
    width: 33.33333333%;
  }
  & .col-5 {
    width: 41.66666667%;
  }
  & .col-6 {
    width: 50%;
  }
  & .col-7 {
    width: 58.33333333%;
  }
  & .col-8 {
    width: 66.66666667%;
  }
  & .col-9 {
    width: 75%;
  }
  & .col-10 {
    width: 83.33333333%;
  }
  & .col-11 {
    width: 91.66666667%;
  }
  & .col-12 {
    width: 100%;
  }

  & .col-offset-12 {
    margin-left: 100%;
  }
  & .col-offset-11 {
    margin-left: 91.66666667%;
  }
  & .col-offset-10 {
    margin-left: 83.33333333%;
  }
  & .col-offset-9 {
    margin-left: 75%;
  }
  & .col-offset-8 {
    margin-left: 66.66666667%;
  }
  & .col-offset-7 {
    margin-left: 58.33333333%;
  }
  & .col-offset-6 {
    margin-left: 50%;
  }
  & .col-offset-5 {
    margin-left: 41.66666667%;
  }
  & .col-offset-4 {
    margin-left: 33.3333333%;
  }
  & .col-offset-3 {
    margin-left: 25%;
  }
  & .col-offset-2 {
    margin-left: 16.6666667%;
  }
  & .col-offset-1 {
    margin-left: 8.33333333%;
  }
  //Each element gets its distance according another item
  .form-group {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0px;
    z-index: 1000;
  }
  .form-group.check-box, .form-group.radio {
    margin-top: 0px;
    margin-bottom: 8px !important;
  }

  .form-group.check-box + .form-group, .form-group.radio + .form-group {
    margin-top: 0px !important;
  }
}

.form-group .label-form {
  display: inline-block;
  padding: 0;
  text-align: right;
  height: 20px;
  overflow: hidden;
}

//components radio and checkbox
.radio-container {
  margin-right: 10px;
  display: inline-block;
  overflow: hidden;

}