funda-ui 4.7.620 → 4.7.624

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

@@ -0,0 +1,384 @@
+
+
+/* ======================================================
+    <!-- Tree -->
+/* ====================================================== */
+
+.tree-diagram-default {
+
+    --tree-padding-x: 1rem;
+    --tree-padding-y: 0.5rem;
+    --tree-font-line-height: 1.5;
+    --tree-dis-top: 1rem;
+    --tree-font-size: 0.875rem;
+    --tree-ident: var(--tree-font-size);
+    --tree-dis-start: -var(--tree-ident);
+    --tree-border-color: #ddd;
+    --tree-font-bg: #f6f6f6;
+    --tree-font-active-bg: #f0f8ff;
+    --tree-checkbox-indeterminate-color: #bbbbbb;
+    --tree-link-min-width: 150px;
+
+
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    outline: none; /* When using "tabindex" please set */
+    word-wrap: break-word;
+    word-break: break-word;
+
+    ul, li {
+        list-style: none;
+    }
+
+    .tree-diagram-default-nav {
+        display: flex;
+        flex-direction: column;
+        padding-left: 0;
+        margin-bottom: 0;
+        list-style: none;
+
+        .nav-link {
+            position: relative;
+            display: block;
+            cursor: pointer;
+            min-width: var(--tree-link-min-width);
+            padding: var(--tree-padding-y) var(--tree-padding-x);
+            font-size: var(--tree-font-size);
+            font-weight: 400;
+            color: inherit;
+            text-decoration: none;
+            transition: .1s ease-in-out;
+            padding-left: calc(var(--tree-padding-x)*2);
+            z-index: 1;
+
+            &.disabled {
+                opacity: .5;
+                pointer-events: none;
+            }
+
+            > span {
+                transition: .1s ease-in-out;
+                border-radius: 2px;
+
+                /* required */
+                display: inline-flex;
+                align-items: center;
+
+
+                var.loading-icon {
+                    position: absolute;
+                    margin-left: .2em;
+                }
+            }
+            
+
+            &:hover span {
+                background-color: var(--tree-font-bg);
+            }
+
+            &.selected span {
+                background-color: var(--tree-font-active-bg);
+            }
+
+            &.loading {
+
+                > span {
+                    var.loading-icon {
+                        display: inline-block;
+                    }
+                }
+                
+            }
+
+        }
+
+
+        var.loading-icon {
+            display: none;
+
+            svg {
+                animation: tree-diagram-ring 1.2s linear infinite;
+            }      
+        }
+
+
+
+        .checkbox-trigger {
+            display: none;
+            position: absolute;
+            left: calc(var(--tree-padding-x) + 1.5em);
+            top: calc(var(--tree-dis-top) - 8px);
+            z-index: 2;
+    
+            > div {
+                display: inline-block;
+                position: relative;
+    
+                .form-check {
+                    min-height: auto;
+                    margin-bottom: 0;
+
+                    [type=checkbox]:indeterminate,
+                    [type=checkbox].indeterminate {
+                        background-color: var(--tree-checkbox-indeterminate-color);
+                        border-color: var(--tree-checkbox-indeterminate-color);
+                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+
+                    }
+
+                }
+            } 
+        }
+    
+
+
+        .arrow {
+            cursor: pointer;
+            transition: .1s ease-in-out;
+            text-align: center;
+            position: absolute;
+            left: calc(var(--tree-padding-x) + 0.2em);
+            top: calc(var(--tree-dis-top) - 5px);
+            z-index: 2;
+            width: 10px;
+            height: 10px;
+
+            /* required */
+            display: inline-flex;
+            align-items: center;
+
+            > var > svg {
+                transition: .1s ease-in-out;
+            }
+
+            var.default-icon {
+                > span {
+
+                    &:last-child {
+                        display: none;
+                    }
+
+                }
+            }
+
+            &.loading {
+                var.default-icon {
+                    display: none;
+                }
+                var.loading-icon {
+                    display: inline-block;
+                }
+            }
+
+            &:hover {
+                opacity: .5;
+
+                > var > svg {
+                    transform: scale(1.4);
+                }
+            }
+
+        }
+
+
+        li {
+            position: relative;
+            padding-left: .2em;
+
+            i {
+                font-style: normal;
+            }
+ 
+
+            &.active {
+
+                > .arrow:not(.custom-icons) {
+                    transform: rotate(90deg);
+                }
+
+                > .arrow.custom-icons var.default-icon > span {
+
+                    &:first-child {
+                        display: none;
+                    }
+
+                    &:last-child {
+                        display: block;
+                    }
+    
+                }                
+            }
+
+    
+        }
+
+        > li {
+
+            ul {
+                transition: max-height 0.25s ease;
+                overflow: hidden;
+                position: relative;
+            }
+        }
+
+        /* Default height for sub items */
+        > li:not(.active) {
+
+            ul {
+                max-height: 0;
+            }
+        }
+
+
+        > li ul ul {
+            margin-top: auto;
+        }
+        
+    }
+
+    /*------ line ------*/
+    &.show-line .tree-diagram-default-nav {
+
+        li {
+            &::before,
+            &::after {
+                content: "";
+                position: absolute;
+                top: calc(0px - var(--tree-dis-top));
+                left: var(--tree-dis-start);
+                border-left-width: 1px;
+                border-left-style: solid;
+                border-left-color: var(--tree-border-color);
+                border-bottom-width: 1px;
+                border-bottom-style: solid;
+                border-bottom-color: var(--tree-border-color);
+
+                width: var(--tree-ident);
+                pointer-events: none;
+            }
+    
+            &::before {
+                height: calc(var(--tree-font-size)*var(--tree-font-line-height) + var(--tree-padding-y) + var(--tree-padding-y));
+            }
+    
+            &::after {
+                height: 100%;
+                border-bottom-width: 0;
+            }
+    
+            &:last-child::after {
+                display: none;
+            }
+     
+        }
+
+        > li {
+            &:first-child::before {
+                border-left-width: 0;
+            }
+            &:first-child::after {
+                top: calc(var(--tree-font-size)*var(--tree-font-line-height));
+             }
+
+        }
+
+    }
+
+    &.show-line.line--dotted .tree-diagram-default-nav {
+        li {
+            &::before,
+            &::after {
+                border-left-style: dotted;
+                border-bottom-style: dotted;
+            }
+        }
+    }
+
+    &.show-line.line--dashed .tree-diagram-default-nav {
+        li {
+            &::before,
+            &::after {
+                border-left-style: dashed;
+                border-bottom-style: dashed;
+            }
+        }
+    }
+
+    &.show-line.line--double .tree-diagram-default-nav {
+        li {
+            &::before,
+            &::after {
+                border-left-style: double;
+                border-bottom-style: double;
+            }
+        }
+    }
+
+
+    &.show-line.line--solid .tree-diagram-default-nav {
+        li {
+            &::before,
+            &::after {
+                border-left-style: solid;
+                border-bottom-style: solid;
+            }
+        }
+    }
+
+
+    /*------ has checkbox  ------*/
+    &.has-checkbox {
+        .checkbox-trigger {
+            display: inline-block;
+        }
+
+        .tree-diagram-default-nav {
+            .nav-link {
+                padding-left: calc(var(--tree-padding-x) + 2.7em);
+            }
+        } 
+
+    }
+    
+    /*------ hide arrow  ------*/
+    &.hide-arrow {
+        .arrow {
+            display: none;
+        }
+
+        .tree-diagram-default-nav {
+            .nav-link {
+                padding-left: var(--tree-padding-x);
+            }
+        }
+    
+    }
+
+    &.hide-arrow.has-checkbox {
+        
+        .tree-diagram-default-nav {
+            .checkbox-trigger {
+                left: calc(var(--tree-padding-x) + 0.5em);
+            }
+            .nav-link {
+                padding-left: calc(var(--tree-padding-x) + 1.5em);
+            }
+        } 
+
+    }
+
+}
+
+@keyframes tree-diagram-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}