pixel-react 1.5.3 → 1.5.4

package/src/components/MiniModal/MiniModal.scss

@@ -1,170 +1,170 @@
-@mixin arrow-before($width, $height, $top, $left) {
-  content: '';
-  position: absolute;
-  width: $width;
-  height: $height;
-  border-radius: 50px;
-  background-color: var(--ff-mini-modal-border);
-  top: $top;
-  left: $left;
-}
-.ff-mini-edit-modal-container {
-  width: fit-content;
-  padding: 0;
-  position: absolute;
-  visibility: hidden;
-  &.modalVisible {
-    visibility: visible;
-  }
-  &.animatedModal {
-    animation:
-      slideDown 0.5s ease,
-      opacity 0.5s ease;
-  }
-
-  .popover-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    z-index: 102;
-    &.popover-arrow-top {
-      bottom: 100%;
-      left: 30px;
-      border-width: 0 10px 10px 10px;
-      padding: 0 3px 0 0;
-      border-color: transparent transparent var(--ff-mini-modal-border)
-        transparent;
-      filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));
-      &::before {
-        @include arrow-before(3px, 4px, -0.5px, 0);
-      }
-    }
-    &.popover-arrow-left {
-      left: -15px; //align the arrow with modal for the right side modal
-      border-width: 10px 10px 10px 0;
-      border-color: transparent var(--ff-mini-modal-border) transparent
-        transparent;
-      filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
-      padding: 3px 1px 0 0;
-      &::before {
-        @include arrow-before(4px, 3px, 0, 0);
-      }
-    }
-    &.popover-arrow-bottom {
-      top: 100%;
-      left: 30px;
-      border-width: 10px 10px 0 10px;
-      border-color: var(--ff-mini-modal-border) transparent transparent
-        transparent; // Bottom part of the arrow with the correct color
-      filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
-      padding: 0 3px 0 0;
-      &::before {
-        @include arrow-before(3px, 3px, -2px, 0);
-      }
-    }
-    &.popover-arrow-right {
-      right: -10px;
-      top: 66px;
-      border-width: 10px 0 10px 10px;
-      border-color: transparent transparent transparent
-        var(--ff-mini-modal-border);
-      filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
-      padding: 3px 1px 0 0;
-      &::before {
-        @include arrow-before(3px, 3px, 0, -2px);
-      }
-    }
-
-    &.left-top-arrow {
-      top: 10%;
-    }
-    &.left-middle-arrow {
-      top: 45%;
-    }
-  }
-  .wrapped-div {
-    height: 35px;
-    background-color: transparent;
-    outline: 8px solid var(--ff-mini-modal-border);
-    outline-offset: -8px;
-    position: absolute;
-    top: -34px;
-    border-radius: 7px 7px 0 0;
-    box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);
-    &::before,
-    &::after {
-      position: absolute;
-      content: '';
-      width: 13px;
-      height: 13px;
-      background: transparent;
-      border-radius: 50%;
-      bottom: 0;
-      box-shadow: 8px 4px 0 var(--ff-mini-modal-border);
-    }
-    &::before {
-      left: -13px;
-      clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);
-    }
-    &::after {
-      right: -13px;
-      clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);
-      box-shadow: -8px 4px 0 var(--ff-mini-modal-border);
-    }
-  }
-  .mini-edit-modal {
-    background: var(--ff-mini-modal-border);
-    position: relative;
-    max-height: fit-content;
-    padding: 4px;
-    width: 100%;
-    margin: 0 0 0 -5px;
-    height: 100%;
-    box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);
-    &.mini-edit-modal-wrapper-shadow {
-      box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
-    }
-    &.mini-edit-modal-arrow-shadow {
-      box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);
-    }
-    header {
-      border-radius: 4px 4px 0 0;
-    }
-    footer {
-      border-radius: 0 0 4px 4px;
-    }
-    .modal-footer {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 5px;
-      background-color: var(--ff-mini-modal-footer-background);
-      height: 24px;
-      padding: 0 10px 0 0;
-      transition: transform 0.3s ease-in-out;
-    }
-  }
-
-  @keyframes slideDown {
-    0% {
-      transform: translateY(-50px);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-}
-.ff-mini-modal-buttons-flex {
-  display: flex;
-}
-.ff-mini-modal-gap-10 {
-  gap: 10px;
-}
-.ff-mini-edit-model-icon {
-  color: var(--ff-mini-modal-box-shadow);
-  border: 2px solid var(--ff-mini-modal-box-shadow);
-  border-radius: 4px;
-}
+@mixin arrow-before($width, $height, $top, $left) {
+  content: '';
+  position: absolute;
+  width: $width;
+  height: $height;
+  border-radius: 50px;
+  background-color: var(--ff-mini-modal-border);
+  top: $top;
+  left: $left;
+}
+.ff-mini-edit-modal-container {
+  width: fit-content;
+  padding: 0;
+  position: absolute;
+  visibility: hidden;
+  &.modalVisible {
+    visibility: visible;
+  }
+  &.animatedModal {
+    animation:
+      slideDown 0.5s ease,
+      opacity 0.5s ease;
+  }
+
+  .popover-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    z-index: 102;
+    &.popover-arrow-top {
+      bottom: 100%;
+      left: 30px;
+      border-width: 0 10px 10px 10px;
+      padding: 0 3px 0 0;
+      border-color: transparent transparent var(--ff-mini-modal-border)
+        transparent;
+      filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));
+      &::before {
+        @include arrow-before(3px, 4px, -0.5px, 0);
+      }
+    }
+    &.popover-arrow-left {
+      left: -15px; //align the arrow with modal for the right side modal
+      border-width: 10px 10px 10px 0;
+      border-color: transparent var(--ff-mini-modal-border) transparent
+        transparent;
+      filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
+      padding: 3px 1px 0 0;
+      &::before {
+        @include arrow-before(4px, 3px, 0, 0);
+      }
+    }
+    &.popover-arrow-bottom {
+      top: 100%;
+      left: 30px;
+      border-width: 10px 10px 0 10px;
+      border-color: var(--ff-mini-modal-border) transparent transparent
+        transparent; // Bottom part of the arrow with the correct color
+      filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
+      padding: 0 3px 0 0;
+      &::before {
+        @include arrow-before(3px, 3px, -2px, 0);
+      }
+    }
+    &.popover-arrow-right {
+      right: -10px;
+      top: 66px;
+      border-width: 10px 0 10px 10px;
+      border-color: transparent transparent transparent
+        var(--ff-mini-modal-border);
+      filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
+      padding: 3px 1px 0 0;
+      &::before {
+        @include arrow-before(3px, 3px, 0, -2px);
+      }
+    }
+
+    &.left-top-arrow {
+      top: 10%;
+    }
+    &.left-middle-arrow {
+      top: 45%;
+    }
+  }
+  .wrapped-div {
+    height: 35px;
+    background-color: transparent;
+    outline: 8px solid var(--ff-mini-modal-border);
+    outline-offset: -8px;
+    position: absolute;
+    top: -34px;
+    border-radius: 7px 7px 0 0;
+    box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);
+    &::before,
+    &::after {
+      position: absolute;
+      content: '';
+      width: 13px;
+      height: 13px;
+      background: transparent;
+      border-radius: 50%;
+      bottom: 0;
+      box-shadow: 8px 4px 0 var(--ff-mini-modal-border);
+    }
+    &::before {
+      left: -13px;
+      clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);
+    }
+    &::after {
+      right: -13px;
+      clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);
+      box-shadow: -8px 4px 0 var(--ff-mini-modal-border);
+    }
+  }
+  .mini-edit-modal {
+    background: var(--ff-mini-modal-border);
+    position: relative;
+    max-height: fit-content;
+    padding: 4px;
+    width: 100%;
+    margin: 0 0 0 -5px;
+    height: 100%;
+    box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);
+    &.mini-edit-modal-wrapper-shadow {
+      box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
+    }
+    &.mini-edit-modal-arrow-shadow {
+      box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);
+    }
+    header {
+      border-radius: 4px 4px 0 0;
+    }
+    footer {
+      border-radius: 0 0 4px 4px;
+    }
+    .modal-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 5px;
+      background-color: var(--ff-mini-modal-footer-background);
+      height: 24px;
+      padding: 0 10px 0 0;
+      transition: transform 0.3s ease-in-out;
+    }
+  }
+
+  @keyframes slideDown {
+    0% {
+      transform: translateY(-50px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+.ff-mini-modal-buttons-flex {
+  display: flex;
+}
+.ff-mini-modal-gap-10 {
+  gap: 10px;
+}
+.ff-mini-edit-model-icon {
+  color: var(--ff-mini-modal-box-shadow);
+  border: 2px solid var(--ff-mini-modal-box-shadow);
+  border-radius: 4px;
+}