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

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

@@ -22,6 +22,7 @@
     box-sizing: border-box;
     transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
     z-index: 999;
+    font-size: 1rem;
 }
 
 .notibox .notiscrollwrap {

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

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

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

@@ -59,7 +59,6 @@
 
     .currentAccount {
         float: right;
-        color: darken(#f0f0f0, 25%);
         line-height: 1.25;
     }
 

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

@@ -2,6 +2,7 @@
     list-style: none;
     padding: 0;
     margin: 0;
+    font-size: 1rem;
 }
 
 .collapsibleMenu {
@@ -34,7 +35,7 @@
     display: block;
     padding: 8px 20px;
     text-decoration: none;
-    background: var(--item-color);
+    background: var(--bg-color);
     color: var(--paragraph-color);
     border-radius: 3px;
     transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);

package/src/components/styles/global.css

@@ -1,53 +1,88 @@
-@import '@fontsource/barlow/index.css';
-@import '@fontsource/barlow/300.css';
-@import '@fontsource/barlow/700.css';
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
 
-/* Apply the crop mixin manually */
-.crop::before {
-    content: '';
-    display: block;
-    height: 0;
-    width: 0;
-    margin-top: calc((1 - 1.25) * 0.5em);
+* {
+    margin: 0;
 }
 
+html,
 body {
-    font-size: 100%;
-    background: var(--tertiary-color-dark, var(--tertiary-color));
-    font-family: 'Barlow', sans-serif;
-    font-weight: 300;
+    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 {
+    background: var(--bg-color);
+    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: 0.85rem;
 }
 
-.loginbg {
-    background: var(--tertiary-color);
+input,
+button,
+textarea,
+select {
+    font: inherit;
 }
 
 h1,
 h2,
 h3,
 h4,
-h5 {
-    font-size: 1.675em;
-    color: var(--primary-color);
-    font-weight: 700;
-    font-style: normal;
+h5,
+h6 {
+    color: var(--header-color);
+    font-weight: var(--title-weight);
+    line-height: var(--title-height);
+    letter-spacing: 0.015rem;
 }
 
 p {
-    font-weight: 300;
-    font-style: normal;
-    margin: 0 0 calc(var(--padding) / 2); /* Replace with actual padding value */
+    font-size: clamp(1rem, 2vw, 1.25rem);
     color: var(--paragraph-color);
+    font-weight: var(--para-weight);
+    line-height: var(--para-height);
+    margin-bottom: 1rem;
+
+    @media (max-width: 1024px) {
+        font-size: clamp(0.85rem, 2vw, 0.95rem);
+    }
+
+    strong {
+        font-weight: var(--title-weight);
+    }
 }
 
-p::before {
-    content: '';
-    display: block;
-    height: 0;
-    width: 0;
-    margin-top: calc((1 - 1.25) * 0.5em);
+ul {
+    font-size: clamp(1rem, 2vw, 1.25rem);
+    color: var(--paragraph-color);
+    font-weight: var(--para-weight);
+    line-height: var(--para-height);
+    margin-bottom: 1rem;
+
+    @media (max-width: 1024px) {
+        font-size: clamp(0.85rem, 2vw, 0.95rem);
+    }
+}
+
+a {
+    outline: none;
+}
+
+.loginbg {
+    background: var(--tertiary-color);
 }
 
 textarea,
@@ -59,15 +94,110 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     ):not(.inovua-react-toolkit-text-input__input):not(
         .inovua-react-toolkit-numeric-input__input
     ) {
-    background: var(--item-color);
+    background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
     box-shadow: none;
     padding: 1rem;
     outline: none;
-    /* width: 100%; */
     box-sizing: border-box;
-    background: rgba(white, 0.5);
     color: var(--paragraph-color);
     transition: border 0.15s linear;
+    width: 100%;
+    line-height: 1;
+    font-size: 0.85rem;
+
+    &:focus {
+        border: 1px solid var(--primary-color);
+    }
+}
+
+.popup-content {
+    border-radius: var(--br);
+    padding: 0 !important;
+}
+
+.popup-overlay {
+    background: rgba(0, 0, 0, 0.65) !important;
+    backdrop-filter: blur(3px);
+}
+
+.AutocompletePlace-results {
+    z-index: 999;
+    width: 500px;
+    position: absolute;
+    background-color: var(--tertiary-color);
+    padding: 0;
+    margin: 0;
+    border: 1px solid rgba(var(--primary-rgb), 0.25);
+    border-radius: var(--br);
+    overflow: hidden;
+    font-size: 1rem;
+    max-height: 150px;
+    overflow-y: auto;
+
+    ul {
+        font-size: 1rem;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.vs-datagrid--row:hover {
+    .InovuaReactDataGrid__row-cell-wrap {
+        background: rgb(240, 240, 240) !important;
+        cursor: pointer;
+    }
+}
+
+.InovuaReactDataGrid {
+    color: var(--paragraph-color) !important;
+}
+
+.InovuaReactDataGrid__header {
+    color: var(--primary-color) !important;
+}
+
+.InovuaReactDataGrid__row-hover-target:hover {
+    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;
 }