335 lines
11 KiB
SCSS
335 lines
11 KiB
SCSS
/* Select2 */
|
|
|
|
/* ******************************************************************************* */
|
|
|
|
@import "../../scss/_bootstrap-extended/include";
|
|
@import "select2/src/scss/core";
|
|
|
|
$select-max-levels: 5 !default;
|
|
|
|
.select2-container {
|
|
--#{$prefix}select-height: 2.375rem;
|
|
--#{$prefix}select-color: var(--#{$prefix}heading-color);
|
|
--#{$prefix}select-border-width: #{$input-border-width};
|
|
--#{$prefix}select-border-color: #{$input-border-color};
|
|
--#{$prefix}select-active-border: 0 0 0 #{$input-border-width} #{$input-focus-border-color};
|
|
--#{$prefix}select-active-border-color: #{$form-select-focus-border-color};
|
|
--#{$prefix}select-active-box-shadow: #{$form-select-focus-box-shadow};
|
|
--#{$prefix}select-disabled-color: #{$input-disabled-color};
|
|
--#{$prefix}select-disabled-border-color: #{$input-disabled-border-color};
|
|
--#{$prefix}select-disabled-bg: #{$input-disabled-bg};
|
|
--#{$prefix}select-arrow: #{escape-svg($form-select-indicator)};
|
|
--#{$prefix}select-disabled-arrow: #{escape-svg($form-select-disabled-indicator)};
|
|
|
|
/* Dropdown */
|
|
--#{$prefix}select-dropdown-border-width: #{$dropdown-border-width};
|
|
--#{$prefix}select-dropdown-border-color: #{$dropdown-border-color};
|
|
--#{$prefix}select-dropdown-bg: #{$dropdown-bg};
|
|
--#{$prefix}select-dropdown-box-shadow: #{$dropdown-box-shadow};
|
|
--#{$prefix}select-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
|
|
--#{$prefix}select-dropdown-link-active-bg: #{$dropdown-link-active-bg};
|
|
--#{$prefix}select-dropdown-link-active-color: #{$dropdown-link-active-color};
|
|
|
|
/* Multiple */
|
|
--#{$prefix}select-multiple-padding-x: .3125rem;
|
|
--#{$prefix}select-multiple-padding-y: .3125rem;
|
|
--#{$prefix}select-multiple-line-height: 1.5rem;
|
|
--#{$prefix}select-multiple-choice-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}select-multiple-choice-bg: color-mix(in sRGB, var(--#{$prefix}base-color) 8%, var(--#{$prefix}paper-bg));
|
|
--#{$prefix}select-multiple-disabled-choice-color: var(--#{$prefix}secondary-color);
|
|
--#{$prefix}select-multiple-disabled-choice-bg: color-mix(in sRGB, var(--#{$prefix}base-color) 18%, var(--#{$prefix}paper-bg));
|
|
|
|
/* using below style to assign default width to the select2 container */
|
|
inline-size: 100% !important;
|
|
.select2-selection--single {
|
|
block-size: var(--#{$prefix}select-height);
|
|
}
|
|
&.select2-container--default {
|
|
.select2-selection--single {
|
|
.select2-selection__rendered {
|
|
padding-inline-end: calc($form-select-indicator-padding - .4375rem);
|
|
padding-inline-start: calc($form-select-padding-x - .0625rem);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.select2-search__field {
|
|
color: $input-color;
|
|
}
|
|
|
|
.select2-dropdown {
|
|
border: var(--#{$prefix}select-dropdown-border-width) solid var(--#{$prefix}select-dropdown-border-color);
|
|
background-color: var(--#{$prefix}select-dropdown-bg);
|
|
box-shadow: var(--#{$prefix}select-dropdown-box-shadow);
|
|
@include border-radius($dropdown-border-radius);
|
|
}
|
|
|
|
.select2-results__option {
|
|
&[role="option"] {
|
|
@include border-radius($border-radius);
|
|
margin-block: .125rem;
|
|
margin-inline: .5rem;
|
|
padding-block: $dropdown-item-padding-y;
|
|
padding-inline: calc($dropdown-item-padding-x - .25rem);
|
|
}
|
|
.select2-results__group {
|
|
font-size: $font-size-sm;
|
|
font-weight: $font-weight-medium;
|
|
padding-block: .5rem;
|
|
padding-inline: ($input-padding-x * .5);
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.select2-results__options {
|
|
/* Select option levels loop for padding left/right */
|
|
@for $i from 2 through $select-max-levels {
|
|
$selector: "";
|
|
|
|
@for $l from 1 through $i {
|
|
$selector: "#{$selector} .select2-results__option";
|
|
}
|
|
.select2-results__options {
|
|
.select2-results__group {
|
|
margin-inline-start: ($dropdown-item-padding-x * ($i)) - ($input-padding-x * 3);
|
|
}
|
|
#{$selector} {
|
|
margin-inline-start: ($dropdown-item-padding-x * ($i));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.select2-container--default {
|
|
/* Remove outlines */
|
|
&,
|
|
* {
|
|
outline: 0;
|
|
}
|
|
.select2-selection {
|
|
border: var(--#{$prefix}select-border-width) solid var(--#{$prefix}select-border-color);
|
|
background-color: $input-bg;
|
|
transition: $input-transition;
|
|
|
|
@include border-radius($border-radius);
|
|
|
|
&:hover {
|
|
border-color: $input-hover-border-color;
|
|
}
|
|
}
|
|
|
|
/* search field styles */
|
|
.select2-search--dropdown .select2-search__field {
|
|
border-color: var(--#{$prefix}select-border-color);
|
|
@include border-radius($input-border-radius);
|
|
background-color: var(--#{$prefix}select-dropdown-bg);
|
|
inline-size: calc(100% - 1rem);
|
|
margin-block: .25rem;
|
|
margin-block-end: 0;
|
|
margin-inline: .5rem;
|
|
}
|
|
|
|
.select2-results__message {
|
|
margin-inline: .5rem;
|
|
}
|
|
|
|
/* Single Selection */
|
|
.select2-selection--single {
|
|
.select2-selection__clear {
|
|
color: var(--#{$prefix}secondary-color);
|
|
font-weight: $font-weight-medium;
|
|
inset-inline-end: .625rem;
|
|
}
|
|
.select2-selection__placeholder {
|
|
color: $input-placeholder-color;
|
|
}
|
|
.select2-selection__rendered {
|
|
color: var(--#{$prefix}select-color);
|
|
line-height: calc(var(--#{$prefix}select-height) - var(--#{$prefix}select-border-width) * 2);
|
|
}
|
|
.select2-selection__arrow {
|
|
position: absolute;
|
|
block-size: 100%;
|
|
inline-size: $form-select-indicator-padding;
|
|
inset-block-start: $input-border-width;
|
|
inset-inline-end: .375rem !important;
|
|
inset-inline-start: auto;
|
|
|
|
b {
|
|
border: none;
|
|
margin: 0;
|
|
background-image: var(--#{$prefix}select-arrow);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 20px 19px;
|
|
block-size: 100%;
|
|
inline-size: 100%;
|
|
inset-block-start: 0;
|
|
inset-inline-start: 0;
|
|
transform-origin: center;
|
|
transition: transform .3s ease;
|
|
}
|
|
}
|
|
.is-invalid ~ & {
|
|
border-width: $input-focus-border-width;
|
|
border-color: var(--#{$prefix}form-validation-border-color);
|
|
box-shadow: var(--#{$prefix}form-validation-shadow);
|
|
}
|
|
}
|
|
.select2-selection__rendered:has(> .select2-selection__placeholder) ~ .select2-selection__arrow b {
|
|
background-image: var(--#{$prefix}select-disabled-arrow);
|
|
}
|
|
|
|
/* Multiple Selection */
|
|
.select2-selection--multiple {
|
|
min-block-size: var(--#{$prefix}select-height);
|
|
.select2-selection__rendered {
|
|
display: block;
|
|
margin-block-start: calc(var(--#{$prefix}select-multiple-padding-y) * -1);
|
|
margin-inline-end: calc(var(--#{$prefix}select-multiple-padding-x) * -1);
|
|
padding-block: var(--#{$prefix}select-multiple-padding-y);
|
|
padding-inline: var(--#{$prefix}select-multiple-padding-x);
|
|
.select2-search--inline:first-child {
|
|
.select2-search__field {
|
|
padding-inline-start: calc($form-select-padding-x - var(--#{$prefix}select-multiple-padding-x));
|
|
}
|
|
}
|
|
}
|
|
.select2-selection__clear {
|
|
font-weight: $font-weight-medium;
|
|
margin-block-start: .25rem;
|
|
}
|
|
.select2-search--inline {
|
|
line-height: var(--#{$prefix}select-multiple-line-height);
|
|
}
|
|
.select2-selection__choice {
|
|
position: relative;
|
|
border-color: var(--#{$prefix}select-multiple-choice-bg);
|
|
@include border-radius($border-radius-sm);
|
|
background-color: var(--#{$prefix}select-multiple-choice-bg);
|
|
color: var(--#{$prefix}select-multiple-choice-color);
|
|
font-size: $font-size-sm;
|
|
line-height: var(--#{$prefix}select-multiple-line-height);
|
|
padding-inline: .5rem 1rem;
|
|
:dir(rtl) &,
|
|
& {
|
|
margin-block-start: var(--#{$prefix}select-multiple-padding-y);
|
|
margin-inline: 0 var(--#{$prefix}select-multiple-padding-x);
|
|
}
|
|
}
|
|
.select2-selection__choice__remove {
|
|
position: absolute;
|
|
color: inherit;
|
|
font-weight: $font-weight-medium;
|
|
inset-inline-end: .3rem;
|
|
opacity: .5;
|
|
:dir(rtl) &,
|
|
& {
|
|
margin-inline-end: 0;
|
|
margin-inline-start: .25rem;
|
|
}
|
|
&:hover {
|
|
color: inherit;
|
|
opacity: .8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select2-results {
|
|
> .select2-results__options {
|
|
margin-block: .5rem;
|
|
}
|
|
}
|
|
|
|
.select2-results__option {
|
|
color: var(--#{$prefix}select-color);
|
|
&--highlighted[aria-selected] {
|
|
background-color: var(--#{$prefix}select-dropdown-link-hover-bg);
|
|
color: var(--#{$prefix}select-color);
|
|
}
|
|
&[aria-selected="true"] {
|
|
background-color: var(--#{$prefix}select-dropdown-link-active-bg);
|
|
color: var(--#{$prefix}select-dropdown-link-active-color);
|
|
}
|
|
&[aria-disabled="true"] {
|
|
background-color: var(--#{$prefix}select-disabled-bg);
|
|
color: var(--#{$prefix}select-disabled-color);
|
|
}
|
|
.select2-results__option {
|
|
padding-inline-start: calc($dropdown-item-padding-x - .25rem);
|
|
}
|
|
}
|
|
&.select2-container--focus,
|
|
&.select2-container--open {
|
|
.select2-selection {
|
|
border-width: $input-focus-border-width;
|
|
border-color: var(--#{$prefix}select-active-border-color);
|
|
box-shadow: var(--#{$prefix}select-active-box-shadow);
|
|
}
|
|
.select2-selection--single {
|
|
.select2-selection__rendered {
|
|
line-height: calc(var(--#{$prefix}select-height) - $input-focus-border-width * 2);
|
|
padding-inline-end: calc($form-select-indicator-padding - .5rem);
|
|
padding-inline-start: calc($form-select-padding-x - $input-focus-border-width);
|
|
}
|
|
.select2-selection__arrow {
|
|
b {
|
|
border: none;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
.select2-selection--multiple {
|
|
.select2-selection__rendered {
|
|
padding-block: calc(var(--#{$prefix}select-multiple-padding-y) - var(--#{$prefix}select-border-width));
|
|
padding-inline-start: calc(var(--#{$prefix}select-multiple-padding-x) - var(--#{$prefix}select-border-width));
|
|
}
|
|
}
|
|
}
|
|
&.select2-container--disabled {
|
|
pointer-events: none;
|
|
.select2-selection--multiple,
|
|
.select2-selection--single {
|
|
border-color: var(--#{$prefix}select-disabled-border-color);
|
|
background-color: var(--#{$prefix}select-disabled-bg);
|
|
box-shadow: none;
|
|
}
|
|
.select2-selection--single {
|
|
.select2-selection__rendered {
|
|
color: var(--#{$prefix}select-disabled-color);
|
|
}
|
|
.select2-selection__arrow {
|
|
b {
|
|
background-image: var(--#{$prefix}select-disabled-arrow);
|
|
}
|
|
}
|
|
}
|
|
.select2-selection--multiple {
|
|
.select2-selection__choice {
|
|
border-color: var(--#{$prefix}select-multiple-disabled-choice-bg);
|
|
background-color: var(--#{$prefix}select-multiple-disabled-choice-bg);
|
|
color: var(--#{$prefix}select-multiple-disabled-choice-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $state in map-keys($theme-colors) {
|
|
.select2-#{$state} {
|
|
.select2-container {
|
|
--#{$prefix}select-multiple-choice-bg: color-mix(in sRGB, var(--#{$prefix}paper-bg) var(--#{$prefix}bg-label-tint-amount), var(--#{$prefix}#{$state}));
|
|
--#{$prefix}select-multiple-choice-color: var(--#{$prefix}#{$state});
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark) {
|
|
.select2-container {
|
|
--#{$prefix}select-arrow: #{escape-svg($form-select-indicator-dark)};
|
|
--#{$prefix}select-disabled-arrow: #{escape-svg($form-select-disabled-indicator-dark)};
|
|
}
|
|
}
|
|
}
|