@posiwise/core-styles 1.0.10 → 1.0.12

package/scss/dashboard/_search.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 // Search Navbar
 #search-nav {
     .nav {
@@ -6,7 +7,7 @@
 
     .nav-link {
         &.active {
-            border-bottom: 2px solid map-get($primary, base);
+            border-bottom: 2px solid map.get($primary, base);
             margin-bottom: -2px;
             padding-bottom: 6px;
         }

package/scss/dashboard/_sidebar-content.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+@use 'sass:map';
 .wrapper {
     height: 100vh;
     position: relative;
@@ -13,7 +15,7 @@
     }
 
     .content-sub-header {
-        color: darken($body-bg, 60%);
+        color: color.adjust($body-bg, $lightness: -60%);
     }
 
     .app-sidebar {
@@ -238,7 +240,7 @@
 
                 &::before {
                     background: rgb(200 200 200 / 20%);
-                    border-right: solid 5px map-get($danger, base);
+                    border-right: solid 5px map.get($danger, base);
                     content: '';
                     display: block;
                     height: 100%;
@@ -428,23 +430,23 @@
     }
 
     &[data-background-color='primary'] {
-        @include set-background-color(map-get($primary, base));
+        @include set-background-color(map.get($primary, base));
     }
 
     &[data-background-color='info'] {
-        @include set-background-color(map-get($info, base));
+        @include set-background-color(map.get($info, base));
     }
 
     &[data-background-color='success'] {
-        @include set-background-color(map-get($success, base));
+        @include set-background-color(map.get($success, base));
     }
 
     &[data-background-color='warning'] {
-        @include set-background-color(map-get($warning, base));
+        @include set-background-color(map.get($warning, base));
     }
 
     &[data-background-color='danger'] {
-        @include set-background-color(map-get($danger, base));
+        @include set-background-color(map.get($danger, base));
     }
 
     // Gradient Background Colors
@@ -499,23 +501,23 @@
     }
 
     &[data-color='blue'] {
-        @include set-background-color-button(map-get($info, base));
+        @include set-background-color-button(map.get($info, base));
     }
 
     &[data-color='green'] {
-        @include set-background-color-button(map-get($success, base));
+        @include set-background-color-button(map.get($success, base));
     }
 
     &[data-color='orange'] {
-        @include set-background-color-button(map-get($warning, base));
+        @include set-background-color-button(map.get($warning, base));
     }
 
     &[data-color='red'] {
-        @include set-background-color-button(map-get($danger, base));
+        @include set-background-color-button(map.get($danger, base));
     }
 
     &[data-color='purple'] {
-        @include set-background-color-button(map-get($primary, base));
+        @include set-background-color-button(map.get($primary, base));
     }
 }
 

package/scss/dashboard/_tabs.scss

@@ -1,4 +1,6 @@
+@use 'sass:map';
 // Tabs/Navs/Pills
+
 .tab-content {
     padding: 30px 0 20px;
 }
@@ -16,7 +18,7 @@
         &.active {
             background-color: transparent;
             border: 0;
-            border-bottom: 3px map-get($primary, base) solid;
+            border-bottom: 3px map.get($primary, base) solid;
         }
     }
 
@@ -32,12 +34,12 @@
 
 /* Tab style shared by TabMenu and Tabs (active state) */
 .tab-style {
-    background-color: map-get($primary, base) !important;
+    background-color: map.get($primary, base) !important;
     box-shadow: none !important;
     color: rgb(255 255 255) !important;
 
     &:hover {
-        background-color: map-get($primary, base) !important;
+        background-color: map.get($primary, base) !important;
         color: rgb(255 255 255) !important;
     }
 }
@@ -49,15 +51,15 @@
         border: 0;
         margin-top: 40px;
         /* Design tokens so PrimeNG applies active tab styling */
-        --p-tabs-tab-active-background: #{map-get($primary, base)};
+        --p-tabs-tab-active-background: #{map.get($primary, base)};
         --p-tabs-tab-active-color: rgb(255 255 255);
-        --p-tabs-tab-color: #{map-get($primary, base)};
-        /* Active bar (inkbar) under selected tab - use tabs_bg so it's not green */
-        --p-tabs-active-bar-background: var(--tabs_bg);
+        --p-tabs-tab-color: #{map.get($primary, base)};
+        /* Ink bar removed: active tab uses solid fill + .p-tablist border-bottom; ink bar misaligns with gap/border */
+        --p-tabs-active-bar-background: transparent;
 
         .p-tablist {
             background: $background-nav-tabs;
-            border-bottom: 4px solid map-get($primary, base);
+            border-bottom: 4px solid map.get($primary, base);
             flex-wrap: wrap;
             justify-content: flex-start;
             overflow: hidden;
@@ -65,12 +67,14 @@
             display: flex;
             gap: 0;
         }
+        /* Space between tab labels (PrimeNG Tabs: flex row is .p-tablist-tab-list) */
         .p-tablist-tab-list {
             background: transparent !important;
+            flex-wrap: wrap;
+            row-gap: 6px;
         }
-        /* Active bar (inkbar) under selected tab - override PrimeNG default green */
         .p-tablist-active-bar {
-            background: var(--tabs_bg) !important;
+            display: none !important;
         }
 
         .p-tab {
@@ -78,11 +82,17 @@
             padding: 6px !important;
             background: transparent;
             border-radius: 0;
-            color: map-get($primary, base);
+            color: map.get($primary, base);
             font-size: 14px;
             font-weight: 400;
             line-height: 1.3;
             text-transform: uppercase;
+            /* PrimeNG Tabs: icon + label must share a flex row so FA icons align with text (matches TabMenu look). */
+            display: inline-flex !important;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            gap: 0.429em;
 
             &:hover {
                 background-color: transparent !important;
@@ -100,6 +110,10 @@
             /* Match .p-tabmenu .p-menuitem-text: icon spacing and label typography */
             i {
                 font-size: 10px;
+                line-height: 1;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
             }
             span {
                 font-size: 14px;
@@ -107,6 +121,8 @@
                 line-height: 1.3;
                 margin-right: 0.429em;
                 text-transform: uppercase;
+                display: inline-flex;
+                align-items: center;
             }
         }
     }
@@ -117,7 +133,7 @@
 
         .p-tabmenu-nav {
             background: $background-nav-tabs;
-            border-bottom: 4px solid map-get($primary, base);
+            border-bottom: 4px solid map.get($primary, base);
             flex-wrap: wrap;
             justify-content: flex-start;
             overflow: hidden;
@@ -140,12 +156,12 @@
                 }
 
                 .tab-style {
-                    background-color: map-get($primary, base) !important;
+                    background-color: map.get($primary, base) !important;
                     box-shadow: none !important;
                     color: rgb(255 255 255) !important;
 
                     &:hover {
-                        background-color: map-get($primary, base) !important;
+                        background-color: map.get($primary, base) !important;
                         color: rgb(255 255 255) !important;
                     }
                 }
@@ -168,7 +184,7 @@
                 .p-menuitem-link {
                     border: 0 !important;
                     border-radius: 0;
-                    color: map-get($primary, base);
+                    color: map.get($primary, base);
 
                     .p-menuitem-text {
                         font-size: 14px;

package/scss/dashboard/_vertical-timeline.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'mixins/custom'; // custom mixins
 @import 'layout'; // responsive grid and media queries
 
@@ -22,7 +23,7 @@
 
     &::before {
         /* this is the vertical line */
-        background: darken($background, 5%);
+        background: color.adjust($background, $lightness: -5%);
         content: '';
         height: 100%;
         left: 18px;
@@ -61,7 +62,10 @@
 
 .cd-timeline-img {
     border-radius: 50%;
-    box-shadow: 0 0 0 4px $color-3, inset 0 2px 0 rgba(#000, 0.08), 0 3px 0 4px rgba(#000, 0.05);
+    box-shadow:
+        0 0 0 4px $color-3,
+        inset 0 2px 0 rgba(#000, 0.08),
+        0 3px 0 4px rgba(#000, 0.05);
     height: 40px;
     left: 0;
     position: absolute;
@@ -161,7 +165,7 @@
     @include clearfix;
 
     background: $color-3;
-    box-shadow: 0 3px 0 darken($background, 5%);
+    box-shadow: 0 3px 0 color.adjust($background, $lightness: -5%);
     margin-left: 60px;
     padding: 1em;
     position: relative;
@@ -246,7 +250,7 @@
         padding: 0.8em 1em;
 
         .no-touch &:hover {
-            background-color: lighten($link, 5%);
+            background-color: color.adjust($link, $lightness: 5%);
         }
     }
 

package/scss/dashboard/mixins/_buttons.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 // from bs mixins/buttons button-variant
 
 // For Social Buttons
@@ -13,29 +14,29 @@
 
     &:focus,
     &.focus {
-        background-color: darken($background, 10%) !important;
-        border-color: darken($border, 25%);
+        background-color: color.adjust($background, $lightness: -10%) !important;
+        border-color: color.adjust($border, $lightness: -25%);
         color: $color;
     }
 
     &:hover {
-        background-color: darken($background, 10%) !important;
-        border-color: darken($border, 12%);
+        background-color: color.adjust($background, $lightness: -10%) !important;
+        border-color: color.adjust($border, $lightness: -12%);
         color: $color;
     }
 
     &:active,
     &.active,
     .open > &.dropdown-toggle {
-        background-color: darken($background, 10%) !important;
-        border-color: darken($border, 12%);
+        background-color: color.adjust($background, $lightness: -10%) !important;
+        border-color: color.adjust($border, $lightness: -12%);
         color: $color;
 
         &:hover,
         &:focus,
         &.focus {
-            background-color: darken($background, 17%) !important;
-            border-color: darken($border, 25%);
+            background-color: color.adjust($background, $lightness: -17%) !important;
+            border-color: color.adjust($border, $lightness: -25%);
             color: $color;
         }
     }

package/scss/dashboard/mixins/_typography.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @mixin font-weight($weight) {
     $weights: (
         thin: 100,
@@ -21,8 +22,8 @@
     );
     $output: $weight;
 
-    @if map-has-key($weights, $weight) {
-        $output: map-get($weights, $weight);
+    @if map.has-key($weights, $weight) {
+        $output: map.get($weights, $weight);
     }
 
     font-weight: $output;

package/scss/dashboard/mixins/_utilities.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @function calc-top($line-height-base, $font-size, $component-height) {
     @return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height
 }
@@ -24,13 +25,13 @@
         $color-brightness: brightness($color);
         $dark-text-brightness: brightness($dark);
         $light-text-brightness: brightness($light);
+        @if abs($color-brightness - $light-text-brightness) >
+            abs($color-brightness - $dark-text-brightness)
+        {
+            @return $light;
+        }
 
-        @return if(
-            abs($color-brightness - $light-text-brightness) >
-                abs($color-brightness - $dark-text-brightness),
-            $light,
-            $dark
-        );
+        @return $dark;
     }
 }
 

package/scss/plugins/_plugin-nouislider.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
 .noUi-target,
@@ -33,7 +34,9 @@
 
 // WARNING: Property with star prefix found. Checks for the star property hack (targets IE6/7) (star-property-hack) Browsers: All
 .noUi-state-tap .noUi-origin {
-    transition: left 0.3s, top 0.3s;
+    transition:
+        left 0.3s,
+        top 0.3s;
 }
 
 .noUi-state-drag * {
@@ -48,7 +51,7 @@
     @include box-shadow($shadow-2dp);
 
     background: rgb(255 255 255);
-    border: 5px solid map-get($primary, base);
+    border: 5px solid map.get($primary, base);
     border-radius: 100%;
     box-sizing: border-box;
     cursor: pointer;
@@ -147,53 +150,53 @@
 
 .slider {
     &.noUi-connect {
-        background-color: map-get($primary, base);
+        background-color: map.get($primary, base);
     }
 
     .noUi-handle {
-        border-color: map-get($primary, base);
+        border-color: map.get($primary, base);
     }
 
     &.slider-info {
         .noUi-connect {
-            background-color: map-get($info, base);
+            background-color: map.get($info, base);
         }
 
         .noUi-handle {
-            border-color: map-get($info, base);
+            border-color: map.get($info, base);
         }
     }
 
     &.slider-success {
         & .noUi-connect,
         &.noUi-connect {
-            background-color: map-get($success, base);
+            background-color: map.get($success, base);
         }
 
         .noUi-handle {
-            border-color: map-get($success, base);
+            border-color: map.get($success, base);
         }
     }
 
     &.slider-warning {
         & .noUi-connect,
         &.noUi-connect {
-            background-color: map-get($warning, base);
+            background-color: map.get($warning, base);
         }
 
         .noUi-handle {
-            border-color: map-get($warning, base);
+            border-color: map.get($warning, base);
         }
     }
 
     &.slider-danger {
         & .noUi-connect,
         &.noUi-connect {
-            background-color: map-get($danger, base);
+            background-color: map.get($danger, base);
         }
 
         .noUi-handle {
-            border-color: map-get($danger, base);
+            border-color: map.get($danger, base);
         }
     }
 }

package/scss/plugins/perfect-scrollbar/_mixins.scss

@@ -1,25 +1,28 @@
+@use 'sass:map';
 @mixin scrollbar-rail-default($theme) {
-    border-radius: map_get($theme, border-radius);
+    border-radius: map.get($theme, border-radius);
     display: none;
-    opacity: map_get($theme, rail-default-opacity);
+    opacity: map.get($theme, rail-default-opacity);
     position: absolute; /* please don't change 'position' */
-    transition: background-color 0.2s linear, opacity 0.2s linear;
+    transition:
+        background-color 0.2s linear,
+        opacity 0.2s linear;
 }
 
 @mixin scrollbar-rail-hover($theme) {
-    background-color: map_get($theme, rail-hover-bg);
-    opacity: map_get($theme, rail-hover-opacity);
+    background-color: map.get($theme, rail-hover-bg);
+    opacity: map.get($theme, rail-hover-opacity);
 }
 
 @mixin scrollbar-default($theme) {
-    background-color: map_get($theme, bar-container-hover-bg);
-    border-radius: map_get($theme, border-radius);
+    background-color: map.get($theme, bar-container-hover-bg);
+    border-radius: map.get($theme, border-radius);
     position: absolute; /* please don't change 'position' */
     transition: background-color 0.2s linear;
 }
 
 @mixin scrollbar-hover($theme) {
-    background-color: map_get($theme, bar-hover-bg);
+    background-color: map.get($theme, bar-hover-bg);
 }
 
 @mixin in-scrolling($theme) {
@@ -54,47 +57,47 @@
 
     &.ps-active-x > .ps-scrollbar-x-rail,
     &.ps-active-y > .ps-scrollbar-y-rail {
-        background-color: map_get($theme, bar-bg);
+        background-color: map.get($theme, bar-bg);
         display: block;
     }
 
     > .ps-scrollbar-x-rail {
         @include scrollbar-rail-default($theme);
 
-        bottom: map_get(
+        bottom: map.get(
             $theme,
             scrollbar-x-rail-bottom
         ); /* there must be 'bottom' for ps-scrollbar-x-rail */
-        height: map_get($theme, scrollbar-x-rail-height);
+        height: map.get($theme, scrollbar-x-rail-height);
 
         > .ps-scrollbar-x {
             @include scrollbar-default($theme);
 
-            bottom: map_get(
+            bottom: map.get(
                 $theme,
                 scrollbar-x-bottom
             ); /* there must be 'bottom' for ps-scrollbar-x */
-            height: map_get($theme, scrollbar-x-height);
+            height: map.get($theme, scrollbar-x-height);
         }
     }
 
     > .ps-scrollbar-y-rail {
         @include scrollbar-rail-default($theme);
 
-        right: map_get(
+        right: map.get(
             $theme,
             scrollbar-y-rail-right
         ); /* there must be 'right' for ps-scrollbar-y-rail */
-        width: map_get($theme, scrollbar-y-rail-width);
+        width: map.get($theme, scrollbar-y-rail-width);
 
         > .ps-scrollbar-y {
             @include scrollbar-default($theme);
 
-            right: map_get(
+            right: map.get(
                 $theme,
                 scrollbar-y-right
             ); /* there must be 'right' for ps-scrollbar-y */
-            width: map_get($theme, scrollbar-y-width);
+            width: map.get($theme, scrollbar-y-width);
         }
     }
 
@@ -103,7 +106,7 @@
 
         > .ps-scrollbar-x-rail,
         > .ps-scrollbar-y-rail {
-            opacity: map_get($theme, rail-container-hover-opacity);
+            opacity: map.get($theme, rail-container-hover-opacity);
         }
 
         > .ps-scrollbar-x-rail:hover {

package/scss/plugins/perfect-scrollbar/_ps-custom.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import 'main';
 
 // Colors
@@ -31,7 +32,7 @@ $ps-scrollbar-y-width: 8px !default;
 
 .ps-theme-dark {
     @include ps-container(
-        map-merge(
+        map.merge(
             $ps-theme-default,
             (
                 border-radius: $ps-border-radius,
@@ -53,7 +54,7 @@ $ps-scrollbar-y-width: 8px !default;
 
 .ps-theme-light {
     @include ps-container(
-        map-merge(
+        map.merge(
             $ps-theme-default,
             (
                 border-radius: $ps-border-radius,
@@ -76,7 +77,7 @@ $ps-scrollbar-y-width: 8px !default;
 .menu-collapsed {
     .ps-theme-dark {
         @include ps-container(
-            map-merge(
+            map.merge(
                 $ps-theme-default,
                 (
                     border-radius: $ps-border-radius,
@@ -98,7 +99,7 @@ $ps-scrollbar-y-width: 8px !default;
 
     ul.ps-theme-dark {
         @include ps-container(
-            map-merge(
+            map.merge(
                 $ps-theme-default,
                 (
                     border-radius: $ps-border-radius,

package/scss/public-pages/_buttons.scss

@@ -1,4 +1,5 @@
-@import 'public-pages/mixins/buttons';
+@use '../variables' as *;
+@use 'mixins/buttons' as *;
 
 // Header buttons
 .contact-button a {

package/scss/public-pages/_layout.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 * {
     box-sizing: border-box;
 }

package/scss/public-pages/mixins/_buttons.scss

@@ -1,3 +1,5 @@
+@use 'variables/branding-variables' as branding;
+
 @mixin empowering {
     background: linear-gradient(
         to right,
@@ -10,7 +12,7 @@
 }
 
 @mixin greenBackgroundButton {
-    background: $loginButton;
+    background: branding.$loginButton;
     border: 0;
     border-radius: 50px;
     color: rgb(255 255 255);
@@ -23,6 +25,6 @@
 
     &:hover {
         background-color: rgb(255 255 255);
-        color: $loginButton;
+        color: branding.$loginButton;
     }
 }

package/scss/shared/_prime-ng-tables.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 @media only screen and (max-width: 425px) {
     .table-title {
         flex-wrap: wrap;