74 lines
2.1 KiB
SCSS
74 lines
2.1 KiB
SCSS
// Form control
|
|
// *******************************************************************************
|
|
.form-control {
|
|
//? Form control (all size) padding calc due to border increase on focus
|
|
padding: calc($input-padding-y - $input-border-width) calc($input-padding-x - $input-border-width);
|
|
// form input placeholder animation
|
|
&::placeholder,
|
|
&:focus::placeholder {
|
|
transition: all 0.2s ease;
|
|
}
|
|
// border color on hover state
|
|
&:hover {
|
|
&:not([disabled]):not([focus]) {
|
|
border-color: $input-border-hover-color;
|
|
}
|
|
}
|
|
// ! FIX: wizard-ex input type number placeholder align issue
|
|
&[type='number'] {
|
|
.input-group & {
|
|
line-height: 1.375rem;
|
|
min-height: 2.375rem;
|
|
}
|
|
.input-group-lg & {
|
|
line-height: 1.5rem;
|
|
min-height: 3rem;
|
|
}
|
|
.input-group-sm & {
|
|
min-height: 1.875rem;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
border-width: $input-focus-border-width;
|
|
padding: calc($input-padding-y - $input-focus-border-width) calc($input-padding-x - $input-focus-border-width);
|
|
}
|
|
&.form-control-lg {
|
|
padding: calc($input-padding-y-lg - $input-border-width) calc($input-padding-x-lg - $input-border-width);
|
|
&:focus {
|
|
padding: calc($input-padding-y-lg - $input-focus-border-width)
|
|
calc($input-padding-x-lg - $input-focus-border-width);
|
|
}
|
|
}
|
|
&.form-control-sm {
|
|
padding: calc($input-padding-y-sm - $input-border-width) calc($input-padding-x-sm - $input-border-width);
|
|
&:focus {
|
|
padding: calc($input-padding-y-sm - $input-focus-border-width)
|
|
calc($input-padding-x-sm - $input-focus-border-width);
|
|
}
|
|
}
|
|
}
|
|
.input-group:has(button) .form-control {
|
|
padding: calc($input-padding-y - $input-border-width) calc($input-padding-x - $input-border-width) !important;
|
|
border-width: $input-border-width !important;
|
|
}
|
|
// ltr only
|
|
@include ltr-only {
|
|
.form-control:not([readonly]) {
|
|
&:focus::placeholder {
|
|
transform: translateX(5px);
|
|
}
|
|
}
|
|
}
|
|
// rtl only
|
|
@include rtl-only {
|
|
input[type='tel'] {
|
|
text-align: right;
|
|
}
|
|
.form-control:not([readonly]) {
|
|
&:focus::placeholder {
|
|
transform: translateX(-5px);
|
|
}
|
|
}
|
|
}
|