@visns-studio/visns-components 4.7.2 → 4.7.4

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

@@ -0,0 +1,147 @@
+.notibox {
+    background: #fff;
+    border: 1px solid var(--primary-color-lighter);
+    border-top-color: rgb(204, 204, 204);
+    border-right-color: rgb(204, 204, 204);
+    border-bottom-color: rgb(204, 204, 204);
+    border-left-color: rgb(204, 204, 204);
+    border-color: rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    display: block;
+    opacity: 1;
+    outline: none;
+    overflow: hidden;
+    position: absolute;
+    padding: 6px;
+    border-radius: var(--br);
+    width: 550px;
+    overflow-y: scroll;
+    transform: translateX(-470px);
+    text-align: left;
+    color: var(--paragraph-color);
+    box-sizing: border-box;
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+    z-index: 999;
+}
+
+.notibox .notiscrollwrap {
+    max-height: 190px;
+    overflow-y: auto;
+}
+
+.notibox .notibox-item {
+    width: 100%;
+    display: block;
+    background: #f0f0f0;
+    border-radius: var(--br);
+    padding: 9px 36px 8px 6px;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+    position: relative;
+}
+
+.notibox-item a {
+    background: none !important;
+    padding: 0 !important;
+    line-height: inherit !important;
+    border-radius: 0 !important;
+    color: inherit !important;
+    display: inline !important;
+    text-decoration: underline !important;
+    border: none !important;
+    font-weight: 700 !important;
+    text-decoration: none !important;
+}
+
+.notibox-item a:hover {
+    background: none !important;
+    color: var(--secondary-color) !important;
+}
+
+.notibox .notibox-item span {
+    color: var(--paragraph-color);
+    font-size: 80%;
+}
+
+.notibox .notibox-item > button {
+    position: absolute;
+    right: 6px;
+    top: 5px;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    background: none;
+    border: none;
+}
+
+.notibox .notibox-item > button svg {
+    width: 100%;
+    max-width: 20px;
+}
+
+.notibox .notibox-item .noti-read {
+    color: var(--primary-color);
+}
+
+.notibox .notibox-item .cis-bell-exclamation {
+    display: none;
+    visibility: hidden;
+}
+
+.notibox .notibox-actions {
+    width: 100%;
+    display: block;
+    border-top: 1px solid rgba(240, 240, 240, 1.05);
+    padding: 10px 0 5px 0;
+    margin-top: 10px;
+}
+
+.notibox .notibox-actions button {
+    display: inline-block;
+    border-radius: 6px;
+    border: 1px solid var(--primary-color-lighter);
+    margin-right: 5px;
+    padding: 8px;
+    font-size: 0.875em;
+    outline: none;
+    color: var(--tertiary-color);
+    background: var(--primary-color);
+}
+
+.notilink {
+    background: none;
+    padding: 0;
+    line-height: inherit;
+    border-radius: 0;
+    color: inherit;
+    display: inline;
+    text-decoration: underline;
+    border: none;
+    font-weight: 700;
+    text-decoration: none;
+}
+
+.notilink:hover {
+    background: none;
+    color: var(--secondary-color);
+}
+
+.noti {
+    animation: notification 1s infinite;
+}
+
+@keyframes notification {
+    0% {
+        color: var(--secondary-color);
+        opacity: 0;
+    }
+    50% {
+        color: #c0ff52;
+        opacity: 1;
+    }
+    100% {
+        color: var(--secondary-color);
+        opacity: 0;
+    }
+}

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

@@ -0,0 +1,87 @@
+.gridtxt {
+    &__header {
+        width: 100%;
+        display: block;
+        background: rgba(var(--item-color-rgb), 1.05);
+        box-sizing: border-box;
+        padding: 10px 20px;
+        border-radius: 0;
+        margin-bottom: 0;
+        font-weight: 700;
+        text-align: center;
+        color: var(--paragraph-color);
+
+        span {
+            font-weight: 700;
+        }
+    }
+
+    > ul {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+        flex-direction: row;
+        flex-wrap: wrap;
+        list-style: none;
+        box-sizing: border-box;
+        padding: 0.85rem;
+        margin: 0;
+
+        li {
+            flex: 0 0 calc(50% - 10px);
+            padding: 0.85rem;
+            box-sizing: border-box;
+            border: 1px solid rgba(var(--primary-color-rgb), 0.15);
+            color: var(--paragraph-color);
+            background: rgba(var(--tertiary-color-rgb), 0.95);
+            margin: 5px;
+            border-radius: var(--br);
+            line-height: 1.45;
+        }
+
+        .fw-grid-item {
+            flex: 0 0 calc(100% - 10px);
+        }
+
+        .notecolor {
+            border: 1px solid var(--secondary-color);
+        }
+    }
+}
+
+.customer__overview {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    box-sizing: border-box;
+    padding: 1em;
+    margin: 0;
+
+    li {
+        width: 49%;
+        padding: 1em;
+        box-sizing: border-box;
+        border: 1px solid rgba(var(--primary-color-rgb), 0.15);
+        color: var(--paragraph-color);
+        background: rgba(#f4f4f4, 0.65);
+        margin: 5px;
+        border-radius: 5px;
+    }
+}
+
+.polActions {
+    position: fixed;
+    bottom: 15px;
+    right: 20px;
+    width: auto;
+
+    button {
+        display: block;
+        float: left;
+        padding: 0.35em 1em;
+        margin: 0 0.15em;
+    }
+}

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

@@ -0,0 +1,52 @@
+.tableFilter {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.collapsibleMenu {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
+    opacity: 0;
+}
+
+.visibleMenu {
+    max-height: 2000px; /* Adjust this value based on the expected height of your child menu */
+    opacity: 1;
+}
+
+.subactive {
+    font-weight: 700;
+    background: var(--primary-color) !important;
+    color: var(--tertiary-color) !important;
+}
+
+.subactivechildren {
+    font-weight: 700;
+}
+
+.tableFilter li {
+    margin-bottom: 1px;
+}
+
+.link {
+    display: block;
+    padding: 8px 20px;
+    text-decoration: none;
+    background: var(--item-color);
+    color: var(--paragraph-color);
+    border-radius: 3px;
+    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.link:hover {
+    background: var(--primary-color) !important;
+    color: var(--tertiary-color) !important;
+}
+
+.activetab button {
+    font-weight: bold;
+    background: var(--item-color) !important;
+    color: var(--paragraph-color) !important;
+}

package/src/components/styles/global.css

@@ -0,0 +1,73 @@
+@import '@fontsource/barlow/index.css';
+@import '@fontsource/barlow/300.css';
+@import '@fontsource/barlow/700.css';
+
+/* Apply the crop mixin manually */
+.crop::before {
+    content: '';
+    display: block;
+    height: 0;
+    width: 0;
+    margin-top: calc((1 - 1.25) * 0.5em);
+}
+
+body {
+    font-size: 100%;
+    background: var(--tertiary-color-dark, var(--tertiary-color));
+    font-family: 'Barlow', sans-serif;
+    font-weight: 300;
+    font-style: normal;
+    letter-spacing: 0.018em;
+}
+
+.loginbg {
+    background: var(--tertiary-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-size: 1.675em;
+    color: var(--primary-color);
+    font-weight: 700;
+    font-style: normal;
+}
+
+p {
+    font-weight: 300;
+    font-style: normal;
+    margin: 0 0 calc(var(--padding) / 2); /* Replace with actual padding value */
+    color: var(--paragraph-color);
+}
+
+p::before {
+    content: '';
+    display: block;
+    height: 0;
+    width: 0;
+    margin-top: calc((1 - 1.25) * 0.5em);
+}
+
+textarea,
+select,
+input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
+        .inovua-react-toolkit-numeric-input__input
+    ):not(.inovua-react-toolkit-combo-box__input):not(
+        .inovua-react-toolkit-date-input__input
+    ):not(.inovua-react-toolkit-text-input__input):not(
+        .inovua-react-toolkit-numeric-input__input
+    ) {
+    background: var(--item-color);
+    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;
+}

package/src/index.js

@@ -0,0 +1,86 @@
+/** CMS Components */
+import CmsForm from './components/cms/Form';
+import DataGrid from './components/cms/DataGrid';
+import DropZone from './components/cms/DropZone';
+import SortableList from './components/cms/sorting/List';
+
+/** CRM Components */
+import AsyncSelect from './components/crm/AsyncSelect';
+import Autocomplete from './components/crm/Autocomplete';
+import Breadcrumb from './components/crm/Breadcrumb';
+import Call from './components/crm/Call';
+import CustomFetch from './components/crm/Fetch';
+import Download from './components/crm/Download';
+import Field from './components/crm/Field';
+import Form from './components/crm/Form';
+import Loader from './components/crm/Loader';
+import MultiSelect from './components/crm/MultiSelect';
+import Navigation from './components/crm/Navigation';
+import Notification from './components/crm/Notification';
+import SelectList from './components/crm/SelectList';
+import Select from './components/crm/Select';
+import Table from './components/crm/DataGrid';
+import TableFilter from './components/crm/TableFilter';
+
+/** Auth Specific Components */
+import Login from './components/crm/auth/Login';
+import Profile from './components/crm/auth/Profile';
+import Reset from './components/crm/auth/Reset';
+import Verify from './components/crm/auth/Verify';
+
+/** CMS Generic Components */
+import CmsDetail from './components/cms/generic/CmsDetail';
+import CmsIndex from './components/cms/generic/CmsIndex';
+import CmsSort from './components/cms/generic/CmsSort';
+
+/** CRM Generic Components */
+import AuditLog from './components/crm/generic/AuditLog';
+import AuditLogs from './components/crm/generic/AuditLogs';
+import GenericAuth from './components/crm/generic/GenericAuth';
+import GenericDetail from './components/crm/generic/GenericDetail';
+import GenericDynamic from './components/crm/generic/GenericDynamic';
+import GenericFormBuilder from './components/crm/generic/GenericFormBuilder';
+import GenericIndex from './components/crm/generic/GenericIndex';
+import GenericMain from './components/crm/generic/GenericMain';
+import GenericSort from './components/crm/generic/GenericSort';
+import NotificationList from './components/crm/generic/NotificationList';
+
+export {
+    AsyncSelect,
+    AuditLog,
+    AuditLogs,
+    Autocomplete,
+    Breadcrumb,
+    Call,
+    CmsDetail,
+    CmsForm,
+    CmsIndex,
+    CmsSort,
+    CustomFetch,
+    DataGrid,
+    Download,
+    DropZone,
+    Field,
+    Form,
+    GenericAuth,
+    GenericDetail,
+    GenericDynamic,
+    GenericFormBuilder,
+    GenericIndex,
+    GenericMain,
+    GenericSort,
+    Loader,
+    Login,
+    MultiSelect,
+    Navigation,
+    Notification,
+    NotificationList,
+    Profile,
+    Reset,
+    SelectList,
+    Select,
+    SortableList,
+    Table,
+    TableFilter,
+    Verify,
+};