cortex-react-ui 0.2.20 → 0.2.22

package/lib/styles/Dialog/index.scss

@@ -1,265 +0,0 @@
-@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

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

package/lib/styles/Input/index.scss

@@ -1,69 +0,0 @@
-@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

@@ -1,50 +0,0 @@
-@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

@@ -1,131 +0,0 @@
-@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

@@ -1,24 +0,0 @@
-@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

@@ -1,110 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-@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);
-
-}