| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- // 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-border-color: #{$input-border-color};
- --#{$prefix}bootstrap-select-arrow-position: 23px;
- .bs-searchbox,
- .bs-actionsbox,
- .bs-donebutton {
- padding-block: 0 .5rem;
- }
- > .dropdown-toggle {
- &.bs-placeholder {
- &,
- &:hover,
- &:focus,
- &:active {
- color: $input-placeholder-color;
- }
- }
- }
- .dropdown-toggle {
- border: $input-border-width solid var(--#{$prefix}bootstrap-select-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: color-mix(in sRGB, var(--#{$prefix}paper-bg) #{$bg-label-tint-amount}, #{$component-active-bg});
- color: $component-active-bg;
- }
- li.active small,
- li:active small {
- color: $component-active-bg !important;
- }
- .dropdown-item.selected span::before,
- .dropdown-item:active:hover,
- .dropdown-toggle.show {
- color: $component-active-bg;
- }
- }
- .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;
- }
-
- @if $enable-dark-mode {
- @include color-mode(dark) {
- .bootstrap-select {
- --#{$prefix}bootstrap-select-border-color: #{$input-border-color-dark};
- }
- }
- }
|