cortex-react-ui 0.2.22 → 0.2.24

package/lib/styles/Button/index.scss

@@ -0,0 +1,147 @@
+@use "../global.scss";
+
+@mixin button($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: ();
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .ui-btn {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background-color: transparent;
+        outline: 0px;
+        border: 1px solid transparent;
+        margin: 0px;
+        cursor: pointer;
+        user-select: none;
+        appearance: none;
+        text-decoration: none;
+        font-family: global.$font-family;
+        font-weight: global.$font-weight-semi-bold;
+        font-size: global.$font-size-md;
+        letter-spacing: 0.02857em;
+        text-transform: uppercase;
+        min-width: 64px;
+        padding: global.$spacer-sm;
+        border-radius: global.$border-radius-xs;
+        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+            box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+            border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+            color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
+
+    .ui-btn:not(.ui-btn-disable):hover {
+        text-decoration: none;
+        background-color: rgba($color: #90a4ae, $alpha: 0.1);
+    }
+
+    .ui-btn-disable {
+        color: global.$color-blue-grey-lighter;
+    }
+
+    .ui-btn-contained {
+        &:not(.ui-btn-disable):hover {
+            text-decoration: none;
+        }
+
+        &.ui-btn-disable {
+            background-color: global.$color-blue-grey-lighter;
+            color: global.$color-grey-lighter;
+        }
+    }
+
+    .ui-btn-outlined {
+        &.ui-btn-disable {
+            border-color: global.$color-blue-grey-lighter;
+        }
+    }
+
+    .ui-btn-color-primary {
+        color: global.$color-blue-dark;
+
+        &:not(.ui-btn-disable).ui-btn-contained {
+            background-color: global.$color-blue-dark;
+            color: #fff;
+
+            &:hover {
+                background-color: global.$color-blue-darker;
+            }
+        }
+
+        &:not(.ui-btn-disable).ui-btn-outlined {
+            border-color: global.$color-blue-dark;
+
+            &:hover {
+                border-color: global.$color-blue-darker;
+            }
+        }
+    }
+
+    .ui-btn-color-secondary {
+        color: global.$color-grey-dark;
+
+        &:not(.ui-btn-disable).ui-btn-contained {
+            background-color: global.$color-grey-dark;
+            color: #fff;
+
+            &:hover {
+                background-color: global.$color-grey-darker;
+            }
+        }
+
+        &:not(.ui-btn-disable).ui-btn-outlined {
+            border-color: global.$color-grey-dark;
+
+            &:hover {
+                border-color: global.$color-grey-darker;
+            }
+        }
+    }
+
+    .ui-btn-color-success {
+        color: global.$color-green;
+
+        &:not(.ui-btn-disable).ui-btn-contained {
+            background-color: global.$color-green;
+            color: #fff;
+
+            &:hover {
+                background-color: global.$color-green-dark;
+            }
+        }
+
+        &:not(.ui-btn-disable).ui-btn-outlined {
+            border-color: global.$color-green;
+
+            &:hover {
+                border-color: global.$color-green-dark;
+            }
+        }
+    }
+
+    .ui-btn-color-danger {
+        color: global.$color-red;
+
+        &:not(.ui-btn-disable).ui-btn-contained {
+            background-color: global.$color-red;
+            color: #fff;
+
+            &:hover {
+                background-color: global.$color-red-dark;
+            }
+        }
+
+        &:not(.ui-btn-disable).ui-btn-outlined {
+            border-color: global.$color-red;
+
+            &:hover {
+                border-color: global.$color-red-dark;
+            }
+        }
+    }
+}

package/lib/styles/Camera/index.css

@@ -0,0 +1,196 @@
+.camera-container {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+}
+
+.camera-switch-btn {
+  all: initial;
+  display: flex;
+  cursor: pointer;
+}
+
+.camera-recording-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #f44336;
+  animation: clignote 1s infinite;
+}
+
+.camera-recording-timer {
+  z-index: 99;
+  position: absolute;
+  top: 1rem;
+  left: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  padding: 3px 7px;
+  font-size: 12px;
+  color: #fff;
+  font-family: sans-serif;
+  gap: 6px;
+}
+
+.camera-offline-mode {
+  position: absolute;
+  top: 1rem;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  padding: 3px 7px;
+  font-size: 12px;
+  color: red;
+  font-family: sans-serif;
+}
+
+.camera-mode {
+  z-index: 9999;
+  position: absolute;
+  bottom: 2rem;
+  right: 20px;
+  padding: 0.5rem;
+  border-radius: 6px;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+  background-color: #2196f3;
+  transition: background-color 0.3s ease;
+}
+
+.camera-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  > video {
+    margin: 0 auto;
+  }
+}
+
+.camera-controls {
+  z-index: 999;
+  position: absolute;
+  bottom: 2rem;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.video-play-btn {
+  all: initial;
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  z-index: 9;
+  width: 1em;
+  height: 1em;
+  min-width: 15px;
+  min-height: 15px;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 1px solid;
+  padding: 20px 20px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+.camera-button {
+  padding: 0.5rem;
+  border-radius: 6px;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+  transition: background-color 0.3s ease;
+}
+.camera-button--capture {
+  border-radius: 50%;
+  color: initial;
+  width: 50px;
+  height: 50px;
+  border: 1px solid black;
+  background-color: #ffffff;
+}
+.camera-button--record {
+  border-radius: 50%;
+  color: red;
+  width: 50px;
+  height: 50px;
+  border: 1px solid black;
+  background-color: #ffffff;
+}
+.camera-button--download {
+  background-color: #4caf50;
+}
+.camera-button--download:hover {
+  background-color: #388e3c;
+}
+.camera-button--reset {
+  background-color: #9e9e9e;
+}
+.camera-button--reset:hover {
+  background-color: #757575;
+}
+
+.camera-offline-mode {
+  font-size: 0.875rem;
+  font-family: sans-serif;
+  color: #d32f2f;
+}
+
+.camera-screen-animation {
+  animation: fadeIn 0.3s;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes clignote {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/*# sourceMappingURL=index.css.map */

package/lib/styles/Camera/index.scss

@@ -0,0 +1,241 @@
+@use "sass:map";
+@use "../global.scss";
+
+@mixin camera($props: null, $options: null) {
+    $internal-props: (
+        bgColor: #ffffff,
+        fgColor: global.$color-grey-darker,
+        captureButtonBg: #2196f3,
+        captureButtonHover: #1976d2,
+        recordButtonBg: #f44336,
+        recordButtonHover: #d32f2f,
+        downloadButtonBg: #4caf50,
+        downloadButtonHover: #388e3c,
+        resetButtonBg: #9e9e9e,
+        resetButtonHover: #757575,
+        offlineModeColor: #d32f2f
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+
+    .camera-container {
+        width: 100%;
+        height: 100%;
+        background-color: #000;
+    }
+
+    .camera-switch {
+        z-index: 9999;
+        position: absolute;
+        bottom: 2rem;
+        right: 90px;
+        padding: 0.5rem;
+        border-radius: 6px;
+        color: #ffffff;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: map.get($internal-props, captureButtonBg);
+        transition: background-color 0.3s ease;
+    }
+
+    .camera-switch-btn {
+        all: initial;
+        display: flex;
+        cursor: pointer;
+    }
+
+    .camera-recording-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: map.get($internal-props, recordButtonBg);
+        animation: clignote 1s infinite;
+    }
+    
+    .camera-recording-timer {
+        z-index: 99;
+        position: absolute;
+        top: 1rem;
+        left: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, .2);
+        border-radius: 4px;
+        padding: 3px 7px;
+        font-size: 12px;
+        color: #fff;
+        font-family: sans-serif;
+        gap: 6px;
+    }
+
+    .camera-offline-mode {
+        position: absolute;
+        top: 1rem;
+        right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, .2);
+        border-radius: 4px;
+        padding: 3px 7px;
+        font-size: 12px;
+        color: red;
+        font-family: sans-serif;
+    }
+
+    .camera-mode {
+        z-index: 9999;
+        position: absolute;
+        bottom: 2rem;
+        right: 20px;
+        padding: 0.5rem;
+        border-radius: 6px;
+        color: #ffffff;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 7px;
+        background-color: map.get($internal-props, captureButtonBg);
+        transition: background-color 0.3s ease;
+    }
+
+    .camera-preview {
+        position: relative;
+        width: 100%;
+        height: 90%;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .camera-controls {
+        z-index: 999;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem;
+        width: 100%;
+        flex-direction: row;
+    }
+
+    .video-play-btn {
+        all: initial;
+        position: absolute;
+        bottom: 10%;
+        left: 50%;
+        z-index: 9;
+        width: 1em;
+        height: 1em;
+        min-width: 15px;
+        min-height: 15px;
+        transform: translate(-50%, -50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        border: 1px solid;
+        padding: 20px 20px;
+        background-color: map.get($internal-props, bgColor);
+        cursor: pointer;
+    }
+
+    .camera-button {
+        padding: 0.5rem;
+        border-radius: 6px;
+        color: #ffffff;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 7px;
+        min-width: 50px;
+        transition: background-color 0.3s ease;
+
+        &--capture {
+            border-radius: 50%;
+            color: initial;
+            width: 50px;
+            height: 50px;
+            border: 1px solid black;
+            background-color: map.get($internal-props, bgColor);
+        }
+
+        &--record {
+            border-radius: 50%;
+            color: red;
+            width: 50px;
+            height: 50px;
+            border: 1px solid black;
+            background-color: map.get($internal-props, bgColor);
+        }
+
+        &--download {
+            background-color: map.get($internal-props, downloadButtonBg);
+            margin-left: auto;
+            &:hover {
+                background-color: map.get($internal-props, downloadButtonHover);
+            }
+        }
+
+        &--reset {
+            background-color: map.get($internal-props, resetButtonBg);
+            margin-right: auto;
+            &:hover {
+                background-color: map.get($internal-props, resetButtonHover);
+            }
+        }
+    }
+
+    .camera-offline-mode {
+        font-size: 0.875rem;
+        font-family: sans-serif;
+        color: map.get($internal-props, offlineModeColor);
+    }
+
+    .camera-screen-animation {
+        animation: fadeIn .3s;
+    }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes pulse {
+        0% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(1.05);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+
+    @keyframes clignote {
+        0% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+}