selectic/src/css/selectic.css

Smart Select for VueJS 3.x

/* {{{ Variables */

:root {
    --selectic-font-size: 14px;
    --selectic-cursor-disabled: not-allowed;

    /* The main element */
    --selectic-color: #555555;
    --selectic-bg: #ffffff;

    /* The main element (when disabled) */
    --selectic-color-disabled: #787878;
    --selectic-bg-disabled: #eeeeee;

    /* The list */
    --selectic-panel-bg: #f0f0f0;
    --selectic-separator-bordercolor: #cccccc;
    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */

    /* The current selected item */
    --selectic-selected-item-color: #428bca;

    /* When mouse is over items or by selecting with key arrows */
    --selectic-active-item-color: #ffffff;
    --selectic-active-item-bg: #66afe9;

    /* Selected values in main element */
    --selectic-value-bg: #f0f0f0;
    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */
    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */
    --selectic-more-items-bg-disabled: #cccccc;

    /* Information message */
    --selectic-info-bg: #5bc0de;
    --selectic-info-color: #ffffff;

    /* Error message */
    --selectic-error-bg: #b72c29;
    --selectic-error-color: #ffffff;

    /* XXX: Currently it is important to keep this size for a correct scroll
     * height estimation */
    --selectic-input-height: 30px;
}

/* }}} */
/* {{{ Bootstrap equivalent style */

.selectic .form-control {
    display: block;
    width: 100%;
    height: calc(var(--selectic-input-height) - 2px);
    font-size: var(--selectic-font-size);
    line-height: 1.42857143;
    color: var(--selectic-color);
    background-color: var(--selectic-bg);
    background-image: none;
    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.selectic .has-feedback {
    position: relative;
}

.selectic .has-feedback .form-control {
    padding-right: calc(var(--selectic-input-height) + 4px);
}

.selectic .form-control-feedback.fa,
.selectic .form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: calc(var(--selectic-input-height) + 4px);
    height: calc(var(--selectic-input-height) + 4px);
    line-height: var(--selectic-input-height);
    text-align: center;
    pointer-events: none;
}

.selectic .alert-info {
    background-color: var(--selectic-info-bg);
    color: var(--selectic-info-color);
}

.selectic .alert-danger {
    background-color: var(--selectic-error-bg);
    color: var(--selectic-error-color);
}

/* }}} */

.selectic * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.selectic.form-control {
    display: inline-block;
    padding: 0;
    cursor: pointer;
    border: unset;
}

.has-feedback .selectic__icon-container.form-control-feedback {
    right: 0;
}

/* The input which contains the selected value
 * XXX: This input should stay hidden behind other elements, but is "visible"
 * (in term of DOM point of view) in order to get and to trigger the `focus`
 * DOM event. */
.selectic__input-value {
    position: fixed;
    opacity: 0;
    z-index: -1000;
    top: -100px;
}

/* XXX: .form-control has been added to this selector to improve priority and
 * override some rules of the original .form-control */
.selectic-input.form-control {
    display: inline-flex;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
    min-height: var(--selectic-input-height);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 5px;
    line-height: calc(var(--selectic-input-height) - 4px);
    color: var(--selectic-color);
}

.selectic-input__reverse-icon {
    align-self: center;
    margin-right: 3px;
    cursor: default;
}

.selectic-input__clear-icon {
    align-self: center;
    margin-left: 3px;
    cursor: pointer;
}

.selectic-input__clear-icon:hover {
    color: var(--selectic-selected-item-color);
}

.selectic-input.focused {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.selectic-input.disabled {
    cursor: var(--selectic-cursor-disabled);
    background-color: var(--selectic-bg-disabled);
}

.selectic-input.disabled .more-items {
	background-color: var(--selectic-more-items-bg-disabled);
}

.selectic-input__selected-items {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}

.selectic-input__selected-items__placeholder {
    font-style: italic;
    opacity: 0.7;
    white-space: nowrap;
}

.selectic-icon {
    color: var(--selectic-color);
    text-align: center;
    vertical-align: middle;
}

.selectic__extended-list {
    position: fixed;
    top: var(--top-position, 0);
    z-index: 2000;
    height: auto;
    max-height: var(--availableSpace);
    background-color: var(--selectic-bg, #ffffff);
    box-shadow: 2px 5px 12px 0px #888888;
    border-radius: 0 0 4px 4px;
    padding: 0;
    width: var(--list-width, 200px);
    min-width: 200px;
    display: grid;
    grid-template-rows: minmax(0, max-content) 1fr;
}

.selectic__extended-list.selectic-position-top {
    box-shadow: 2px -3px 12px 0px #888888;
}

.selectic__extended-list__list-container{
    overflow: auto;
}

.selectic__extended-list__list-items {
    max-height: calc(var(--selectic-input-height) * 10);
    min-width: max-content;
    padding-left: 0;
}

.selectic-item {
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 2px 8px;
    color: var(--selectic-item-color, var(--selectic-color));
    min-height: calc(var(--selectic-input-height) - 3px);
    list-style-type: none;
    white-space: nowrap;
    cursor: pointer;
}

.selectic-item_text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.selectic-item:not(.selected) .selectic-item_icon {
    opacity: 0;
}

.selectic-item_text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.selectic-item__active {
    background-color: var(--selectic-active-item-bg);
    color: var(--selectic-active-item-color);
}

.selectic-item__active:not(.selected) .selectic-item_icon {
    opacity: 0.2;
}

.selectic-item__active:not(.selected) .single-select_icon {
    opacity: 0;
}

.selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {
    opacity: 0;
}

.selectic-item__disabled {
    color: var(--selectic-color-disabled);
    background-color: var(--selectic-bg-disabled);
}

.selectic-item__is-in-group {
    padding-left: 2em;
}

.selectic-item__is-group {
    font-weight: bold;
    cursor: default;
}

.selectic-item__is-group.selectable {
    cursor: pointer;
}

.selectic-item.selected {
    color: var(--selectic-selected-item-color);
}

.selectic-search-scope {
    color: #e0e0e0;
    left: auto;
    right: 10px;
}

.selectic .form-control-feedback.fa.selectic-search-scope {
    width: calc(var(--selectic-input-height) * 0.75);
    height: calc(var(--selectic-input-height) * 0.75);
    line-height: calc(var(--selectic-input-height) * 0.75);
}

.selectic__message {
    text-align: center;
    padding: 3px;
}

.selectic .filter-panel {
    padding: 3px;
    margin-left: 0px;
    margin-right: 0px;
    background-color: var(--selectic-panel-bg);
    border-bottom: 1px solid var(--selectic-separator-bordercolor);
}

.selectic .panelclosed {
    max-height: 0px;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}

.panelopened {
    max-height: 200px;
    transition: max-height 0.3s ease-in;
    overflow: hidden;
}

.selectic .filter-panel__input {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

.selectic .filter-input {
    height: calc(var(--selectic-input-height) * 0.75);
}

.selectic .checkbox-filter {
    padding: 5px;
    text-align: center;
}

.selectic .curtain-handler {
    text-align: center;
}

.selectic .toggle-selectic {
    margin: 5px;
    padding-left: 0px;
    padding-right: 0px;
}

.selectic .toggle-boolean-select-all-toggle {
    display: inline;
    margin-right: 15px;
}

.selectic .toggle-boolean-excluding-toggle {
    display: inline;
    margin-right: 15px;
}

.selectic .single-value {
    display: grid;
    grid-template: "value icon" 1fr / max-content max-content;

    padding: 2px;
    padding-left: 5px;
    margin-left: 0;
    margin-right: 5px;
    /* margin top/bottom are mainly to create a gutter in multilines */
    margin-top: 2px;
    margin-bottom: 2px;

    border-radius: 3px;
    background-color: var(--selectic-value-bg);
    max-height: calc(var(--selectic-input-height) - 10px);
    max-width: 100%;
    min-width: 30px;

    overflow: hidden;
    white-space: nowrap;
    line-height: initial;
    vertical-align: middle;
}

.selectic .more-items {
    display: inline-block;

    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px;

    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));
    color: var(--selectic-more-items-color, var(--selectic-info-color));
    cursor: help;
}

.selectic-input__selected-items__value {
    grid-area: value;
    align-self: center;
    justify-self: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.selectic-input__selected-items__icon {
    grid-area: icon;
    align-self: center;
    justify-self: center;
    margin-left: 5px;
}

.selectic-input__selected-items__icon:hover {
    color: var(--selectic-selected-item-color);
}

.selectic__label-disabled {
    opacity: 0.5;
    transition: opacity 400ms;
}

/* XXX: override padding of bootstrap input-sm.
 * This padding introduce a line shift. */
.selectic.input-sm {
    padding: 0;
}

/* {{{ overflow multiline */

.selectic--overflow-multiline,
.selectic--overflow-multiline.form-control,
.selectic--overflow-multiline .form-control {
    height: unset;
}

.selectic--overflow-multiline .selectic-input {
    overflow: unset;
}

.selectic--overflow-multiline .selectic-input__selected-items {
    flex-wrap: wrap;
}

/* {{{ icons */

@keyframes selectic-animation-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

.selectic__icon {
    height: 1em;
    fill: currentColor;
}

.selectic-spin {
    animation: selectic-animation-spin 2s infinite linear;
}

/* }}} */