New UI merge in progress

public/ng/less/ui/form.less

@@ -0,0 +1,192 @@
+@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;
+  }
+}