causeway-standard-theme/causeway/components/forms.less

//Form Variables
@horizontal-label-input-gap: 10px;
@checkbox-radio-offset: 20px;
@addon-icon-width-space: 20px;
@addon-currency-width: 70px;
@control-label-width: 20%;
@control-input-width: 76%;
@input-height: 26px;

//Mixins
.form-label-width {
  width: @control-label-width;
  @media @desktop {
    //width: @control-label-width + 5;
    width: 100%;
  }
  .modal & {
    width: @control-label-width + 10;
  }
  .form-two-columns & {
    width: @control-label-width + 10;
  }
}

.error-margin-left {
  margin-left: @control-label-width;
  padding-left: @horizontal-label-input-gap;
  @media @desktop {
    //margin-left: @control-label-width + 5;
    margin-left: 20px;

  }
  .modal & {
    margin-left: @control-label-width + 10;
  }
  .form-two-columns & {
    margin-left: @control-label-width + 10;
  }
}

.form-input-width {
  width: @control-input-width;
  @media @desktop {
    //width: @control-input-width - 5;
    width: 100% !important;
  }
  .modal & {
    width: @control-input-width - 10;
  }
  .form-two-columns & {
    width: @control-input-width - 10;
  }
}

form {
  margin: @form-padding 0;
  .row {
    .form-group {
      max-width: 100%;
    }
  }
  .form-group {
    max-width: 70%;
  }
  .checkbox, .radio, .radio-input-group, .checkbox-input-group {
    padding: 2px 0;
    position: relative;
    label {
      margin-bottom: 0;
    }
  }
  .checkbox-input-group {
    label{
      margin-right: 10px;
    }
  }
}

table {
  .form-group {
    margin-bottom: 0;
    max-width: 100%;
  }
}

a,
a:link,
a:visited,
a:hover,
a:active {
  &.form-control {
    color: @enterprise-dark-blue;
    font-weight: bold;
    text-decoration: underline;
    padding-top: 3px;
  }
}

.form-horizontal {
  @media @lg-desktop {
    width: 60%;
  }
  &.form-two-columns, &.has-table {
    width: 100%;
  }
  .control-label,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 0;

    .radio,
    .checkbox,
    .radio-inline,
    .checkbox-inline {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.form-group {
      margin-left: 0;
      margin-right: 0;
    }
  }
}

td {
  .form-horizontal {
    @media @lg-desktop {
      width: 100%;
    }
  }
  .control-input {
    width: 100%;
    input[type="text"],input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="email"]{
      margin-top: 2px;
      @media @desktop {
        margin-bottom: 3px;
      }
    }
  }
}

.form-control {
  border: 1px solid @black010;
  border-radius: 0;
  color: @black080;
  height: 22px;
  padding: 0 5px;
  textarea& {
    padding-top: 2px;
  }
  thead td &, thead th &, tbody td & {
    height: 22px;
  }
  &.inline {
    width: auto;
  }

  .box-shadow(none);
  &:focus {
    border: 1px solid @enterprise-blue;
    outline: 0 none;
    .box-shadow(none);
  }

  &::-webkit-input-placeholder {
    color: @black040;
  }

  &:-moz-placeholder {
    color: @black040;
  }

  &::-moz-placeholder {
    color: @black040;
  }

  &:-ms-input-placeholder {
    color: @black040;
  }

  &.placeholder-style {
    color: @black040;
  }

  &[disabled=disabled] {
    border: 1px solid @black010;
    color: @black030;
    background-color: @cool-grey;
  }

  &.readonly,
  &[readonly=readonly],
  &[readonly] {
    border: none;
    color: @black050;
    background-color: @cool-grey045;
    .box-shadow(none);
    cursor: default;
    border: 1px solid @black010;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }

  .form-condensed & {
    height: 20px;
  }
}

//Padding for textarea
tbody td textarea{
  margin-top: 5px;
  margin-bottom: 5px;
  @media @desktop {
    margin-top: 0;
  }
}
.control-label {
  float: left;
  margin-right: @horizontal-label-input-gap;
  .form-label-width;
}

.control-input {
  float: left;
  .form-input-width;
}

.offset-label {
  &.control-input {
    &:extend(.error-margin-left);
  }
}

.form-control-spacer {
  margin-bottom: 15px;
  clear: both;
}

//addon
.form-group {
  margin-bottom: 15px;
  position: relative;
  label {
    margin-bottom: 1px;
  }
  &.has-addon, &.time, &.date, &.date-range, &.color, &.currency {
    .control-input {
      padding-right: @addon-icon-width-space + @horizontal-label-input-gap;
      position: relative;
    }
    .form-control {
      float: left;
    }
  }
  &.currency {
    .control-input {
      padding-right: @addon-currency-width;
    }
    .add-on {
      width: @addon-currency-width;
    }
  }
  .add-on {
    width: @addon-icon-width-space;
    height: @addon-icon-width-space;
    display: block;
    vertical-align: middle;
    text-align: center;
    line-height: @addon-icon-width-space;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -@addon-icon-width-space/2;
  }
  &.form-group-inline {
    label {
      padding-top: 0;
    }
  }
}

//error
.invalid {
  .form-control {
    border: 1px solid @red;
    padding-right: 19px;
    background-repeat: no-repeat;
    background-position: 100% 1px;
    background-image: url(../images/icons/error-icon.png);
    padding: 0 5px;
    table & {
      background-position: 100% 1px;
      background-image: url(../images/icons/error-condensed-icon.png);
    }
  }
  &.error-hover {
    >.checkbox, >.radio, .checkbox-input-group, .radio-input-group {
      border: 1px solid @red;
      &:before {
        display: block;
        content: '';
        position: absolute;
        background: url(../images/icons/error-icon.png) no-repeat 100% 1px;
        width: 19px;
        height: 22px;
        right: 1px;
        top: 1px;
      }
    }
  }
}

.error-message {
  display: none;
}

.error {
  .error-message {
    clear: both;
    display: block;
    color: @red;
    position: absolute;
    left: 0;
  }
}

.info-text {
  &:extend(.error .control-input .error-message);
  .error-margin-left;
  color: @black080;
}

//two columns
.form-two-columns {
  .form-row {
    zoom: 1;
    clear: both;
    &:after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      visibility: hidden;
      clear: both;
    }

    > .form-group {
      width: 49%;
      float: left;
      margin-left: 1%;
      margin-right: 0;
      &:nth-child(odd) {
        margin-left: 0;
        margin-right: 1%;
      }
    }
  }
  > p, > h1, > h2, > h3, > h4, > h5, > h6, > ul, > a {
    clear: both;
  }
  zoom: 1;
  &:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    visibility: hidden;
    clear: both;
  }
}



.form-condensed {
  label {
    margin-bottom: 0;
  }
  .form-group {
    margin-bottom: 10px;
    &.error {
      margin-bottom: 20px;
    }
  }
  .checkbox, .radio, .radio-input-group, .checkbox-input-group {
    padding: 1px 0;
  }
  .invalid {
    .form-control {
      -webkit-background-size:auto 16px;
      background-size:auto 16px;
    }
    &.error-hover {
      > .checkbox, > .radio, .checkbox-input-group, .radio-input-group {
        &:before {
          -webkit-background-size: auto 16px;
          background-size: auto 16px;
          height: 17px;
        }
      }
    }
    .select {
      &:after {
        -webkit-background-size: auto 16px;
        background-size: auto 16px;
        height: 17px;
      }
    }
  }
  .select {
    select {
      padding: 0 5px;
    }
  }
}
// --------------------------------------------------
// Tab index for custom checkbox, radio,
// tristate and select
// --------------------------------------------------
input[type='checkbox'],
input[type='radio'] {
  &:focus {
    + label {
      span {
        background-position: 0 -18px;
      }
    }
  }
}

//form Inline
.form-inline {
  .form-group {
    width: auto;
    display: inline-block;
  }
  .form-group {
    margin-right: 10px;
    vertical-align: top;
    label {
      margin-bottom: 0;
      vertical-align: middle;
    }
  }
  .checkbox,
  .radio,
  .tristate {
    &.label-first {
      width: auto;
      > label {
        width: auto;
      }
      input[type='checkbox'],
      input[type='radio'] {
        float: left;
        margin-right: -18px;
      }
    }
  }
  .control-label,
  .control-input,
  .form-control {
    width: auto;
    display: inline-block;
    float: none;
    vertical-align: middle;
  }

}
//---------------------------------
//  forms button row in forms
//---------------------------------
.form-buttons-row {
  max-width: 50%;
  text-align: right;
  .btn, .btn-group, .btn-dropdown {
    margin-bottom: 5px;
    margin-right: 0;
    margin-left: 10px;
    .btn {
      margin-bottom: 0;
    }
  }
  &.top, &.bottom {
    position: absolute;
    right: 0;
  }
  &.top {
    top: 17px;
  }
  &.bottom {
    bottom: -47px;
  }
  .navigation-pane-right & {
    &.top {
      top: 0;
    }
  }
  & + .form-row {
    padding-top: 26px;
  }
}

.has-wizard {
  .pane {
    form {
      position: relative;
      .form-buttons-row {
        position: static;
        float: right;
        margin-bottom: -26px;
        margin-right: -20px;
        & + * {
          clear: both;
          padding-top: 46px;
        }
        & + .table-wrapper {
          padding-top: 0;
        }
      }
    }
  }
}
.input-group {
  width: 100%;
}
.input-group-addon {
  background: none;
  border: 0 none;
  padding: 0 12px;
  font-size: 16px;
  width: 40px;
}

.toggle-device-readonly {
  border: 0 !important;
  border-bottom: 1px solid #b2b2b2 !important;
  background-color: #fff !important;
}

@media @desktop {
  form {
    padding: 0;
    margin: 0 -20px;
    .form-group {
      max-width: 100%;
    }
  }

  .form-horizontal {
    width: auto;

    .control-label,
    .radio,
    .checkbox,
    .radio-inline,
    .checkbox-inline {
      padding: 0;
      text-align: left;
    }
    
    .control-label,
    .error-message {
      padding: 0 20px;
    }
    .control-label {
      float: none;
      margin-bottom: 5px;
    }
    .form-group {
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 5px;
    }
  }

  .form-control {
    border-left: 0 none;
    border-top: 0 none;
    border-right: 0 none;
    padding: 4px 12px;
    input& {
      padding: 7px 12px;
      height: auto;
    }
    .invalid & {
      border-left: 0 none;
      border-top: 0 none;
      border-right: 0 none;
      padding: 4px 13px;
    }

    &:focus {
      border-left: 0 none;
      border-top: 0 none;
      border-right: 0 none
    }
  }

  td {
    .form-horizontal {
      width: 100%;
    }
  }

  .form-buttons-row {
    margin-bottom: 22px;
    max-width: 100%;
    &.top, &.bottom {
      position: static;
    }
  }
}

///**
// * Import component overrides
// */
//
@import "form-fields/date-input.less";
@import "form-fields/time-input.less";
@import "form-fields/select-input.less";
@import "form-fields/telephone-input.less";
@import "form-fields/textarea-input.less";
@import "form-fields/file-input.less";
@import "form-fields/checkbox-input.less";
@import "form-fields/image-input.less";
@import "form-fields/spinbox-input.less";
@import "form-fields/form-color.less";
@import "form-fields/form-currency.less";
@import "form-fields/advanced-listbox.less";
@import "form-fields/select-shuttle.less";