cortex-react-ui 0.2.21 → 0.2.22

package/lib/styles/Button/index.scss

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

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

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