@natec/mef-dev-ui-kit 16.4.57 → 19.0.0-beta.1

package/src/lib/styles/pg/_var.scss

@@ -3,6 +3,7 @@
 // Copyright Reserved Revox - 2014
 // --------------------------------------------------
 
+@use "sass:color";
 @import '../designe-colors.scss';
 
 // Global Color
@@ -41,11 +42,11 @@ $base-font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
 $menu-bezier:.05, .74, .27, .99 ;
 $menu-icon-size:40px ;
 $color-menu :#2b303b ;
-$color-menu-dark :mix($color-menu, #000, 77%) ;
-$color-menu-darker :mix($color-menu, #000, 90%) ;
+$color-menu-dark :color.mix($color-menu, #000, 77%) ;
+$color-menu-darker :color.mix($color-menu, #000, 90%) ;
 
 //Generating Menu font color
-$menu-mix-temp : mix($color-menu, #fff, 92%) ;
+$menu-mix-temp : color.mix($color-menu, #fff, 92%) ;
 $menu :blend-hardlight($menu-mix-temp,#fff) ;
 $color-menu-light :$menu;
 //Menu Font Color
@@ -104,47 +105,47 @@ $mix-percentage-light: 80% ;
 $mix-percentage-lighter: 20% ;
 
 //Lighter colors
-$color-success-light: mix($color-success, $color-white, $mix-percentage-light) ;
-$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter) ;
+$color-success-light: color.mix($color-success, $color-white, $mix-percentage-light) ;
+$color-success-lighter: color.mix($color-success, $color-white, $mix-percentage-lighter) ;
 
-$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light) ;
-$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter) ;
+$color-complete-light: color.mix($color-complete, $color-white, $mix-percentage-light) ;
+$color-complete-lighter: color.mix($color-complete, $color-white, $mix-percentage-lighter) ;
 
-$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light) ;
-$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter) ;
+$color-primary-light: color.mix($color-primary, $color-white, $mix-percentage-light) ;
+$color-primary-lighter: color.mix($color-primary, $color-white, $mix-percentage-lighter) ;
 
-$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light) ;
-$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter) ;
+$color-warning-light: color.mix($color-warning, $color-white, $mix-percentage-light) ;
+$color-warning-lighter: color.mix($color-warning, $color-white, $mix-percentage-lighter) ;
 
-$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light) ;
-$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter) ;
+$color-danger-light: color.mix($color-danger, $color-white, $mix-percentage-light) ;
+$color-danger-lighter: color.mix($color-danger, $color-white, $mix-percentage-lighter) ;
 
-$color-info-light: mix($color-info, $color-white, $mix-percentage-light) ;
-$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter) ;
+$color-info-light: color.mix($color-info, $color-white, $mix-percentage-light) ;
+$color-info-lighter: color.mix($color-info, $color-white, $mix-percentage-lighter) ;
 
 //Darker colors
-$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark) ;
-$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker) ;
+$color-success-dark: color.mix($color-success, $color-black, $mix-percentage-dark) ;
+$color-success-darker: color.mix($color-success, $color-black, $mix-percentage-darker) ;
 
-$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark) ;
-$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker) ;
+$color-complete-dark: color.mix($color-complete, $color-black, $mix-percentage-dark) ;
+$color-complete-darker: color.mix($color-complete, $color-black, $mix-percentage-darker) ;
 
-$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark) ;
-$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker) ;
+$color-primary-dark: color.mix($color-primary, $color-black, $mix-percentage-dark) ;
+$color-primary-darker: color.mix($color-primary, $color-black, $mix-percentage-darker) ;
 
-$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark) ;
-$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker) ;
+$color-warning-dark: color.mix($color-warning, $color-black, $mix-percentage-dark) ;
+$color-warning-darker: color.mix($color-warning, $color-black, $mix-percentage-darker) ;
 
-$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark) ;
-$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker) ;
+$color-danger-dark: color.mix($color-danger, $color-black, $mix-percentage-dark) ;
+$color-danger-darker: color.mix($color-danger, $color-black, $mix-percentage-darker) ;
 
-$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark) ;
-$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker) ;
+$color-info-dark: color.mix($color-info, $color-black, $mix-percentage-dark) ;
+$color-info-darker: color.mix($color-info, $color-black, $mix-percentage-darker) ;
 
 // Email colors
 // $sidebar-background-color : $color-menu-dark ;
 $_sidebar-background-color: blend-multiply($color-menu-light, $color-menu-light);
-$sidebar-background-color : mix($_sidebar-background-color , #000, 80%);
+$sidebar-background-color : color.mix($_sidebar-background-color , #000, 80%);
 
 $secondary-sidebar-width : 250px;
 // Components

package/src/lib/styles/pg/modules/_buttons.scss

@@ -1,65 +1,80 @@
-@use '../../designe-colors.scss' as v;
+@use "../../designe-colors.scss" as v;
 
+.btn {
+  padding-left: 2em;
+  padding-right: 2em;
+  min-height: 36px;
 
-@mixin _button($main_color, $hover_color, $text_color, $hover_text_color, $hover_color_opacity) {
-    padding-left: 2em !important;
-    padding-right: 2em !important;
-    min-height: 36px !important;
-    border: 0 !important;
-    border-radius: 5px !important;
-    color: $text_color !important;
-    background-color: $main_color !important;
-    font-family: Montserrat !important;
-    font-weight: 500 !important;
-    font-size: 14px !important;
-    line-height: 24px !important;
-    &:hover{
-        color: $hover_text_color !important;
-        background-color: $hover_color !important;
-        opacity: $hover_color_opacity !important;
-    }
+  border: none;
+  border-radius: 5px;
+
+  font-family: Montserrat;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+@mixin _button(
+  $main_color,
+  $hover_color,
+  $text_color,
+  $hover_text_color,
+  $hover_color_opacity
+) {
+  color: $text_color;
+  background-color: $main_color;
+  &:hover {
+    color: $hover_text_color;
+    background-color: $hover_color;
+    opacity: $hover_color_opacity;
+  }
 }
 
-@mixin _button_status($main_color, $hover_color, $text_color, $hover_text_color) {
-    padding-left: 2em !important;
-    padding-right: 2em !important;
-    min-height: 23px !important;
-    border: 0 !important;
-    border-radius: 5px !important;
-    color: $text_color !important;
-    background-color: $main_color !important;
-    font-family: 'Open Sans' !important;
-    font-size: 11px !important;
-    line-height: 13px !important;
-    &:hover{
-        color: $hover_text_color !important;
-        background-color: $hover_color !important;
-    }
+@mixin _button_status(
+  $main_color,
+  $hover_color,
+  $text_color,
+  $hover_text_color
+) {
+  padding-left: 2em;
+  padding-right: 2em;
+  min-height: 23px;
+  border: 0;
+  border-radius: 5px;
+  color: $text_color;
+  background-color: $main_color;
+  font-family: "Open Sans";
+  font-size: 11px;
+  line-height: 13px;
+  &:hover {
+    color: $hover_text_color;
+    background-color: $hover_color;
+  }
 }
 .btn-primary {
-    @include _button(v.$Dark-Gray-2, v.$Light-Gray-1, #fff, #fff, 1);
+  @include _button(v.$Dark-Gray-2, v.$Light-Gray-1, #fff, #fff, 1);
 }
 
 .btn-secondary {
-    @include _button(v.$Light-Gray-2, v.$Light-Gray-2, #000, v.$Red, 1);
+  @include _button(v.$Light-Gray-2, v.$Light-Gray-2, #000, v.$Red, 1);
 }
 
 .btn-success {
-    @include _button(v.$Green, v.$Green, #fff, #fff, 0.8);
+  @include _button(v.$Green, v.$Green, #fff, #fff, 0.8);
 }
 
 .btn-danger {
-    @include _button(v.$Red, v.$Dark-Gray-2, #fff, #fff, 1);
+  @include _button(v.$Red, v.$Dark-Gray-2, #fff, #fff, 1);
 }
 
 .btn-light {
-    @include _button(v.$White,v.$White, #000, v.$Red, 1);
+  @include _button(v.$White, v.$White, #000, v.$Red, 1);
 }
 
 .btn-status-primary {
-    @include _button_status(v.$Light-Gray-2, v.$Light-Gray-3, #000, v.$Red);
+  @include _button_status(v.$Light-Gray-2, v.$Light-Gray-3, #000, v.$Red);
 }
 
 .btn-status-danger {
-    @include _button_status(v.$Light-Gray-2, v.$Light-Gray-3, v.$Red, #000);
+  @include _button_status(v.$Light-Gray-2, v.$Light-Gray-3, v.$Red, #000);
 }

package/src/lib/styles/pg/modules/_form_elements.scss

@@ -1,6 +1,7 @@
 /*------------------------------------------------------------------
 [15. Form Elements]
 */
+@use "sass:color";
 
 // Mixins
 // --------------------------------------------------
@@ -120,7 +121,7 @@ form legend {
     &[disabled],
     &[readonly],
     fieldset[disabled] &{
-        background: mix($color-master-lighter, #fff, 50%);
+        background: color.mix($color-master-lighter, #fff, 50%);
         color: rgba($color-master, 1);
     }
     //Textfields and inpt
@@ -207,7 +208,7 @@ form legend {
             position: absolute;
             left: 0px;
             background-color: $color-white;
-            border: 1px solid mix($color-master, #fff, 30%);
+            border: 1px solid color.mix($color-master, #fff, 30%);
         }
     }
 }
@@ -642,10 +643,10 @@ input[type=checkbox]:checked + label{
         input {
             opacity: 1;
         }
-        background:mix($color-master-lighter,#fff,50%);
+        background: color.mix($color-master-lighter, #fff, 50%);
         color: rgba($color-master, 1);
         &.focused {
-            background:mix($color-master-lighter,#fff,50%);
+            background: color.mix($color-master-lighter, #fff, 50%);
             label {
                 opacity: 1;
             }

package/src/lib/styles/pg/modules/_header.scss

@@ -166,8 +166,8 @@
 .navbar-center > li {
 	float: none;
 	display: inline-block;
-	*display: inline; /* ie7 fix */
-	*zoom: 1; /* hasLayout ie7 trigger */
+	display: inline; 
+	zoom: 1;
 	vertical-align: top;
 }
 

package/src/lib/styles/pg/modules/_secondary-sidebar.scss

@@ -1,11 +1,13 @@
 /* Secondary Sidebar
 ------------------------------------
 */
+@use "sass:color";
+
 //TODO : add this to theme var
 $secondary-sidebar-width : 250px;
 
 $_sidebar-background-color : blend-multiply($color-menu-light, $color-menu-light);
-$sidebar-background-color : mix($_sidebar-background-color , #000, 80%);
+$sidebar-background-color : color.mix($_sidebar-background-color , #000, 80%);
 .toggle-secondary-sidebar{
     display: none;
 }

package/src/lib/styles/pg/modules/_select.scss

@@ -1,17 +1,18 @@
+@use "sass:color";
 
 $select-prefix-cls: "pg-select";
-$input-height-base:35px;
-$input-height-lg:55px;
-$input-height-sm:25px;
-$input-placeholder-color : lighten( $color-master-dark, 67% );
-$tag-default-color:$color-master;
-$tag-default-bg:$color-master-light;
-$box-shadow-base:"none";
-$zindex-dropdown:999;
-$item-hover-bg:$color-master-lighter;
-$background-color-base:$color-master-lighter;
-
-@mixin selection__clear(){
+$input-height-base: 35px;
+$input-height-lg: 55px;
+$input-height-sm: 25px;
+$input-placeholder-color: color.adjust($color-master-dark, $lightness: 67%);
+$tag-default-color: $color-master;
+$tag-default-bg: $color-master-light;
+$box-shadow-base: "none";
+$zindex-dropdown: 999;
+$item-hover-bg: $color-master-lighter;
+$background-color-base: $color-master-lighter;
+
+@mixin selection__clear() {
   display: inline-block;
   font-style: normal;
   vertical-align: baseline;
@@ -42,13 +43,13 @@ $background-color-base:$color-master-lighter;
 }
 
 .pg-select {
-  border: 2px solid #F3F3F3;
+  border: 2px solid #f3f3f3;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
   color: $color-info;
   font-size: 12px;
-  transition: background .3s ease-in-out;
+  transition: background 0.3s ease-in-out;
   > ul > li > a {
     padding: 0;
     background-color: #fff;
@@ -56,7 +57,6 @@ $background-color-base:$color-master-lighter;
 
   // arrow
   &-arrow {
-    
     position: absolute;
     top: 50%;
     right: 13px;
@@ -69,7 +69,7 @@ $background-color-base:$color-master-lighter;
     }
 
     &:before {
-      content: '\e60b';
+      content: "\e60b";
       transition: transform 0.2s ease;
     }
   }
@@ -84,7 +84,7 @@ $background-color-base:$color-master-lighter;
     background-color: #fff;
     border-radius: 2px;
     border: 1px solid $form-control-border-color;
-    transition: all .3s ease-in-out;
+    transition: all 0.3s ease-in-out;
 
     &__clear {
       @include selection__clear();
@@ -148,7 +148,7 @@ $background-color-base:$color-master-lighter;
     position: relative;
     line-height: $input-height-base;
     &:after {
-      content: '.';
+      content: ".";
       visibility: hidden;
       pointer-events: none;
       display: inline-block;
@@ -172,7 +172,7 @@ $background-color-base:$color-master-lighter;
         }
       }
       .pg-select-selection__clear {
-        top: calc($input-height-lg / 2)
+        top: calc($input-height-lg / 2);
       }
     }
   }
@@ -212,7 +212,8 @@ $background-color-base:$color-master-lighter;
   }
 
   &-selection__placeholder,
-  &-search__field__placeholder { // for TreeSelect compatibility
+  &-search__field__placeholder {
+    // for TreeSelect compatibility
     position: absolute;
     top: 50%;
     left: 0;
@@ -259,7 +260,7 @@ $background-color-base:$color-master-lighter;
 
     .pg-select-search__field {
       border-width: 0;
-      font-size:14px;
+      font-size: 14px;
       height: 100%;
       width: 100%;
       background: transparent;
@@ -278,7 +279,7 @@ $background-color-base:$color-master-lighter;
     cursor: text;
     padding-bottom: 3px;
     @include clearfix;
-    .pg-select-selection__placeholder{
+    .pg-select-selection__placeholder {
       left: 6px;
     }
     .pg-select-search--inline {
@@ -296,14 +297,14 @@ $background-color-base:$color-master-lighter;
       margin-bottom: -3px;
       height: auto;
     }
-    ul{
+    ul {
       padding: 0;
       padding-left: 6px;
       margin: 0;
       list-style: none;
     }
     > ul > li,
-    .pg-select-selection__rendered > ul > li { 
+    .pg-select-selection__rendered > ul > li {
       margin-top: 7px;
       height: 21px;
       line-height: 21px;
@@ -319,7 +320,7 @@ $background-color-base:$color-master-lighter;
       max-width: 99%;
       position: relative;
       overflow: hidden;
-      transition: padding .3s ease-in-out;
+      transition: padding 0.3s ease-in-out;
       padding: 0 10px 0 17px;
       &__disabled {
         padding: 0 10px;
@@ -332,7 +333,7 @@ $background-color-base:$color-master-lighter;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
-      transition: margin .3s ease-in-out;
+      transition: margin 0.3s ease-in-out;
     }
 
     .pg-select-selection__choice__remove {
@@ -354,7 +355,7 @@ $background-color-base:$color-master-lighter;
     }
 
     .pg-select-selection__clear {
-      top: calc($input-height-base / 2)
+      top: calc($input-height-base / 2);
     }
   }
 
@@ -390,13 +391,24 @@ $background-color-base:$color-master-lighter;
       height: 100%;
       position: relative;
       z-index: 1;
-      transition: all .3s ease-in-out;
+      transition: all 0.3s ease-in-out;
       box-shadow: none;
     }
   }
 }
 
 .pg-select-dropdown {
+  background-color: #fff;
+  box-shadow: $box-shadow-base;
+  border-radius: 2px;
+  box-sizing: border-box;
+  z-index: $zindex-dropdown;
+  left: -9999px;
+  top: -9999px;
+  position: absolute;
+  outline: none;
+  overflow: hidden;
+  font-size: 12px;
   &.slide-up-enter.slide-up-enter-active-placement-bottomLeft,
   &.slide-up-appear.slide-up-appear-active-placement-bottomLeft {
     animation-name: antSlideUpIn;
@@ -419,18 +431,6 @@ $background-color-base:$color-master-lighter;
     display: none;
   }
 
-  background-color: #fff;
-  box-shadow: $box-shadow-base;
-  border-radius: 2px;
-  box-sizing: border-box;
-  z-index: $zindex-dropdown;
-  left: -9999px;
-  top: -9999px;
-  position: absolute;
-  outline: none;
-  overflow: hidden;
-  font-size: 12px;
-
   &-menu {
     outline: none;
     margin: 3px 8px 10px 8px;
@@ -544,7 +544,7 @@ $background-color-base:$color-master-lighter;
   }
 }
 
-.pg-select-dropdown{
+.pg-select-dropdown {
   top: 100% !important;
   left: 0 !important;
   position: relative !important;
@@ -552,7 +552,7 @@ $background-color-base:$color-master-lighter;
   margin-top: 0;
   margin-bottom: 4px;
   border: 1px solid $form-control-border-color;
-  border-top:0;
+  border-top: 0;
   border-radius: 0;
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
@@ -560,40 +560,39 @@ $background-color-base:$color-master-lighter;
   z-index: 790;
   box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
 }
-.pg-select-open{
-  
-  border: 2px solid #F3F3F3;
-  
-  .pg-select-selection{
-    background-color:$color-master-lighter;
-  }
-  .pg-select-selection--multiple{
-    li.pg-select-selection__choice{
+.pg-select-open {
+  border: 2px solid #f3f3f3;
+
+  .pg-select-selection {
+    background-color: $color-master-lighter;
+  }
+  .pg-select-selection--multiple {
+    li.pg-select-selection__choice {
       background: #fff;
     }
   }
-  .pg-select-selection__placeholder{
+  .pg-select-selection__placeholder {
     opacity: 0;
   }
 }
 
-.form-group-default-select2{
-  .pg-select-selection{
+.form-group-default-select2 {
+  .pg-select-selection {
     margin-top: 20px;
     border: 0;
   }
-  &.has-error{
-    background-color: rgba($color-danger,.10);
-    .pg-select-selection{
-      background-color: rgba($color-danger,.10);
+  &.has-error {
+    background-color: rgba($color-danger, 0.1);
+    .pg-select-selection {
+      background-color: rgba($color-danger, 0.1);
     }
   }
 }
 
-.pg-select-selection{
+.pg-select-selection {
   border: 0 !important;
 }
 
-.pg-select-open .pg-select-selection{
+.pg-select-open .pg-select-selection {
   background-color: #fff !important;
 }

package/src/lib/styles/pg/modules/_sidebar.scss

@@ -1,6 +1,7 @@
 /* Main Menu Sidebar
 ------------------------------------
 */
+@use "sass:color";
 
 body{
 	&.mobile{
@@ -105,7 +106,7 @@ body{
         height: $layout-header-height;
         line-height:$layout-header-height;
         background-color:$color-menu-darker;
-        border-bottom: 1px solid mix($color-menu-darker, #000, 90%);
+        border-bottom: 1px solid color.mix($color-menu-darker, #000, 90%);
         color: $color-white;
         width: 100%;
         padding: 0 20px;

package/src/lib/styles/pg/utils.scss

@@ -5,13 +5,11 @@
     height: 100%;
     width: 100%;
     position: fixed;
-    z-index: 1900;
 }
 
 .cdk-overlay-backdrop, .cdk-overlay-pane {
     position: absolute;
     pointer-events: auto;
-    z-index: 1900;
 }
 
 .cdk-overlay-backdrop {
@@ -28,5 +26,4 @@
 .cdk-overlay-backdrop, .cdk-overlay-pane {
     position: absolute;
     pointer-events: auto;
-    z-index: 1900;
 }