cortex-react-ui 0.1.106 → 0.1.108

package/lib/styles/Dialog/index.scss

@@ -1,237 +1,237 @@
-@import "../global.scss";
-
-@mixin dialog($props: null, $options: null) {
-    $internal-options: $default-options;
-
-    $internal-props: (
-        bgColor: #ffffff,
-        fgColor: $color-grey-darker,
-        closeBtnColor: $color-grey,
-        closeBtnHoverColor: $color-blue,
-        closeBtnDisableColor: $color-blue-grey-lighter,
-        confirm: (
-            headerBgColor: $color-orange-dark,
-            headerFgColor: #ffffff,
-            bgColor: #ffffff,
-            fgColor: $color-grey-darker,
-        ),
-        error: (
-            headerBgColor: $color-red,
-            headerFgColor: #ffffff,
-            bgColor: #ffffff,
-            fgColor: $color-grey-darker,
-        ),
-    );
-
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: 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: $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: get-map-deep($internal-props, "bgColor");
-        color: 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: $spacer-xs;
-        margin: 0;
-        display: inline-flex;
-        margin-left: auto;
-        cursor: pointer;
-        color: get-map-deep($internal-props, "closeBtnColor");
-        transition: color 250ms;
-
-        &:not(.ui-dialog-close-disable):hover {
-            color: get-map-deep($internal-props, "closeBtnHoverColor");
-        }
-    }
-
-    .ui-dialog-close-disable {
-        color: 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: get-map-deep($internal-props, "confirm.headerBgColor");
-            color: get-map-deep($internal-props, "confirm.headerFgColor");
-        }
-
-        .ui-dialog-icon {
-            fill: get-map-deep($internal-props, "confirm.headerFgColor");
-        }
-
-        .ui-dialog-content {
-            text-align: center;
-            background: get-map-deep($internal-props, "confirm.bgColor");
-            color: get-map-deep($internal-props, "confirm.fgColor");
-        }
-
-        .ui-dialog-action-ok {
-            background-color: get-map-deep($internal-props, "confirm.headerBgColor");
-            color: get-map-deep($internal-props, "confirm.headerFgColor");
-        }
-    }
-
-    .ui-dialog-error {
-        .ui-dialog-header {
-            background-color: get-map-deep($internal-props, "error.headerBgColor");
-            color: get-map-deep($internal-props, "error.headerFgColor");
-        }
-
-        .ui-dialog-icon {
-            fill: get-map-deep($internal-props, "error.headerFgColor");
-        }
-
-        .ui-dialog-content {
-            text-align: center;
-            background: get-map-deep($internal-props, "error.bgColor");
-            color: get-map-deep($internal-props, "error.fgColor");
-        }
-
-        .ui-dialog-action-ok {
-            background-color: get-map-deep($internal-props, "error.headerBgColor");
-            color: get-map-deep($internal-props, "error.headerFgColor");
-        }
-    }
-}
+@import "../global.scss";
+
+@mixin dialog($props: null, $options: null) {
+    $internal-options: $default-options;
+
+    $internal-props: (
+        bgColor: #ffffff,
+        fgColor: $color-grey-darker,
+        closeBtnColor: $color-grey,
+        closeBtnHoverColor: $color-blue,
+        closeBtnDisableColor: $color-blue-grey-lighter,
+        confirm: (
+            headerBgColor: $color-orange-dark,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: $color-grey-darker,
+        ),
+        error: (
+            headerBgColor: $color-red,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: $color-grey-darker,
+        ),
+    );
+
+    $internal-props: safe-map-merge($internal-props, $props);
+    $internal-options: 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: $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: get-map-deep($internal-props, "bgColor");
+        color: 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: $spacer-xs;
+        margin: 0;
+        display: inline-flex;
+        margin-left: auto;
+        cursor: pointer;
+        color: get-map-deep($internal-props, "closeBtnColor");
+        transition: color 250ms;
+
+        &:not(.ui-dialog-close-disable):hover {
+            color: get-map-deep($internal-props, "closeBtnHoverColor");
+        }
+    }
+
+    .ui-dialog-close-disable {
+        color: 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: get-map-deep($internal-props, "confirm.headerBgColor");
+            color: get-map-deep($internal-props, "confirm.headerFgColor");
+        }
+
+        .ui-dialog-icon {
+            fill: get-map-deep($internal-props, "confirm.headerFgColor");
+        }
+
+        .ui-dialog-content {
+            text-align: center;
+            background: get-map-deep($internal-props, "confirm.bgColor");
+            color: get-map-deep($internal-props, "confirm.fgColor");
+        }
+
+        .ui-dialog-action-ok {
+            background-color: get-map-deep($internal-props, "confirm.headerBgColor");
+            color: get-map-deep($internal-props, "confirm.headerFgColor");
+        }
+    }
+
+    .ui-dialog-error {
+        .ui-dialog-header {
+            background-color: get-map-deep($internal-props, "error.headerBgColor");
+            color: get-map-deep($internal-props, "error.headerFgColor");
+        }
+
+        .ui-dialog-icon {
+            fill: get-map-deep($internal-props, "error.headerFgColor");
+        }
+
+        .ui-dialog-content {
+            text-align: center;
+            background: get-map-deep($internal-props, "error.bgColor");
+            color: get-map-deep($internal-props, "error.fgColor");
+        }
+
+        .ui-dialog-action-ok {
+            background-color: get-map-deep($internal-props, "error.headerBgColor");
+            color: get-map-deep($internal-props, "error.headerFgColor");
+        }
+    }
+}

package/lib/styles/Icons/index.scss

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

package/lib/styles/Input/index.scss

@@ -1,69 +1,69 @@
-@import "../global.scss";
-
-@mixin input($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);
-
-    .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;
-    }
-}
+@import "../global.scss";
+
+@mixin input($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);
+
+    .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;
+    }
+}