funda-ui 4.7.620 → 4.7.624

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

@@ -0,0 +1,639 @@
+/* ======================================================
+    <!-- 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;
+        }
+    }
+
+    
+
+}
+