@visns-studio/visns-components 5.0.1-8.1 → 5.0.1

package/src/components/crm/generic/styles/AuditLog.module.scss

@@ -106,9 +106,5 @@
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;
         border-radius: 5px;
-
-        p {
-            font-size: 0.85rem;
-        }
     }
 }

package/src/components/crm/generic/styles/GenericDetail.module.scss

@@ -26,7 +26,7 @@
     position: relative;
     padding: 20px;
     margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
 .grid__half {
@@ -39,7 +39,7 @@
     position: relative;
     padding: 20px;
     margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
 .grid__full {
@@ -52,7 +52,7 @@
     position: relative;
     padding: 2px;
     margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
 .grid__dashfull {
@@ -65,7 +65,7 @@
     position: relative;
     padding: 20px;
     margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
 .grid__subrow {
@@ -84,7 +84,7 @@
     padding: 5px;
     margin: 8px 0;
     height: auto;
-    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
 .grid__subnav > ul {
@@ -136,14 +136,15 @@
 
 .grid__subcontent {
     flex: 0 1 80%;
-    background: var(--tertiary-color);
+    background: var(--item-color);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.05);
+    border: 1px solid rgba(var(--item-color-rgb), 1.15);
     box-sizing: border-box;
     padding: 2px;
     margin: 8px 0;
     height: auto;
     position: relative;
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
 .grid__subcontent h2 {
@@ -156,10 +157,10 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: rgba(var(--primary-rgb), 0.05);
+    background: rgba(var(--item-color-rgb), 1.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-radius: var(--br);
+    border-radius: 0;
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
@@ -184,15 +185,14 @@
 
 .gridtxt > ul li {
     flex: 0 0 calc(50% - 10px);
-    padding: 0.65rem;
+    padding: 0.85rem;
     box-sizing: border-box;
-    border: 1px solid rgba(var(--primary-rgb), 0.095);
+    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
     color: var(--paragraph-color);
-    background: rgba(var(--primary-rgb), 0.015);
-    margin: 3px;
+    background: rgba(var(--tertiary-color-rgb), 0.95);
+    margin: 5px;
     border-radius: var(--br);
     line-height: 1.45;
-    font-size: 0.85rem;
 }
 
 .gridtxt > ul .fw-grid-item {
@@ -228,15 +228,11 @@
         width: 49%;
         padding: 1em;
         box-sizing: border-box;
-        border: 1px solid rgba(var(--primary-rgb), 0.15);
+        border: 1px solid rgba(var(--primary-color-rgb), 0.15);
         color: var(--paragraph-color);
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;
         border-radius: 5px;
-
-        p {
-            font-size: 0.85rem;
-        }
     }
 }
 
@@ -253,12 +249,6 @@
 }
 
 .dropzone__container {
-    padding: 1rem;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-    gap: 1rem;
-
     > div {
         flex: 1 1 0%;
         display: flex;
@@ -273,12 +263,11 @@
         color: rgb(189, 189, 189);
         outline: currentcolor none medium;
         transition: border 0.24s ease-in-out 0s;
-        margin: 0;
+        margin: 1em;
 
         p {
             padding: 0;
             margin: 0;
-            font-size: 1rem;
         }
     }
 }
@@ -286,35 +275,29 @@
 .dropzone__files {
     list-style: none;
     padding: 0;
-    margin: 0;
+    margin: 1em;
     box-sizing: border-box;
 
     li {
         width: 100%;
         display: block;
-        background: rgba(var(--primary-rgb), 0.05);
+        background: rgba(var(--tertiary-color-rgb), 1.05);
         color: var(--primary-color);
         border-radius: 3px;
         transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
         outline: none;
         cursor: pointer;
         border-radius: 3px;
-        padding: 0.5rem;
+        padding: 1em 2em;
         box-sizing: border-box;
         position: relative;
-        border: 1px solid rgba(var(--primary-rgb), 0.15);
-        line-height: 1;
-        font-size: 0.85rem;
         margin-bottom: 5px;
 
-        svg {
+        i {
             position: relative;
-            top: -2px;
-            color: rgba(var(--secondary-rgb), 1);
-            float: left;
-            stroke-width: 1;
-            line-height: 1;
-            margin-right: 5px;
+            top: 0;
+            right: 5px;
+            color: rgba(var(--secondary-color-rgb), 1.15);
         }
 
         button {
@@ -326,8 +309,8 @@
             z-index: 200;
             cursor: pointer;
 
-            svg {
-                font-size: 1em;
+            i {
+                font-size: 1.15em;
                 color: var(--primary-color);
                 line-height: 1;
             }
@@ -355,8 +338,8 @@
         align-items: center;
         flex-wrap: wrap;
         border-radius: 5px;
-        border: 1px solid rgba(var(--primary-rgb), 0.2);
-        box-shadow: 0px 0px 20px rgba(var(--primary-rgb), 0.1);
+        border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+        box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
         padding: 1.25rem 1.25rem 1.25rem 2rem;
         box-sizing: border-box;
         cursor: pointer;
@@ -428,26 +411,26 @@
     flex-wrap: nowrap;
     align-items: flex-start;
     padding: 0 1.5em;
+}
 
-    &__box {
-        width: auto;
-        margin: 0;
-        padding: 0 2em;
-        border-right: 1px solid rgba(var(--primary-rgb), 0.35);
+.oppoverview__box {
+    width: auto;
+    margin: 0;
+    padding: 0 2em;
+    border-right: 1px solid rgba(var(--primary-color-rgb), 0.35);
+}
 
-        &:first-child {
-            padding-left: 0;
-        }
+.oppoverview__box:first-child {
+    padding-left: 0;
+}
 
-        p {
-            margin: 0;
-        }
+.oppoverview__box p {
+    margin: 0;
+}
 
-        span {
-            display: block;
-            color: rgba(var(--primary-rgb), 0.7);
-        }
-    }
+.oppoverview__box span {
+    display: block;
+    color: rgba(var(--paragraph-color-rgb), 0.7);
 }
 
 .oppstatus {
@@ -461,96 +444,95 @@
     list-style: none;
     padding: 0;
     margin: 0;
+}
 
-    > li {
-        position: relative;
-        flex: 1;
-        margin-left: 0.375rem;
-        margin-right: 0.4375rem;
-        min-width: 5rem;
-        text-align: center;
-        background: var(--primary-color);
-
-        &:first-child {
-            margin-left: 0;
-            border-top-left-radius: 1rem;
-            border-bottom-left-radius: 1rem;
-            padding-left: 0.625rem;
-
-            &:before,
-            &:after {
-                left: 1.125rem;
-            }
-        }
+.opppath > li {
+    position: relative;
+    flex: 1;
+    margin-left: 0.375rem;
+    margin-right: 0.4375rem;
+    min-width: 5rem;
+    text-align: center;
+    background: var(--primary-color);
+}
 
-        &:last-child {
-            margin-right: 0;
-            border-top-right-radius: 1rem;
-            border-bottom-right-radius: 1rem;
-            padding-left: 0.625rem;
+.opppath > li:first-child {
+    margin-left: 0;
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+    padding-left: 0.625rem;
+}
 
-            &:before,
-            &:after {
-                right: 1.125rem;
-            }
-        }
+.opppath > li:first-child:before,
+.opppath > li:first-child:after {
+    left: 1.125rem;
+}
 
-        &:before,
-        &:after {
-            content: '';
-            position: absolute;
-            left: -0.35rem;
-            right: -0.35rem;
-            cursor: pointer;
-            background: var(--primary-color);
-        }
+.opppath > li:last-child {
+    margin-right: 0;
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+    padding-left: 0.625rem;
+}
 
-        &:before {
-            top: 0;
-            height: 1.5rem;
-            transform: skew(28deg) translate3d(0, 0, 0);
-        }
+.opppath > li:last-child:before,
+.opppath > li:last-child:after {
+    right: 1.125rem;
+}
 
-        &:after {
-            bottom: 0;
-            height: 1.5rem;
-            transform: skew(-30deg) translate3d(0, 0, 0);
-        }
+.opppath > li:before,
+.opppath > li:after {
+    content: '';
+    position: absolute;
+    left: -0.35rem;
+    right: -0.35rem;
+    cursor: pointer;
+    background: var(--primary-color);
+}
 
-        a {
-            font-size: 1rem;
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 2rem;
-            padding: 1.45rem;
-            text-decoration: none;
-            z-index: 5;
-            cursor: pointer;
-            color: var(--bg-color);
-            line-height: 1;
+.opppath > li:before {
+    top: 0;
+    height: 1.5rem;
+    transform: skew(28deg) translate3d(0, 0, 0);
+}
 
-            svg {
-                position: relative;
-                left: 8px;
-                color: var(--bg-color);
-            }
-        }
-    }
+.opppath > li:after {
+    bottom: 0;
+    height: 1.5rem;
+    transform: skew(-30deg) translate3d(0, 0, 0);
+}
+
+.opppath > li a {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 2rem;
+    padding: 1.45rem;
+    text-decoration: none;
+    z-index: 5;
+    cursor: pointer;
+    color: var(--tertiary-color);
+}
+
+.opppath > li a svg {
+    position: relative;
+    top: 2px;
+    left: 8px;
+    color: rgba(var(--highlight-color-rgb), 0.5);
 }
 
 .opp-complete {
-    background: var(--secondary-color) !important;
+    background: rgba(var(--primary-color-rgb), 0.9);
+}
 
-    a {
-        color: var(--highlight-color);
-    }
+.opp-complete a {
+    color: var(--highlight-color);
+}
 
-    &:before,
-    &:after {
-        background: var(--secondary-color) !important;
-    }
+.opp-complete:before,
+.opp-complete:after {
+    background: rgba(var(--primary-color-rgb), 0.9);
 }
 
 .oppdets {
@@ -578,127 +560,5 @@
 .btn:hover {
     color: var(--primary-color);
     background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-rgb), 1.05);
-}
-
-.crmtitle {
-    min-height: auto;
-    padding: 1rem;
-    margin: 0;
-    background: white;
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    h1 {
-        font-weight: 700;
-        font-size: 1.25rem;
-        margin: 0;
-        padding: 0;
-        line-height: 1;
-
-        a {
-            text-decoration: none;
-            color: var(--secondary-color);
-            font-weight: 400;
-        }
-
-        svg {
-            color: rgba(var(--primary-rgb), 0.5);
-            position: relative;
-            top: 2px;
-            margin: 0 0.5rem;
-            max-width: 15px;
-        }
-    }
-
-    .titleInfo {
-        width: max-content;
-    }
-
-    .titleInfo span {
-        font-size: 0.875em;
-        color: rgba(var(--primary-rgb), 0.65);
-    }
-}
-
-.schedulingTable {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1em 0;
-}
-
-.schedulingTable th,
-.schedulingTable td {
-    padding: 0.75rem;
-    text-align: left;
-    border: 1px solid rgba(var(--primary-rgb), 0.1);
-}
-
-.schedulingTable th {
-    background-color: var(--secondary-color);
-    color: var(--item-color);
-    font-weight: bold;
-}
-
-.schedulingTable td {
-    background-color: rgba(var(--primary-rgb), 0.05);
-}
-
-.categoryRow {
-    background-color: rgba(var(--primary-rgb), 0.1);
-    text-align: left;
-    font-weight: bold;
-    font-size: 1.2rem;
-    color: var(--primary-color);
-}
-
-.totalRow {
-    background-color: rgba(var(--primary-rgb), 0.05);
-    font-weight: bold;
-    text-align: right;
-}
-
-.schedulingTable td input[type='checkbox'] {
-    width: 20px !important;
-    height: 20px;
-    border-radius: 4px;
-    background-color: var(--item-color);
-    border: 2px solid rgba(var(--primary-rgb), 0.15);
-    position: relative;
-    cursor: pointer;
-    transition: background-color 0.3s, border-color 0.3s;
-}
-
-.schedulingTable td input[type='checkbox']:checked {
-    background-color: var(--primary-color);
-    border-color: var(--highlight-color);
-}
-
-.schedulingTable td input[type='checkbox']:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
-}
-
-/* Custom hover effect for better user experience */
-.schedulingTable td input[type='checkbox']:hover {
-    background-color: rgba(var(--primary-rgb), 0.1);
-    border-color: rgba(var(--primary-rgb), 0.25);
-}
-
-.noDataMessage {
-    text-align: center;
-    color: var(--secondary-color); /* Maintain a clear and neutral color */
-    font-size: 1.125em; /* Slightly reduce the font size for a cleaner look */
-    padding: 1.5em; /* Adjust padding for better spacing */
-    margin: 2em auto; /* Add auto margin for centering */
-    background: #f9f9f9; /* Subtle background to match the theme */
-    border: 1px solid #ddd; /* Light border for structure */
-    border-radius: 6px; /* Slight rounding for a modern feel */
-    max-width: 600px; /* Constrain width for a balanced layout */
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Gentle shadow for depth */
-    font-style: italic; /* Optional: Add a subtle font style */
-}
+    border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
+}