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

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-color-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__half {
@@ -39,7 +39,7 @@
     position: relative;
     padding: 20px;
     margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__full {
@@ -52,7 +52,7 @@
     position: relative;
     padding: 2px;
     margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__dashfull {
@@ -65,7 +65,7 @@
     position: relative;
     padding: 20px;
     margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__subrow {
@@ -78,14 +78,13 @@
 
 .grid__subnav {
     flex: 1;
-    background: rgba(var(--item-color-rgb), 1.01);
+    background: white;
     border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
     box-sizing: border-box;
     padding: 5px;
     margin: 8px 0;
     height: auto;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__subnav > ul {
@@ -104,11 +103,11 @@
 
 .grid__subnav > ul li a {
     width: 100%;
-    padding: 8px 20px;
+    padding: 0.35rem 1rem;
     box-sizing: border-box;
     display: block;
     text-decoration: none;
-    background: rgba(var(--primary-color-rgb), 0.05);
+    background: rgba(var(--primary-rgb), 0.05);
     color: var(--primary-color);
     border-radius: 5px;
     transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -137,15 +136,14 @@
 
 .grid__subcontent {
     flex: 0 1 80%;
-    background: var(--item-color);
+    background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
     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 {
@@ -158,10 +156,10 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: rgba(var(--item-color-rgb), 1.05);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-radius: 0;
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
@@ -186,14 +184,15 @@
 
 .gridtxt > ul li {
     flex: 0 0 calc(50% - 10px);
-    padding: 0.85rem;
+    padding: 0.65rem;
     box-sizing: border-box;
-    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb), 0.095);
     color: var(--paragraph-color);
-    background: rgba(var(--tertiary-color-rgb), 0.95);
-    margin: 5px;
+    background: rgba(var(--primary-rgb), 0.015);
+    margin: 3px;
     border-radius: var(--br);
     line-height: 1.45;
+    font-size: 0.85rem;
 }
 
 .gridtxt > ul .fw-grid-item {
@@ -204,75 +203,6 @@
     border: 1px solid var(--secondary-color);
 }
 
-.crmtitle {
-    border: none;
-    min-height: auto;
-    padding: 10px 20px;
-    margin: 0;
-    background: var(--tertiary-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    h1 {
-        font-weight: 700;
-        font-size: 1.45em;
-        margin: 0;
-        padding: 0.65rem 0;
-
-        a {
-            text-decoration: none;
-            color: var(--secondary-color);
-            font-weight: 300;
-        }
-
-        svg {
-            color: rgba(var(--primary-color-rgb), 0.5);
-            position: relative;
-            top: 2px;
-            margin: 0 0.25rem;
-        }
-    }
-}
-
-.crmtitle--alternate {
-    border: none;
-    min-height: auto;
-    padding: 5px 20px;
-    margin: 0;
-    background: var(--tertiary-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    h1 {
-        color: var(--paragraph-color);
-        font-weight: 700;
-        font-size: 1.15em;
-        margin: 0;
-        padding: 0.65rem 0;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-
-        a {
-            text-decoration: none;
-            color: var(--primary-color);
-        }
-
-        svg {
-            position: relative;
-            top: 0;
-            margin: 0 0.5rem;
-            max-width: 15px;
-        }
-    }
-}
-
 .titleInfo {
     position: absolute;
     right: 2em;
@@ -298,11 +228,15 @@
         width: 49%;
         padding: 1em;
         box-sizing: border-box;
-        border: 1px solid rgba(var(--primary-color-rgb), 0.15);
+        border: 1px solid rgba(var(--primary-rgb), 0.15);
         color: var(--paragraph-color);
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;
         border-radius: 5px;
+
+        p {
+            font-size: 0.85rem;
+        }
     }
 }
 
@@ -319,6 +253,12 @@
 }
 
 .dropzone__container {
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 1rem;
+
     > div {
         flex: 1 1 0%;
         display: flex;
@@ -333,11 +273,12 @@
         color: rgb(189, 189, 189);
         outline: currentcolor none medium;
         transition: border 0.24s ease-in-out 0s;
-        margin: 1em;
+        margin: 0;
 
         p {
             padding: 0;
             margin: 0;
+            font-size: 1rem;
         }
     }
 }
@@ -345,29 +286,35 @@
 .dropzone__files {
     list-style: none;
     padding: 0;
-    margin: 1em;
+    margin: 0;
     box-sizing: border-box;
 
     li {
         width: 100%;
         display: block;
-        background: rgba(var(--tertiary-color-rgb), 1.05);
+        background: rgba(var(--primary-rgb), 0.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: 1em 2em;
+        padding: 0.5rem;
         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;
 
-        i {
+        svg {
             position: relative;
-            top: 0;
-            right: 5px;
-            color: rgba(var(--secondary-color-rgb), 1.15);
+            top: -2px;
+            color: rgba(var(--secondary-rgb), 1);
+            float: left;
+            stroke-width: 1;
+            line-height: 1;
+            margin-right: 5px;
         }
 
         button {
@@ -379,8 +326,8 @@
             z-index: 200;
             cursor: pointer;
 
-            i {
-                font-size: 1.15em;
+            svg {
+                font-size: 1em;
                 color: var(--primary-color);
                 line-height: 1;
             }
@@ -408,8 +355,8 @@
         align-items: center;
         flex-wrap: wrap;
         border-radius: 5px;
-        border: 1px solid rgba(var(--primary-color-rgb), 0.2);
-        box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
+        border: 1px solid rgba(var(--primary-rgb), 0.2);
+        box-shadow: 0px 0px 20px rgba(var(--primary-rgb), 0.1);
         padding: 1.25rem 1.25rem 1.25rem 2rem;
         box-sizing: border-box;
         cursor: pointer;
@@ -481,26 +428,26 @@
     flex-wrap: nowrap;
     align-items: flex-start;
     padding: 0 1.5em;
-}
 
-.oppoverview__box {
-    width: auto;
-    margin: 0;
-    padding: 0 2em;
-    border-right: 1px solid rgba(var(--primary-color-rgb), 0.35);
-}
+    &__box {
+        width: auto;
+        margin: 0;
+        padding: 0 2em;
+        border-right: 1px solid rgba(var(--primary-rgb), 0.35);
 
-.oppoverview__box:first-child {
-    padding-left: 0;
-}
+        &:first-child {
+            padding-left: 0;
+        }
 
-.oppoverview__box p {
-    margin: 0;
-}
+        p {
+            margin: 0;
+        }
 
-.oppoverview__box span {
-    display: block;
-    color: rgba(var(--paragraph-color-rgb), 0.7);
+        span {
+            display: block;
+            color: rgba(var(--primary-rgb), 0.7);
+        }
+    }
 }
 
 .oppstatus {
@@ -514,95 +461,96 @@
     list-style: none;
     padding: 0;
     margin: 0;
-}
-
-.opppath > li {
-    position: relative;
-    flex: 1;
-    margin-left: 0.375rem;
-    margin-right: 0.4375rem;
-    min-width: 5rem;
-    text-align: center;
-    background: var(--primary-color);
-}
-
-.opppath > li:first-child {
-    margin-left: 0;
-    border-top-left-radius: 1rem;
-    border-bottom-left-radius: 1rem;
-    padding-left: 0.625rem;
-}
 
-.opppath > li:first-child:before,
-.opppath > li:first-child:after {
-    left: 1.125rem;
-}
+    > 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:last-child {
-    margin-right: 0;
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-    padding-left: 0.625rem;
-}
+        &:last-child {
+            margin-right: 0;
+            border-top-right-radius: 1rem;
+            border-bottom-right-radius: 1rem;
+            padding-left: 0.625rem;
 
-.opppath > li:last-child:before,
-.opppath > li:last-child:after {
-    right: 1.125rem;
-}
+            &:before,
+            &:after {
+                right: 1.125rem;
+            }
+        }
 
-.opppath > li:before,
-.opppath > li:after {
-    content: '';
-    position: absolute;
-    left: -0.35rem;
-    right: -0.35rem;
-    cursor: pointer;
-    background: var(--primary-color);
-}
+        &:before,
+        &:after {
+            content: '';
+            position: absolute;
+            left: -0.35rem;
+            right: -0.35rem;
+            cursor: pointer;
+            background: var(--primary-color);
+        }
 
-.opppath > li:before {
-    top: 0;
-    height: 1.5rem;
-    transform: skew(28deg) translate3d(0, 0, 0);
-}
+        &:before {
+            top: 0;
+            height: 1.5rem;
+            transform: skew(28deg) translate3d(0, 0, 0);
+        }
 
-.opppath > li:after {
-    bottom: 0;
-    height: 1.5rem;
-    transform: skew(-30deg) translate3d(0, 0, 0);
-}
+        &: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);
-}
+        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 a svg {
-    position: relative;
-    top: 2px;
-    left: 8px;
-    color: rgba(var(--highlight-color-rgb), 0.5);
+            svg {
+                position: relative;
+                left: 8px;
+                color: var(--bg-color);
+            }
+        }
+    }
 }
 
 .opp-complete {
-    background: rgba(var(--primary-color-rgb), 0.9);
-}
+    background: var(--secondary-color) !important;
 
-.opp-complete a {
-    color: var(--highlight-color);
-}
+    a {
+        color: var(--highlight-color);
+    }
 
-.opp-complete:before,
-.opp-complete:after {
-    background: rgba(var(--primary-color-rgb), 0.9);
+    &:before,
+    &:after {
+        background: var(--secondary-color) !important;
+    }
 }
 
 .oppdets {
@@ -630,5 +578,127 @@
 .btn:hover {
     color: var(--primary-color);
     background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
+    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 */
 }