multiple-select
Version:
Multiple select is a jQuery plugin to select multiple elements with checkboxes :).
149 lines (146 loc) • 4.94 kB
CSS
.ms-parent.form-control {
--ms-form-control-height: calc(1.5em + .75rem);
--ms-choice-bg: var(--bs-body-bg);
--ms-choice-color: var(--bs-body-color);
--ms-choice-border-radius: var(--bs-border-radius);
--ms-choice-disabled-bg: var(--bs-secondary-bg);
--ms-drop-bg: var(--bs-body-bg);
--ms-drop-border: var(--bs-border-color);
--ms-drop-color: var(--bs-body-color);
--ms-optgroup-color: var(--bs-secondary-color);
--ms-divider-color: var(--bs-border-color);
--ms-hover-bg: var(--bs-secondary-bg);
--ms-selected-bg: var(--bs-primary);
--ms-selected-color: #fff;
--ms-close-color: var(--bs-secondary-color);
--ms-close-hover-color: var(--bs-body-color);
}
.ms-parent.form-control.form-control-sm {
--ms-form-control-height: calc(1.5em + .5rem);
}
.ms-parent.form-control.form-control-lg {
--ms-form-control-height: calc(1.5em + 1rem);
}
.ms-parent.form-control {
padding: 0;
display: inline-block;
height: calc(var(--ms-form-control-height) + 2px);
}
.ms-parent.form-control .icon-close::before {
line-height: var(--ms-form-control-height);
}
.ms-parent.form-control .ms-choice {
height: 100%;
border: 0;
background-color: var(--ms-choice-bg);
color: var(--ms-choice-color);
border-radius: var(--ms-choice-border-radius);
}
.ms-parent.form-control .ms-choice.disabled {
background-color: var(--ms-choice-disabled-bg);
}
.ms-parent.form-control .ms-choice > span {
top: 50%;
transform: translateY(-50%);
}
.ms-parent.form-control .ms-choice > div.icon-caret {
border-color: var(--ms-close-color) transparent transparent transparent;
}
.ms-parent.form-control .ms-choice > div.icon-caret.open {
border-color: transparent transparent var(--ms-close-color) transparent;
}
.ms-parent.form-control .ms-choice > div.icon-close::before {
color: var(--ms-close-color);
}
.ms-parent.form-control .ms-choice > div.icon-close:hover::before {
color: var(--ms-close-hover-color);
}
.ms-parent.form-control .ms-drop {
background-color: var(--ms-drop-bg);
border-color: var(--ms-drop-border);
color: var(--ms-drop-color);
border-radius: var(--ms-choice-border-radius);
}
.ms-parent.form-control .ms-drop ul > li {
padding-left: 0;
}
.ms-parent.form-control .ms-drop ul > li label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ms-parent.form-control .ms-drop ul > li:not(.hide-radio) label {
padding-left: calc(1.2em + 12px);
}
.ms-parent.form-control .ms-drop ul > li:not(.hide-radio) label input[type=radio],
.ms-parent.form-control .ms-drop ul > li:not(.hide-radio) label input[type=checkbox] {
position: absolute;
top: 50%;
margin-top: -0.5em;
margin-left: calc(-1.2em - 4px);
}
.ms-parent.form-control .ms-drop ul > li.hide-radio:focus, .ms-parent.form-control .ms-drop ul > li.hide-radio:hover {
background-color: var(--ms-hover-bg);
}
.ms-parent.form-control .ms-drop ul > li.hide-radio.selected {
background-color: var(--ms-selected-bg);
color: var(--ms-selected-color);
}
.ms-parent.form-control .ms-drop ul > li.option-divider {
border-top-color: var(--ms-divider-color);
}
.ms-parent.form-control.ms-dropdown .ms-drop ul > li.group.hide-radio label.optgroup {
margin-bottom: 0;
font-size: 87.5%;
color: var(--ms-optgroup-color);
white-space: nowrap;
opacity: 1;
}
.ms-parent.form-control.ms-dropdown .ms-drop ul > li.hide-radio.option-level-1 label {
padding-left: 8px;
}
.ms-parent.form-control.ms-dropdown.ms-dropdown-divider .ms-drop ul > li.group.hide-radio label.optgroup {
border-top: 1px solid var(--ms-divider-color);
}
.ms-parent.form-control.ms-dropdown.ms-dropdown-divider .ms-drop ul > li.group:first-child label.optgroup {
border-top: none;
}
.ms-parent.form-control .ms-search input {
border-radius: var(--ms-choice-border-radius);
}
.ms-parent.form-control .ms-filter-options {
padding: 0.25rem;
border-bottom: 1px solid var(--ms-drop-border);
background-color: var(--ms-drop-bg);
}
.ms-parent.form-control .ms-filter-option {
line-height: calc(var(--ms-form-control-height) - 1rem);
padding: 0.25rem 0.375rem;
margin-right: 0.25rem;
border-radius: var(--ms-choice-border-radius);
color: var(--ms-optgroup-color);
background-color: var(--ms-choice-bg);
border: 1px solid var(--ms-drop-border);
}
.ms-parent.form-control .ms-filter-option:hover {
background-color: var(--ms-hover-bg);
border-color: var(--ms-drop-border);
color: var(--ms-choice-color);
}
.ms-parent.form-control .ms-filter-option.active {
background-color: var(--ms-selected-bg);
color: var(--ms-selected-color);
border-color: var(--ms-selected-bg);
}
.input-group-btn .ms-choice {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group-btn.is-left .ms-choice {
border-radius: var(--ms-choice-border-radius) 0 0 var(--ms-choice-border-radius);
margin-left: 0;
}
.input-group-btn.is-left + .form-control {
margin-left: -1px;
}
/*# sourceMappingURL=bootstrap.css.map */