forkjo/public/ng/less/ui/form.less

@import "var";

// colored buttons
.btn {
  &:hover {
  }
}

.btn-small {
  font-size: 0.9*@baseFontSize;
  padding: .4em .9em;
}

.btn-large {
  font-size: 1.2*@baseFontSize;
}

.btn-green {
  background-color: @btnGreenColor;
  border: 1px solid @btnGreenColor;
  &:hover {
    background-color: @btnHoverGreenColor;
    color: #FFF;
  }
}

.btn-blue {
  background-color: @btnBlueColor;
  border: 1px solid @btnBlueColor;
  &:hover {
    background-color: @btnHoverBlueColor;
    color: #FFF;
  }
}

.btn-red {
  background-color: @btnRedColor;
  border: 1px solid @btnRedColor;
  &:hover {
    background-color: @btnHoverRedColor;
    color: #FFF;
  }
}

.btn-orange {
  background-color: @btnOrangeColor;
  border: 1px solid @btnOrangeColor;
  &:hover {
    background-color: @btnHoverOrangeColor;
    color: #FFF;
  }
}

.btn-black {
  background-color: @btnBlackColor;
  border: 1px solid @btnBlackColor;
  &:hover {
    background-color: @btnHoverBlackColor;
    color: #FFF;
  }
}

.btn-gray {
  background-color: @btnGrayColor;
  color: @baseFontColor;
  border: 1px solid @btnGrayBorderColor;
  &:hover {
    background-color: @btnGrayHoverColor;
    color: @baseFontColor;
  }
}

// status buttons

.btn-active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 0 4px rgba(0, 0, 0, .15) inset
}

.btn-radius {
  border-radius: .25em;
}

.btn-left-radius {
  border-top-left-radius: .25em;
  border-bottom-left-radius: .25em;
}

.btn-right-radius {
  border-top-right-radius: .25em;
  border-bottom-right-radius: .25em;
}

.btn-block {
  display: block;
  width: 100%;
  box-sizing: content-box;
  text-align: center;
}

.btn-disabled {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
  background-image: none !important;
  border: none;
  &:hover {
    background-image: none !important;
    color: @btnHoverFontColor;
  }
}

// input form elements

.ipt {
  &:focus {
    border-color: @iptFocusBorderColor;
  }
}

.ipt-radius {
  border-radius: .25em;
}

.ipt-small {
  font-size: .8*@baseFontSize;
}

.ipt-large {
  font-size: 1.2*@baseFontSize;
}

.ipt-disabled,
input[disabled] {
  background-color: @iptDisabledColor !important;
  &:focus {
    background-color: @iptDisabledColor !important;
  }
  color: #888;
  cursor: not-allowed;
}

.ipt-readonly,
input[readonly] {
  &:focus {
    background-color: @iptDisabledColor !important;
  }
}

.ipt-error {
  border-color: @iptErrorBorderColor !important;
  background-color: @iptErrorFocusColor !important;
}

.form {
  label {
    margin-right: 1em;
  }
  .help {
    color: @formHelpFontColor;
    padding-top: .6em;
    display: inline-block;
  }
}

.form-stack {
  label {
    display: block;
  }
  .field {
    margin-bottom: 1em;
  }
}

.form-align {
  label,
  .form-label {
    display: inline-block;
    width: 120px;
    text-align: right;
    margin-right: 1em;
  }
  .field {
    margin-bottom: 1em;
  }
}

label.req {
  &:after {
    content: "*";
    color: @labelRedColor;
  }
}