@visns-studio/visns-components 5.0.4 → 5.0.6

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 {
@@ -84,7 +84,7 @@
     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 {
@@ -184,15 +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-rgb), 0.095);
     color: var(--paragraph-color);
     background: rgba(var(--primary-rgb), 0.015);
-    margin: 5px;
+    margin: 3px;
     border-radius: var(--br);
     line-height: 1.45;
-    font-size: 1rem;
+    font-size: 0.85rem;
 }
 
 .gridtxt > ul .fw-grid-item {
@@ -228,7 +228,7 @@
         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;
@@ -249,6 +249,12 @@
 }
 
 .dropzone__container {
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 1rem;
+
     > div {
         flex: 1 1 0%;
         display: flex;
@@ -263,11 +269,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;
         }
     }
 }
@@ -275,29 +282,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 {
@@ -309,8 +322,8 @@
             z-index: 200;
             cursor: pointer;
 
-            i {
-                font-size: 1.15em;
+            svg {
+                font-size: 1em;
                 color: var(--primary-color);
                 line-height: 1;
             }
@@ -338,8 +351,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;
@@ -411,26 +424,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 {
@@ -444,95 +457,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 {
@@ -560,7 +574,7 @@
 .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 {
@@ -585,7 +599,7 @@
         a {
             text-decoration: none;
             color: var(--secondary-color);
-            font-weight: 300;
+            font-weight: 400;
         }
 
         svg {
@@ -600,9 +614,9 @@
     .titleInfo {
         width: max-content;
     }
-    
+
     .titleInfo span {
         font-size: 0.875em;
-        color: rgba(var(--paragraph-color-rgb), 0.65);
+        color: rgba(var(--primary-rgb), 0.65);
     }
-}
+}

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

@@ -256,7 +256,7 @@
         a {
             text-decoration: none;
             color: var(--secondary-color);
-            font-weight: 300;
+            font-weight: 400;
         }
 
         svg {

package/src/components/crm/styles/DataGrid.module.scss

@@ -29,8 +29,7 @@
 }
 
 .InovuaReactDataGrid {
-    letter-spacing: 0.015rem !important;
-    color: black !important;
+    color: var(--paragraph-color) !important;
 }
 
 .InovuaReactDataGrid__header {
@@ -38,7 +37,7 @@
 }
 
 .InovuaReactDataGrid__row-hover-target:hover {
-    color: black !important;
+    color: var(--primary-color) !important;
     background: rgb(240, 240, 240) !important;
 }
 

package/src/components/crm/styles/Field.module.scss

@@ -128,22 +128,24 @@
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-110%) translateX(10px) scale(0.75);
+    transform: translateY(-130%) translateX(10px) scale(0.9);
     opacity: 1;
-    padding: 0;
+    padding: 0 0.25rem;
     background: var(--tertiary-color);
-    font-weight: 300;
+    font-weight: 400;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
+    color: rgba(var(--paragraph-rgb), 0.65);
 }
 
 .prefocus {
-    transform: translateY(-110%) translateX(10px) scale(0.75);
-    opacity: 1;
-    padding: 0;
-    background: var(--tertiary-color);
-    font-weight: 300;
-    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
-    z-index: 999;
+    transform: translateY(-130%) translateX(10px) scale(0.9) !important;
+    opacity: 1 !important;
+    padding: 0 0.25rem !important;
+    background: var(--tertiary-color) !important;
+    font-weight: 400 !important;
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1) !important;
+    z-index: 999 !important;
+    color: rgba(var(--paragraph-rgb), 0.65) !important;
 }
 
 .fwItem {
@@ -185,7 +187,7 @@ select:not(:placeholder-shown) + .fi__span {
     ):not(.inovua-react-toolkit-text-input__input):not(
         .inovua-react-toolkit-numeric-input__input
     ) {
-    font-size: 1rem;
+    font-size: 0.85rem;
     background: white;
     border-radius: var(--br);
     padding: 0.85rem;

package/src/components/crm/styles/Form.module.scss

@@ -242,7 +242,7 @@ input[type='file'] {
     position: relative;
     padding: 0.75rem;
     max-height: 80vh;
-    overflow-y: auto;
+    // overflow-y: auto;
 
     .btn {
         background: var(--primary-color);

package/src/components/crm/styles/Navigation.module.scss

@@ -46,7 +46,7 @@
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;
-    gap: .5rem;
+    gap: 0.5rem;
     margin: 0;
     list-style: none;
     align-items: center;
@@ -92,13 +92,13 @@
             &.active a,
             &:hover span,
             &.active span {
-                background: rgba(var(--secondary-rgb), 0.25);
-                color: var(--secondary-color);
+                background: rgba(var(--secondary-rgb), 1);
+                color: var(--tertiary-color);
             }
 
             &:hover svg,
             &.active svg {
-                color: var(--secondary-color);
+                color: var(--tertiary-color);
             }
 
             > ul {
@@ -132,13 +132,13 @@
                         transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
                         outline: none;
                         margin: 0;
-                        background: rgba(var(--primary-rgb), 0.9);
+                        background: rgba(var(--primary-rgb), 1);
                         color: var(--tertiary-color) !important;
                     }
 
                     &:hover a {
-                        background: rgba(var(--primary-rgb), 1.05);
-                        color: var(--secondary-color);
+                        background: rgba(var(--primary-rgb), 1);
+                        color: var(--tertiary-color);
                     }
 
                     svg {
@@ -360,7 +360,8 @@
                         position: relative;
                         right: 8px;
                         opacity: 1;
-                        transition: opacity 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+                        transition: opacity 0.65s
+                            cubic-bezier(0.25, 0.8, 0.25, 1);
                         color: var(--secondary-color);
                     }
 
@@ -419,7 +420,8 @@
                                 background: rgba(var(--primary-rgb), 0.92);
                                 color: var(--tertiary-color);
                                 border-radius: 3px;
-                                transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+                                transition: all 0.25s
+                                    cubic-bezier(0.25, 0.8, 0.25, 1);
                                 outline: none;
                             }
 
@@ -828,4 +830,4 @@
             max-width: 20px;
         }
     }
-}
+}

package/src/components/styles/global.css

@@ -13,6 +13,7 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     height: 100%;
     text-rendering: geometricPrecision;
+    font-stretch: 75% 125%;
 }
 
 body {
@@ -20,10 +21,9 @@ body {
     font-weight: var(--para-weight);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-style: normal;
-    letter-spacing: 0.018em;
     overflow-x: hidden;
     overscroll-behavior: none;
-    font-size: 1rem;
+    font-size: 0.85rem;
 }
 
 input,
@@ -101,6 +101,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     transition: border 0.15s linear;
     width: 100%;
     line-height: 1;
+    font-size: 0.85rem;
 
     &:focus {
         border: 1px solid var(--primary-color);
@@ -126,7 +127,6 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     max-height: 150px;
     overflow-y: auto;
 
-
     ul {
         font-size: 1rem;
         padding: 0;
@@ -142,8 +142,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 }
 
 .InovuaReactDataGrid {
-    letter-spacing: 0.015rem !important;
-    color: black !important;
+    color: var(--paragraph-color) !important;
 }
 
 .InovuaReactDataGrid__header {
@@ -151,10 +150,45 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 }
 
 .InovuaReactDataGrid__row-hover-target:hover {
-    color: black !important;
+    color: var(--paragraph-color) !important;
     background: rgb(240, 240, 240) !important;
 }
 
 .InovuaReactDataGrid__row:hover {
     cursor: pointer;
+}
+
+/* Async Select */
+
+.visns-select__control {
+    width: 100%;
+    cursor: default;
+    min-height: 50px;
+    outline: 0 !important;
+    position: relative;
+    -webkit-transition: all 100ms;
+    transition: all 100ms;
+    background-color: hsl(0, 0%, 100%);
+    border-color: hsl(0, 0%, 80%);
+    border-radius: 4px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    box-shadow: none !important;
+
+    &--is-focused {
+        border-color: var(--primary-color) !important;
+        box-shadow: none !important;
+        border-width: 1px !important;
+    }
+
+    &--menu-is-open {
+        border-color: var(--primary-color) !important;
+        box-shadow: none !important;
+        border-width: 1px !important;
+    }
+}
+
+.visns-select__menu {
+    z-index: 999 !important;
 }