171 lines
4.2 KiB
SCSS
171 lines
4.2 KiB
SCSS
// Bootstrap Select
|
|
// *******************************************************************************
|
|
|
|
@import "../../scss/_bootstrap-extended/include";
|
|
@import "bootstrap-select/sass/bootstrap-select";
|
|
|
|
/* Common Styles */
|
|
.bootstrap-select *,
|
|
.bootstrap-select .dropdown-toggle:focus {
|
|
outline: 0 !important;
|
|
}
|
|
.bootstrap-select {
|
|
--#{$prefix}bootstrap-select-arrow-position: 23px;
|
|
.bs-searchbox,
|
|
.bs-actionsbox,
|
|
.bs-donebutton {
|
|
padding-block: 0 .5rem;
|
|
padding-inline: 0;
|
|
}
|
|
> .dropdown-toggle {
|
|
&.bs-placeholder {
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: $input-placeholder-color;
|
|
}
|
|
}
|
|
}
|
|
.dropdown-toggle {
|
|
border: $input-border-width solid $input-border-color;
|
|
@include border-radius($input-border-radius);
|
|
color: $input-color;
|
|
padding-block: calc($input-padding-y - $input-border-width);
|
|
padding-inline: $input-padding-x;
|
|
transition: none;
|
|
.filter-option {
|
|
float: inline-start;
|
|
inset-inline: 0 auto;
|
|
text-align: start;
|
|
}
|
|
&::after {
|
|
position: absolute;
|
|
margin: 0;
|
|
inset-block-start: 50%;
|
|
inset-inline-end: var(--#{$prefix}bootstrap-select-arrow-position);
|
|
transform: rotate(45deg) translateY(-100%);
|
|
:dir(rtl) & {
|
|
transform: rotate(-45deg) translateY(-100%);
|
|
}
|
|
}
|
|
&.show,
|
|
&:focus,
|
|
&:active {
|
|
border-width: $input-focus-border-width;
|
|
border-color: $input-focus-border-color;
|
|
box-shadow: $input-focus-box-shadow;
|
|
padding-block: calc($input-padding-y - $input-focus-border-width);
|
|
padding-inline: calc($input-padding-x - $input-border-width);
|
|
&::after {
|
|
inset-inline-end: calc(var(--#{$prefix}bootstrap-select-arrow-position) - $input-border-width);
|
|
}
|
|
}
|
|
.filter-option-inner-inner {
|
|
float: inline-start;
|
|
line-height: $input-line-height;
|
|
}
|
|
}
|
|
.dropdown-menu li small,
|
|
.filter-option small {
|
|
position: relative;
|
|
float: inline-end;
|
|
inset-block-start: 2px;
|
|
padding-inline: .5em 0;
|
|
}
|
|
.dropdown-menu {
|
|
.notify {
|
|
border-color: color-mix(in sRGB, var(--#{$prefix}base-color) 16%, var(--#{$prefix}paper-bg));
|
|
background: color-mix(in sRGB, var(--#{$prefix}base-color) 6%, var(--#{$prefix}paper-bg));
|
|
}
|
|
|
|
/* For header dropdown close btn */
|
|
.popover-header {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-inline: var(--#{$prefix}dropdown-item-padding-x);
|
|
button {
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--#{$prefix}body-color);
|
|
font-size: $h4-font-size;
|
|
}
|
|
}
|
|
a[aria-selected="true"] {
|
|
background: $component-active-bg;
|
|
color: var(--#{$prefix}primary-contrast);
|
|
}
|
|
li.active small,
|
|
li:active small {
|
|
color: var(--#{$prefix}primary-contrast) !important;
|
|
}
|
|
.dropdown-item.selected span::before,
|
|
.dropdown-item:active,
|
|
.dropdown-toggle.show {
|
|
background: $component-active-bg;
|
|
color: var(--#{$prefix}primary-contrast);
|
|
}
|
|
}
|
|
.btn {
|
|
&:disabled,
|
|
&.disabled {
|
|
color: $input-disabled-color;
|
|
}
|
|
&:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
.is-invalid {
|
|
~ .dropdown-toggle {
|
|
&::after {
|
|
inset-inline-end: calc(var(--#{$prefix}bootstrap-select-arrow-position) - $input-border-width);
|
|
}
|
|
}
|
|
}
|
|
&.dropup {
|
|
--#{$prefix}bootstrap-select-arrow-position: 14px;
|
|
.dropdown-toggle {
|
|
&::after {
|
|
transform: rotate(317deg) translateY(-30%);
|
|
:dir(rtl) & {
|
|
transform: rotate(-317deg) translateY(-30%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Menu Position */
|
|
&.show-tick {
|
|
.dropdown-menu {
|
|
li {
|
|
a {
|
|
position: relative;
|
|
span.text {
|
|
margin-inline: 0 2.125rem;
|
|
}
|
|
}
|
|
}
|
|
.selected span.check-mark {
|
|
inset-block-start: 50%;
|
|
inset-inline: auto 1rem;
|
|
inset-inline-end: 1rem;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
&:not(.input-group-btn),
|
|
&[class*="col-"] {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
html[class] .bootstrap-select.form-select {
|
|
padding: 0;
|
|
border: 0;
|
|
margin: 0;
|
|
background: none;
|
|
}
|