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

package/style/Group.scss

@@ -1,90 +1,66 @@
 @use "sass:meta";
 @use "sass:math";
-@import './vars.scss';
 
 @mixin define(){
-    $themes:$wd-themes;
-    $colors:$wd-color;
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)}{
-           --g-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$level:-20%))};
-        };
-    };
 
-    $bg:var(--wd-block);  
-    $fone:var(--wd-bg);
-    $color:var(--wd-color);
-    $border:var(--wd-border);
-    $font-size:var(--wd-font-size);
-    $gap:var(--wd-gap);
-    $radius:var(--wd-radius);
-    $size:var(--wd-size);
-    $g-color:var(--g-color);
+    $bg:var(--v2-wd-group);  
+    $content:var(--v2-wd-block);
 
-    [type=group]{
-        //overflow: hidden;
-        box-shadow:   0 3px 6px 0 rgba(0, 0, 0, 0.07);
-        min-height: $size;
-        @if($bg!='none'){
-            background-color: $bg;
-        }
-        @if($color!='none'){
-            color: $color;
-        }
-        @if($border!='none'){
-            border:1px solid  $border;
-        }@else{
-            border:1px solid rgba(0,0,0,0);
-        }
-        @if($font-size!='none'){
-            font-size: $font-size;
-        }
+    $color-caption:var(--v2-wd-color-high);
+    
 
-        margin: $gap;
+    //$border:rgba(var(--v2-wd-border-rgb),1);
+    $border:rgba(var(--v2-wd-border-rgb),0.8);
+    $font-size:var(--v2-wd-font-size);
+    $gap:var(--v2-wd-gap);
+    $radius:var(--v2-wd-radius);
+    $size:var(--v2-wd-size);
 
-        @if($radius!='none'){
-            border-radius: $radius;
-        }
+    [group]{
+
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;    
         
-        @include display-flex-vert-stretch();
-        >*{
 
-            $pos:'up';
-            &:nth-child(1){
-                @include no-stretch();
-                @if ($pos=='up'){
-                    //font-size: 0.8rem;
-                    max-height:0;
-                    line-height: 0px;
-                    padding-left: $gap;
-                    margin-bottom: $gap;
-                    >span{
-                        border-radius: 5px 5px 0px 0px;
-                        background-color:$fone;
-                        padding-left: $gap;
-                        padding-right: $gap;
-                        background: linear-gradient(to bottom,rgba(0,0,0,0) 0%, $bg 80%,$bg 100%);
-                    }
-                }@else{
-                    //font-size: 0.8rem;
-                    max-height: $size*0.5;
-                    height: $size*0.5;
-                    padding-left: 2*$gap;
-                    overflow: hidden;
-                    margin-bottom: $gap;
-                }
-                //line-height:0;
-                //margin-bottom: $gap;
-                color:$g-color;
-                background-color: $bg;
-                white-space: nowrap;
+        overflow: hidden;
 
-            }
-            &:nth-child(2){
-                padding: $gap;
-                padding-left: calc($gap * 2);
+        >[caption]{
+            flex:0 1 auto;
+        }
 
-                @include stretch();
+        >[content]{
+            flex:1 1 auto;
+        }
+    }
+
+    .wd-group{
+        box-shadow:   0 3px 6px 0 rgba(0, 0, 0, 0.07);
+        min-height: $size;
+        
+        background-color: $bg;
+
+        border:1px solid  $border;
+        font-size: $font-size;
+        border-radius: $radius;
+        
+        &[group]{
+            >[caption]{
+                font-size: 1.2rem;
+                min-height: calc($size * 1.4);
+                line-height: calc($size * 1.4);
+                padding-left: calc($gap*2);
+                color: $color-caption;
+                border-bottom:1px solid rgba(var(--v2-wd-border-rgb),0.5);
+                //text-shadow: 0px 0px 1px var(--v2-wd-color-high);
+            }
+            >[content]{
+                padding: calc($gap*2);
+                min-height: calc($size * 2);
+                background-color: $content;
             }
         }
     }

package/style/Icon.scss

@@ -1,10 +1,9 @@
-@import './vars.scss';
 
 
 @mixin define(){
-    $size:var(--wd-size);
+    $size:var(--v2-wd-size);
 
-    [type=icon]{
+    .wd-icon{
         outline: none;
         width:$size;
         height:$size;

package/style/Label.scss

@@ -1,26 +1,36 @@
-@import './vars.scss';
 
 
 @mixin define($args...){
-    $size:var(--wd-size);
-    $gap:var(--wd-gap);
-    $color:var(--wd-label);
-    $margin:$wd-margin;
-    [type=label]{
-        margin-bottom:$margin;
+    $size:var(--v2-wd-size);
+    $gap:var(--v2-wd-gap);
+    $color:var(--v2-wd-label);
+    $margin:var(--v2-wd-margin);
+    
+    [label]{
+       
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: flex-start;
         align-content: stretch;
-        align-items: center;
+        align-items: flex-start;
 
-        height:$size;
+        >label{
+            overflow: hidden;
+        }
 
-        >*:nth-child(2){
-            //flex:1 1 auto;
-            margin-right: 0px;
+        >[labeled]{
+            flex:1 1 auto;
+            overflow: hidden;
         }
+        
+
+    }
+    .wd-label{
+        //margin-bottom:$margin;
+        min-height:$size;
+        box-sizing: border-box;
+
         label{
             @if($color!='none'){
                 color:$color;
@@ -28,9 +38,16 @@
             height:$size;
             line-height: $size;
             margin-right:$gap;
-            min-width:6rem;
-            overflow: hidden;
+            min-width:7rem;
+            padding-top: var(--v2-wd-outline-width);
+            padding-bottom: var(--v2-wd-outline-width);
         }            
+
+        >[labeled]{
+            padding: calc(var(--v2-wd-outline-width));
+            
+        }
+
     }
 }
 

package/style/List.scss

@@ -1,41 +1,27 @@
 @use "sass:meta";
-@import './vars.scss';
-@import './Gap.scss';
+@use './Gap.scss' as *;
 
 @mixin define(){
-    $themes:$wd-themes;
-    $hovers:$wd-high;
-    $hovers-color:$wd-color;
 
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)}{
-            //--btn-bg-hover:#{meta.inspect(blendColors($colors:$hovers,$theme:$theme,$level:-5%))};
-            //-btn-color-hover:#{meta.inspect(blendColors($colors:$hovers-color,$theme:$theme,$level:-20%))};
-        }   
-    }
-
-    $size:var(--wd-size);
-    $bg:var(--wd-high);
-    $color:var(--wd-color);
-    $highlight:var(--wd-highlight);
-    $border:var(--wd-border);
-    $outline:var(--wd-outline);
-    $margin:var(--wd-margin);
-    $font-size:var(--wd-font-size);
-    $margin:var(--wd-margin);
-    $radius:var(--wd-radius);
-    $gap:$wd-gap;
-    $tick:$wd-tick;
+    $size:var(--v2-wd-size);
+    $bg:var(--v2-wd-high);
+    $color:var(--v2-wd-color);
+    $highlight:var(--v2-wd-highlight);
+    $border:var(--v2-wd-border);
+    $outline:var(--v2-wd-outline);
+    $margin:var(--v2-wd-margin);
+    $font-size:var(--v2-wd-font-size);
+    $margin:var(--v2-wd-margin);
+    $radius:var(--v2-wd-radius);
+    $gap:var(--v2-wd-gap);
+    $tick:var(--v2-wd-tick);
     $invert:50%;//var(--cb-invert);
 
-    .wd-list{
+    .wd-list,[list]{
         box-sizing: border-box;
         overflow: hidden;
-        
-        >div{
-            //@include display-flex-horiz-stretch();
-        }
     }
+    
     .wd-list-item{
         min-height: $size;
         height:$size;
@@ -56,23 +42,24 @@
             }
         }
         >div{
-            &[is='caption']{
-                @include stretch();
+            &[caption]{
+                flex: 1 1 auto;
+
                 overflow: hidden;    
             }
-            &[is='icon']{
+            &[icon]{
                 width: $size;
                 min-width: $size;
-                background-image: url($tick); 
+                background-image: $tick; 
                 background-repeat: no-repeat, no-repeat;
                 background-position: center;
                 filter:invert($invert);                
                 
             }
         }
-        &[expand='true']{
+        &[expand]{
             >div{
-                &[is='icon']{
+                &[icon]{
                     transform: rotate(180deg);
                 }
             }

package/style/Modal.scss

@@ -1,11 +1,10 @@
-@import './vars.scss';
 
 
 @mixin define($args...){
-
     .wd-shadow{
         background-color: rgb(0, 0, 0);
-        position: absolute;
+        animation: 0.5s shadow-show ease;
+        opacity:0.5;
     } 
 
     .wd-modal{
@@ -19,4 +18,9 @@
 }
 
 
-@include define();
+@include define();
+
+@keyframes shadow-show {
+    from { opacity:0 }
+    to {  opacity:0.5}
+}

package/style/ModalDialog.scss

@@ -1,27 +1,26 @@
 @use "sass:meta";
-@import './vars.scss';
 
 
 @mixin define(){
-    $themes:$wd-themes;
-    $colors:$wd-color;
+    //$themes:$wd-themes;
+    //$colors:$wd-color;
     
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)}{
-           --md-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme ,$level:-10%))};
-           --md-color-hover:#{meta.inspect(blendColors($colors:$colors,$theme:$theme ,$level:-20%))};
-        };
-    };
+    //@each $theme in $themes{
+    //    #{getThemingRootClass($theme)}{
+    //       --md-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme ,$level:-10%))};
+    //       --md-color-hover:#{meta.inspect(blendColors($colors:$colors,$theme:$theme ,$level:-20%))};
+    //    };
+    //};
 
-    $size:var(--wd-size);
-    $gap:var(--wd-gap);
-    $border:var(--wd-border);
-    $bg:var(--wd-block);
-    $color:var(--wd-color);
-    $font-size:var(--wd-font-size);
-    $radius:var(--wd-radius);
-    $md-color:var(--md-color);
-    $md-color-hover:var(--md-color-hover);
+    $size:var(--v2-wd-size);
+    $gap:var(--v2-wd-gap);
+    $border:var(--v2-wd-border);
+    $bg:var(--v2-wd-block);
+    $color:var(--v2-wd-color);
+    $font-size:var(--v2-wd-font-size);
+    $radius:var(--v2-wd-radius);
+    $md-color:var(--v2-wd-color-high);
+    
     [state="show"]{
         >.wd-dialog-slide-from-right{
             animation: 0.5s dialog-slide-from-right ease;
@@ -33,7 +32,7 @@
             animation: 0.5s dialog-scale ease;
         }    
     }
-    [type=dialog]{
+    .wd-modal-dialog{
         border:1px solid $border;
         border-radius: $radius;
         background-color:$bg;
@@ -56,7 +55,7 @@
             align-self: auto;
         }
 
-        [type=dialog-header]{
+        [dialog-header]{
             min-height: calc( $size * 1.2 );
             color:$md-color;
 
@@ -75,15 +74,15 @@
                 flex: 0 1 auto;
                 align-self: auto;
             }
-            [type=dialog-caption]{
+            [dialog-caption]{
                 font-size: calc( $font-size * 1.3 );
-                font-weight: bold;
+                //font-weight: bold;
                 flex: 1 1 auto;
                 height: $size;
                 line-height: $size;
                 
             }
-            [type=dialog-close-btn]{
+            [dialog-close-btn]{
                 border-radius: 12px;
                 height:calc( $size * 0.8 );
                 width:calc( $size * 0.8 );
@@ -92,20 +91,19 @@
                 text-align: center;
                 color:$color;
                 &:hover{
-                    color:b$md-color-hover;
-                    font-size:1.1em;
+                    font-size:1.2em;
                     cursor:pointer;
                 }
             }
         }
-        [type=dialog-content]{
+        [dialog-content]{
             padding: $gap;
 
             flex: 1 1 auto;
             overflow: auto;
             
         }
-        [type=dialog-footer]{
+        [dialog-footer]{
             min-height: calc( $size * 1.2 );
     
             display: flex;
@@ -121,7 +119,7 @@
             }
         }
     }
-    [type=dialog-resize]{
+    [dialog-resize]{
         position: absolute;
         width: 0px;
         height: 0px;
@@ -151,8 +149,8 @@
 }
 
 @keyframes dialog-slide-from-top {
-    from { transform: translate(0%,-2%) }
-    to {  transform: tramslate(0%,0%)}
+    from { transform: translateY(-5px) ; opacity:0.5 }
+    to {  transform: tramslateY(0px) ; opacity:1}
 }
 
 @keyframes dialog-scale {