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

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

@@ -18,39 +18,6 @@
     margin: 5px;
 }
 
-.crmtitle {
-    border: none;
-    min-height: auto;
-    padding: 10px 20px;
-    margin: 5px;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid var(--border-color);
-    position: relative;
-}
-
-.crmtitle h1 {
-    font-weight: 700;
-    font-size: 1.25em;
-    margin: 0;
-    padding: 0.25rem 0;
-    color: var(--paragraph-color);
-    text-transform: capitalize;
-}
-
-.crmtitle h1 a {
-    text-decoration: none;
-    color: var(--secondary-color-dark);
-    font-weight: 300;
-}
-
-.crmtitle h1 svg {
-    color: rgba(var(--primary-color-rgb), 0.85);
-    position: relative;
-    top: 2px;
-    margin: 0 0.25rem;
-}
-
 .grid__subrow {
     width: 100%;
     display: flex;
@@ -62,14 +29,14 @@
     flex: 1;
     background: white;
     border-radius: var(--br);
-    border: 1px solid var(--border-color);
     box-sizing: border-box;
     padding: 5px;
-    margin: 5px;
+    margin: 8px 0;
     height: auto;
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
-.grid__subnav ul {
+.grid__subnav > ul {
     width: 100%;
     list-style: none;
     padding: 0;
@@ -78,20 +45,20 @@
     flex-wrap: wrap;
 }
 
-.grid__subnav ul li {
+.grid__subnav > ul li {
     width: 100%;
     margin-bottom: 3px;
 }
 
-.grid__subnav ul li a {
+.grid__subnav > ul li a {
     width: 100%;
-    padding: 8px 20px;
+    padding: 0.35rem 1rem;
     box-sizing: border-box;
     display: block;
     text-decoration: none;
-    background: var(--border-color);
-    color: var(--secondary-color);
-    border-radius: var(--br);
+    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);
     outline: none;
     cursor: pointer;
@@ -144,13 +111,13 @@
 }
 
 .grid__subcontent {
-    flex: 0 1 85%;
-    background: white;
+    flex: 0 1 80%;
+    background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid var(--border-color);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
-    padding: 0;
-    margin: 5px;
+    padding: 2px;
+    margin: 8px 0;
     height: auto;
     position: relative;
 }
@@ -165,59 +132,105 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: var(--border-color);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
     color: var(--paragraph-color);
-    position: relative;
 }
 
 .gridtxt__header span {
     font-weight: 700;
 }
 
-.gridtxt__header .btn {
-    font-size: 0.85em;
-    padding: 0.25em;
+.gridtxt > ul {
+    width: 100%;
     display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    float: left;
-    position: relative;
-    top: -4px;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    box-sizing: border-box;
+    padding: 0.85rem;
+    margin: 0;
 }
 
-.gridtxt__header .btn svg {
-    max-width: 15px;
-    margin-right: 5px;
+.gridtxt > ul li {
+    flex: 0 0 calc(50% - 10px);
+    padding: 0.85rem;
+    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;
+    border-radius: var(--br);
+    line-height: 1.45;
+    font-size: 1rem;
 }
 
 .formcontainer {
     width: 100%;
-}
 
-.modalForm {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: wrap;
+    form {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1em;
+    }
 }
 
 .formItem {
-    width: 50%;
-    padding: 0.35em;
+    width: 100%;
     position: relative;
     box-sizing: border-box;
+
+    .fi__label {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+
+    .fi__span {
+        position: absolute;
+        transition: all 200ms;
+        opacity: 0.8;
+        left: 0;
+        transform-origin: top left;
+        cursor: text;
+    }
+
+    .fi__div {
+        transition: all 200ms;
+        opacity: 0.8;
+        left: 0;
+        padding: 19px 13px;
+        border-radius: var(--radius);
+        border: 1px solid rgba(var(--paragraph-rgb), 0.15);
+        box-shadow: none;
+    }
+
+    .fi__toggle {
+        width: max-content;
+        padding: 0 10px 0 0;
+        box-sizing: border-box;
+        display: inline;
+    }
+
+    .fi__toggletxt {
+        position: relative;
+        left: 5px;
+        font-size: 0.95em;
+        top: -5px;
+    }
 }
 
-.formItem .fi__label {
-    position: relative;
-    display: block;
+.fwItem,
+.fwBuilderItem {
+    grid-column: 1 / -1;
+    width: 100%;
 }
 
 .formItem textarea,
@@ -264,6 +277,10 @@
     border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
 }
 
+.formItem textarea {
+    line-height: 1.65 !important;
+}
+
 input[type='file'] {
     background: var(--item-color) !important;
     border-radius: var (--br) !important;
@@ -299,9 +316,9 @@ input[type='file']:hover {
 .fi__span {
     position: absolute;
     transition: all 200ms;
-    opacity: 0.8;
+    opacity: 1;
     left: 0;
-    padding: 19px 20px;
+    padding: 0 1rem;
     transform-origin: top left;
     cursor: text;
 }
@@ -360,93 +377,21 @@ input[type='file']:hover {
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
+    transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
-    padding: 0 4px;
+    padding: 0;
     background: var(--tertiary-color);
     font-weight: 300;
-    border-radius: var(--br);
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
 
 .prefocus {
-    transform: translateY(-40%) translateX(10px) scale(0.75) !important;
-    opacity: 1 !important;
-    padding: 0 4px !important;
-    background: var(--tertiary-color) !important;
-    z-index: 500;
-    font-weight: 300;
-    border-radius: var(--br);
-    top: 0;
-}
-/* Modal class */
-.modalwrap {
+    transform: translateY(-110%) translateX(10px) scale(0.75);
+    opacity: 1;
+    padding: 0;
     background: var(--tertiary-color);
-    border-radius: 3px;
-    overflow: visible;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
-}
-
-.modal {
-    width: 100%;
-    position: relative;
-}
-
-.modal__header {
-    width: 100%;
-    background: var(--primary-color);
-    border: 2px solid rgba(var(--primary-color-rgb), 1.05);
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
-    box-sizing: border-box;
-}
-
-.modal__header h1 {
-    color: var(--secondary-color);
-    margin: 0;
-    padding: 0.75em 0.75em;
-    font-size: 1.15em;
-}
-
-.modal__close {
-    width: max-content;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    box-sizing: border-box;
-    background: rgba(var(--primary-color-rgb), 1.08);
-    cursor: pointer;
-    padding: 8px 8px;
-    margin: 0;
-    outline: none;
-    border: none;
-    border-radius: var(--br);
-    display: block;
-    line-height: 1;
-}
-
-.modal__close svg {
-    color: var(--secondary-color);
-    display: block;
-}
-
-.modal__content {
-    width: 100%;
-    position: relative;
-    padding: 0.25rem;
-    box-sizing: border-box;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
-}
-
-.modal__content .btn {
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color-rgb), 1.05);
-}
-
-.modal__content .btn:hover {
-    background: var(--secondary-color);
-    color: var(--tertiary-color);
+    font-weight: 300;
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
 
 /* Adding btn class */
@@ -500,49 +445,6 @@ select:not(:placeholder-shown) + .fi__span {
     border-color: red !important;
 }
 
-.AutocompletePlace {
-    position: relative;
-}
-
-.AutocompletePlace svg {
-    position: absolute;
-    right: 0.5em;
-    top: 0.5em;
-    color: var(--paragraph-color);
-    cursor: pointer;
-}
-
-.AutocompletePlace .toggleActive {
-    color: var(--highlight-color);
-}
-
-.AutocompletePlace-input {
-    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
-    height: 51.5px;
-}
-
-.AutocompletePlace-results {
-    position: absolute;
-    background-color: white;
-    padding: 0;
-    margin: 0;
-    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
-    border-radius: var(--br);
-    overflow: hidden;
-    z-index: 999;
-}
-
-.AutocompletePlace-items {
-    list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
-    cursor: pointer;
-    padding: 10px 10px;
-}
-
-.AutocompletePlace-items:hover {
-    background-color: rgba(var(--paragraph-color-rgb), 0.065);
-}
-
 .react-datepicker-wrapper {
     width: 100% !important;
 }

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

@@ -0,0 +1,178 @@
+.schedulingTable {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1em 0;
+
+    th,
+    td {
+        padding: 0.75rem;
+        text-align: left;
+        border: 1px solid rgba(var(--primary-rgb), 0.1);
+    }
+
+    th {
+        background-color: var(--secondary-color);
+        color: var(--item-color);
+        font-weight: bold;
+    }
+
+    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;
+}
+
+.noDataMessage {
+    text-align: center;
+    color: var(--secondary-color);
+    font-size: 1.125em;
+    padding: 1.5em;
+    margin: 2em auto;
+    background: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    max-width: 600px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    font-style: italic;
+}
+
+.polActions {
+    position: fixed;
+    bottom: 15px;
+    right: 20px;
+    width: auto;
+
+    button {
+        display: block;
+        padding: 0.35em 1em;
+        margin: 0 0.15em;
+    }
+}
+
+.gridtxt {
+    &__header {
+        width: 100%;
+        display: block;
+        background: rgba(var(--primary-rgb), 0.05);
+        box-sizing: border-box;
+        padding: 10px 20px;
+        border-radius: var(--br);
+        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-wrap: wrap;
+        list-style: none;
+        padding: 0.85rem;
+        margin: 0;
+
+        li {
+            flex: 0 0 calc(50% - 10px);
+            padding: 0.65rem;
+            border: 1px solid rgba(var(--primary-rgb), 0.095);
+            color: var(--paragraph-color);
+            background: rgba(var(--primary-rgb), 0.015);
+            margin: 3px;
+            border-radius: var(--br);
+            line-height: 1.45;
+            font-size: 0.85rem;
+
+            &.fw-grid-item {
+                flex: 0 0 calc(100% - 10px);
+            }
+
+            &.notecolor {
+                border: 1px solid var(--secondary-color);
+            }
+        }
+    }
+}
+
+.btn {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+    font-size: 1.25em;
+}
+
+.btn:hover {
+    color: var(--primary-color);
+    background: var(--highlight-color);
+    border: 1px solid rgba(var(--highlight-rgb), 1.05);
+}
+
+.tdactions {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.1rem;
+
+    span {
+        display: flex;
+        align-items: center;
+        position: relative;
+        width: 18px;
+        height: 18px;
+
+        svg {
+            width: 18px;
+            height: 18px;
+        }
+    }
+}
+
+.noDataMessage {
+    text-align: center;
+    color: var(--primary-color);
+    font-size: 1rem;
+    padding: 2rem;
+    margin: 2rem auto;
+    background-color: var(--secondary-bg-color, #f8f8f8);
+    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border-radius: 6px;
+    max-width: 80%;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    font-weight: 500;
+    font-family: var(--font-family, Arial, sans-serif);
+}
+
+.noDataMessage:hover {
+    background-color: rgba(var(--primary-rgb), 0.05);
+    border-color: rgba(var(--primary-rgb), 0.2);
+}