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

package/style/BtnIcon.scss

@@ -1,30 +1,22 @@
 @use "sass:meta";
-@import './vars.scss';
+@use './utils/transition.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:$wd-size;
-    $bg:var(--wd-high); 
-    $color:var(--wd-color);
-    $border:var(--wd-border);
-    $outline:var(--wd-outline);
-    $font-size:var(--wd-font-size);
-    $gap:var(--wd-gap);
-    $margin:var(--wd-margin);
-    $radius:var(--wd-radius);
+    $size:var(--v2-wd-size);
+    $bg:var(--v2-wd-high); 
+    $color:var(--v2-wd-color);
+    $border:var(--v2-wd-border);
+    $outline:var(--v2-wd-outline);
+    $font-size:var(--v2-wd-font-size);
+    $gap:var(--v2-wd-gap);
+    $margin:var(--v2-wd-margin);
+    $radius:var(--v2-wd-radius);
 
 
-    [type="btn-icon"]{
+    //[type="btn-icon"]{
+    .wd-btn-icon{
+        overflow: hidden;
         height:$size;
         cursor: pointer;
         background-color: $bg;
@@ -63,28 +55,57 @@
         }
 
         &:hover{
-            background-color:var(--btn-bg-hover);
-            color:var(--btn-color-hover);
+            filter: brightness(var(--v2-wd-hovering));
+        }
+        &[disabled]{
+            opacity: 0.6;
+            &:hover{
+                filter:none;
+            }
         }
-
         >div{
             order: 0;
             flex: 0 1 auto;
             align-self: auto;
             margin-left:1px;
             margin-right:1px;
-            &:first-child(){
-                min-height:$size*0.5;
-                min-width:$size*0.5;
-                @include display-flex-center();
+            
+            &[icon]{
+                min-height:calc($size * 0.5);
+                min-width:calc($size * 0.5);
+
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                justify-content: center;
+                align-content: stretch;
+                align-items: center;
+
                 >svg{
-                    max-height: $size*0.5;
+                    max-height: calc($size * 0.5);
                 }
             }
-            &:last-child(){
+            
+            &[between]{
+                width:calc(var(--v2-wd-gap) * 0.5);
+            }
+
+            &[value]{
                 min-width:calc($size/2);
             }
         }
+
+        &.wd-flat{
+            background: rgba(0,0,0,0);
+            &:hover{
+                background-color: $bg;
+                filter: brightness(var(--v2-wd-hovering));
+            }
+    
+        }
+        &.only-text{
+            background-color: $bg;
+        }    
     }
 
 }

package/style/CheckBox.scss

@@ -1,49 +1,50 @@
 @use "sass:meta";
-@import './vars.scss';
+//@import './vars.scss';
 
 @mixin define(){
-    $themes:$wd-themes;
-    $icons:$wd-cross;
+    //$themes:$wd-themes;
+    //$icons:$wd-cross;
 
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)} {
-            --chk-url:url(#{map-get($icons,$theme)});
-        }   
-    }
+    //@each $theme in $themes{
+    //    #{getThemingRootClass($theme)} {
+    //        --chk-url:url(#{map-get($icons,$theme)});
+    //    }   
+    //}
     
-    $size:$wd-size;
-    $bg:var(--wd-bg);
-    $border:var(--wd-border);
-    $outline:var(--wd-outline);
-    $icon-hover:$cross-opacity;
-
-    input[type=checkbox] {
+    $size:var(--v2-wd-size);
+    $bg:var(--v2-wd-bg);
+    $border:var(--v2-wd-border);
+    $outline:var(--v2-wd-outline);
+    $icon-hover:var(--v2-wd-cross-hover);
+    $icon:var(--v2-wd-cross);
+
+    //input[type=checkbox] {
+    .wd-checkbox{
         -webkit-appearance: none;
         -moz-appearance: none;
         
         background-color: $bg;
         border: 1px solid $border;
 
-        width: $size*0.7;
-        max-width: $size*0.7;
-        height: $size*0.7;
-        max-height: $size*0.7;
+        width: calc($size*0.7);
+        max-width: calc($size*0.7);
+        height: calc($size*0.7);
+        max-height: calc($size*0.7);
         margin:0px;
 
         cursor: pointer;        
 
         &:checked{
-            //background-image:url($icon);
-            background-size: $size*0.5;
+            background-size: calc($size*0.5);
             background-position: center center;
             background-repeat: no-repeat;
-            background-image:var(--chk-url);
+            background-image:$icon;
 
         }
         &:not(:checked){
             &:hover{
-                background-image:url($icon-hover);
-                background-size: $size*0.5;
+                background-image:$icon-hover;
+                background-size: calc($size*0.5);
                 background-position: center center;
                 background-repeat: no-repeat;
             }
@@ -51,16 +52,8 @@
         &:focus{
             outline:2px solid $outline;
         }
-}
+    }
 
-    //@each $theme in $themes{
-    //    :root.#{$theme} input[type=checkbox]{
-    //        &:checked{
-    //            background-image:url(#{map-get($icons,$theme)});
-    //        }
-//
-//        }
-//    } 
 }
 
 @include define();

package/style/ComboBox.scss

@@ -1,41 +1,42 @@
 @use "sass:meta";
 @use "sass:math";
-@import './vars.scss';
+@use './utils/transition.scss' as *;
 
 @mixin define(){
-    $themes:$wd-themes;
-    $colors:$wd-color;
+    //$themes:$wd-themes;
+    //$colors:$wd-color;
     //$inverts:('light':60%,'dark':30%);
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)} {
+    //@each $theme in $themes{
+        //#{getThemingRootClass($theme)} {
             
-           --cb-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$level:-20%))};
-           --cb-color-hover:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$level:-50%))};
-           --cb-placeholder:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$light:20%,$dark:-40%))};
+        //   --cb-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$level:-20%))};
+        //   --cb-color-hover:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$level:-50%))};
+        //   --cb-placeholder:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$light:20%,$dark:-40%))};
            //--cb-invert:#{meta.inspect(map-get($map:$inverts,$key:$theme))};
            //@debug $inverts  map-get($map:$inverts,$key:$theme);
-        }
-    }
+        //}
+    //}
     
-    $size:$wd-size;
-    $gap:$wd-gap;
-    $bg:var(--wd-deep);
-    $color:var(--cb-color);
+    $size:var(--v2-wd-size);
+    $gap:var(--v2-wd-gap);
+    $bg:var(--v2-wd-deep);
+    $color:var(--v2-wd-color);
     $invert:50%;//var(--cb-invert);
-    $tick:$wd-tick;
-    $border:var(--wd-border);
-    $required:rgba(var(--wd-alert-rgb), 0.1);
+    $tick:var(--v2-wd-tick);
+    $border:var(--v2-wd-border);
+    $required:rgba(var(--v2-wd-danger-rgb), 0.1);
 
-    $outline:var(--wd-outline);    
-    $font-size:var(--wd-font-size);
+    $outline:var(--v2-wd-outline);    
+    $outline-width:var(--v2-wd-outline-width);    
+    $font-size:var(--v2-wd-font-size);
     
-    $hover:var(--wd-hover);
-    $color-hover:var(--cb-color-hover);
-    $margin:var(--wd-margin);
-    $radius:var(--wd-radius);
-    $placeholder:var(--cb-placeholder);
+    $hover:var(--v2-wd-hover);
+    $color-hover:var(--v2-hover-color);
+    $margin:var(--v2-wd-margin);
+    $radius:var(--v2-wd-radius);
+    $placeholder:rgba(var(--v2-wd-color-rgb), 0.5);
 
-    [type=combo]{
+    .wd-combo{
         height:$size;
         width:100%;
         background-color: $bg;
@@ -51,24 +52,28 @@
         white-space: nowrap;
         overflow: hidden;
         
-        @if($margin!='none'){
-            margin-right:$margin;
-        };
+        //margin:$outline-width;
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;
 
-        @include display-flex-horiz-stretch();
 
         outline: 0px solid rgba(0,0,0,0);
         @include transition(outline-color 0.4s);
 
         >*{
             &:nth-child(1) {
-                @include stretch();
-                line-height:$size * 0.9;
+                flex:1 1 auto;
+                line-height:calc($size * 0.9);
             }
             &:nth-child(2) {
                 min-width: $size;
                 width: $size;
-                background-image: url($tick); 
+                background-image: $tick; 
                 background-repeat: no-repeat, no-repeat;
                 background-position: center;
                 filter:invert($invert);
@@ -82,19 +87,19 @@
             }
         }
         &:focus { 
-            outline: 2px solid $outline;
+            outline: $outline-width solid $outline;
         }
         &[disabled]{
             opacity: 0.4;
         }
         &[required]{
-            border:1px solid $required !important;
+            //border:1px solid $required !important;
             background-color:$required !important;
 
         }        
     
     }
-    [type=combo-list]{
+    [combo-list]{
         background-color: $bg;
         color:$color;
         border:1px solid $border;
@@ -102,55 +107,60 @@
         overflow-x: hidden;
         overflow-y: auto;  
 
-        [type=combo-item]{
+        animation: 0.1s cbex-list-slide ease;
+        [combo-item]{
             max-height: $size;
             height: $size;
 
-            &:hover{
+            &:hover:not([disabled]):not([active]){
                 background-color: $hover;
                 color:$color-hover;
             }
             &[disabled]{
-                opacity: 0.3;
-                &:hover{
-                    background-color: $bg;
-                    color:$color;
-                }                
+                color:rgba(var(--v2-wd-color-rgb),0.4);
+            }
+            &[active]{
+                color:var(--v2-wd-select-color);
+                background-color:var(--v2-wd-select);
             }
         }
     }
-    .mobile [type=combo-list]{
+    .mobile [combo-list]{
         animation: 0.5s combo-scale ease;
         padding: $gap;
-        [type=combo-item]{
-            //border-bottom: 1px solid $border;
+        [combo-item]{
+            border-bottom: 1px solid $border;
             border-radius: 3px;
-            &:nth-child(2n+1){
-                background-color: $hover;
-
-            }        
+            
         }
     }
     
-    [type=combo-item]{
+    [combo-item]{
         text-indent: $gap;
         line-height: $size;
         white-space: nowrap;
         overflow: hidden;
 
-        &[state="no-select"]{
-            color: $placeholder;
-        }
         // for ComboItemIcon -------
-        @include display-flex-horiz-stretch();
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;
+        
         >div{
             &:nth-child(1) {
-                @include no-stretch();
+                flex:0 1 auto;
             }                
             &:nth-child(2) {
-                @include stretch();
+                flex:1 1 auto;
             }                
         }
+
+        &[state="no-select"]{
+            color: $placeholder;
+        }
         // ----------------------------
     };
 
@@ -183,6 +193,10 @@
 }
 
 
+@keyframes cbex-list-slide {
+    from { transform:  scaleY(70%) translateY(-20%)}
+    to {  transform:  scaleY(100%) translateY(0%)}
+}
 
 
 @include define();

package/style/Container.scss

@@ -1,50 +1,9 @@
 @use 'sass:meta';
-@import './vars.scss';
 
 .wd-container{
-    display: flex;
-    
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: stretch;
-    align-items: stretch;    
-
-    flex-direction: row;    
-    @include on-small{
-        flex-direction: column;
+    >div{
+        display: flex;
+        flex-wrap: wrap;
     }
 }
-.wd-container-row{
-    display: flex;
-    
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: stretch;
-    align-items: stretch;    
-    
-    flex-direction: row;
-}
-.wd-col{
-    flex: 1 1 auto;
-    //min-height: var(--wd-size);
-    //border: 1px dotted limegreen;
-}
 
-.wd-col-margin{
-    flex: 0 1 auto;
-    //border: 1px dotted limegreen;
-    
-    width: var(--wd-margin);
-    height: var(--wd-margin);
-
-}
-
-.wd-col-1{
-    border: 1px dotted limegreen;
-    min-width:10%;
-}
-
-.wd-col-2{
-    border: 1px dotted limegreen;
-    min-width:20%;
-}

package/style/Edit.scss

@@ -1,30 +1,21 @@
 @use "sass:meta";
-@import './vars.scss';
+@use './utils/transition.scss' as *;
 
 
 @mixin define(){
 
-    $themes:$wd-themes;
-    $colors:$wd-color;
-    
-    @each $theme in $themes{
-        #{getThemingRootClass($theme)}{
-           --ed-color:#{meta.inspect(blendColors($colors:$colors,$theme:$theme ,$level:-20%))};
-           --ed-placeholder:#{meta.inspect(blendColors($colors:$colors,$theme:$theme,$light:20%,$dark:-40%))};
-        };
-    };
-
-    $size:var(--wd-size);
-    $font-size:var(wd-font-size);
-    $bg:var(--wd-deep);
-    $color:var(--ed-color);
-    $outline:var(--wd-outline);
-    $border:var(--wd-border);
-    $gap:var(--wd-gap);
-    $required:rgba(var(--wd-alert-rgb), 0.1);
-    $margin:var(--wd-margin);
-    $radius:var(--wd-radius);
-    $placeholder:var(--ed-placeholder);
+    $size:var(--v2-wd-size);
+    $font-size:var(--v2-wd-font-size);
+    $bg:var(--v2-wd-deep);
+    $color:var(--v2-wd-color);
+    $outline:var(--v2-wd-outline);
+    $outline-width:var(--v2-wd-outline-width);
+    $border:var(--v2-wd-border);
+    $gap:var(--v2-wd-gap);
+    $required:rgba(var(--v2-wd-danger-rgb), 0.1);
+    $margin:var(--v2-wd-margin);
+    $radius:var(--v2-wd-radius);
+    $placeholder:rgba(var(--v2-wd-color-rgb), 0.5);
 
     input[type=number]{
         &::-webkit-inner-spin-button,
@@ -37,30 +28,41 @@
             height: 100%;
         }
     }
-
+    /*
+    textarea,
     input[type=number],
     input[type=text],
     input[type=password],
     input[type=email],
-    input[type=url]{
-        height:$size;
+    input[type=url]
+    */
+    .wd-text{
+        padding: var(--v2-wd-gap);
+    }
+    .wd-edit{
+        text-indent:$gap;
+    }
+    .wd-text,
+    .wd-edit{
+        min-height:$size;
             
         font-size:$font-size;
         border:1px solid $border;
         border-radius: $radius;
         width:100%;
         background-color: $bg;
-        text-indent:$gap;
+        
+        //margin:$outline-width;
 
-        @if($margin!='none'){
-            margin-right:$margin;
-        };
+        //@if($margin!='none'){
+        //    margin-right:$margin;
+        //};
         color:$color;
 
         outline: 0px solid rgba(0,0,0,0);
         @include transition(margin 0.2s,outline-color 0.4s);
         &:focus { 
-            outline: 2px solid $outline;
+            outline: $outline-width solid $outline;
         }
 
         &[readonly]{
@@ -75,14 +77,27 @@
             //background-position-y: center;
             //border:1px solid $required !important;
             //background-size: $size*0.5;
-            background-color:$required !important;
-            border:1px solid $required !important;
+            background-color:$required;
+            //border:1px solid $required !important;
         }
 
         &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
             color: $placeholder;
         }
-    }   
+        &[error]{
+            border-color:var(--v2-wd-danger);
+            &:focus { 
+                //outline: 2px solid var(--v2-wd-danger);
+            }
+        }
+    }
+    .error-edit-msg{
+        overflow: hidden;
+        font-size: 0.8rem;
+        padding-left: var(--v2-wd-gap);
+        color:var(--v2-wd-danger);
+    }
 }
 
+
 @include define();

package/style/Gap.scss

@@ -1,9 +1,14 @@
-@import './utils.scss';
 
-div[it='wd-gap']{
-    @include display-flex-horiz-stretch();
+[gap]{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: stretch;
+    align-items: stretch;
+
     >div[gap]{
-            width:$wd-size;
-            min-width: $wd-size;
+            width:var(--v2-wd-size);
+            min-width:var(--v2-wd-size);
     }
 }