@natec/mef-dev-ui-kit 0.0.313 → 0.0.670

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

@@ -1,8 +1,270 @@
 //Core Libs
-
 @use '../designe-colors.scss' as c;
-@use '../fonts.scss';
 
+/*#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*/
+
+/*#region img-font*/  
+@font-face {
+    font-family: 'icomoon';
+    src:  url('../fonts/main-img-font/icomoon.eot?97jr4n');
+    src:  url('../fonts/main-img-font/icomoon.eot?97jr4n#iefix') format('embedded-opentype'),
+      url('../fonts/main-img-font/icomoon.ttf?97jr4n') format('truetype'),
+      url('../fonts/main-img-font/icomoon.woff?97jr4n') format('woff'),
+      url('../fonts/main-img-font/icomoon.svg?97jr4n#icomoon') format('svg');
+    font-weight: normal;
+    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;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    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";
+  }
+  .icon-connector:before {
+    content: "\e90e";
+  }
+  .icon-information:before {
+    content: "\e90f";
+  }
+  .icon-plugin:before {
+    content: "\e910";
+  }
+  .icon-check-connector:before {
+    content: "\e911";
+  }
+  .icon-computer:before {
+    content: "\e913";
+  }
+  .icon-trash-light:before {
+    content: "\e915";
+  }
+  .icon-ok:before {
+    content: "\e917";
+    color: #28b446;
+  }
+  .icon-calendar:before {
+    content: "\e919";
+  }
+  .icon-guard:before {
+    content: "\e91f";
+  }
+  .icon-tenant:before {
+    content: "\e922";
+  }
+  .icon-nok:before {
+    content: "\e923";
+  }
+  .icon-lock .path1:before {
+    content: "\e924";
+    color: rgb(234, 234, 234);
+  }
+  .icon-lock .path2:before {
+    content: "\e925";
+    margin-left: -1.158203125em;
+    color: rgb(55, 55, 55);
+  }
+  .icon-unlock .path1:before {
+    content: "\e926";
+  }
+  .icon-unlock .path2:before {
+    content: "\e927";
+    margin-left: -1.2109375em;
+  }
+  .icon-logout:before {
+    content: "\e90b";
+  }
+  .icon-unchecked:before {
+    content: "\e90a";
+  }
+  .icon-notification .path1:before {
+    content: "\e902";
+  }
+  .icon-notification .path2:before {
+    content: "\e903";
+    margin-left: -1em;
+  }
+  .icon-notification .path3:before {
+    content: "\e904";
+    margin-left: -1em;
+  }
+  .icon-notification .path4:before {
+    content: "\e905";
+    margin-left: -1em;
+  }
+  .icon-setings .path1:before {
+    content: "\e908";
+  }
+  .icon-setings .path2:before {
+    content: "\e909";
+    margin-left: -1em;
+  }
+  .icon-person:before {
+    content: "\e90c";
+  }
+  .icon-persons:before {
+    content: "\e912";
+  }
+  .icon-configuration:before {
+    content: "\e914";
+  }
+  .icon-support:before {
+    content: "\e916";
+  }
+  .icon-log:before {
+    content: "\e918";
+  }
+  .icon-msg_popup:before {
+    content: "\e91a";
+  }
+  .icon-protect:before {
+    content: "\e91b";
+  }
+  .icon-keys:before {
+    content: "\e91c";
+  }
+  .icon-info:before {
+    content: "\e91d";
+  }
+  .icon-tenats:before {
+    content: "\e91e";
+  }
+  .icon-profile:before {
+    content: "\e921";
+  }
+  .icon-msg:before {
+    content: "\e928";
+  }
+  .icon-arrow:before {
+    content: "\e929";
+  }
+  .icon-warning:before {
+    content: "\e92a";
+  }
+  .icon-messages:before {
+    content: "\e92b";
+  }
+  .icon-pause:before {
+    content: "\e92c";
+  }
+  .icon-play:before {
+    content: "\e92e";
+  }
+  .icon-store:before {
+    content: "\e930";
+  }
+  .icon-trash:before {
+    content: "\e931";
+  }
+  .icon-edit:before {
+    content: "\e932";
+  }
+  .icon-checked:before {
+    content: "\e933";
+  }
+  .icon-bell .path1:before {
+    content: "\e936";
+  }
+  .icon-bell .path2:before {
+    content: "\e937";
+    margin-left: -0.9658203125em;
+  }
+  .icon-bell .path3:before {
+    content: "\e938";
+    margin-left: -0.9658203125em;
+  }
+  
+  /*#endregion img-font*/
+
+
+@import '../icons.scss';
+@import '../fonts.scss';
 
 @import 'toaster.scss';
 @import '_color.scss';
@@ -20,7 +282,6 @@
 
 
 //UI Components
-@import "icons.scss";
 @import "modules/_typography.scss";
 @import "modules/_jqx.scss";
 @import "modules/_breadcrumb.scss";
@@ -74,8 +335,8 @@
 @import "vendor/ngx-google-map.scss";
 
 
-$base-img-url: "/assets/images" !global;
-$assets-url: "/assets" !global;
+// $base-img-url: "/assets/images" !global;
+// $assets-url: "/assets" !global;
 
 .notification-block-header {
 	border-bottom: 1px solid #e2e6ea;

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

@@ -2,38 +2,38 @@
 
 
 @mixin _button($main_color, $hover_color, $text_color, $hover_text_color, $hover_color_opacity) {
-    padding-left: 2em ;
-    padding-right: 2em ;
-    min-height: 36px ;
-    border: 0 ;
-    border-radius: 5px ;
-    color: $text_color ;
-    background-color: $main_color ;
-    font-family: montserrat-regular ;
-    font-weight: 500 ;
-    font-size: 14px ;
-    line-height: 24px ;
+    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-regular !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+    line-height: 24px !important;
     &:hover{
-        color: $hover_text_color ;
-        background-color: $hover_color ;
-        opacity: $hover_color_opacity;
+        color: $hover_text_color !important;
+        background-color: $hover_color !important;
+        opacity: $hover_color_opacity !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: Lato-regular ;
-    font-size: 11px ;
-    line-height: 13px ;
+    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: Lato-regular !important;
+    font-size: 11px !important;
+    line-height: 13px !important;
     &:hover{
-        color: $hover_text_color ;
-        background-color: $hover_color ;
+        color: $hover_text_color !important;
+        background-color: $hover_color !important;
     }
 }
 .btn-primary {

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

@@ -1,5 +1,6 @@
 /*------------------------------------------------------------------
 [4. Cards]
+$assets-url: "../../assets" ;
 */
 
 .card {
@@ -336,13 +337,7 @@
     opacity: 0.1;
   }
 }
-.card-icon-refresh-lg-master {
-  background-image: url("#{$base-img-url}/progress/progress-circle-lg-master-static.svg");
-}
 
-.card-icon-refresh-lg-white {
-  background-image: url("#{$base-img-url}/progress/progress-circle-lg-white-static.svg");
-}
 
 .card-icon-refresh-lg-master-animated,
 .card-icon-refresh-lg-white-animated {
@@ -356,12 +351,7 @@
     opacity: 1;
   }
 }
-.card-icon-refresh-lg-master-animated {
-  background-image: url("#{$base-img-url}/progress/progress-circle-lg-master.svg");
-}
-.card-icon-refresh-lg-white-animated {
-  background-image: url("#{$base-img-url}/progress/progress-circle-lg-white.svg");
-}
+
 
 /* For demo purpose only */
 .card-scroll {

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

@@ -312,11 +312,11 @@ pg-tab, pg-tabs-nav, pg-tabset {
     }
 
     & > li > a {
-        text-transform:capitalize !important;
-        padding-top: 5px  !important;
-        padding-right: 15px  !important;
-        padding-left: 15px  !important;
-        color: white !important;
+        text-transform:capitalize;
+        padding-top: 5px ;
+        padding-right: 15px ;
+        padding-left: 15px ;
+        color: white;
     }
     
     & > li:hover * {
@@ -324,9 +324,9 @@ pg-tab, pg-tabs-nav, pg-tabset {
     }
     
     & > li > .active {
-        border-radius: 5px 5px 0px 0px  !important;
-        color: #CF0106 !important;
-        background-color: white !important;
+        border-radius: 5px 5px 0px 0px ;
+        color: #CF0106;
+        background-color: white;
     }
 }
 

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

@@ -28,20 +28,6 @@ body {
 /* Headings 
 ------------------------------------
 */
-
-h3 small,
-h4 small,
-h5 small {
-  font-weight: 300;
-}
-h1.block,
-h2.block,
-h3.block,
-h4.block,
-h5.block,
-h6.block {
-  padding-bottom: 10px;
-}
 /* Lins and Others
 ------------------------------------
 */
@@ -646,27 +632,6 @@ hr {
     line-height: 20px;
   }
 
-  h1 {
-    font-size: 33px;
-    line-height: 44px;
-    letter-spacing: -0.08px;
-  }
-  h2 {
-    font-size: 28px;
-    line-height: 40px;
-  }
-  h3 {
-    font-size: 24px;
-    line-height: 35.88px;
-  }
-  h4 {
-    font-size: 18px;
-    line-height: 33.88px;
-  }
-  h5 {
-    font-size: 16px;
-    line-height: 25.88px;
-  }
   small,
   .small {
     font-size: 89%;
@@ -683,19 +648,6 @@ hr {
     font-size: 13px;
     letter-spacing: normal;
   }
-  h3 {
-    font-size: 29px;
-    line-height: 33px;
-  }
-  h4 {
-    font-size: 23px;
-    line-height: 32px;
-  }
-  h5 {
-    font-size: 19px;
-    line-height: 28px;
-    font-weight: normal;
-  }
   
   .jumbotron p {
     font-size: 13px;

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

@@ -1,5 +1,4 @@
 @use '../designe-colors.scss' as c;
-@use '../fonts.scss';
 
 .toast-success{
     background-color: c.$White;

package/src/lib/styles/pg/vendor/ng-datatable.scss

@@ -1,7 +1,4 @@
 @use '../../designe-colors.scss' as c;
-@use '../../fonts.scss';
-
-@import "core.scss";
 
 .ngx-datatable {
   &.table-stripped{