input-groups.less

/* ------------------------------------------------------------------------------
*
*  # Input groups component
*
*  Overrides for input groups bootstrap component
*
*  Version: 1.1
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */


// Base
// -------------------------

.input-group {

    // Make icon to be always on top
    .form-control-feedback {
        z-index: 3;
    }
}

// Sizing options
// -------------------------

// XLarge size
.input-group-xlg > .form-control,
.input-group-xlg > .input-group-addon,
.input-group-xlg > .input-group-btn > .btn {
    height: @input-height-xlarge;
    padding: @padding-xlarge-vertical @padding-xlarge-horizontal;
    font-size: @font-size-xlarge;
    line-height: @line-height-xlarge;
}

// Mini size
.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
    height: @input-height-mini;
    padding: @padding-xs-vertical @padding-xs-horizontal;
    font-size: @font-size-small;
    line-height: @line-height-small;
}


// Transparent input group
// -------------------------

.input-group-transparent {
    .input-group-addon {
        background-color: transparent;
        border-color: transparent;
        padding: 0;
    }

    .form-control {
        background-color: transparent;
        border-color: transparent;
        cursor: pointer;
        width: auto;
        padding: 0;

        &:hover,
        &:focus {
            border-color: transparent;
        }
    }
}


// Text input groups
// -------------------------
.input-group-addon {

    // Icon
    > i {
        display: block;
        top: 0;
    }

    // Checkbox, radio
    .checker,
    .choice {
        display: block;
        margin-top: ((@line-height-computed - @checkbox-size) / 2);
    }

    // Sizing
    &.input-xlg {
        padding: (@padding-large-vertical + 2) @padding-large-horizontal;
        font-size: @font-size-large;
        border-radius: @border-radius-base;
    }
    &.input-xs {
        padding: @padding-xs-vertical @padding-xs-horizontal;
        font-size: @font-size-base;
        border-radius: @border-radius-small;
    }
    &.input-sm {
        font-size: @font-size-base;
    }
    &.input-lg {
        border-radius: @border-radius-base;
    }
}