@natec/mef-dev-ui-kit 20.1.21 → 20.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@natec/mef-dev-ui-kit",
-  "version": "20.1.21",
+  "version": "20.1.23",
   "description": "MEF.DEV UI Kit Library",
   "author": {
     "name": "NATEC"

package/src/lib/styles/core.scss

@@ -2,298 +2,49 @@
 @use 'fonts.scss' as *;
 @use 'icons.scss' as *;
 
-@use 'pg/_dropdown.scss' as *;
-@use 'pg/toaster.scss' as *;
-@use 'pg/_color.scss' as *;
-@use 'pg/_mixins.scss' as *;
-
+// Deprecated styles, to be removed in future releases
 @use 'pg/modules/_tabs_accordian.scss' as *;
 @use 'pg/modules/_tabs.scss' as *;
 @use 'pg/modules/_switch.scss' as *;
 @use 'pg/modules/_select.scss' as *;
-@use 'pg/modules/_layout.scss' as *;
+@use 'pg/modules/_cards.scss' as *;
+
+// Elements styles for refactoring, possible be removed in future releases
 @use 'pg/modules/_sidebar.scss' as *;
-@use 'pg/modules/_header.scss' as *;
+@use 'pg/modules/_breadcrumb.scss' as *;
 
-//UI Components
+// Core styles for refactoring
 @use 'pg/modules/_typography.scss' as *;
-@use 'pg/modules/_breadcrumb.scss' as *;
 @use 'pg/modules/_buttons.scss' as *;
-//Cards
-@use 'pg/modules/_cards.scss' as *;
-
-//Form Elements
 @use 'pg/modules/_form_elements.scss' as *;
-
-//Misc
-@use 'pg/modules/_misc.scss' as *;
-@use 'pg/_responsive.scss' as *;
-
-//Vendor
-@use 'pg/vendor/typehead.scss' as *;
-@use 'pg/vendor/md-datatable.scss' as *; // New Material Design theme
+@use 'pg/vendor/md-datatable.scss' as *; // to be removed in future releases
 @use 'pg/vendor/md-grid.scss' as *;
-@use 'pg/vendor/ngx-google-map.scss' as *;
-
-[class^='icon-'],
-[class*=' icon-'] {
-    /* use !important to prevent issues with browser extensions that change ../fonts */
-    font-family: 'icomoon' !important;
-    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;
-}
-
-.icon-copy:before {
-  content: "\e901";
-}
-
-.icon-code:before {
-    content: '\e900';
-}
-
-.icon-code:before {
-    content: '\e900';
-}
-
-.icon-arrow-dropdown::before {
-    content: '\e906';
-}
-
-/*#endregion img-font*/
-
-.color-black {
-    color: $Black-Color !important;
-}
-
-.color-Dark-Gray-1 {
-    color: $Dark-Gray-1 !important;
-}
+@use 'pg/toaster.scss' as *;
 
-.color-Dark-Gray-2 {
-    color: $Dark-Gray-2 !important;
-}
-.color-Red {
-    color: $Red !important;
-}
-.color-Green {
-    color: $Green !important;
-}
-.color-Light-Gray-1 {
-    color: $Light-Gray-1 !important;
-}
-.color-Light-Gray-2 {
-    color: $Light-Gray-2 !important;
-}
-.color-Light-Gray-3 {
-    color: $Light-Gray-3 !important;
-}
-.color-White {
-    color: $White !important;
-}
-.color-Link {
-    color: $Link !important;
-}
-.color-dark-link {
-    color: $Link-on-dark !important;
-}
+// Bootstrap CSS custom properties override
+:root {
+  // Colors
+  --bs-primary: #{$Link};
+  --bs-secondary: #{$Light-Gray-1};
+  --bs-success: #{$Green};
+  --bs-danger: #{$Red};
+  --bs-warning: #{$Yellow};
+  --bs-info: #{$Link-on-dark};
+  --bs-light: #{$Light-Gray-3};
+  --bs-dark: #{$Black-Color};
 
-.b-color-black {
-    background-color: $Black-Color !important;
-}
+  // Typography
+  --bs-body-font-family: #{$font-body};
+  --bs-body-color: #{$Black-Color};
+  --bs-body-bg: #{$White};
 
-.b-color-Dark-Gray-1 {
-    background-color: $Dark-Gray-1 !important;
-}
+  // Links
+  --bs-link-color: #{$Link};
+  --bs-link-hover-color: #{$Red};
 
-.b-color-Dark-Gray-2 {
-    background-color: $Dark-Gray-2 !important;
-}
-.b-color-Red {
-    background-color: $Red !important;
-}
-.b-color-Green {
-    background-color: $Green !important;
-}
-.b-color-Light-Gray-1 {
-    background-color: $Light-Gray-1 !important;
-}
-.b-color-Light-Gray-2 {
-    background-color: $Light-Gray-2 !important;
-}
-.b-color-Light-Gray-3 {
-    background-color: $Light-Gray-3 !important;
-}
-.b-color-White {
-    background-color: $White !important;
-}
-.b-color-Link {
-    background-color: $Link !important;
-}
-.b-color-dark-link {
-    background-color: $Link-on-dark !important;
+  // Borders
+  --bs-border-color: #{$Light-Gray-2};
+  --bs-border-radius: #{$default-border-size};
 }
 
 .ql-container {
@@ -307,18 +58,18 @@ a:hover * {
 .ql-toolbar.ql-snow {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
-    border-color: #f3f3f3;
-    background: white;
+    border-color: $Light-Gray-3;
+    background: $White;
 }
 
 .ql-toolbar.ql-snow + .ql-container.ql-snow {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    background-color: white;
-    border-color: #f3f3f3;
+    background-color: $White;
+    border-color: $Light-Gray-3;
 }
 
 .badge {
   --bs-badge-padding-x: 1.0em;
   --bs-badge-padding-y: 0.5em;
-}
+}

package/src/lib/styles/icons.scss

@@ -329,3 +329,194 @@ Pages Icons
 .pg-video:before {
   content: "\e654";
 }
+
+/// ....
+
+
+[class^='icon-'],
+[class*=' icon-'] {
+    /* use !important to prevent issues with browser extensions that change ../fonts */
+    font-family: 'icomoon' !important;
+    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;
+}
+
+.icon-copy:before {
+  content: "\e901";
+}
+
+.icon-code:before {
+    content: '\e900';
+}
+
+.icon-code:before {
+    content: '\e900';
+}
+
+.icon-arrow-dropdown::before {
+    content: '\e906';
+}
+

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

@@ -3,13 +3,12 @@
 $assets-url: "../../assets" ;
 */
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 @use 'sass:color' as color;
 
 .card {
-  @include mix.box-shadow(none);
-  @include mix.border-radius(1px);
-  @include mix.transition(all 0.2s ease);
+  box-shadow: none;
+  border-radius: 1px;
+  transition: all 0.2s ease;
   position: relative;
   margin-bottom: 20px;
   width: 100%;
@@ -47,7 +46,7 @@ $assets-url: "../../assets" ;
       text-overflow: ellipsis;
       -webkit-text-stroke: 0px;
       filter: alpha(opacity=40);
-      @include mix.transition(opacity 0.3s ease);
+      transition: opacity 0.3s ease;
     }
     .card-controls {
       float: right;
@@ -116,7 +115,7 @@ $assets-url: "../../assets" ;
   &.card-transparent {
     background: transparent;
     border: none;
-    @include mix.box-shadow(none);
+    box-shadow: none;
     .card-body {
       background: transparent;
     }
@@ -130,7 +129,7 @@ $assets-url: "../../assets" ;
     }
   }
   &.card-featured {
-    @include mix.box-shadow(-1px 1px 3px 0px rgba(121, 129, 135, 0.14));
+    box-shadow: -1px 1px 3px 0px rgba(121, 129, 135, 0.14);
     width: calc(100% - 50px);
     float: right;
     .card-title {
@@ -176,7 +175,7 @@ $assets-url: "../../assets" ;
       height: 38px;
       margin-left: -39px;
       float: left;
-      @include mix.box-shadow(inset -3px 0px 3px 0px rgba(0, 0, 0, 0.14));
+      box-shadow: inset -3px 0px 3px 0px rgba(0, 0, 0, 0.14);
       &.green {
         background: $color-complete;
       }
@@ -275,7 +274,7 @@ $assets-url: "../../assets" ;
   padding-top: 10px;
   padding-bottom: 10px;
   &.card-refresh {
-    @include mix.transition(opacity 0.3s ease);
+    transition: opacity 0.3s ease;
     &.refreshing {
       opacity: 1;
     }
@@ -333,7 +332,7 @@ $assets-url: "../../assets" ;
   height: 15px;
   display: block;
   background-size: cover;
-  @include mix.transition(opacity 0.3s ease);
+  transition: opacity 0.3s ease;
   &.fade {
     opacity: 0.1;
   }
@@ -347,7 +346,7 @@ $assets-url: "../../assets" ;
   display: block;
   background-size: cover;
   opacity: 0;
-  @include mix.transition(opacity 0.3s ease);
+  transition: opacity 0.3s ease;
   &.active {
     opacity: 1;
   }

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

@@ -1,5 +1,4 @@
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 @use "sass:color" as color;
 
 $select-prefix-cls: "pg-select";
@@ -291,7 +290,14 @@ $background-color-base:$color-master-lighter;
     min-height: $input-height-base;
     cursor: text;
     padding-bottom: 3px;
-    @include mix.clearfix;
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+    }
+    &:after {
+      clear: both;
+    }
     .pg-select-selection__placeholder{
       left: 6px;
     }

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

@@ -3,7 +3,6 @@
 */
 @use 'sass:color';
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 
 body {
     &.mobile {

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

@@ -1,6 +1,5 @@
 @use "sass:color";
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 
 $disabled-color_:$color-master-lighter;
 $font-size-base:14px;
@@ -51,7 +50,7 @@ $ease-in-out-circ:ease;
   }
 
   &:focus {
-    box-shadow: 0 0 0 2px fade($color-master-light, 20%);
+    box-shadow: 0 0 0 2px rgba($color-master-light, 0.2);
     outline: 0;
   }
 

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

@@ -1,7 +1,6 @@
 @use "sass:color";
 @use '../../vars.scss' as *;
 @use '../../fonts.scss' as *;
-@use '../_mixins.scss' as mix;
 
 mefdev-tab, mefdev-tabs-nav, mefdev-tabset {
     display: block;