funda-ui 4.7.624 → 4.7.701

package/publish/lib/esm/Select/index.scss

@@ -1,639 +0,0 @@
-/* ======================================================
-    <!-- Select -->
-/* ====================================================== */
-
-.custom-select__wrapper {
-
-    --cus-sel-focus-border-color:#86b7fe;
-    --cus-sel-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
-    --cus-sel-placeholder-color: rgba(33, 37, 41, 0.75);
-    --cus-sel-input-placeholder-color: #c5c9d1;
-    --cus-sel-control-wrapper-bg: #fff;
-    --cus-sel-control-wrapper-border-color: #dee2e6;
-    --cus-sel-control-list-bg: #efefef;
-    --cus-sel-clear-fill: #a5a5a5;
-    --cus-sel-clear-hover-fill: #000;
-    --cus-sel-arrow-fill: #a5a5a5;
-    --cus-sel-searchbtn-fill: #a5a5a5;
-    --cus-sel-searchbtn-hover-fill: #333;
-    --cus-sel-removebtn-fill: #000;
-    --cus-sel-removebtn-hover-fill: #f00;
-    --cus-sel-selected-color:#b1d0ff;
-
-        
-    position: relative; /* Required */
-
-
-    
-
-    /*------ Placeholder for input ------*/
-    input::placeholder {
-        color: var(--cus-sel-input-placeholder-color);
-    }
-    
-
-    /*------ Arrow ------*/
-    .arrow {
-        svg .arrow-fill-g {
-            fill: var(--cus-sel-arrow-fill);
-        }
-    }
-
-    /*------ Clear Icon ------*/
-    .custom-select-clear-icon {
-        position: absolute;
-        top: 50%;
-        transform: rotate(0deg) translateY(-50%);
-        transform-origin: top;
-        right: 1.5rem;
-        z-index: 2;
-        pointer-events: all;
-
-        button {
-            border: none;
-            box-shadow: none;
-            margin: 0;
-            padding: 0;
-            background: none;
-        }
-
-        
-        &.pos-offset {
-            right: 2.25rem;
-        }
-
-        svg path {
-            fill: var(--cus-sel-clear-fill);
-        }
-
-        &:hover {
-            svg path {
-                fill: var(--cus-sel-clear-hover-fill);
-            }
-        }
-    }
-
-    /*------ Clear Trigger ------*/
-    .clear {
-        svg .clear-fill-g {
-            fill: var(--cus-sel-arrow-fill);
-        }
-    }
-
-
-    /*------ Input ------*/
-    [data-select]:focus {
-        box-shadow: none;
-        border-color: transparent;
-        outline: 0;
-    }
-
-    
-
-    /*------ Arrow ------*/
-    .custom-select-arrow {
-        position: absolute;
-        top: 50%;
-        transform: rotate(0deg) translateY(-50%);
-        transform-origin: top;
-        right: .5rem;
-        z-index: 1;
-        pointer-events: none;
-
-        &.reverse {
-            transform: rotate(180deg) translateY(-50%);
-        }
-    }
-
-    
-    /*------ Blinking cursor ------*/
-    .custom-select-multi__control-blinking-cursor {
-        display: inline-block;
-        color: var(--cus-sel-placeholder-color);
-        width: 100%;
-
-        &.animated {
-            animation: 1s mf-sel-blink step-end infinite;
-        }
-
-
-        /* Select all highlights (for "Single selection") */
-        &.selected > span {
-           background-color: var(--cus-sel-selected-color);
-        }
-  
-
-        &.control-placeholder {
-            color: var(--cus-sel-input-placeholder-color);
-        }
-
-        /* Text preview */
-        > span {
-            display: inline-block;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            max-width: 100%;
-        }
-
-
-    }
-    .custom-select-multi__control-blinking-following-cursor {
-        position: absolute;
-        top: .375rem;
-        margin-left: 1rem;  /* offset start pixel of input control */
-        z-index: 1;
-
-        &.animated {
-            animation: 1s mf-sel-blink step-end infinite;
-        }
-
-        &.custom-select-multi__control-blinking-following-cursor--puretext {
-            margin-left: auto;
-            position: relative;
-            top: auto;
-            left: 0;
-        }
-    }
-
-    @keyframes mf-sel-blink {
-        from,
-        to {
-            color: transparent;
-        }
-
-        50% {
-            color: var(--cus-sel-placeholder-color);
-        }
-    }
-
-
-
-    /*------ Single selection ------*/
-    .custom-select-single__inputplaceholder-wrapper {
-
-        position: absolute;
-        top: 0;
-        width: 100%;
-        pointer-events: none;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        border-radius: 0.375rem;
-
-        .custom-select-multi__control-blinking-cursor {
-            position: absolute;
-            top: .1rem;
-            left: 0;
-            padding: .1rem 1.5rem .1rem 1rem;
-            font-size: 0.875rem;
-    
-            /* bootstrap style that match ".form-control" */
-            //padding: 0.375rem 0.75rem;
-            top: 0.375rem;
-
-
-            .control-placeholder {
-                color: var(--cus-sel-input-placeholder-color);
-            }
-        }
-
-        .custom-select-single__control-searchbtn {
-            z-index: 5;
-            pointer-events: auto;
-
-            svg,
-            path {
-                fill: var(--single-sel-searchbtn-fill);
-            }
-
-            &:hover {
-                svg,
-                path {
-                    fill: var(--single-sel-searchbtn-hover-fill);
-                }
-            }
-        }
-
-        .custom-select-single__inputplaceholder-inner {
-            display: inline-block;
-            position: relative;
-            width: 100%;
-
-            /* bootstrap style that match ".form-control" */
-            background-color: var(--cus-sel-control-wrapper-bg);
-            border: 1px solid var(--cus-sel-control-wrapper-border-color);
-            appearance: none;
-            border-radius: inherit;
-            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-
-          
-            > input {
-                padding: 0.32rem 0.75rem;
-                opacity: 0;
-                pointer-events: none;
-            }
-            
-        }
-        
-    }
-
-
-
-    /*------ Multiple selection ------*/
-    .custom-select-multi__inputplaceholder-wrapper {
-
-        position: absolute;
-        top: 0;
-        width: 100%;
-        pointer-events: none;
-
-
-        ul,
-        li {
-            padding: 0;
-            margin: 0;
-            list-style: none;
-        }
-
-        .custom-select-multi__inputplaceholder-inner {
-    
-            > div {
-                position: relative;
-        
-                /* bootstrap style that match ".form-control" */
-                //padding: 0.375rem 0.75rem;
-                background-color: var(--cus-sel-control-wrapper-bg);
-                background-clip: padding-box;
-                border: 1px solid var(--cus-sel-control-wrapper-border-color);
-                appearance: none;
-                border-radius: 0.375rem;
-                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-                padding-bottom: 1px;
-
-            }
-
-        }
-
-
-        ul.custom-select-multi__list {
-            margin-right: 1rem;
-
-            li {
-                display: inline-block;
-                margin: 5px;
-                margin-bottom: 0;
-                padding: .1rem 1.5rem .1rem 1rem;
-                font-size: 0.875rem;
-                background: var(--cus-sel-control-list-bg);
-                border-radius: 30px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                position: relative;
-
-                &.custom-select-multi__list-item-statusstring {
-                    background: transparent;
-                }
-
-                &.custom-select-multi__list-item-placeholder {
-                    background: transparent;
-                    color: var(--cus-sel-placeholder-color);
-                    padding-left: 0.75rem;
-                    padding-right: 0;
-                    margin-left: 0;
-                    white-space: nowrap;
-
-                    &.hide {
-                        min-width: 100px;
-                    }
-                }
-                
-
-                > a {
-                    font-weight: 400;
-                    opacity: .6;
-                    font-size: 18px;
-                    line-height: 20px;
-                    position: absolute;
-                    right: 8px;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    pointer-events: auto;
-
-                    path {
-                        fill: var(--cus-sel-removebtn-fill);
-                    }
-
-                    &:hover {
-                        path {
-                            fill: var(--cus-sel-removebtn-hover-fill);
-                        }
-                    }
-                }
-
-
-                &.custom-select-multi__list-item-add {
-                    pointer-events: auto;
-                    margin: 0;
-                    padding: 0;
-                    background: transparent;
-
-                    input {
-                        border: none;
-                        font-size: 0.75rem;
-                        transform: translateY(.25rem);
-
-                        &:focus {
-                            border: none;
-                            outline: none;
-                            box-shadow: none;
-                        }
-
-                    }
-                }
-
-            }
-
-        }
-
-
-
-    }
-
-
-    /*------ Search button ------*/
-    .custom-select-multi__control-searchbtn {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 5;
-        pointer-events: auto;
-
-        svg,
-        path {
-            fill: var(--cus-sel-searchbtn-fill);
-        }
-
-        &:hover {
-            svg,
-            path {
-                fill: var(--cus-sel-searchbtn-hover-fill);
-            }
-        }
-    }
-
-
-    /*------------*/
-    [data-select]:focus {
-        cursor: text !important;
-        opacity: 0;
-    }
-
-
-    &.active {
-        .list-group {
-            display: block;
-        }
-    }
-
-
-    /* focus */
-    &.multiple-selection.active,
-    &.focus {
-
-        .custom-select-single__inputplaceholder-wrapper {
-            box-shadow: var(--cus-sel-focus-box-shadow);
-            border-color: var(--cus-sel-focus-border-color);
-            outline: 0;
-
-            .custom-select-single__inputplaceholder-inner {
-                border-color: var(--cus-sel-focus-border-color);
-            }
-        
-        }
-
-        .custom-select-multi__inputplaceholder-inner > div {
-            box-shadow: var(--cus-sel-focus-box-shadow);
-            border-color: var(--cus-sel-focus-border-color);
-            outline: 0;
-        
-        }
-
-        
-    }
- 
-
-}
-
-
-
-/*------ List ------*/
-.custom-select__options-wrapper  {
-    --cus-sel-listgroup-popwin-min-width: 200px;
-    --cus-sel-listgroup-tool-bg: rgb(248,249,250);
-    --cus-sel-listgroup-checkbox: #a5a5a5;
-    --cus-sel-listgroup-checkbox-active: #3162B2;
-    --cus-sel-listgroup-item-hover-focus-bg: rgba(0,0,0,.1);
-    --cus-sel-listgroup-content-scrollbar-color: rgba(0, 0, 0, 0.2);
-    --cus-sel-listgroup-content-scrollbar-track: rgba(0, 0, 0, 0);
-    --cus-sel-listgroup-content-scrollbar-w: 10px;
-    --cus-sel-listgroup-grouptitle-color: #a2a2a2;
-    --cus-sel-listgroup-groupborder-color: #d8d8d8;
-    --cus-sel-loader-color: #000000;
-
-
-
-    display: none;
-    min-width: var(--cus-sel-listgroup-popwin-min-width);
-    z-index: 1055;  /* --bs-modal-zindex */
-
-    
-    &.active {
-        display: block !important;
-    }
-
-    
-
-    /*------ Loader ------*/
-    .cus-select-loader {
-        pointer-events: none;
-        z-index: 1;
-        width: 12px;
-        height: 12px;
-        text-align: center;
-        transform-origin: center;
-        transform: translate(-5px, 0) rotate(0);
-        animation: 1s linear infinite cus-select__spinner;
-
-        svg {
-            vertical-align: top;
-
-            path {
-                fill: var(--cus-sel-loader-color);
-            }
-        }
-    }
-
-    @keyframes cus-select__spinner {
-        to {
-            transform: translate(-5px, 0) rotate(-360deg);
-        }
-    }
-
- 
-    /*------ Options ------*/
-    .custom-select__options-contentlist {
-        overflow: hidden;
-        overflow-y: auto;
-
-        &:focus {
-            outline: none;
-            box-shadow: none;
-        }
-
-        &.noscroll {
-            overflow-y: hidden;
-        }
-
-        &::-webkit-scrollbar {
-            height: var(--cus-sel-listgroup-content-scrollbar-h);
-            width: var(--cus-sel-listgroup-content-scrollbar-w);
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: var(--cus-sel-listgroup-content-scrollbar-color);
-        }
-
-        &::-webkit-scrollbar-track {
-            background: var(--cus-sel-listgroup-content-scrollbar-track);
-        }
-
-    }
-
-    .bg-light {
-        background-color: var(--cus-sel-listgroup-tool-bg) !important;
-    }
-
-    .list-group-item {
-
-        &.hide {
-            display: none;
-        }
-
-        .custom-select-multi__control-option-item--nomatch {
-            &.hide {
-                display: none;
-            }
-        }
-
-        .custom-select-multi__control-option-checkbox-placeholder {
-            display: inline-block;
-
-            svg {
-                fill: transparent;
-        
-                path {
-                    stroke: var(--cus-sel-listgroup-checkbox);
-                }
-            }
-
-        }
-
-        
-        .custom-select-multi__control-option-checkbox-selected {
-            display: inline-block;
-            svg {
-                fill: var(--cus-sel-listgroup-checkbox);
-        
-                path {
-                    stroke: var(--cus-sel-listgroup-checkbox);
-                }
-            }
-
-        }
-
-        
-
-        /* ITEM SELECTED */
-        &.item-selected {
-
-            .custom-select-multi__control-option-checkbox-placeholder {
-                svg {
-                    path {
-                        stroke: var(--cus-sel-listgroup-checkbox-active);
-                    }
-                }
-
-            }
-
-            
-            .custom-select-multi__control-option-checkbox-selected {
-                svg {
-                    fill: var(--cus-sel-listgroup-checkbox-active);
-            
-                    path {
-                        stroke: var(--cus-sel-listgroup-checkbox-active);
-                    }
-                }
-
-            }
-
-        }
-
-        &:hover,
-        &:focus {
-            background-color: var(--cus-sel-listgroup-item-hover-focus-bg);
-        }
-
-
-    }
-
-    /*------ Multiple selection ------*/
-    &.multiple-selection {
-        .list-group-item {
-            &.active {
-                border-top-width: 0;
-            }
-        }
-    }
-
-    
-
-    /*------ Group ------*/
-    .custom-select-grouptitle {
-        pointer-events: none;
-        color: var(--cus-sel-listgroup-grouptitle-color);
-        margin-bottom: .3rem;
-        border-bottom: 1px solid var(--cus-sel-listgroup-groupborder-color) !important;
-    }
-
-    /*------ Extended buttons of Multiple selection ------*/
-    .custom-select-multi__control-option-item--select-all {
-
-        &.hide {
-            display: none !important;
-        }
-
-        .btn {
-            font-size: 0.75rem;
-            padding: 0.1rem 0.5rem;
-        }
-    }
-
-    /*------ Extended buttons of Single selection ------*/
-    .custom-select-multi__control-option-item--clear {
-
-        &.hide {
-            display: none !important;
-        }
-
-        .btn {
-            font-size: 0.75rem;
-            padding: 0.1rem 0.5rem;
-        }
-    }
-
-    
-
-}
-