cortex-react-ui 0.2.22 → 0.2.23

package/lib/styles/Dialog/index.scss

@@ -0,0 +1,265 @@
+@use "../global.scss";
+
+@mixin dialog($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        bgColor: #ffffff,
+        fgColor: global.$color-grey-darker,
+        closeBtnColor: global.$color-grey,
+        closeBtnHoverColor: global.$color-blue,
+        closeBtnDisableColor: global.$color-blue-grey-lighter,
+        confirm: (
+            headerBgColor: global.$color-orange-dark,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: global.$color-grey-darker,
+        ),
+        error: (
+            headerBgColor: global.$color-red,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: global.$color-grey-darker,
+        ),
+        warning: (
+            headerBgColor: global.$color-grey,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: global.$color-grey-darker,
+        ),        
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .ui-dialog {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1300;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 1;
+        padding: global.$spacer;
+    }
+
+    .ui-dialog-overlay {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        position: fixed;
+        touch-action: none;
+        background-color: rgba(0, 0, 0, 0.5);
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .ui-dialog-container {
+        display: flex;
+        min-width: 400px;
+        flex: 0 1 auto;
+        max-height: 100%;
+        position: relative;
+        flex-direction: column;
+        background: global.get-map-deep($internal-props, "bgColor");
+        color: global.get-map-deep($internal-props, "fgColor");
+        border-radius: 4px;
+        box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+            0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+        animation: dialogExpand 0.15s ease-in-out;
+        min-height: 200px;
+        overflow: hidden;
+    }
+
+    .ui-dialog-content {
+        position: relative;
+        overflow: auto;
+        max-height: 100%;
+        max-width: 100%;
+        height: auto;
+        width: auto;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        flex: 1 1 auto;
+        padding: 10px 20px 15px 20px;
+    }
+
+    .ui-dialog-title {
+        display: flex;
+        margin: 20px 20px 10px 20px;
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    .ui-dialog-actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 8px;
+    }
+
+    .ui-dialog-header {
+        flex: 0 0 auto;
+    }
+
+    .ui-dialog-footer {
+        display: flex;
+        flex: 0 0 auto;
+        text-align: right;
+
+        .btn:not(:last-child) {
+            margin-right: 10px;
+        }
+    }
+
+    .ui-dialog-close {
+        font-size: 1.5rem;
+        background: none;
+        appearance: none;
+        border: 0;
+        padding: global.$spacer-xs;
+        margin: 0;
+        display: inline-flex;
+        margin-left: auto;
+        cursor: pointer;
+        color: global.get-map-deep($internal-props, "closeBtnColor");
+        transition: color 250ms;
+
+        &:not(.ui-dialog-close-disable):hover {
+            color: global.get-map-deep($internal-props, "closeBtnHoverColor");
+        }
+    }
+
+    .ui-dialog-close-disable {
+        color: global.get-map-deep($internal-props, "closeBtnDisableColor");
+    }
+
+    .ui-dialog-box {
+        z-index: 5000;
+
+        .ui-dialog-header {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 30px 20px;
+        }
+
+        .ui-dialog-icon {
+            width: 80px;
+            height: 80px;
+        }
+
+        .ui-dialog-title {
+            font-size: 1.2em;
+            margin: 15px 0 0 0;
+            padding: 0;
+        }
+
+        .ui-dialog-content {
+            padding: 30px 40px;
+        }
+
+        .ui-dialog-footer {
+            justify-content: center;
+            padding: 10px 20px;
+        }
+    }
+
+    .ui-dialog-size-xs {
+        max-width: 444px;
+    }
+
+    .ui-dialog-size-sm {
+        max-width: 600px;
+    }
+
+    .ui-dialog-size-md {
+        max-width: 900px;
+    }
+
+    .ui-dialog-size-lg {
+        max-width: 1200px;
+    }
+
+    .ui-dialog-size-xl {
+        max-width: 100%;
+    }
+
+    .ui-dialog-size-fullwidth {
+        width: 100%;
+    }
+
+    .ui-dialog-size-fullheight {
+        height: 100%;
+    }
+
+    .ui-dialog-confirm {
+        .ui-dialog-header {
+            background-color: global.get-map-deep($internal-props, "confirm.headerBgColor");
+            color: global.get-map-deep($internal-props, "confirm.headerFgColor");
+        }
+
+        .ui-dialog-icon {
+            fill: global.get-map-deep($internal-props, "confirm.headerFgColor");
+        }
+
+        .ui-dialog-content {
+            text-align: center;
+            background: global.get-map-deep($internal-props, "confirm.bgColor");
+            color: global.get-map-deep($internal-props, "confirm.fgColor");
+        }
+
+        .ui-dialog-action-ok {
+            background-color: global.get-map-deep($internal-props, "confirm.headerBgColor");
+            color: global.get-map-deep($internal-props, "confirm.headerFgColor");
+        }
+    }
+
+    .ui-dialog-error {
+        .ui-dialog-header {
+            background-color: global.get-map-deep($internal-props, "error.headerBgColor");
+            color: global.get-map-deep($internal-props, "error.headerFgColor");
+        }
+
+        .ui-dialog-icon {
+            fill: global.get-map-deep($internal-props, "error.headerFgColor");
+        }
+
+        .ui-dialog-content {
+            text-align: center;
+            background: global.get-map-deep($internal-props, "error.bgColor");
+            color: global.get-map-deep($internal-props, "error.fgColor");
+        }
+
+        .ui-dialog-action-ok {
+            background-color: global.get-map-deep($internal-props, "error.headerBgColor");
+            color: global.get-map-deep($internal-props, "error.headerFgColor");
+        }
+    }
+
+    .ui-dialog-warning {
+        .ui-dialog-header {
+            background-color: global.get-map-deep($internal-props, "warning.headerBgColor");
+            color: global.get-map-deep($internal-props, "warning.headerFgColor");
+        }
+
+        .ui-dialog-icon {
+            fill: global.get-map-deep($internal-props, "warning.headerFgColor");
+        }
+
+        .ui-dialog-content {
+            text-align: center;
+            background: global.get-map-deep($internal-props, "warning.bgColor");
+            color: global.get-map-deep($internal-props, "warning.fgColor");
+        }
+
+        .ui-dialog-action-ok {
+            background-color: global.get-map-deep($internal-props, "warning.headerBgColor");
+            color: global.get-map-deep($internal-props, "warning.headerFgColor");
+        }
+    }
+}

package/lib/styles/Icons/index.scss

@@ -0,0 +1,9 @@
+@use "../global.scss";
+
+@mixin icons($props: null, $options: null) {
+    .ui-icon {
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+    }
+}

package/lib/styles/Input/index.scss

@@ -0,0 +1,69 @@
+@use "../global.scss";
+
+@mixin input($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        color: blue,
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .ui-input-container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .ui-input {
+        position: relative;
+        box-sizing: border-box;
+        display: inline-flex;
+        height: 56px;
+        overflow: hidden;
+        background-color: #f5f5f5;
+        border-radius: 4 px 4 px 0 0;
+    }
+
+    .ui-input-label {
+        position: absolute;
+        left: 16px;
+        top: 50%;
+        font-size: 1rem;
+        line-height: 1.75rem;
+        font-weight: 400;
+        text-transform: inherit;
+        transform-origin: left top;
+        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        line-height: 1.15rem;
+        text-align: left;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: text;
+        overflow: hidden;
+        transform: translateY(-50%);
+        pointer-events: none;
+    }
+
+    .ui-input-label-above {
+        transform: translateY(-106%) scale(0.75);
+    }
+
+    .ui-input-field {
+        border: none;
+        border-bottom: 1px solid;
+        border-radius: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0 16px;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .ui-input-helper-line {
+        padding-right: 16px;
+        padding-left: 16px;
+    }
+}

package/lib/styles/Map/index.scss

@@ -0,0 +1,50 @@
+@use "../global.scss";
+
+@mixin map($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        bgColor: #212121,
+        fgColor: #fff,
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .cortex-widget-buttons {
+        margin: 20px;
+        text-align: right;
+      }
+    
+      .leaflet-container {
+        height: 85% !important;
+      }
+    
+      .cortex-widget-viewport {
+        position: absolute;
+        inset: 100px;
+      }
+    
+      .cortex-widget-btn {
+        color: #fff;
+        font-size: 14px;
+        padding: 6px 12px;
+        cursor: pointer;
+        border: 0;
+        border-radius: 3px;
+        box-shadow: none;
+        width: 100px;
+      }
+    
+      .cortex-widget-btn-cancel {
+        margin: 10px;
+        background-color: #337ab7;
+        border-color: #2e6da4;
+      }
+    
+      .cortex-widget-btn-save {
+        color: #fff;
+        background-color: #5cb85c;
+        border-color: #4cae4c;
+      }
+}

package/lib/styles/Menu/index.scss

@@ -0,0 +1,131 @@
+@use "../global.scss";
+
+@mixin menu($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        background-color: #fff,
+        group: (
+            color: #fff,
+            background-color: global.$color-grey-dark,
+        ),
+        item: (
+            color: #000,
+            colorDisable: global.$color-grey,
+            background-color: #fff,
+        ),
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .ui-menu-popper {
+        z-index: 3000;
+    }
+
+    .ui-menu {
+        @if global.showProps($internal-options) {
+            box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
+            min-width: 180px;
+            user-select: none;
+            margin: 0;
+            padding: 0;
+            z-index: 100;
+        }
+        @if global.showColors($internal-options) {
+            background-color: global.get-map-deep($internal-props, "background-color");
+        }
+    }
+
+    .ui-menuList {
+        @if global.showProps($internal-options) {
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    .ui-menu .ui-menu {
+        max-height: 94vh;
+        overflow: auto;
+        position: absolute;
+        top: 0;
+        left: 92%;
+        // opacity: 0;
+    }
+
+    .ui-menuItem {
+        @if global.showProps($internal-options) {
+            position: relative;
+            display: block;
+            white-space: nowrap;
+            cursor: pointer;
+        }
+        @if global.showColors($internal-options) {
+            background-color: global.get-map-deep($internal-props, "item.background-color");
+        }
+
+        &:hover:not(.ui-menuItem-disable) {
+            background-color: #39b1d1;
+
+            > .ui-menuItem-btn {
+                color: #fff;
+            }
+        }
+    }
+
+    .ui-menuItem-disable {
+        cursor: default;
+
+        .ui-menuItem-btn {
+            color: global.get-map-deep($internal-props, "item.colorDisable");
+        }
+
+        .ui-menuItem-icon {
+            opacity: 0.2;
+        }
+    }
+
+    .ui-menuItem-btn {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: (global.$spacer-xs * 3) global.$spacer-sm (global.$spacer-xs * 3) global.$spacer;
+        background: transparent;
+        border: 0;
+        font-size: 0.9em;
+        cursor: pointer;
+
+        @if global.showColors($internal-options) {
+            color: global.get-map-deep($internal-props, "item.color");
+        }
+    }
+
+    .ui-menuItem-icon {
+        display: flex;
+        align-items: center;
+        margin-right: global.$spacer-sm;
+    }
+
+    .ui-menuItem-menuIconContainer{
+        margin-left: auto;
+    }
+
+    .ui-menuItem-menuIcon {
+
+    }
+
+    .ui-group-title {
+        @if global.showProps($internal-options) {
+            position: relative;
+            display: block;
+            white-space: nowrap;
+            padding: global.$spacer-sm global.$spacer-md;
+            cursor: pointer;
+        }
+
+        @if global.showColors($internal-options) {
+            color: global.get-map-deep($internal-props, "group.color");
+            background-color: global.get-map-deep($internal-props, "group.background-color");
+        }
+    }
+}

package/lib/styles/Popper/index.scss

@@ -0,0 +1,24 @@
+@use "../global.scss";
+
+@mixin popper($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        bgColor: #212121,
+        fgColor: #fff,
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    // .ui-popper {
+    //     @if get-map-deep($internal-options, "properties") == true {
+    //         padding: 8px;
+    //         border-radius: 4px;
+    //     }
+    //     @if get-map-deep($internal-options, "colors") == true {
+    //         background-color: get-map-deep($internal-props, "bgColor");
+    //         color: get-map-deep($internal-props, "fgColor");
+    //     }
+    // }
+}

package/lib/styles/Scanner/index.scss

@@ -0,0 +1,110 @@
+@use "../global.scss";
+
+@mixin scanner($props: null, $options: null) {
+	$internal-options: global.$default-options;
+
+    $internal-props: (
+        bgColor: #ffffff,
+        fgColor: global.$color-grey-darker,
+        closeBtnColor: global.$color-grey,
+        closeBtnHoverColor: global.$color-blue,
+        closeBtnDisableColor: global.$color-blue-grey-lighter,
+        confirm: (
+            headerBgColor: global.$color-orange-dark,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: global.$color-grey-darker,
+        ),
+        error: (
+            headerBgColor: global.$color-red,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: global.$color-grey-darker,
+        ),
+        warning: (
+            headerBgColor: global.$color-grey,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: global.$color-grey-darker,
+        ),        
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+	
+	.btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem 1rem;
+		border: 1px solid transparent;
+		border-radius: 0.375rem;
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.25rem;
+		text-align: center;
+		text-transform: none;
+		white-space: nowrap;
+		vertical-align: middle;
+		user-select: none;
+		background-color: #4F46E5;
+		color: #fff;
+		cursor: pointer;
+		outline: none;
+		transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
+	}
+
+	.btn-default {
+		background-color: #4F46E5;
+	}
+
+	.btn-default:hover {
+		opacity: 0.8;
+	}
+
+	.select {
+		display: block;
+		width: 100%;
+		padding-left: 0.75rem;
+		color: #000;
+		padding-right: 2.5rem;
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem;
+		font-size: 1rem;
+		border-radius: 0.375rem;
+	}
+
+	/* DIALOG */
+	.dialog-header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.dialog-header h4 {
+		margin: 0;
+	}
+
+	.dialog-mask {
+		overflow-x: hidden;
+		overflow-y: auto;
+		display: flex;
+		justify-content: center;
+		padding-top: 2.5rem;
+		padding-bottom: 5rem;
+		background-color: #0005;
+		position: fixed;
+		inset: 0;
+	}
+
+	.dialog-body {
+		display: flex;
+		flex-direction: column;
+		gap: 1.25rem;
+		padding: 1.25rem;
+		height: max-content;
+		background-color: white;
+	}
+
+	/* DIALOG */
+}

package/lib/styles/Select/index.scss

@@ -0,0 +1,13 @@
+@import "../global.scss";
+
+@mixin select($props: null, $options: null) {
+    $internal-options: $default-options;
+
+    $internal-props: (
+        color: blue,
+    );
+
+    $internal-props: safe-map-merge($internal-props, $props);
+    $internal-options: safe-map-merge($internal-options, $options);
+
+}