.fpb-7 {
padding-bottom: 7px;
}
.fmb-12 {
margin-bottom: 12px;
}
.fmb-14 {
margin-bottom: 14px;
}
.eForm-label {
margin-bottom: 6px;
font-size: 13px;
font-weight: $fw_Medium;
color: $eColor_Blueish;
}
.col-eForm-label {
font-size: 13px;
font-weight: $fw_Medium;
color: $eColor_Blueish;
line-height: 1.5;
@media screen and (max-width: 575px) {
margin-bottom: 6px;
}
}
.eForm-check-label {
font-size: 12px;
font-weight: $fw_Medium;
color: $eColor_Blueish;
}
.eForm-control-color {
width: 60px;
padding: 8px;
}
.eForm-control-sm {
min-height: 30px !important;
padding: 8px 16px !important;
font-size: 10px !important;
border-radius: 5px !important;
}
.eForm-control-lg {
min-height: 55px !important;
padding: 16px !important;
font-size: 14px !important;
border-radius: 5px !important;
}
.eForm-control {
display: block;
width: 100%;
padding: 11px 16px;
font-size: 12px;
font-weight: $fw_Regular;
line-height: 1.5;
color: $eColor_Blackish;
background-color: #fff;
background-clip: padding-box;
border: 1px solid $eColor_Blackish_bg;
appearance: none;
border-radius: 5px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
&:focus,
&:hover {
border: 1px solid $eColor_Blue;
}
&::placeholder {
font-size: 12px;
font-weight: $fw_Regular;
color: $eColor_Blueish;
}
}
textarea {
&.eForm-control {
min-height: 120px !important;
}
}
input[type="date"],
input[type="month"],
input[type="week"] {
&::-webkit-calendar-picker-indicator {
background-image: url(../images/calendar-regular.svg);
}
}
input[type="time"] {
&::-webkit-calendar-picker-indicator {
background-image: url(../images/clock.svg);
}
}
.btn-form {
border: 0;
width: 119px;
height: 40px;
border-radius: 5px;
background-color: $eColor_Blue;
font-size: 12px;
font-weight: $fw_Medium;
color: #fff;
}
// File Browser
.eForm-control-file[type="file"] {
display: block;
width: 100%;
font-size: 12px;
font-weight: $fw_Regular;
line-height: 1.5;
color: $eColor_Blackish;
background-color: #fff;
background-clip: padding-box;
border: 1px solid $eColor_Blackish_bg;
appearance: none;
border-radius: 5px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
&::-webkit-file-upload-button {
padding: 11px 16px;
margin-right: 14px;
font-size: 12px;
font-weight: $fw_Regular;
color: $eColor_Blackish;
background-color: #eff2f7;
border-right: 1px solid $eColor_Darkish;
border-radius: 5px 0 0 5px;
}
&:hover {
&::-webkit-file-upload-button {
background-color: #eff2ef !important;
}
}
&.eForm-control-file-lg {
font-size: 14px;
&::-webkit-file-upload-button {
padding: 17px 20px 15px;
font-size: 14px;
}
}
&.eForm-control-file-sm {
font-size: 10px;
&::-webkit-file-upload-button {
padding: 7px 20px 6px;
font-size: 10px;
}
}
}
// Choice
.eForm-select {
~ .select2-container--default {
.select2-selection--multiple,
.select2-selection--single {
border: 1px solid $eColor_Blackish_bg;
border-radius: 5px;
padding-bottom: 0 !important;
padding-right: 0 !important;
min-height: 40px;
&:focus,
&:hover {
border: 1px solid $eColor_Blue;
}
.select2-selection__choice {
background-color: $eColor_Blue;
border: 0px solid #aaa;
border-radius: 13px;
margin-left: 8px;
padding-left: 0;
padding-right: 30px;
.select2-selection__choice__remove {
border-right: 0px solid transparent;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
font-size: 12px;
font-weight: 400;
padding: 0px 12px;
color: #bce7ff;
right: 0;
left: auto;
&:hover,
&:focus {
background-color: transparent !important;
}
}
.select2-selection__choice__display {
padding-left: 11px;
color: #fff;
font-size: 12px;
padding-right: 10px;
position: relative;
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 17px;
background-color: #7dcffe;
}
}
}
}
.select2-selection--single {
.select2-selection__rendered {
color: $eColor_Blackish;
line-height: 40px;
font-size: 14px;
font-weight: 400;
padding-left: 16px;
}
.select2-selection__arrow {
height: 40px !important;
top: 0 !important;
right: 11px !important;
b {
border-width: 0 !important;
background-image: url(../images/select-arrow.svg);
width: 8px !important;
height: 7px !important;
background-repeat: no-repeat;
transform: rotate(0deg);
transition: all 0.3s;
}
}
}
&.select2-container--open {
.select2-selection--single {
.select2-selection__arrow {
top: -2px !important;
b {
transform: rotate(180deg);
}
}
}
}
.select2-search--inline {
.select2-search__field {
margin-left: 16px !important;
margin-top: 14px !important;
line-height: 1;
&:placeholder-shown {
font-size: 12px;
font-weight: $fw_Regular;
color: $eColor_Blackish;
}
}
}
&.select2-container--focus {
.select2-selection--multiple {
border: 1px solid $eColor_Blackish_bg;
}
}
}
&.eChoice-multiple-without-remove {
~ .select2-container--default {
.select2-selection--multiple {
.select2-selection__choice {
padding-right: 1px;
.select2-selection__choice__remove {
display: none;
}
.select2-selection__choice__display {
padding-left: 11px;
color: #fff;
font-size: 12px;
padding-right: 10px;
position: relative;
&::after {
display: none;
}
}
}
}
}
}
}
// Select2 dropdown
.select2-dropdown {
border: none !important;
border-radius: 0 0 5px 5px !important;
overflow: hidden;
box-shadow: 0 7px 25px #797c8b25;
}
.select2-results__option {
padding: 6px 16px !important;
font-size: 13px;
font-weight: $fw_Medium;
line-height: 20px;
color: $eColor_Blackish;
}
.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable {
background-color: $dropdown_bg !important;
color: $eColor_Blue !important;
}
.select2-search--dropdown {
display: none !important;
}
.select2-container--default .select2-results__option--selected {
background-color: $dropdown_bg !important;
color: $eColor_Blue !important;
}