@natec/mef-dev-ui-kit 16.0.1 → 16.2.0

package/src/lib/styles/fonts.scss

@@ -1,6 +1,6 @@
 
 .h1, h1 {
-    font-family: montserrat-bold;
+    font-family: Montserrat;
     font-size: 24px;
     line-height: 29px;
     font-weight: 700;
@@ -8,14 +8,14 @@
     color: #000000;
 }
 .h2, h2 {
-    font-family: montserrat-bold;
+    font-family: Montserrat;
     font-size: 24px;
     line-height: 29px;
     font-weight: 700;
     color: #000000;
 }
 .h3, h3 {
-    font-family: montserrat-regular;
+    font-family: Montserrat;
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -23,7 +23,7 @@
     color: #000000;
 }
 .h4, h4 {
-    font-family: montserrat-light;
+    font-family: Montserrat;
     font-weight: 300;
     font-size: 13px;
     line-height: 20px;
@@ -31,14 +31,14 @@
     color: #000000;
 }
 .h5, h5 {
-    font-family: montserrat-semibold;
+    font-family: Montserrat;
     font-weight: 600;
     font-size: 13px;
     line-height: 20px;
     color: #000000;
 }
 .h6, h6 {
-    font-family: montserrat-medium;
+    font-family: Montserrat;
     font-weight: 500;
     font-size: 12px;
     line-height: 20px;
@@ -47,35 +47,35 @@
 }
 
 .body-1, body-1 {
-    font-family: Lato-Bold;
+    font-family: Lato;
     font-size: 18px;
     line-height: 20px;
     font-weight: 700;
     color: #000000;
 }
 .body-2, body-2 {
-    font-family: Lato-Regular;
+    font-family: Lato;
     font-size: 16px;
     line-height: 28px;
     font-weight: 400;
     color: #000000;
 }
 .body-3, body-3 {
-    font-family: Lato-Bold;
+    font-family: Lato;
     font-size: 14px;
     line-height: 22px;
     font-weight: 700;
     color: #000000;
 }
 .body-4, body-4{
-    font-family: Lato-Regular;
+    font-family: Lato;
     font-size: 14px;
     line-height: 22px;
     font-weight: 400;
     color: #000000;
 }
 .body-5, body-5{
-    font-family: Lato-Bold;
+    font-family: Lato;
     font-weight: 600;
     font-size: 13px;
     line-height: 18px;
@@ -83,9 +83,9 @@
 }
 
 .body-6, body-6{
-    font-family: Lato-Regular;
+    font-family: Lato;
     font-size: 13px;
     line-height: 16px;
     font-weight: 400;
     color: #000000;
-}
+}

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

@@ -33,7 +33,7 @@ $color-warning: #f8d053 ;
 $color-danger: $Red ;
 $color-info: $Dark-Gray-1;
 
-$base-font-family: Lato-Regular, Lato-Bold, montserrat-regular, montserrat-bold, montserrat-light;
+$base-font-family: Lato, Montserrat;
 
 // Menu Vars
 // --------------------------------------------------

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

@@ -1,82 +1,10 @@
 //Core Libs
 @use '../designe-colors.scss' as c;
 
-/*#region montserrat*/
-@font-face {
-    font-family: 'montserrat-bold';
-    src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2'),
-        url('../fonts/montserrat/Montserrat-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'montserrat-light';
-    src: url('../fonts/montserrat/Montserrat-Light.woff2') format('woff2'),
-        url('../fonts/montserrat/Montserrat-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'montserrat-semibold';
-    src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2'),
-        url('../fonts/montserrat/Montserrat-SemiBold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'montserrat-medium';
-    src: url('../fonts/montserrat/Montserrat-Medium.woff2') format('woff2'),
-        url('../fonts/montserrat/Montserrat-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'montserrat-regular';
-    src: url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
-        url('../fonts/montserrat/Montserrat-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-/*#endregion montserrat*/
-
-/*#region Lato*/
-@font-face {
-    font-family: 'Lato-Regular';
-	  src: url("../fonts/lato/lato-regular.eot?#iefix") format("embedded-opentype"), 
-      url("../fonts/lato/lato-regular.otf") format("opentype"),  
-      url("../fonts/lato/lato-regular.svg") format("svg"), 
-      url("../fonts/lato/lato-regular.ttf") format("truetype"), 
-      url("../fonts/lato/lato-regular.woff") format("woff"), 
-      url("../fonts/lato/lato-regular.woff2") format("woff2"); 
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Lato-Bold';
-    src: url("../fonts/lato/lato-bold.eot?#iefix") format("embedded-opentype"), 
-      url("../fonts/lato/lato-bold.otf") format("opentype"),  
-      url("../fonts/lato/lato-bold.svg") format("svg"), 
-      url("../fonts/lato/lato-bold.ttf") format("truetype"), 
-      url("../fonts/lato/lato-bold.woff") format("woff"), 
-      url("../fonts/lato/lato-bold.woff2") format("woff2"); 
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-/*#endregion Lato*/
+@import 'https://fonts.googleapis.com/css?family=Montserrat';
+@import 'https://fonts.googleapis.com/css?family=Lato';
 
-/*#region img-font*/  
+/*#region img-font*/
 @font-face {
     font-family: 'icomoon';
     src:  url('../fonts/main-img-font/icomoon.eot?97jr4n');
@@ -88,7 +16,7 @@
     font-style: normal;
     font-display: block;
   }
-  
+
   [class^="icon-"], [class*=" icon-"] {
     /* use !important to prevent issues with browser extensions that change ../fonts */
     font-family: 'icomoon' !important;
@@ -98,12 +26,12 @@
     font-variant: normal;
     text-transform: none;
     line-height: 1;
-  
+
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-  
+
   .icon-info-light:before {
     content: "\e90d";
   }
@@ -259,7 +187,7 @@
     content: "\e938";
     margin-left: -0.9658203125em;
   }
-  
+
   /*#endregion img-font*/
 
 
@@ -469,12 +397,12 @@ a.btn-primary {
 }
 
 a:hover *{
-    color: c.$Red !important;    
+    color: c.$Red !important;
 }
 
 .avatar-img-lg{
-    max-width: -webkit-fill-available; 
-    max-height: 150px; 
+    max-width: -webkit-fill-available;
+    max-height: 150px;
     border-radius: 50%
 }
 
@@ -487,12 +415,12 @@ a:hover *{
 }
 
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{
-    background-color: c.$Light-Gray-3;    
+    background-color: c.$Light-Gray-3;
     color: #333333
 }
 
 .p-checkbox .p-checkbox-box.p-highlight{
-    background: c.$Dark-Gray-1; 
+    background: c.$Dark-Gray-1;
 }
 
 .p-highlight .p-checkbox .p-checkbox-box{
@@ -542,8 +470,4 @@ a:focus, a:hover, a:active {
 
 .ngx-datatable .datatable-header .datatable-header-cell.sortable .sort-btn.datatable-icon-up:after {
   display: block;
-}
-
-.tab-wrapper{
-  overflow: inherit;
-}
+}

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

@@ -2,7 +2,7 @@
 ------------------------------------
 */
 .breadcrumb {
-  font-family: montserrat-regular;
+  font-family: Montserrat;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;

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

@@ -9,7 +9,7 @@
     border-radius: 5px !important;
     color: $text_color !important;
     background-color: $main_color !important;
-    font-family: montserrat-regular !important;
+    font-family: Montserrat !important;
     font-weight: 500 !important;
     font-size: 14px !important;
     line-height: 24px !important;
@@ -28,7 +28,7 @@
     border-radius: 5px !important;
     color: $text_color !important;
     background-color: $main_color !important;
-    font-family: Lato-regular !important;
+    font-family: Lato !important;
     font-size: 11px !important;
     line-height: 13px !important;
     &:hover{

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

@@ -31,7 +31,7 @@ $assets-url: "../../assets" ;
       padding-top: 0;
     }
     .card-title {
-      font-family: montserrat-regular;
+      font-family: Montserrat;
       text-transform: uppercase;
       display: inline-block;
       letter-spacing: 0.06em;
@@ -134,7 +134,7 @@ $assets-url: "../../assets" ;
     float: right;
     .card-title {
       h4 {
-        font-family: montserrat-regular;
+        font-family: Montserrat;
         font-size: 16px;
         text-transform: uppercase;
         color: $color-master-lighter;
@@ -404,4 +404,4 @@ $assets-url: "../../assets" ;
 
 .card.card-default{
   border: 0 !important;
-}
+}

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

@@ -40,31 +40,31 @@
 
 // Placeholder text
 @mixin placeholder($color, $opacity) {
-    &::-moz-placeholder           { 
+    &::-moz-placeholder           {
         color: $color;   // Firefox
-        opacity: $opacity; 
+        opacity: $opacity;
     } // See https://github.com/twbs/bootstrap/pull/11526
-    &:-ms-input-placeholder       { 
+    &:-ms-input-placeholder       {
         color: $color;
-        opacity: $opacity; 
+        opacity: $opacity;
     } // Internet Explorer 10+
-    &::-webkit-input-placeholder  { 
+    &::-webkit-input-placeholder  {
         color: $color;
         opacity: $opacity;
     } // Safari and Chrome
 }
 
-label, 
-input, 
-button, 
-select, 
+label,
+input,
+button,
+select,
 textarea {
     font-size: 14px;
     font-weight: normal;
     line-height: 20px;
 }
 
-input[type="radio"], 
+input[type="radio"],
 input[type="checkbox"] {
     margin-top: 1px 0 0;
     line-height: normal;
@@ -72,16 +72,16 @@ input[type="checkbox"] {
     @include box-sizing(border-box);
 }
 
-select[multiple], 
+select[multiple],
 select[size] {
     height: auto !important;
 }
 
 input:focus,
-select:focus, 
-textarea:focus, 
-input[type="file"]:focus, 
-input[type="radio"]:focus, 
+select:focus,
+textarea:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
 input[type="checkbox"]:focus {
     outline: none;
     @include box-shadow(none);
@@ -117,8 +117,8 @@ form legend {
         @include placeholder(inherit, .7);
     }
     @include placeholder(inherit, .33);
-    &[disabled], 
-    &[readonly], 
+    &[disabled],
+    &[readonly],
     fieldset[disabled] &{
         background: mix($color-master-lighter, #fff, 50%);
         color: rgba($color-master, 1);
@@ -139,7 +139,7 @@ form legend {
 --------------------------------------------------
 */
 
-.input-sm, 
+.input-sm,
 .form-horizontal .form-group-sm .form-control  {
     font-size: 13px;
     min-height: 32px;
@@ -147,7 +147,7 @@ form legend {
     padding: 7px 9px;
 }
 
-.input-lg, 
+.input-lg,
 .form-horizontal .form-group-lg .form-control {
     border-radius: 3px;
     font-size: 18px;
@@ -175,11 +175,11 @@ form legend {
     }
 }
 
-/* Checkboxes and Radio buttons 
+/* Checkboxes and Radio buttons
 --------------------------------------------------
 */
 
-.radio, 
+.radio,
 .checkbox {
     margin-bottom: 10px;
     margin-top: 10px;
@@ -228,7 +228,7 @@ form legend {
             }
         }
     }
-    input[type="radio"]:focus{ 
+    input[type="radio"]:focus{
         & + label{
             color:$color-master-dark;
             &:before{
@@ -331,7 +331,7 @@ input[type=radio]:checked + label:before{
             }
         }
     }
-    input[type="checkbox"]:focus{ 
+    input[type="checkbox"]:focus{
         & + label{
             color:$color-master-dark;
             &:before{
@@ -354,7 +354,7 @@ input[type=radio]:checked + label:before{
             &:before {
                 right:-35px;
                 left:auto;
-               
+
             }
         }
         input[type=checkbox]:checked {
@@ -392,7 +392,7 @@ input[type=checkbox]:checked + label{
     .checkbox.check-info &:before{
         border-color: $color-info;
     }
-    
+
     .checkbox.check-success &::after,
     .checkbox.check-primary &::after,
     .checkbox.check-complete &::after,
@@ -401,7 +401,7 @@ input[type=checkbox]:checked + label{
     .checkbox.check-info &::after {
         color: $color-white;
     }
-    
+
 }
 .input-group {
     .form-input-group{
@@ -478,11 +478,11 @@ input[type=checkbox]:checked + label{
             &:last-child{
                 padding-right: 0;
             }
-        }  
+        }
     }
 }
 @media (min-width: 768px) and (max-width: 991px){
-  // form .row [class*="col-md-"]:not(:first-child), 
+  // form .row [class*="col-md-"]:not(:first-child),
   // form .row [class*="col-md-"]:not(:last-child){
   //   padding-right: 0;
   //   padding-left: 0;
@@ -540,14 +540,14 @@ input[type=checkbox]:checked + label{
                 &:last-child .form-group-default{
                     border-top-right-radius: 2px;
                 }
-            } 
+            }
             &.form-group-default{
                 border-top-left-radius: 2px;
                 border-top-right-radius: 2px;
             }
         }
-       
-        &:last-child{ 
+
+        &:last-child{
             &.row > [class*='col-']{
                 &:first-child .form-group-default{
                     border-bottom-left-radius: 2px;
@@ -555,7 +555,7 @@ input[type=checkbox]:checked + label{
                 &:last-child .form-group-default{
                     border-bottom-right-radius: 2px;
                 }
-            } 
+            }
             &.form-group-default{
                 border-bottom-left-radius: 2px;
                 border-bottom-right-radius: 2px;
@@ -568,7 +568,7 @@ input[type=checkbox]:checked + label{
         &.row > [class*='col-']:not(:only-child):not(:last-child) > .form-group-default{
             border-right-color: transparent;
         }
-        &:not(:last-child) .form-group-default, 
+        &:not(:last-child) .form-group-default,
         &:not(:last-child).form-group-default{
             border-bottom-color: transparent;
         }
@@ -593,9 +593,9 @@ input[type=checkbox]:checked + label{
                 width: 100%;
             }
         }
-    }   
+    }
 }
-/* Form Groups 
+/* Form Groups
 --------------------------------------------------
 */
 .form-group {
@@ -609,7 +609,7 @@ input[type=checkbox]:checked + label{
     }
     label .help{
         margin-left: 8px;
-     
+
     }
     .help {
         font-size: 12px;
@@ -632,7 +632,7 @@ input[type=checkbox]:checked + label{
     &.required:after {
         color: $color-danger;
         content:"*";
-        font-family: montserrat-regular;
+        font-family: Montserrat;
         font-size: 20px;
         position: absolute;
         right: 15px;
@@ -667,9 +667,9 @@ input[type=checkbox]:checked + label{
             display: none !important;
         }
     }
-    &.has-success .form-control, 
-    &.has-success .form-control:focus, 
-    &.has-error .form-control, 
+    &.has-success .form-control,
+    &.has-success .form-control:focus,
+    &.has-error .form-control,
     &.has-error .form-control:focus{
         border: none;
         box-shadow: none;
@@ -794,7 +794,7 @@ input[type=checkbox]:checked + label{
             }
             &.label-sm{
                 left:0;
-                top: 0;                
+                top: 0;
             }
         }
         .select2-container{
@@ -812,11 +812,11 @@ input[type=checkbox]:checked + label{
             }
             .select2-selection--multiple{
                 padding-top: 20px;
-                height: 52px;  
-                border:0px;  
+                height: 52px;
+                border:0px;
                 .select2-selection__rendered .select2-selection__choice{
                     margin-top:4px;
-                }     
+                }
             }
         }
         &.input-lg{
@@ -854,7 +854,7 @@ input[type=checkbox]:checked + label{
             }
             &.label-sm{
                 left: 0;
-                top: 0;                
+                top: 0;
             }
         }
         .cs-wrapper{
@@ -865,7 +865,7 @@ input[type=checkbox]:checked + label{
             }
             .cs-select{
                 height: auto;
-                > span:after, 
+                > span:after,
                 .cs-selected span:after {
                    top: 39px;
                 }
@@ -934,7 +934,7 @@ input[type=checkbox]:checked + label{
     }
     &::after {
         border-width: 10px;
-        border-bottom-width: 0; 
+        border-bottom-width: 0;
         bottom: -10px;
         margin-left: -10px;
         border-top-color: #fff;
@@ -1214,7 +1214,7 @@ div.cs-skin-slide{
     height: 100%;
     //@TODO :Temp fix
     transform:translateY(-100%);
-    font-family: montserrat-regular;
+    font-family: Montserrat;
     //font-size: 14px;
     color: #5e5e5e;
     &:before{
@@ -1282,8 +1282,8 @@ div.cs-skin-slide{
                     max-height: 350px;
                     overflow-y: auto;
                 }
-                span:hover, 
-                &.cs-focus span, 
+                span:hover,
+                &.cs-focus span,
                 &.cs-selected span{
                     color: $color-master-dark;
                 }
@@ -1300,7 +1300,7 @@ div.cs-skin-slide{
     right: 0;
     top: 0;
     @include transition(all .3s ease);
-    
+
 }
 .cs-skin-slide.cs-active .cs-options li:nth-child(6) {
     transition-delay: 0.3s;
@@ -1331,5 +1331,5 @@ div.cs-skin-slide{
     content: "*";
     font-family: arial;
     font-size: 20px;
-    
+
 }

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

@@ -68,8 +68,8 @@
 		position: absolute;
 		top: -7px;
 		float: right;
-		right: -8px;    
-		font-family: Lato-Regular;
+		right: -8px;
+		font-family: Lato;
 		font-size: 13px;
 	}
 	.notification-list {