@depict-ai/react-ui 2.1.7 → 2.1.9

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

@@ -0,0 +1,84 @@
+@use "../../../variables";
+@use "../../../helpers/supports-hover";
+
+/// Styles the FloatingButtons. FloatingButtons are three buttons, one button to open sorting, one button to open filters and one button to scroll to the top that show up when scrolling upwards for a while on a mobile device not really close to the top of the page.
+/// @param {Color} $button-background [variables.$brand-lighter-grey] - The background color of the buttons.
+/// @param {Color} $hovered-button-background [variables.$brand-lightest-grey] - The background color of the buttons when hovered.
+/// @param {Color} $button-border-color [variables.$brand-black] - The border color of the buttons.
+/// @param {Color} $icon-color [variables.$brand-dark-grey] - The color of the icons.
+/// @param {Number with unit} $bottom-distance [12px] - The distance from the bottom of the buttons to the bottom of the screen.
+/// @param {Number with unit} $side-distance [12px] - The distance from the `$position`-side of the buttons to the `$position`-side of the screen.
+/// @param {"left" | "right"} $position [left] - The side of the screen the buttons should be aligned to.
+
+@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;
+      }
+    }
+  }
+}