@visns-studio/visns-components 6.0.4 → 6.1.0

package/src/components/styles/GenericIndex.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 .grid__row {
     width: 100%;
     display: flex;
@@ -196,36 +201,11 @@
     margin: 0 0 30px 0;
 }
 
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-}
 
-.btn:hover:not(:disabled) {
-    color: var(--primary-color);
-    background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
-}
 
-.btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background: var(--primary-color);
-    color: var(--tertiary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 0.5);
-}
+
+
+
 
 .polActions {
     position: fixed;
@@ -743,11 +723,16 @@
 
 .crmtitle {
     min-height: auto;
-    padding: 1rem;
+    /* Was a flat 1rem inside a tinted-navy border, which made the page title
+       look like another card competing with the grid below it. A page header
+       is not a card: no border, no fill, just the title and its count sitting
+       on the page. */
+    padding: 0 0 var(--spacing-md);
     margin: 0;
-    background: white;
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    background: none;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid var(--border-color);
     position: relative;
     display: flex;
     align-items: center;

package/src/components/styles/GenericMain.module.scss

@@ -5,7 +5,11 @@
     top: 0;
     width: 100%;
     z-index: 995;
-    padding: 0.35rem 1rem;
+    /* Was 0.35rem — too tight to read as a deliberate bar. Enough room that
+       the nav sits in it rather than being crushed by it. */
+    padding: var(--spacing-sm) var(--spacing-md);
+    /* Separates the bar from the page when content scrolls under it. */
+    box-shadow: var(--shadow-sm);
 }
 
 .headerAlternate {
@@ -82,10 +86,18 @@
     }
 }
 
-.padding {
-    padding: 1rem;
-}
-
+/* Content gutter. A single flat 1rem before, which on a wide monitor left
+   tables running the full width of the glass with no margin to rest against,
+   and on a phone gave the same gutter as a desktop. */
+.padding,
 .paddingSimple {
-    padding: 1rem;
+    padding: var(--spacing-lg) clamp(var(--spacing-md), 3vw, var(--spacing-xl));
+    /* Long lines of data are hard to track across an ultrawide screen. This
+       is generous enough never to bite on a laptop. */
+    max-width: 2200px;
+    margin: 0 auto;
+
+    @media (max-width: 960px) {
+        padding: var(--spacing-md) var(--spacing-md);
+    }
 }

package/src/components/styles/GenericQuote.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 /* Proposal System Styles (backward compatible) */
 .proposalControls {
     background: #f8f9fa;
@@ -680,29 +685,9 @@
     border: 1px solid var(--secondary-color);
 }
 
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
-}
 
-.btn:hover {
-    color: var(--primary-color);
-    background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-rgb), 1.05);
-}
+
+
 
 .crmtitle {
     min-height: auto;

package/src/components/styles/GenericReport.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 // Use project root CSS variables instead of local SCSS variables
 // This allows the component to adapt to different project themes
 
@@ -2140,44 +2145,7 @@
 }
 
 // Buttons
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 12px calc(var(--padding) * 1.5);
-    border: none;
-    border-radius: var(--radius);
-    font-size: 0.875rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-decoration: none;
-    min-height: 44px;
-    position: relative;
-    overflow: hidden;
 
-    &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        transform: none !important;
-    }
-
-    &:focus {
-        outline: 2px solid rgba(var(--primary-rgb), 0.3);
-        outline-offset: 2px;
-    }
-
-    &:active:not(:disabled) {
-        transform: translateY(1px);
-    }
-
-    svg {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
-    }
-}
 
 .btnPrimary {
     background-color: var(--primary-color);