amazeui/less/input-group.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                     Input group
//
// Description:              Define style for input group
//
// Component:                `.am-input-group`

// Sub-objects:              `.am-input-group-label`
//                           `.am-input-group-btn`
//
// Modifiers:                `.am-input-group-lg`
//                           `.am-input-group-sm`
//                           `.am-input-group-primary`
//                           `.am-input-group-secondary`
//                           `.am-input-group-success`
//                           `.am-input-group-warning`
//                           `.am-input-group-danger`
//
// Uses:                     Form
//                           Button
//
// Via:                      http://getbootstrap.com/components/#input-groups
//
// =============================================================================

@input-group-height: unit(ceil(unit(@form-font-size * (1.2 + 0.5*2) + 0.2) * 10), px);

/* ==========================================================================
   Component: Input group
 ============================================================================ */

.@{ns}input-group {
  position: relative;
  display: table;
  border-collapse: separate;

  .@{ns}form-field {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
  }

  .hook-input-group;
}


// Display as table-cell
// =============================================================================

.@{ns}input-group-label,
.@{ns}input-group-btn,
.@{ns}input-group .@{ns}form-field {
  display: table-cell;

  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
}

// Input group text
.@{ns}input-group-label,
.@{ns}input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
}


// Text input groups
// =============================================================================

.@{ns}input-group-label {
  height: @input-group-height;
  padding: 0 1em;
  font-size: @form-font-size;
  font-weight: normal;
  line-height: @input-group-height - 2;
  color: @input-color;
  text-align: center;
  background-color: @input-group-label-bg;
  border: 1px solid @input-group-label-border-color;
  border-radius: @global-radius;

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0;
  }

  .hook-input-group-label;
}


// Reset rounded corners
// =============================================================================

.@{ns}input-group .@{ns}form-field:first-child,
.@{ns}input-group-label:first-child,
.@{ns}input-group-btn:first-child > .@{ns}btn,
.@{ns}input-group-btn:first-child > .@{ns}btn-group > .@{ns}btn,
.@{ns}input-group-btn:first-child > .@{ns}dropdown-toggle,
.@{ns}input-group-btn:last-child > .@{ns}btn:not(:last-child):not(.dropdown-toggle),
.@{ns}input-group-btn:last-child > .@{ns}btn-group:not(:last-child) > .@{ns}btn {
  .border-right-radius(0);
}

.@{ns}input-group-label:first-child {
  border-right: 0;
}

.@{ns}input-group .@{ns}form-field:last-child,
.@{ns}input-group-label:last-child,
.@{ns}input-group-btn:last-child > .@{ns}btn,
.@{ns}input-group-btn:last-child > .@{ns}btn-group > .@{ns}btn,
.@{ns}input-group-btn:last-child > .@{ns}dropdown-toggle,
.@{ns}input-group-btn:first-child > .@{ns}btn:not(:first-child),
.@{ns}input-group-btn:first-child > .@{ns}btn-group:not(:first-child) > .@{ns}btn {
  .border-left-radius(0);
}

.@{ns}input-group-label:last-child {
  border-left: 0;
}


// Button input groups
// =============================================================================

.@{ns}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.
  > .@{ns}btn {
    position: relative;
    border-color: @input-border;

    + .@{ns}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 {
    > .@{ns}btn,
    > .@{ns}btn-group {
      margin-right: -2px;
    }
  }

  &:last-child {
    > .@{ns}btn,
    > .@{ns}btn-group {
      margin-left: -1px;
    }
  }

  .hook-input-group-btn;
}


// equal height
// =============================================================================

.@{ns}input-group .@{ns}form-field,
.@{ns}input-group-btn > .@{ns}btn {
  height: @input-group-height;
  padding-bottom: auto;
}


// Modifiers - sizing
// =============================================================================

@lg-height: unit(ceil(unit(@form-font-size-lg * 1.2 + 0.5*2*@form-font-size-lg + 0.2) * 10), px);
@sm-height: unit(ceil(unit(@form-font-size-sm * 1.2 + 0.5*2*@form-font-size-sm + 0.2) * 10), px);

.@{ns}input-group-lg > .@{ns}form-field,
.@{ns}input-group-lg > .@{ns}input-group-label,
.@{ns}input-group-lg > .@{ns}input-group-btn > .@{ns}btn {
  height: @lg-height;
  font-size: @form-font-size-lg !important;
}

.@{ns}input-group-lg > .@{ns}input-group-label {
  line-height: @lg-height - 2;
}

.@{ns}input-group-sm > .@{ns}form-field,
.@{ns}input-group-sm > .@{ns}input-group-label,
.@{ns}input-group-sm > .@{ns}input-group-btn > .@{ns}btn {
  height: @sm-height;
  font-size: @form-font-size-sm !important;
}

.@{ns}input-group-sm > .@{ns}input-group-label {
  line-height: @sm-height - 2;
}


// Modifiers - colors
// =============================================================================

.input-group-color-variant(@bg: @btn-primary-bg, @color: @btn-primary-color, @border: @btn-primary-border) {
  .@{ns}input-group-label {
    background: @bg;
    color: @color;
  }

  .@{ns}input-group-label,
  .@{ns}input-group-btn > .@{ns}btn,
  &.@{ns}input-group .@{ns}form-field { // dirty way to fix border-color doesn't work within `.am-form`: add &.@{ns}input-group
    border-color: @border;
  }
}

.@{ns}input-group-primary {
  .input-group-color-variant();
  .hook-input-group-primary;
}

.@{ns}input-group-secondary {
  .input-group-color-variant(@btn-secondary-bg, @btn-secondary-color, @btn-secondary-border);
  .hook-input-group-secondary;
}

.@{ns}input-group-success {
  .input-group-color-variant(@btn-success-bg, @btn-success-color, @btn-success-border);
  .hook-input-group-success;
}

.@{ns}input-group-warning {
  .input-group-color-variant(@btn-warning-bg, @btn-warning-color, @btn-warning-border);
  .hook-input-group-warning;
}

.@{ns}input-group-danger {
  .input-group-color-variant(@btn-danger-bg, @btn-danger-color, @btn-danger-border);
  .hook-input-group-danger;
}


// Hooks
// =============================================================================

.hook-input-group() {}
.hook-input-group-label() {}
.hook-input-group-btn() {}

.hook-input-group-primary() {}
.hook-input-group-secondary() {}
.hook-input-group-success() {}
.hook-input-group-warning() {}
.hook-input-group-danger() {}

// TODO: v2 中使用 flexbox