@natec/mef-dev-ui-kit 20.1.22 → 20.1.24

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

@@ -8,7 +8,6 @@
 
 @use "sass:color";
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 
 .nav-tabs {
   position: relative;
@@ -35,7 +34,7 @@
       font-family: Montserrat;
       font-weight: 500;
       letter-spacing: 0.06em;
-      color: fade($color-master, 70%);
+      color: rgba($color-master, 0.7);
       font-size: 10.5px;
       min-width: 70px;
       border-color: transparent;
@@ -57,20 +56,20 @@
     & > .tab-pane {
       &.slide-left,
       &.slide-right {
-        @include mix.transition(all .3s ease);
+        transition: all .3s ease;
         &.sliding {
           opacity: 0 !important;
         }
         &.active {
-          @include mix.translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
           opacity: 1;
         }
       }
       &.slide-left.sliding {
-        @include mix.translate3d(10%, 0, 0);
+        transform: translate3d(10%, 0, 0);
       }
       &.slide-right.sliding {
-        @include mix.translate3d(-10%, 0, 0);
+        transform: translate3d(-10%, 0, 0);
       }
     }
   }
@@ -135,8 +134,8 @@
     & > a{
       &:after {
         position: absolute;
-        @include mix.transition(all 0.1s linear 0s);
-        -webkit-backface-visibility: hidden;
+        transition: all 0.1s linear 0s;
+        backface-visibility: hidden;
         width: 100%;
         display: block;
         background-color: $color-danger;
@@ -268,7 +267,7 @@
       &:hover,
       &:focus {
         overflow: visible;
-        @include mix.transition( color 0.2s ease 0s);
+        transition: color 0.2s ease 0s;
       }
     }
   }
@@ -346,16 +345,16 @@
 */
 
 .nav-tabs-fillup {
-  @include mix.backface-visibility(hidden);
-  @include mix.perspective(1000);
+  backface-visibility: hidden;
+  perspective: 1000px;
   & > li {
     overflow: hidden;
     & > a {
-      @include mix.backface-visibility(hidden);
-      @include mix.transition(color 0.3s ease 0s);
+      backface-visibility: hidden;
+      transition: color 0.3s ease 0s;
       background: transparent;
       &:after {
-        @include mix.backface-visibility(hidden);
+        backface-visibility: hidden;
         background: none repeat scroll 0 0 $color-success;
         border: 1px solid $color-success;
         content: "";
@@ -363,13 +362,7 @@
         left: 0;
         position: absolute;
         top: 0;
-        -webkit-transform: translate3d(0,
-        100%,
-        0px);
-        transform: translate3d(0,
-        100%,
-        0px);
-        -webkit-transition: -webkit-transform 0.3s ease 0s;
+        transform: translate3d(0, 100%, 0px);
         transition: transform 0.3s ease 0s;
         width: 100%;
         z-index: -1;
@@ -399,10 +392,8 @@
         }
       }
       span {
-        @include mix.backface-visibility(hidden);
-        -webkit-transform: translate3d(0px, 5px, 0px);
+        backface-visibility: hidden;
         transform: translate3d(0px, 5px, 0px);
-        -webkit-transition: -webkit-transform 0.5s ease 0s;
         transition: transform 0.5s ease 0s;
         display: block;
         font-weight: 700;
@@ -418,17 +409,17 @@
           color: #fff;
         }
         &:after {
-          @include mix.translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
         }
         span {
-          @include mix.translate3d(0px, -5px, 0px);
+          transform: translate3d(0px, -5px, 0px);
         }
       }
     }
   }
   .icon:before {
-    @include mix.translate3d(0px, 5px, 0px);
-    @include mix.transition(transform 0.5s ease 0s);
+    transform: translate3d(0px, 5px, 0px);
+    transition: transform 0.5s ease 0s;
     display: block;
     margin: 0;
   }
@@ -451,7 +442,7 @@
       }
       &.active {
         a{&:after {
-            @include mix.translate3d(0px, 0px, 0px);
+            transform: translate3d(0px, 0px, 0px);
           }
         }
       }
@@ -461,19 +452,19 @@
     & > li {
       & > a {
         &:after {
-          @include mix.translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
         }
         span {
-          @include mix.translate3d(5px, 0, 0px);
+          transform: translate3d(5px, 0, 0px);
         }
       }
       &.active {
         a{span {
-            @include mix.translate3d(-5px, 0, 0px);
+            transform: translate3d(-5px, 0, 0px);
           }
         }
         .icon:before {
-          @include mix.translate3d(-5px, 0, 0px);
+          transform: translate3d(-5px, 0, 0px);
         }
       }
     }
@@ -482,20 +473,20 @@
     & > li {
       & > a {
         &:after {
-          @include mix.translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
           left: -1px;
         }
         span {
-          @include mix.translate3d(-5px, 0, 0px);
+          transform: translate3d(-5px, 0, 0px);
         }
       }
       &.active {
         a{span {
-            @include mix.translate3d(5px, 0, 0px);
+            transform: translate3d(5px, 0, 0px);
           }
         }
         .icon:before {
-          @include mix.translate3d(5px, 0, 0px);
+          transform: translate3d(5px, 0, 0px);
         }
       }
     }
@@ -599,12 +590,11 @@
           color: $color-master;
         }
         &.collapsed {
-          color: fade($color-master,
-          70%);
+          color: rgba($color-master, 0.7);
           opacity: 1;
           &:after {
             content: "\f055";
-            color: fade($color-master, 70%);
+            color: rgba($color-master, 0.7);
             opacity: .7;
           }
           &:hover {

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

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

package/src/lib/styles/vars.scss

@@ -1,11 +1,10 @@
-// Pages Default Theme
-// --------------------------------------------------
-// Copyright Reserved Revox - 2014
+// UI Kit Variables
 // --------------------------------------------------
 
-@use "pg/_color.scss" as b;
 @use "sass:color";
 
+// Core Color Palette
+// --------------------------------------------------
 $Black-Color: #000000;
 $Dark-Gray-1: #373737;
 $Dark-Gray-2: #4D4D4D;
@@ -20,26 +19,20 @@ $White: #FFFFFF;
 $Link: #6d5cae;
 $Link-on-dark: #0185CF;
 
+// Typography
+// --------------------------------------------------
 $font-header: 'Montserrat', Arial, sans-serif;
 $font-body: 'Open Sans', Arial, sans-serif;
 $text-color: $Black-Color;
+$base-font-family: "Montserrat", "Open Sans", Arial, sans-serif;
 
-// Global Color
-// --------------------------------------------------
-// Base Grey Guided Color * change only $base-light
+// Semantic Color Aliases (legacy Pages mapping)
 // --------------------------------------------------
-
 $color-master: $Light-Gray-1;
-
-// Lighter Grey colors
 $color-master-light: $Light-Gray-1;
-$color-master-lighter:  $Light-Gray-2;
+$color-master-lighter: $Light-Gray-2;
 $color-master-lightest: $Light-Gray-3;
-
-// Darker Grey colors
 $color-master-dark: $Dark-Gray-1;
-$color-master-darker: $Dark-Gray-2;
-$color-master-darkest: $Dark-Gray-3;
 
 $color-white: $White;
 $color-black: $Black-Color;
@@ -51,179 +44,47 @@ $color-warning: $Yellow;
 $color-danger: $Red;
 $color-info: $Dark-Gray-1;
 
-$base-font-family: "Montserrat", "Open Sans", Arial, sans-serif;
+// Derived color variants (only those actively used)
+$color-complete-lighter: color.mix($color-complete, $color-white, 20%);
+$color-primary-dark: color.mix($color-primary, $color-black, 81%);
+$color-warning-dark: color.mix($color-warning, $color-black, 81%);
+$color-info-lighter: color.mix($color-info, $color-white, 20%);
+$color-info-dark: color.mix($color-info, $color-black, 81%);
 
-// Menu Vars
+// Menu
 // --------------------------------------------------
-//Menu Animation Curve
 $menu-bezier: 0.05, 0.74, 0.27, 0.99;
 $menu-icon-size: 40px;
 $color-menu: #2b303b;
 $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: color.mix($color-menu, #fff, 92%);
-$menu: b.blend-hardlight($menu-mix-temp, #fff);
-$color-menu-light: $menu;
-//Menu Font Color
+// Pre-computed: blend-hardlight(color.mix($color-menu, #fff, 92%), #fff)
+$color-menu-light: #788296;
 $color-menu-link-hover: #fff;
 
 // Body
 // --------------------------------------------------
 $body-background: $color-master-lightest;
-$body-color: $color-master;
-$body-font-family: $base-font-family;
-$body-font-size: 13px;
 
-// Layout 
+// Layout
 // --------------------------------------------------
 $layout-header-height: 60px;
-$layout-mobile-header-height: 48px;
-$layout-mobile-logo-scale: 0.8;
 $layout-sidepanel-width-collapsed: 70px;
 $layout-sidepanel-width: 280px;
-$layout-sidepanel-pin-width: 250px;
-$layout-right-quickview-width: 285px;
-$layout-user-profile-margin: 25px;
-$layout-container-fixed-lg: 1700px;
-
-$layout-gutter-sm: 5px;
-
-//Horizontal Dropdown
-//---------------------------------------------------
-$navbar-width: 45px;
-$menu-padding: 25px;
-
-$header-lg-height: 75px;
-$header-md-height: 51px;
-$header-sm-height: 50px;
 
 // Panels
+// --------------------------------------------------
 $panel-border-color: rgba(0, 0, 0, 0.07);
 $panel-padding: 20px;
 $panel-heading-padding: $panel-padding $panel-padding 7px $panel-padding;
-$panel-heading-min-height: 48px;
 $panel-condensed-heading-padding: 13px 13px 0 13px;
 $panel-condensed-body-padding: 13px;
-$panel-condensed-heading-min-height: 48px;
 
-//Forms
-$form-group-height: 54px;
+// Forms
+// --------------------------------------------------
 $form-control-border-color: $Light-Gray-3;
 
-//Dashboard
-$dashboard-background: #f5f5f5;
-
-//Mixing Color varriable for creating both light and dark colors
-$mix-percentage-dark: 81%;
-$mix-percentage-darker: 60%;
-$mix-percentage-light: 80%;
-$mix-percentage-lighter: 20%;
-
-//Lighter colors
-$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: color.mix(
-  $color-complete,
-  $color-white,
-  $mix-percentage-light
-);
-$color-complete-lighter: color.mix(
-  $color-complete,
-  $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: color.mix($color-warning, $color-white, $mix-percentage-light);
-$color-warning-lighter: color.mix(
-  $color-warning,
-  $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: 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: color.mix($color-success, $color-black, $mix-percentage-dark);
-$color-success-darker: color.mix(
-  $color-success,
-  $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: color.mix($color-primary, $color-black, $mix-percentage-dark);
-$color-primary-darker: color.mix(
-  $color-primary,
-  $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: color.mix($color-danger, $color-black, $mix-percentage-dark);
-$color-danger-darker: color.mix($color-danger, $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: b.blend-multiply(
-  $color-menu-light,
-  $color-menu-light
-);
-$sidebar-background-color: color.mix($_sidebar-background-color, #000, 80%);
-
-$secondary-sidebar-width: 250px;
-// Components
+// Z-Index Scale
 // --------------------------------------------------
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-//$padding-base-vertical:     6px ;
-$padding-base-horizontal: 17px;
-
-// $padding-lg-vertical:    28px ;
-$padding-lg-horizontal: 28px;
-
-// $padding-sm-vertical:    5px ;
-$padding-sm-horizontal: 16px;
-
-$padding-xs-vertical: 2px;
-$padding-xs-horizontal: 9px;
-
 $zIndex-1: 100;
 $zIndex-2: 200;
 $zIndex-3: 300;
@@ -235,33 +96,9 @@ $zIndex-8: 800;
 $zIndex-9: 900;
 $zIndex-10: 1000;
 
-//TODO: add all components
-// z-index applications
-
 $zIndex-sidebar: $zIndex-10;
-$zIndex-tooltips: $zIndex-10;
-$zIndex-quickview: $zIndex-10;
-$zIndex-horizontal-menu-mobile: $zIndex-10;
-$zIndex-notifications: $zIndex-9;
-$zIndex-navbar: $zIndex-8;
-$zIndex-dropdown: $zIndex-7;
-$zIndex-dropdownMask: $zIndex-6;
 $zIndex-portlet: $zIndex-6;
 
-$zIndex-navbar: $zIndex-5;
-$zIndex-sidebar: $zIndex-10;
-$zIndex-tooltips: $zIndex-10;
-
-
-$zIndex-sidebar : $zIndex-10;
-$zIndex-tooltips : $zIndex-10;
-$zIndex-quickview: $zIndex-10;
-$zIndex-notifications : $zIndex-9;
-$zIndex-navbar : $zIndex-8;
-$zIndex-dropdown : $zIndex-7;
-$zIndex-dropdownMask : $zIndex-6;
-$zIndex-portlet : $zIndex-6;
-
-//borders
-
-$default-border-size: 5px;
+// Borders
+// --------------------------------------------------
+$default-border-size: 5px;