137 lines
3.1 KiB
Plaintext
Executable File
137 lines
3.1 KiB
Plaintext
Executable File
//
|
|
// Input groups
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Sizing options
|
|
//
|
|
// Remix the default form control sizing classes into new ones for easier
|
|
// manipulation.
|
|
|
|
.input-group-hg > .form-control,
|
|
.input-group-hg > .input-group-addon,
|
|
.input-group-hg > .input-group-btn > .btn { .input-hg(); }
|
|
.input-group-lg > .form-control,
|
|
.input-group-lg > .input-group-addon,
|
|
.input-group-lg > .input-group-btn > .btn { .input-lg(); }
|
|
.input-group-sm > .form-control,
|
|
.input-group-sm > .input-group-addon,
|
|
.input-group-sm > .input-group-btn > .btn { .input-sm(); }
|
|
|
|
// Text input groups
|
|
// -------------------------
|
|
.input-group-addon {
|
|
padding: 10px 12px;
|
|
font-size: @component-font-size-base;
|
|
color: @inverse;
|
|
text-align: center;
|
|
background-color: @gray-light;
|
|
border: 1px solid @gray-light;
|
|
border-radius: @border-radius-large;
|
|
.transition(~"border .25s linear, color .25s linear, background-color .25s linear");
|
|
|
|
.input-group-hg &,
|
|
.input-group-lg &,
|
|
.input-group-sm &, {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
// Reset rounded corners
|
|
.form-controls-corners-reset();
|
|
|
|
|
|
|
|
// Focus State
|
|
// -------------------------
|
|
.form-group.focus,
|
|
.input-group.focus {
|
|
.input-group-addon {
|
|
background-color: @brand-secondary;
|
|
border-color: @brand-secondary;
|
|
}
|
|
.input-group-btn {
|
|
> .btn-default + .btn-default {
|
|
border-left-color: mix(@brand-secondary, black, 85%);
|
|
}
|
|
.btn {
|
|
border-color: @brand-secondary;
|
|
background-color: @inverse;
|
|
color: @brand-secondary;
|
|
}
|
|
.btn-default {
|
|
.button-variant(@btn-default-color, @brand-secondary, @btn-primary-hover-bg, @btn-primary-active-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Button input groups
|
|
// -------------------------
|
|
.input-group-btn {
|
|
.btn {
|
|
background-color: @inverse;
|
|
border: 2px solid @gray-light;
|
|
color: @gray-light;
|
|
line-height: 18px;
|
|
}
|
|
.btn-default {
|
|
.button-variant(@btn-default-color, @gray-light, @btn-hover-bg, @btn-active-bg);
|
|
}
|
|
.input-group-hg & .btn {
|
|
line-height: 31px;
|
|
}
|
|
.input-group-lg & .btn {
|
|
line-height: 21px;
|
|
}
|
|
.input-group-sm & .btn {
|
|
line-height: 19px;
|
|
}
|
|
&:first-child > .btn {
|
|
border-right-width: 0;
|
|
margin-right: -2px;
|
|
}
|
|
&:last-child > .btn {
|
|
border-left-width: 0;
|
|
margin-left: -2px;
|
|
}
|
|
& > .btn-default + .btn-default {
|
|
border-left: 2px solid @gray-light;
|
|
}
|
|
& > .btn:first-child + .btn {
|
|
.caret {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Rounded input groups
|
|
// -------------------------
|
|
.input-group-rounded {
|
|
.input-group-btn + .form-control,
|
|
.input-group-btn:last-child .btn {
|
|
.border-right-radius(20px);
|
|
|
|
.input-group-hg& {
|
|
.border-right-radius(27px);
|
|
}
|
|
.input-group-lg& {
|
|
.border-right-radius(25px);
|
|
}
|
|
}
|
|
.form-control:first-child,
|
|
.input-group-btn:first-child .btn {
|
|
.border-left-radius(20px);
|
|
|
|
.input-group-hg& {
|
|
.border-left-radius(27px);
|
|
}
|
|
.input-group-lg& {
|
|
.border-left-radius(25px);
|
|
}
|
|
}
|
|
// Remove left padding for .form-control after button
|
|
.input-group-btn + .form-control {
|
|
padding-left: 0;
|
|
}
|
|
} |