fmihel-windeco-components 2.0.0-beta.6 → 2.0.0-beta.61

package/style/NavBar.scss

@@ -1,236 +1,228 @@
-@use 'sass:meta';
-@import './vars.scss';
+@use "sass:meta";
+@use './utils/screen.scss' as *;
+@use './utils/transition.scss' as *;
+@use './ScrollBar.scss' as *;
 
-
-@mixin define(){
-    $themes:$wd-themes;
-    $hovers:$wd-high;
-    $hovers-color:$wd-color;
-
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)}{
-            //--nav-bg-hover:#{meta.inspect(blendColors($colors:$hovers,$theme:$theme,$level:-5%))};
-            --nav-color-hover:#{meta.inspect(blendColors($colors:$hovers-color,$theme:$theme,$level:-30%))};
-        }   
-    }
-
-    $size:var(--wd-size);
-    $panel-height:calc($size*1.5);
-    $bg:var(--wd-deep);
-    $color:var(--wd-color);
-    $orange:var(--wd-orange);
-    $border:var(--wd-border);
-    $gap:var(--wd-gap);
-    $mobile-width:$wd-large-width;
-    $tick:$wd-tick;
-    $invert:50%;//var(--cb-invert);
-
-    .wd-nav-left{
-
-        @include display-flex-vert-stretch();    
-        @media screen and (min-width: $mobile-width) {
-            flex-direction: row;
-        }    
-        overflow: hidden;
-    }
+@each $name,$width in $wd-widths{
     
-    .wd-nav-top{
-        @include display-flex-vert-stretch();
-        overflow: hidden;
-    
-        >div[it='navbar']{
-    
-            @include display-flex-vert-stretch();
-            @media screen and (min-width: $mobile-width) {
-                flex-direction: row;
-            }
-    
-            >div[it='nav-items']{
-                display:block;
-                @media screen and (min-width: $mobile-width) {
-                    @include display-flex-horiz-stretch();
-                }
-            }
+    .nav-container-#{$name}{ 
+        height: 100%;
+
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;
+        
+        flex-direction: row;
+        @include less-than(#{$name}){
+            flex-direction: column;
         }
     }
-    
-    div[it='navbar']{
-        @include display-flex-vert-stretch();
-        >div[it='nav-panel']{
-            min-height: $panel-height;
-            @include display-flex-horiz-center();
-            >div[it='nav-logo']{
-                @include stretch();
-                line-height: $panel-height;   
-            }
-            >div[it='nav-btn-close']{
-                width: $panel-height;
-                @media screen and (min-width: $mobile-width) {
-                    display: none;
-                }
-            }
+    .mobile{
+        .nav-container-#{$name}{ 
+            flex-direction: column;
         }
+    }
 
-        @include transition(height 0.4s);
-        
-        >div[it='nav-items']{
-            overflow-x: hidden;
-            overflow-y: auto;
-            @include stretch(); 
-        }
     
-        &[state='open']{
-            height: 90% !important;
-            @media screen and (min-width: $mobile-width) {
-                height: auto !important;
+}
+
+.nav-content{
+    //border: 1px dashed red;
+    flex:1 1 auto;
+    overflow: auto;
+}
+
+
+@mixin define(){
+
+    $size:var(--v2-wd-size);
+    $gap:var(--v2-wd-gap);
+    $size-item:calc(var(--v2-wd-size)*0.8);
+    $tick:var(--v2-wd-tick);
+    .mobile{
+        .wd-navbar{
+            [nav-menu]{
+                height:0px;
+            }
+            [nav-btn]{
+                display: block;
+            }
+            [nav-empty]{
+                display: block;
             }
         }
+    }
 
-        &[state='close']{
-            height: $panel-height !important;
-            @media screen and (min-width: $mobile-width) {
-                height: auto !important;
-            }
+    .wd-navbar{
+        min-width:250px;
+
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;       
+        flex-direction: column;    
+
+        @include less-large{
+            max-height: 80%;
         }
         
-    }//navbar
-
-    div[it='nav-menu']{
-        overflow: hidden;
-        div{
-            &[it='nav-menu-head']{
-                @include display-flex-horiz-stretch();
-                >div{
-                    &:nth-child(1){
-                        @include stretch();
-                    }
-                    &:nth-child(2){
-                        width: $size;
+        [nav-item]{
+            cursor:default;
+            min-height:$size;
+            line-height: $size;
+            overflow: hidden;
+            [nav-item]{
+                padding-left:calc($size*0.5);
+            }
+            [caption]{
+                &:hover{
+                    cursor: pointer;
+                    color: var(--v2-wd-color-high);
+                    //transition: color 0.1s;
+                    @include transition(color 0.1s);
+                    //text-shadow: 0px 0px 0.3px var(--v2-wd-color-high);
+                }
+                [img]{
+                    width: $size;
+                    background-image:$tick; 
+                    background-repeat: no-repeat, no-repeat;
+                    background-position: center;
+                    filter:invert(50%);                
+                    //transition: transform 0.2s;
+                    @include transition(transform 0.2s);
+                }
+            }
+            &[opened]{
+                >[caption]{
+                    //color:var(--wd-highlight);
+                    //text-shadow: 0px 0px 0.5px var(--wd-highlight);
+                    [img]{
+                        transform: rotate(180deg);   
                     }
                 }
             }
-            &[it='nav-menu-items']{
-                @include stretch();
-                padding-left: $size;
+            &[active]{
+                >[caption]{
+                    color:var(--v2-wd-url);
+                    //transition: color 0.1s,text-shadow 0.1s;
+                    @include transition(color 0.1s,text-shadow 0.1s);
+                    //text-shadow: 0px 0px 0.7px var(--v2-wd-url);
+                }
             }
         }
+        
+        [nav-panel]{
 
-
-        //@include transition(height 0.4s);
-        //height: 0px;
-        &[expand='expand']{
-            height: auto;                       
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: flex-start;
+            align-content: stretch;
+            align-items: center;       
+            flex-direction: row;
         }
-    }
 
-    .wd-nav-btn{
-        text-align: center;
-        line-height: $panel-height;
-        cursor: pointer;
-    }
+        [nav-btn]{
+            min-height: $size;
+            min-width: $size;
+            font-size:2rem;
+            text-align: center;
+            cursor:pointer;
+            @include more-large{
+                display: none;
+            }
+        }
 
-    //-------------------------------------------------    
-    .wd-nav-item{
-        min-height: $size;
-        line-height: $size;
-        padding-left: $gap;
-        padding-right: $gap;
-        [it='cap']{
-            display: block;
-            width: 100%;
-            &:hover{
-                cursor: pointer;
-                color: var(--nav-color-hover);
-                text-shadow: 0px 0px 1px var(--nav-color-hover);
+        [nav-empty]{
+            flex:1 1 auto;
+            @include more-large{
+                display:none;
             }
         }
-    }
-    .wd-nav-top{
-        .wd-nav-item{
-            @media screen and (min-width: $mobile-width) {
-                @include display-flex-center(column);
-            }            
+        
+        [nav-menu]{
+            
+            padding-left: $gap;
+            padding-right: $gap;
+            overflow: auto;
+            @include wd-scrollbar();        
+
+            @include less-large{
+                height:0px;
+            }
+            &[expand]{
+                height:auto !important;
+                min-height: auto !important;
+            }
+            //@include less-large{
+                /*
+                position: absolute;
+                right:0px;
+                top:0px;
+                background-color: gray;
+                height: 100%;
+                width:0px;
+                */
+            //}
         }
-    }
-    .wd-nav-item-stretch{
-        min-height: 0px !important;
-        height: 0px;
-        @include stretch();
 
-        @media screen and (max-width: $mobile-width) {
-            @include no-stretch();
+        [caption]{
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: flex-start;
+            align-content: stretch;
+            align-items: stretch;       
+            flex-direction: row;
+            [text]{
+                flex: 1 1 auto;
+            }
         }
     }
-    //-------------------------------------------------    
-    .wd-nav-menu{
-        min-height: $size;
-        //border-bottom: 1px dashed $border;
 
-        >div{
-            &[it='nav-menu-head']{
-            line-height: $size;
 
-            padding-left: $gap;
-            padding-right: $gap;
-            
-                >div[it='nav-menu-btn']{
-                    width: $size;
-                    background-image: url($tick); 
-                    background-repeat: no-repeat, no-repeat;
-                    background-position: center;
-                    filter:invert($invert);                
+    
+    
+    @each $name,$width in $wd-widths{
+        .nav-container-#{$name}{ 
+            [navbar]{
+                @include more-than(#{$name}){
+                    max-height: none !important;
                 }
-                &:hover{
-                    cursor: pointer;
-                    color: var(--nav-color-hover);
-                    text-shadow: 0px 0px 1px var(--nav-color-hover);                    
+                @include less-than(#{$name}){
+                    max-height: 80%;
                 }
-            }
-            &[it='nav-menu-items']{
-                >div{
-                    &:last-child{
-                        border-color: rgba(0,0,0,0) !important;
+                [nav-btn]{
+                    display: block;
+                    @include more-than(#{$name}){
+                        display: none !important;
                     }
-                }    
-            }
-        }
-        &[expand='expand']{
-            >div[it='nav-menu-head'] >div[it='nav-menu-btn']{ 
-                transform: rotate(180deg);
-            }
-        }
-        &[as='popup']{
-            >div[it='nav-menu-head'] >div[it='nav-menu-btn']{ 
-                //transform: rotate(-90deg) !important;
+                }
+                [nav-empty]{
+                    @include more-than(#{$name}){
+                        display:none !important;
+                    }
+                }
+                [nav-menu]{
+                    height:auto;
+                    @include less-than(#{$name}){
+                        height:0px;
+                    }                    
+                }
             }
         }
     }
     
-    .wd-nav-dialog{
-        .wd-dialog-content{
-            overflow: hidden;
-        }
-    }
-    .wd-nav-top{
-        .wd-nav-menu{
-            @media screen and (min-width: $mobile-width) {
-                @include display-flex-center(column);
-            }            
-        }
-    }
-    //-------------------------------------------------    
-
     .wd-nav-logo{
-        min-height: $panel-height;
-        line-height: $panel-height;
-        min-width: calc($size*3);
+        min-height: calc($size*1.5);
+        line-height: calc($size*1.5);
         padding-left: $gap;
-        font-size: 1.2rem;
-        color:$orange;
-        text-shadow: 1px 1px 2px $orange;
+        padding-right: $gap;    
+        color:var(--wd-orange);
     }
-
+    
 }
 
-@include define();
 
+@include define();

package/style/ScrollBar.scss

@@ -1,56 +1,42 @@
 @use "sass:meta";
-@import './vars.scss';
-
-
-@each $theme in $wd-themes{
-    #{getThemingRootClass($theme)}{
-       --wdsc-sb-thumb:#{meta.inspect(blendColors($colors:$wd-color,$theme:$theme ,$level:40%))};
-       --wdsc-sb-hover:#{meta.inspect(blendColors($colors:$wd-color,$theme:$theme ,$level:30%))};
-    };
-};
-
-
 
 @mixin wd-scrollbar(
-    $bg:var(--wd-transparent),
-    $size:calc( var(--wd-size) * 0.4),
-    $thumb:var(--wdsc-sb-thumb),
-    $hover:var(--wdsc-sb-hover),
-)
-{
-
-    &::-webkit-scrollbar-track{
+    $bg: var(--v2-wd-high),
+    $size: calc(var(--v2-wd-size) * 0.4),
+    $thumb: rgba(var(--v2-wd-secondary-rgb), 0.3),
+    $hover: rgba(var(--v2-wd-secondary-rgb), 0.5)
+) {
+    &::-webkit-scrollbar-track {
         background-color: $bg;
-        border-right:1px solid $bg;
+        border-right: 1px solid $bg;
     }
-    
-    &::-webkit-scrollbar{
-        background-color:$bg;
+
+    &::-webkit-scrollbar {
+        background-color: $bg;
         width: $size;
         height: $size;
     }
-    
-    &::-webkit-scrollbar-thumb{
-        background-color:$thumb;
-        border:1px solid $thumb;
-        
-        //border-radius: 24px;
-        //border-radius: 24px;
-        
-    }
-    &::-webkit-scrollbar-thumb{
-        &:hover{
-            
-            background-color:$hover;
-            border:1px solid $hover;
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $thumb;
+        border: 1px solid $thumb;
+
+        //@include transition(background-color 2s);
+        &:hover {
+            //@include transition(background-color 2s);
+            background-color: $hover;
+            border: 1px solid $hover;
         }
     }
+    &::-webkit-scrollbar-corner {
+        background-color: $bg;
+    }
 }
 
-@mixin define(){
-    .wd-scrollbar{
-        @include wd-scrollbar();        
-    }
+// @mixin define(){
+.wd-scrollbar {
+    @include wd-scrollbar();
 }
+// }
 
-@include define();
+// @include define();

package/style/Table.scss

@@ -1,39 +1,31 @@
 @use "sass:meta";
-@import './vars.scss';
-@import './ScrollBar.scss';
 
 @mixin define(){
-    $themes:$wd-themes;
-    $colors:$wd-color;
-    
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)}{
-           --tf-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme ,$level:-20%))};
-           --tf-header-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$level:-20%))};
-           --tf-select-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$light:50%,$dark:20%))};
-        };
-    };
 
     $size:2rem;
     $outline:'none';
 
-    $bg:var(--wd-transparent);
-    $color:var(--wd-color);
-    $border:var(--wd-border);
+    $bg:var(--v2-wd-transparent);
+    $color:var(--v2-wd-color);
+    $border:var(--v2-wd-border);
     $sep:'yes';
 
-    $header:var(--wd-header);
-    $header-color:var(--wd-header-color);
-    $header-border:var(--wd-border);
-    $header-sep:'yes';//yes / none
+    $header:var(--v2-wd-header);
+    $header-color:var(--v2-wd-color-high);
+    $header-border:var(--v2-wd-border);
+    $header-sep:'none';//yes / none
 
-    $font-size:var(--wd-font-size);
-    $gap:var(--wd-gap);
+    $font-size:var(--v2-wd-font-size);
+    $gap:var(--v2-wd-gap);
 
-    $select:var(--wd-select);
-    $select-color:var(--tf-select-color);
+    $select:var(--v2-wd-select);
+    $select-color:var(--v2-wd-select-color);
+    $toggle:var(--v2-wd-toggle);
+    
+    $hover:var(--v2-wd-hover);
+    $hover-color:var(--v2-wd-hover-color);
 
-    [type=table]{
+    .wd-table{
     
         box-sizing: border-box;
         border-collapse: collapse;
@@ -50,8 +42,10 @@
             color:$header-color;
             th{
                 border: 1px solid $header-border;
+                font-weight: normal;
                 @if($header-sep=='none'){
-                    border-right-color: rgba(0,0,0,0);
+                    //border-right-color: rgba(0,0,0,0);
+                    border-right-color: $header;
                 }
                 overflow: hidden;
                 &:first-child{
@@ -73,10 +67,19 @@
                 padding-left: $gap;
             }
             tr{
-                @include transition(background-color 0.2s,color 0.2s);
+                //@include transition(background-color 0.2s,color 0.2s);
+                &:hover{
+                    //color:$hover-color !important;
+                    //background-color: $hover !important;
+                }
+                &:not(:last-child){
+                    &:nth-child(2n){
+                        //background-color: $toggle;
+                    }
+                }
                 &[select]{
-                    background-color: $select;
-                    color: $select-color;
+                    background-color: $select ;
+                    color: $select-color ;
                 }
                 &:first-child{
                     td{
@@ -98,11 +101,6 @@
             }
         }
 
-
-        table{
-    
-        
-        }
     }
 }
 

package/style/TableFixed.scss

@@ -1,41 +1,30 @@
 @use "sass:meta";
-@import './vars.scss';
-@import './ScrollBar.scss';
+@use './ScrollBar.scss' as *;
 
 @mixin define(){
-    $themes:$wd-themes;
-    $colors:$wd-color;
-    
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)}{
-           --tf-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme ,$level:-20%))};
-           --tf-header-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$level:-20%))};
-           --tf-select-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$light:50%,$dark:20%))};
-        };
-    };
 
     $size:2rem;
     $outline:'none';
 
-    $bg:var(--wd-transparent);
-    $color:var(--wd-color);
-    $border:var(--wd-border);
+    $bg:var(--v2-wd-transparent);
+    $color:var(--v2-wd-color);
+    $border:var(--v2-wd-border);
     $sep:'yes';
 
-    $header:var(--wd-header);
-    $header-color:var(--wd-header-color);
-    $header-border:var(--wd-border);
-    $header-sep:'yes';
+    $header:var(--v2-wd-header);
+    $header-color:var(--v2-wd-header-color);
+    $header-border:var(--v2-wd-border);
+    $header-sep:'none';
 
-    $font-size:var(--wd-font-size);
-    $gap:var(--wd-gap);
+    $font-size:var(--v2-wd-font-size);
+    $gap:var(--v2-wd-gap);
 
-    $select:var(--wd-select);
-    $select-color:var(--tf-select-color);
+    $select:var(--v2-wd-select);
+    $select-color:var(--v2-wd-select-color);
 
     .wd-table-fixed-vert{
     }
-    [type=table-fixed]{
+    .wd-table-fixed{
         &[container=horiz]{
             @if ($outline != 'none'){
                 margin-top:1px;
@@ -47,7 +36,13 @@
             height: 100%;
             overflow: hidden;
     
-            @include display-flex-vert-stretch();
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            justify-content: flex-start;
+            align-content: stretch;
+            align-items: stretch;
+
             @include wd-scrollbar();
         }
 
@@ -136,7 +131,7 @@
                     padding-left: $gap;
                 }
                 tr{
-                    @include transition(background-color 0.2s,color 0.2s);
+                    //@include transition(background-color 0.2s,color 0.2s);
                     &[select]{
                         background-color: $select;
                         color: $select-color;