You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.3 KiB
108 lines
2.3 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
|
*
|
||
|
|
* # 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;
|
||
|
|
}
|
||
|
|
}
|