280 lines
5.6 KiB
Plaintext
280 lines
5.6 KiB
Plaintext
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # 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 {
|
|
.input-xlg();
|
|
}
|
|
.input-group-xlg > .input-group-addon {
|
|
padding-right: @padding-xlarge-horizontal;
|
|
}
|
|
.input-group-xlg > .input-group-btn > .btn {
|
|
padding-left: @padding-xlarge-horizontal;
|
|
padding-right: @padding-xlarge-horizontal;
|
|
}
|
|
|
|
// Large size
|
|
.input-group-lg > .form-control,
|
|
.input-group-lg > .input-group-addon,
|
|
.input-group-lg > .input-group-btn > .btn {
|
|
.input-lg();
|
|
}
|
|
.input-group-lg > .input-group-addon {
|
|
padding-right: @padding-large-horizontal;
|
|
}
|
|
.input-group-lg > .input-group-btn > .btn {
|
|
padding: (@padding-large-vertical + 1) (@padding-large-horizontal + 1);
|
|
}
|
|
|
|
// Small size
|
|
.input-group-sm > .form-control,
|
|
.input-group-sm > .input-group-addon,
|
|
.input-group-sm > .input-group-btn > .btn {
|
|
.input-sm();
|
|
}
|
|
.input-group-sm > .input-group-addon {
|
|
padding-right: @padding-small-horizontal;
|
|
}
|
|
.input-group-sm > .input-group-btn > .btn {
|
|
padding: (@padding-small-vertical + 1) (@padding-small-horizontal + 1);
|
|
}
|
|
|
|
// Mini size
|
|
.input-group-xs > .form-control,
|
|
.input-group-xs > .input-group-addon,
|
|
.input-group-xs > .input-group-btn > .btn {
|
|
.input-xs();
|
|
}
|
|
.input-group-xs > .input-group-addon {
|
|
padding-right: @padding-xs-horizontal;
|
|
}
|
|
.input-group-xs > .input-group-btn > .btn {
|
|
padding: (@padding-xs-vertical + 1) (@padding-xs-horizontal + 1);
|
|
}
|
|
|
|
|
|
|
|
// 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;
|
|
.box-shadow(none);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Text input groups
|
|
// -------------------------
|
|
|
|
.input-group-addon {
|
|
padding-left: 0;
|
|
|
|
// Last item
|
|
&:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
// Icon
|
|
> i {
|
|
display: block;
|
|
top: 0;
|
|
}
|
|
|
|
// Checkbox, radio
|
|
.checker,
|
|
.choice {
|
|
display: block;
|
|
margin-top: ((@line-height-computed - @checkbox-size) / 2);
|
|
}
|
|
|
|
// Multiple items
|
|
.input-group input + &,
|
|
.input-group-btn + &,
|
|
.input-group > .fas-feedback + & {
|
|
padding-left: @padding-base-horizontal;
|
|
}
|
|
|
|
// Contextual classes
|
|
.has-warning &,
|
|
.has-success &,
|
|
.has-error & {
|
|
border-color: @input-group-addon-border-color;
|
|
background-color: @input-group-addon-bg;
|
|
}
|
|
|
|
|
|
//
|
|
// Sizing
|
|
//
|
|
|
|
// XLarge
|
|
.input-group-xlg > .form-control + & {
|
|
padding-left: @padding-xlarge-horizontal;
|
|
}
|
|
|
|
// Large
|
|
.input-group-lg > .form-control + & {
|
|
padding-left: @padding-large-horizontal;
|
|
}
|
|
|
|
// Small
|
|
.input-group-sm > .form-control + & {
|
|
padding-left: @padding-small-horizontal;
|
|
}
|
|
|
|
// Mini
|
|
.input-group-xs > .form-control + & {
|
|
padding-left: @padding-xs-horizontal;
|
|
}
|
|
}
|
|
|
|
|
|
// Button input groups
|
|
// -------------------------
|
|
|
|
// Button
|
|
.input-group-btn {
|
|
padding-right: @padding-base-horizontal;
|
|
|
|
&:first-child {
|
|
> .btn,
|
|
> .btn-group {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.input-group > .form-control + &,
|
|
.input-group > .has-feedback + & {
|
|
padding-left: @padding-base-horizontal;
|
|
}
|
|
|
|
& + .input-group-addon {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Sizing
|
|
//
|
|
|
|
// XLarge
|
|
.input-group-xlg {
|
|
.input-group-btn:not(:last-child) {
|
|
padding-right: @padding-xlarge-horizontal;
|
|
}
|
|
|
|
> .form-control + .input-group-btn {
|
|
padding-left: @padding-xlarge-horizontal;
|
|
}
|
|
}
|
|
|
|
// large
|
|
.input-group-lg {
|
|
.input-group-btn:not(:last-child) {
|
|
padding-right: @padding-large-horizontal;
|
|
}
|
|
|
|
> .form-control + .input-group-btn {
|
|
padding-left: @padding-large-horizontal;
|
|
}
|
|
}
|
|
|
|
// Small
|
|
.input-group-sm {
|
|
.input-group-btn:not(:last-child) {
|
|
padding-right: @padding-small-horizontal;
|
|
}
|
|
|
|
> .form-control + .input-group-btn {
|
|
padding-left: @padding-small-horizontal;
|
|
}
|
|
}
|
|
|
|
// Mini
|
|
.input-group-xs {
|
|
.input-group-btn:not(:last-child) {
|
|
padding-right: @padding-xs-horizontal;
|
|
}
|
|
|
|
> .form-control + .input-group-btn {
|
|
padding-left: @padding-xs-horizontal;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Rounded corners
|
|
//
|
|
|
|
.input-group-btn > .btn,
|
|
.input-group-btn > .btn-group > .btn {
|
|
border-radius: 0;
|
|
}
|
|
.input-group-btn > .btn-rounded {
|
|
border-radius: 100px!important;
|
|
}
|
|
|
|
// First items
|
|
.input-group-btn:first-child > .btn:first-child,
|
|
.input-group-btn:first-child > .btn-group > .btn,
|
|
.input-group-btn > .btn-group:first-child > .btn,
|
|
.input-group-btn > .btn:first-child {
|
|
.border-left-radius(@border-radius-base);
|
|
}
|
|
|
|
// Last items
|
|
.input-group-btn > .btn:last-child,
|
|
.input-group-btn:last-child > .btn-group > .btn,
|
|
.input-group-btn > .btn-group:last-child > .btn,
|
|
.input-group-btn > .btn:last-of-type {
|
|
.border-right-radius(@border-radius-base);
|
|
}
|