@visns-studio/visns-components 4.10.14 → 4.10.16

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

@@ -364,3 +364,162 @@ input[type='file']:hover {
     max-width: 15px;
     margin-right: 5px;
 }
+
+.modalwrap {
+    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;
+
+        &__header {
+            width: 100%;
+            background: var(--primary-color);
+            border: 2px solid rgba(var(--primary-color), 1.05);
+            border-top-left-radius: var(--br);
+            border-top-right-radius: var(--br);
+            box-sizing: border-box;
+
+            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), 1.08);
+                cursor: pointer;
+                padding: 8px 8px;
+                margin: 0;
+                outline: none;
+                border: none;
+                border-radius: var(--br);
+                display: block;
+                line-height: 1;
+
+                svg {
+                    color: var(--secondary-color);
+                    display: block;
+                }
+            }
+        }
+
+        &__content {
+            width: 100%;
+            position: relative;
+            padding: 0.25rem;
+            box-sizing: border-box;
+            border-top-left-radius: var(--br);
+            border-top-right-radius: var(--br);
+
+            .btn {
+                background: var(--primary-color);
+                border: 1px solid rgba(var(--primary-color), 1.05);
+
+                &:hover {
+                    background: var(--secondary-color);
+                    color: var(--tertiary-color);
+                }
+            }
+        }
+    }
+}
+
+.top--modal {
+    width: 100%;
+    max-width: 1000px !important;
+    height: auto;
+    // display: none;
+    padding: 0 !important;
+}
+
+// Canvas
+
+.drawDiv {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    img {
+        width: 100%;
+        max-width: 470px;
+        display: block;
+        margin: 0 auto;
+    }
+}
+
+.drawactions {
+    width: 100%;
+    height: auto;
+    list-style: none;
+    padding: 0 1em 0 0;
+    margin: 0;
+    flex: 1;
+    box-sizing: border-box;
+
+    li {
+        width: 100%;
+        margin: 0 0 2px 0;
+
+        button {
+            width: 100%;
+            color: var(--paragraph-color);
+            border: 1px solid transparent;
+            padding: 0.5em 1em;
+            border-radius: 6px;
+            text-align: left;
+            font-size: 0.875em;
+
+            .octicon {
+                margin-right: 8px;
+                transform: scale(0.8) translateY(-1px);
+            }
+        }
+
+        .drawactions--save {
+            background: #4ff1ba;
+            color: var(--paragraph-color);
+        }
+
+        .drawactions--clear {
+            background: #ff6a6a;
+            color: var(--paragraph-color);
+        }
+
+        .drawactive {
+            border: 1px solid rgba(var(--paragraph-color-rgb), 1.4);
+            background: rgba(var(--paragraph-color-rgb), 0.2);
+            color: rgba(var(--paragraph-color-rgb), 1.05);
+        }
+    }
+}
+
+.drawcontainer {
+    display: block;
+    flex: 0 1 80%;
+    margin: 0;
+    border: 1px dashed rgba(var(--primary-color-rgb), 1.2);
+    padding: 5px;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+.canvasWrap {
+    display: block;
+    margin: 0 auto;
+}
+
+.canvas-container {
+    display: block;
+    margin: 0 auto;
+}

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

@@ -497,3 +497,81 @@ select {
     padding: 0.35em 1em;
     margin: 0 0.15em;
 }
+
+.modalwrap {
+    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;
+
+        &__header {
+            width: 100%;
+            background: var(--primary-color);
+            border: 2px solid rgba(var(--primary-color), 1.05);
+            border-top-left-radius: var(--br);
+            border-top-right-radius: var(--br);
+            box-sizing: border-box;
+
+            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), 1.08);
+                cursor: pointer;
+                padding: 8px 8px;
+                margin: 0;
+                outline: none;
+                border: none;
+                border-radius: var(--br);
+                display: block;
+                line-height: 1;
+
+                svg {
+                    color: var(--secondary-color);
+                    display: block;
+                }
+            }
+        }
+
+        &__content {
+            width: 100%;
+            position: relative;
+            padding: 0.25rem;
+            box-sizing: border-box;
+            border-top-left-radius: var(--br);
+            border-top-right-radius: var(--br);
+
+            .btn {
+                background: var(--primary-color);
+                border: 1px solid rgba(var(--primary-color), 1.05);
+
+                &:hover {
+                    background: var(--secondary-color);
+                    color: var(--tertiary-color);
+                }
+            }
+        }
+    }
+}
+
+.top--modal {
+    width: 100%;
+    max-width: 1000px !important;
+    height: auto;
+    // display: none;
+    padding: 0 !important;
+}

package/src/index.js

@@ -45,6 +45,10 @@ import GenericMain from './components/crm/generic/GenericMain';
 import GenericSort from './components/crm/generic/GenericSort';
 import NotificationList from './components/crm/generic/NotificationList';
 
+/** Sketching Components */
+import SketchField from './components/crm/sketch/SketchField';
+import Tools from './components/crm/sketch/tools';
+
 export {
     AsyncSelect,
     AuditLog,
@@ -79,8 +83,10 @@ export {
     Reset,
     SelectList,
     Select,
+    SketchField,
     SortableList,
     Table,
     TableFilter,
+    Tools,
     Verify,
 };