@posiwise/core-styles 1.0.10 → 1.0.12

package/app.scss

@@ -1,10 +1,6 @@
 ////////////////////////////
 //   Font styling
 ///////////////////////////
-@import '../core-fonts/feather/style.min.css';
-@import '../core-fonts/simple-line-icons/style.css';
-@import 'css/google-fonts.css';
-
 ////////////////////////////
 //  Main Styling files
 ///////////////////////////
@@ -29,10 +25,20 @@
 // Plugins scss => Here we load the styles for the loaded plugins
 @import 'scss/plugins';
 
+// dynamic stylesheet
+@import 'scss/dynamic-styles';
+
 ////////////////////////////
 //  Other
 ///////////////////////////
 
+////////////////////////////
+//   Font styling
+///////////////////////////
+@import '../core-fonts/feather/style.min.css';
+@import '../core-fonts/simple-line-icons/style.css';
+@import 'css/google-fonts.css';
+
 // Loading quill
 @import 'quill/dist/quill.core.css';
 @import 'quill/dist/quill.bubble.css';
@@ -40,6 +46,3 @@
 
 // Loading ui-switch
 @import 'ngx-ui-switch/ui-switch.component';
-
-// dynamic stylesheet
-@import 'scss/dynamic-styles';

package/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@posiwise/core-styles",
-  "version": "1.0.10",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "description": ""
+    "name": "@posiwise/core-styles",
+    "version": "1.0.12",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "",
+    "license": "ISC",
+    "description": ""
 }

package/scss/_dynamic-styles.scss

@@ -1,4 +1,5 @@
-@import 'variables';
+@use 'sass:map';
+@use 'variables' as *;
 
 :root {
     --titles: rgb(34 34 34);
@@ -11,9 +12,17 @@
     --second: rgb(54 194 131);
     --text: rgb(34 34 34);
 
-    // PrimeNG Calendar icon CSS variables override
-    --p-datepicker-dropdown-color: var(--first);
-    --p-datepicker-trigger-color: var(--first);
+    // PrimeNG Datepicker: solid primary trigger, white icon (input-group style)
+    --p-datepicker-dropdown-background: var(--first);
+    --p-datepicker-dropdown-border-color: var(--first);
+    --p-datepicker-dropdown-color: #ffffff;
+    --p-datepicker-dropdown-hover-background: var(--tabs_sub_bg);
+    --p-datepicker-dropdown-hover-border-color: var(--tabs_sub_bg);
+    --p-datepicker-dropdown-hover-color: #ffffff;
+    --p-datepicker-dropdown-active-background: var(--tabs_sub_bg);
+    --p-datepicker-dropdown-active-border-color: var(--tabs_sub_bg);
+    --p-datepicker-dropdown-active-color: #ffffff;
+    --p-datepicker-trigger-color: #ffffff;
     --p-button-text-color: var(--first);
 
     // PrimeNG Select option selected CSS variables override
@@ -166,8 +175,8 @@
             --p-tabs-tab-active-background: var(--tabs_bg);
             --p-tabs-tab-active-color: var(--tabs_text);
             --p-tabs-tab-color: var(--tabs_bg);
-            /* Active bar (inkbar) under selected tab - match tabs_bg, not green */
-            --p-tabs-active-bar-background: var(--tabs_bg);
+            /* Ink bar hidden — solid active tab + full-width border-bottom only (avoids stepped line with flex gap) */
+            --p-tabs-active-bar-background: transparent;
 
             .p-tablist {
                 border-bottom: 4px solid var(--tabs_bg);
@@ -176,7 +185,7 @@
                 background: transparent !important;
             }
             .p-tablist-active-bar {
-                background: var(--tabs_bg) !important;
+                display: none !important;
             }
             .p-tab {
                 color: var(--tabs_bg);
@@ -407,8 +416,21 @@
             }
         }
 
-        .p-autocomplete-input-multiple,
-        .p-inputtext {
+        .p-autocomplete-input-multiple {
+            &:hover {
+                border-color: var(--first) !important;
+            }
+
+            &:focus,
+            &.p-focus,
+            &:focus-within {
+                border-color: var(--first) !important;
+                // One ring only: theme + this box-shadow read as a double “line” under the field
+                box-shadow: none !important;
+            }
+        }
+
+        .p-autocomplete-input:not(.p-autocomplete-input-multiple) {
             &:hover {
                 border-color: var(--first) !important;
             }
@@ -416,7 +438,22 @@
             &:focus,
             &.p-focus {
                 border-color: var(--first) !important;
-                box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
+                box-shadow: none !important;
+            }
+        }
+
+        // PrimeNG 21: chip textbox is input.p-autocomplete-input (not always .p-inputtext)
+        .p-autocomplete-input-chip input,
+        .p-autocomplete-input-chip .p-inputtext,
+        .p-autocomplete-input-chip .p-autocomplete-input {
+            border: 0 !important;
+            box-shadow: none !important;
+
+            &:focus,
+            &.p-focus {
+                border: 0 !important;
+                box-shadow: none !important;
+                outline: none !important;
             }
         }
     }
@@ -559,9 +596,9 @@
             color: #fff !important;
         }
         .hopscotch-nav-button.prev {
-            background: map-get($grey, darken-1) !important;
-            background-color: map-get($grey, darken-1) !important;
-            border-color: map-get($grey, darken-1) !important;
+            background: map.get($grey, darken-1) !important;
+            background-color: map.get($grey, darken-1) !important;
+            border-color: map.get($grey, darken-1) !important;
             color: #fff !important;
             text-shadow: none !important;
         }
@@ -740,12 +777,11 @@
         text-transform: uppercase;
     }
 
-.pw-label-style.info-circle {
-
-    &::after {
-        top: -7px;
+    .pw-label-style.info-circle {
+        &::after {
+            top: -7px;
+        }
     }
-}
 
     .toast-container {
         position: fixed !important;
@@ -825,34 +861,47 @@
         }
     }
 
-    // PrimeNG Calendar icon color
-    .p-calendar {
+    // PrimeNG Datepicker trigger: solid primary + white calendar icon (attached to input)
+    .p-datepicker {
         .p-datepicker-trigger,
         .p-datepicker-dropdown {
-            background-color: transparent !important;
-            border-color: var(--first) !important;
-            color: var(--first) !important;
+            background-color: var(--first) !important;
+            border: 1px solid var(--first) !important;
+            color: #ffffff !important;
 
             &:hover {
-                background-color: rgba(23, 105, 225, 0.1) !important;
-                border-color: var(--first) !important;
+                background-color: var(--tabs_sub_bg) !important;
+                border-color: var(--tabs_sub_bg) !important;
+                color: #ffffff !important;
             }
 
-            // Icon/SVG color - target all possible icon elements
             svg,
             .p-icon,
             i,
             calendaricon {
-                color: var(--first) !important;
-                fill: var(--first) !important;
+                color: #ffffff !important;
+                fill: #ffffff !important;
             }
 
-            // Target SVG paths and elements specifically
             svg path,
             svg circle,
             svg rect,
             svg polygon,
             svg * {
+                fill: #ffffff !important;
+                stroke: #ffffff !important;
+            }
+        }
+
+        .p-datepicker-input-icon-container {
+            background: transparent !important;
+            color: var(--first) !important;
+
+            .p-datepicker-input-icon,
+            .p-icon,
+            svg,
+            svg * {
+                color: var(--first) !important;
                 fill: var(--first) !important;
                 stroke: var(--first) !important;
             }
@@ -916,60 +965,50 @@
     }
 }
 
-// Global PrimeNG Calendar icon styles (outside :root for higher specificity)
-p-calendar,
-.p-calendar {
-    .p-datepicker-trigger,
-    .p-datepicker-dropdown,
-    button[class*='datepicker'] {
-        background-color: var(--first) !important;
-        border-color: var(--first) !important;
-        color: white !important;
-
-        svg,
-        .p-icon,
-        i,
-        calendaricon,
-        * {
-            color: white !important;
-            fill: white !important;
-            stroke: white !important;
-        }
+// Datepicker trigger (global): solid primary + white icon — wins over Aura surface tokens
+button.p-datepicker-trigger,
+button.p-datepicker-dropdown,
+p-datepicker .p-datepicker-dropdown,
+.p-datepicker .p-datepicker-dropdown {
+    background-color: var(--first) !important;
+    border: 1px solid var(--first) !important;
+    color: #ffffff !important;
 
-        svg path,
-        svg circle,
-        svg rect,
-        svg polygon,
-        svg * {
-            fill: white !important;
-            stroke: white !important;
-        }
+    &:hover {
+        background-color: var(--tabs_sub_bg) !important;
+        border-color: var(--tabs_sub_bg) !important;
+        color: #ffffff !important;
     }
-}
 
-button.p-datepicker-trigger,
-button.p-datepicker-dropdown {
-    background-color: transparent !important;
-    border-color: var(--first) !important;
-    color: var(--first) !important;
+    &:active {
+        background-color: var(--tabs_sub_bg) !important;
+        border-color: var(--tabs_sub_bg) !important;
+    }
 
     svg,
     .p-icon,
     i,
-    calendaricon,
-    * {
-        color: var(--first) !important;
-        fill: var(--first) !important;
-        stroke: var(--first) !important;
+    calendaricon {
+        color: #ffffff !important;
+        fill: #ffffff !important;
+        stroke: #ffffff !important;
     }
 
     svg path,
+    svg circle,
+    svg rect,
+    svg polygon,
     svg * {
-        fill: var(--first) !important;
-        stroke: var(--first) !important;
+        fill: #ffffff !important;
+        stroke: #ffffff !important;
     }
 }
 
+// Adjacent input + dropdown: Prime removes border-start on dropdown; keep seam clean
+.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-dropdown {
+    border-inline-start: 0 none !important;
+}
+
 .body-quill {
     border-width: 0 !important;
 }
@@ -1055,10 +1094,22 @@ button.p-autocomplete-dropdown {
     }
 }
 
-// PrimeNG Autocomplete input border color
+// PrimeNG Autocomplete: primary border on outer list only; no extra box-shadow (avoids double line with theme)
 .p-autocomplete {
-    .p-autocomplete-input-multiple,
-    .p-inputtext {
+    .p-autocomplete-input-multiple {
+        &:hover {
+            border-color: var(--first) !important;
+        }
+
+        &:focus,
+        &.p-focus,
+        &:focus-within {
+            border-color: var(--first) !important;
+            box-shadow: none !important;
+        }
+    }
+
+    .p-autocomplete-input:not(.p-autocomplete-input-multiple) {
         &:hover {
             border-color: var(--first) !important;
         }
@@ -1066,13 +1117,41 @@ button.p-autocomplete-dropdown {
         &:focus,
         &.p-focus {
             border-color: var(--first) !important;
-            box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
+            box-shadow: none !important;
+        }
+    }
+
+    .p-autocomplete-input-chip input,
+    .p-autocomplete-input-chip .p-inputtext,
+    .p-autocomplete-input-chip .p-autocomplete-input {
+        border: 0 !important;
+        box-shadow: none !important;
+
+        &:focus,
+        &.p-focus {
+            border: 0 !important;
+            box-shadow: none !important;
+            outline: none !important;
         }
     }
 
     &:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
     &:not(.p-disabled):hover .p-autocomplete-input-multiple {
         border-color: var(--first) !important;
+        box-shadow: none !important;
+    }
+}
+
+// Multiselect autocomplete + dropdown: full height, no inset shadow reading as a horizontal rule under chips
+.p-autocomplete:has(.p-autocomplete-dropdown) {
+    align-items: stretch;
+
+    .p-autocomplete-input-multiple {
+        box-shadow: none !important;
+    }
+
+    .p-autocomplete-dropdown {
+        align-self: stretch;
     }
 }
 
@@ -1268,7 +1347,7 @@ p {
 .content-quill-wrapper {
     margin: 0 auto;
     max-width: 1000px;
-    background: map-get($white-color, base);
+    background: map.get($white-color, base);
     border: 1px solid rgb(238, 238, 238);
 
     .content-quill-box {
@@ -1279,7 +1358,7 @@ p {
 @media only screen and (max-width: 1024px) {
     .content-quill-wrapper {
         padding: 1rem;
-        background: map-get($white-color, base);
+        background: map.get($white-color, base);
 
         .content-quill-box {
             padding: 1rem;
@@ -1290,7 +1369,7 @@ p {
 @media only screen and (max-width: 767px) {
     .content-quill-wrapper {
         padding: 0.5rem;
-        background: map-get($white-color, base);
+        background: map.get($white-color, base);
 
         .content-quill-box {
             padding: 0.5rem;

package/scss/_public-pages.scss

@@ -1,7 +1,7 @@
 // Loading partials
-@import 'public-pages/layout';
-@import 'public-pages/buttons';
-@import 'public-pages/input-fields';
+@forward 'public-pages/layout';
+@forward 'public-pages/buttons';
+@forward 'public-pages/input-fields';
 
 // Mixins
-@import 'public-pages/mixins/buttons';
+@forward 'public-pages/mixins/buttons';

package/scss/_shared.scss

@@ -1,3 +1,3 @@
-@import 'shared/prime-ng-tables'; // This is a collection of rich UI components for Angular
-@import 'shared/prime-ng'; // This is a collection of rich UI components for Angular
-@import 'shared/modal';
+@forward 'shared/prime-ng-tables';
+@forward 'shared/prime-ng';
+@forward 'shared/modal';

package/scss/_variables.scss

@@ -1,5 +1,5 @@
-@import 'variables/generic-variables';
-@import 'variables/branding-variables';
-@import 'variables/dashboard-variables';
-@import 'variables/app-colors-variables';
-@import 'variables/primeng-variables';
+@forward 'variables/generic-variables';
+@forward 'variables/branding-variables';
+@forward 'variables/dashboard-variables';
+@forward 'variables/app-colors-variables';
+@forward 'variables/primeng-variables';

package/scss/common/landing-page-a/landing-page-style-1.scss

@@ -1,4 +1,5 @@
-@import '../../variables';
+@use 'sass:map';
+@use '../../variables' as *;
 
 .register {
     background: rgb(255 255 255) url('/assets/img/landing-page/testimonial-bg.png') fixed center top;
@@ -53,7 +54,7 @@
     padding-right: 15px;
 
     h1 {
-        color: map-get($secondary, base);
+        color: map.get($secondary, base);
     }
 
     h3 {
@@ -390,7 +391,7 @@ label {
     }
 
     50% {
-        color: map-get($secondary, base);
+        color: map.get($secondary, base);
     }
 
     100% {
@@ -618,7 +619,7 @@ pw-signup-tabs-a {
 .primary-header,
 .blinking-text-wrapper {
     h1 {
-        color: map-get($secondary, base);
+        color: map.get($secondary, base);
     }
 
     h3 {

package/scss/common/landing-page-b/banner.scss

@@ -1,5 +1,5 @@
-@import 'variables/landing-page-new-variables';
-@import 'common/landing-page-b/landing-page-style-2';
+@use 'variables/landing-page-new-variables' as *;
+@use 'common/landing-page-b/landing-page-style-2' as *;
 
 .banner {
     background-attachment: scroll;

package/scss/common/landing-page-b/contact-us.scss

@@ -1,5 +1,5 @@
-@import 'variables/landing-page-new-variables';
-@import 'common/landing-page-b/landing-page-style-2';
+@use 'variables/landing-page-new-variables' as *;
+@use 'common/landing-page-b/landing-page-style-2' as *;
 
 .contact-us-section {
     background: url('/assets/img/products/trial/contact-us-bg.jpg') center;

package/scss/common/landing-page-b/explainer.scss

@@ -1,6 +1,6 @@
-@import 'variables/landing-page-new-variables';
-@import 'common/landing-page-b/landing-page-style-2';
-@import 'public-pages/mixins/buttons';
+@use 'variables/landing-page-new-variables' as *;
+@use 'common/landing-page-b/landing-page-style-2' as *;
+@use 'public-pages/mixins/buttons' as *;
 
 .product-explainer-section {
     background-color: $bg-color-black-grey;

package/scss/common/landing-page-b/explainer2.scss

@@ -1,6 +1,6 @@
-@import 'variables/landing-page-new-variables';
-@import 'common/landing-page-b/landing-page-style-2';
-@import 'public-pages/mixins/buttons';
+@use 'variables/landing-page-new-variables' as *;
+@use 'common/landing-page-b/landing-page-style-2' as *;
+@use 'public-pages/mixins/buttons' as *;
 
 .product-explainer-section {
     background: $bg-color-blue;

package/scss/common/landing-page-b/header.scss

@@ -1,13 +1,19 @@
-@import 'variables/landing-page-new-variables';
-@import 'common/landing-page-b/landing-page-style-2';
+@use 'variables/landing-page-new-variables' as *;
+@use 'common/landing-page-b/landing-page-style-2' as *;
 
 .navbar-custom-background {
     background-color: rgb(0 0 0 / 50%);
     box-shadow: 2px 2px 15px 2px rgb(0 0 0 / 12.2%);
-    transition: width 2s, height 2s, -webkit-transform 2s;
+    transition:
+        width 2s,
+        height 2s,
+        -webkit-transform 2s;
 
     /* Safari */
-    transition: width 2s, height 2s, transform 2s background-color 0.5s ease;
+    transition:
+        width 2s,
+        height 2s,
+        transform 2s background-color 0.5s ease;
     z-index: 9999;
 }
 

package/scss/common/landing-page-b/landing-page-style-2.scss

@@ -1,4 +1,4 @@
-@import 'variables/branding-variables';
+@use 'variables/branding-variables' as *;
 
 // ⚡ PERFORMANCE FIX: Use Roboto (already loaded) instead of Montserrat from Google CDN
 // This eliminates 1.7 second delay on CS2, CS3, CS4 pages