@depict-ai/react-ui 0.0.10 → 0.0.11

package/dist/styles/components/PLP/SortAndFilter/FloatingButtons.scss

@@ -0,0 +1,75 @@
+@use "../../../variables";
+@use "../../../helpers/supports-hover";
+
+@mixin FloatingButtons(
+  $button-background: variables.$brand-lighter-grey,
+  $hovered-button-background: variables.$brand-lightest-grey,
+  $button-border-color: variables.$brand-black,
+  $icon-color: variables.$brand-dark-grey,
+  $bottom-distance: 12px,
+  $side-distance: 12px,
+  $position: "left" // "left" or "right"
+) {
+  .floating_buttons {
+    position: sticky;
+    bottom: $bottom-distance;
+    display: flex;
+    z-index: calc(#{variables.$base-z-index} + 4);
+    align-items: center;
+    opacity: 0;
+    transition-timing-function: ease-in-out;
+    transition-duration: 300ms;
+    @if $position== "left" {
+      padding-left: $side-distance;
+      justify-content: flex-start;
+    } @else if $position== "right" {
+      padding-right: $side-distance;
+      justify-content: flex-end;
+    }
+    &:not(.show_them) {
+      pointer-events: none;
+    }
+    &.show_them {
+      opacity: 1;
+    }
+    .filter {
+      margin-right: 5px;
+    }
+
+    .sort {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+
+    .up {
+      margin-left: 5px;
+    }
+
+    .sort,
+    .filter,
+    .up {
+      background: $button-background;
+      filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1)) drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.3));
+      border: 1px solid $button-border-color;
+      border-radius: 20px;
+      padding: 10px;
+      @include supports-hover.supports-hover() {
+        &:hover {
+          background: $hovered-button-background;
+        }
+      }
+      &:focus {
+        outline: none;
+      }
+      &:focus-visible {
+        background: $hovered-button-background;
+      }
+      div {
+        display: flex;
+      }
+      svg path {
+        fill: $icon-color;
+      }
+    }
+  }
+}