initial commit.

styles/form-input-group.scss

@@ -0,0 +1,152 @@
+@import "vars";
+.number .slash {
+  margin-left: -2px;
+  margin-right: -2px;
+  top: -2px;
+  position: relative;
+}
+.slash {
+  font-size: 20px;
+  opacity: 0.4;
+  color: inherit;
+  margin-top: -4px;
+
+  margin-left: 5px;
+  margin-right: 6px;
+}
+
+
+.input-couple {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.input-couple {
+  position: relative; // For dropdowns
+  display: table;
+  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+  table-layout: fixed;
+  
+  &.divided {
+    > div {
+      padding-top: 15px ;
+      display: table-cell;
+      border-right: 2px solid rgba(0,0,0,0.025);
+      &:last-child {border: none; }
+    }
+  }
+
+  > div {
+    display: table-cell;
+    &:first-child .form-group { padding-right: 10px; .label,.input {text-align: right !important;} }
+    &:last-child .form-group  { padding-left: 10px;  .label,.input {text-align: left !important;} }
+    .unit { display: none;}
+  }
+
+  .slash {
+    position: absolute;
+    font-size: 20px;
+    opacity: 0.4;
+    right: 3px;
+    bottom: 0px;
+    width: 0;
+    height: 60px;
+    line-height: 60px;
+    color: inherit;
+  }
+
+  .times {
+    position: absolute;
+    font-size: 20px;
+    opacity: 0.4;
+    right: 7px;
+    bottom: 0px;
+    width: 0;
+    height: 60px;
+    line-height: 60px;
+  }
+}
+
+.input-group {
+  position: relative; // For dropdowns
+  display: table;
+  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+
+  > * {
+    display: table-cell;
+    width: 100%;
+
+  }
+
+  .input {
+    // IE9 fubars the placeholder attribute in text inputs and the arrows on
+    // select elements in input groups. To fix it, we float the input. Details:
+    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
+    float: left;
+    width: 100%;
+
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    // border-right: none;
+  }
+  .form-group {
+    padding: 0px;
+  }
+}
+
+
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle; // Match the inputs
+  // padding-left: 3px;
+  .btn {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+  .input {
+    border-left: none;
+  }
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn {
+  position: relative;
+  // Jankily prevent input button groups from wrapping with `white-space` and
+  // `font-size` in combination with `inline-block` on buttons.
+  font-size: 0;
+  white-space: nowrap;
+
+  // Negative margin for spacing, position for bringing hovered/focused/actived
+  // element above the siblings.
+  > .btn {
+    position: relative;
+    + .btn {
+      // margin-left: -1px;
+    }
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 2;
+    }
+  }
+
+  // Negative margin to only have a 1px border between the two
+  &:first-child {
+    > .btn,
+    > .btn-group {
+      // margin-right: -1px;
+    }
+  }
+  &:last-child {
+    > .btn,
+    > .btn-group {
+      // margin-left: -1px;
+    }
+  }
+}