spacedeck-open/styles/form-input-group.scss

@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;
    }
  }
}