funda-ui 4.7.335 → 4.7.345

package/lib/esm/CascadingSelect/index.scss

@@ -2,23 +2,23 @@
     <!-- Cascading Select -->
 /* ====================================================== */
 
-.cas-select__wrapper {
+.casc-select__wrapper {
 
-    --cas-select-arrow-fill: #a5a5a5;
-    --cas-select-result-arrow-fill: #a5a5a5;
+    --casc-select-arrow-fill: #a5a5a5;
+    --casc-select-result-arrow-fill: #a5a5a5;
 
-    --cas-select-result-font-size: 1rem;
-    --cas-select-result-padding-x: 0.75rem;
-    --cas-select-result-padding-y: 0.375rem;
+    --casc-select-result-font-size: 1rem;
+    --casc-select-result-padding-x: 0.75rem;
+    --casc-select-result-padding-y: 0.375rem;
 
 
-    .cas-select__result {
+    .casc-select__result {
         position: absolute;
         left: auto;
         z-index: 1;
         top: 0;
-        padding: var(--cas-select-result-padding-y) var(--cas-select-result-padding-x);
-        font-size: var(--cas-select-result-font-size);
+        padding: var(--casc-select-result-padding-y) var(--casc-select-result-padding-x);
+        font-size: var(--casc-select-result-font-size);
         font-weight: 400;
         line-height: 1.5;
         color: inherit;
@@ -45,7 +45,7 @@
             margin: 0 0.3rem;
 
             path {
-                fill: var(--cas-select-result-arrow-fill);
+                fill: var(--casc-select-result-arrow-fill);
             }
 
         }
@@ -53,7 +53,7 @@
     }
 
 
-    .cas-select__closemask {
+    .casc-select__closemask {
         position: absolute;
         z-index: 1;
         top: 0;
@@ -65,22 +65,24 @@
     }
 
 
-    .cas-select__trigger {
+    .casc-select__trigger {
         position: relative;
         z-index: 0;
     }
 
 
-    .cas-select__val {
+    .casc-select__val {
         position: relative;
 
 
-        input {
-            cursor: pointer;
-            color: transparent !important;
-
-            &:focus {
+        &:not(.inputable) {
+            input {
+                cursor: pointer;
                 color: transparent !important;
+
+                &:focus {
+                    color: transparent !important;
+                }
             }
         }
 
@@ -92,7 +94,7 @@
 
             svg {
                 .arrow-fill-g {
-                    fill: var(--cas-select-arrow-fill);
+                    fill: var(--casc-select-arrow-fill);
                 }
             }
         }
@@ -103,37 +105,37 @@
 }
 
 /*------ List ------*/
-.cas-select__items-wrapper {
+.casc-select__items-wrapper {
 
 
-    --cas-select-opt-font-size: 0.875rem;
-    --cas-select-opt-padding-x: .4rem;
-    --cas-select-opt-padding-y: .3rem;
+    --casc-select-opt-font-size: 0.875rem;
+    --casc-select-opt-padding-x: .4rem;
+    --casc-select-opt-padding-y: .3rem;
 
-    --cas-select-opt-header-border-color: rgba(1, 1, 1, .2);
-    --cas-select-opt-header-text-color: #999;
-    --cas-select-opt-hover-bg: #f7f7f7;
-    --cas-select-opt-active-bg: #eeeeee;
+    --casc-select-opt-header-border-color: rgba(1, 1, 1, .2);
+    --casc-select-opt-header-text-color: #999;
+    --casc-select-opt-hover-bg: #f7f7f7;
+    --casc-select-opt-active-bg: #eeeeee;
 
 
-    --cas-select-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
-    --cas-select-items-bg: #fff;
-    --cas-select-items-color: inherit;
-    --cas-select-items-border-color: rgba(0, 0, 0, .1);
-    --cas-select-items-li-border-color: #eee;
+    --casc-select-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
+    --casc-select-items-bg: #fff;
+    --casc-select-items-color: inherit;
+    --casc-select-items-border-color: rgba(0, 0, 0, .1);
+    --casc-select-items-li-border-color: #eee;
 
-    --cas-select-loader-color: #000000;
-    --cas-select-clean-btn-color: #b5b5b5;
+    --casc-select-loader-color: #000000;
+    --casc-select-clean-btn-color: #b5b5b5;
     
-    --cas-select-searchbox-border-color: #ddd;
+    --casc-select-searchbox-border-color: #ddd;
     
 
-    box-shadow: var(--cas-select-items-box-shadow);
+    box-shadow: var(--casc-select-items-box-shadow);
     position: absolute;
     left: auto;
     max-height: 300px;
-    border: 1px solid var(--cas-select-items-border-color);
-    background: var(--cas-select-items-bg);
+    border: 1px solid var(--casc-select-items-border-color);
+    background: var(--casc-select-items-bg);
     padding: 10px;
     overflow-y: auto;
     box-sizing: border-box;
@@ -141,7 +143,7 @@
     border-radius: 5px;
     width: max-content;
     /* required -> the content will not wrap at all even if it causes overflows*/
-    color: var(--cas-select-items-color);
+    color: var(--casc-select-items-color);
     
 
     display: none;
@@ -160,7 +162,7 @@
         padding: 0;
     }
 
-    .cas-select__items-loader {
+    .casc-select__items-loader {
         position: absolute;
         pointer-events: none;
         left: 0;
@@ -172,30 +174,30 @@
         text-align: center;
         transform-origin: center;
         transform: translate(2px, 5px) rotate(0);
-        animation: 1s linear infinite cas-select__spinner;
+        animation: 1s linear infinite casc-select__spinner;
 
         svg {
             vertical-align: top;
             
             path {
-                fill: var(--cas-select-loader-color);
+                fill: var(--casc-select-loader-color);
             }
         }
     }
 
-    @keyframes cas-select__spinner {
+    @keyframes casc-select__spinner {
         to {
             transform: translate(2px, 5px) rotate(-360deg);
         }
     }
 
-    .cas-select__close {
+    .casc-select__close {
         svg {
             opacity: .4;
         }
     }
 
-    .cas-select__close:hover {
+    .casc-select__close:hover {
         svg {
             transition: .2s ease-out;
             opacity: .7;
@@ -214,7 +216,7 @@
             float: left;
             padding: 0 10px;
             margin-right: 15px;
-            border-right: 1px dotted var(--cas-select-items-li-border-color);
+            border-right: 1px dotted var(--casc-select-items-li-border-color);
             transition: .2s ease-out;
 
             &.hide-col {
@@ -231,9 +233,9 @@
 
 
     /* Searchbox */
-    .cas-select__items-col-searchbox {
+    .casc-select__items-col-searchbox {
         input {
-            border: 1px solid var(--cas-select-searchbox-border-color);
+            border: 1px solid var(--casc-select-searchbox-border-color);
             border-radius: 0.35rem;
             background: transparent;
             font-size: 0.75rem;
@@ -241,29 +243,29 @@
     }
     
     /* Options */
-    .cas-select__opt {
-        padding: var(--cas-select-opt-padding-y) var(--cas-select-opt-padding-x);
-        font-size: var(--cas-select-opt-font-size);
+    .casc-select__opt {
+        padding: var(--casc-select-opt-padding-y) var(--casc-select-opt-padding-x);
+        font-size: var(--casc-select-opt-font-size);
         border-radius: 2px;
 
         &:hover {
-            background: var(--cas-select-opt-hover-bg);
+            background: var(--casc-select-opt-hover-bg);
         }
 
         &.active {
-            background: var(--cas-select-opt-active-bg);
+            background: var(--casc-select-opt-active-bg);
         }
     }
 
-    .cas-select__opt-header {
-        padding: var(--cas-select-opt-padding-y) var(--cas-select-opt-padding-x);
-        font-size: var(--cas-select-opt-font-size);        
-        border-bottom: 1px dotted var(--cas-select-opt-header-border-color);
+    .casc-select__opt-header {
+        padding: var(--casc-select-opt-padding-y) var(--casc-select-opt-padding-x);
+        font-size: var(--casc-select-opt-font-size);        
+        border-bottom: 1px dotted var(--casc-select-opt-header-border-color);
         border-radius: 2px;
         position: sticky;
-        top: calc(var(--cas-select-opt-font-size) * -1);
-        background: var(--cas-select-items-bg);
-        color: var(--cas-select-opt-header-text-color);
+        top: calc(var(--casc-select-opt-font-size) * -1);
+        background: var(--casc-select-items-bg);
+        color: var(--casc-select-opt-header-text-color);
         display: flex;
         align-items: center;
 
@@ -273,14 +275,14 @@
   
 
         &:hover {
-            background: var(--cas-select-opt-hover-bg);
+            background: var(--casc-select-opt-hover-bg);
         }
 
         &.active {
-            background: var(--cas-select-opt-active-bg);
+            background: var(--casc-select-opt-active-bg);
         }
 
-        .cas-select__opt-header__clean {
+        .casc-select__opt-header__clean {
             display: inline-block;
             margin-left: .2rem;
             padding: .1rem;
@@ -291,11 +293,11 @@
 
             svg {
 
-                border: 1px var(--cas-select-clean-btn-color) solid;
+                border: 1px var(--casc-select-clean-btn-color) solid;
                 border-radius: 50%;
 
                 path {
-                    fill: var(--cas-select-clean-btn-color);
+                    fill: var(--casc-select-clean-btn-color);
                 }
             }
         }