@depict-ai/react-ui 1.5.20 → 2.0.0

package/dist/styles/components/PLP/SlidableItems.scss

@@ -0,0 +1,99 @@
+// @use "../../../rendering/slider_button_positioning";
+@use "../../helpers/utils";
+@use "../../variables";
+@use "../../helpers/supports-hover";
+
+@mixin button_positioning {
+  .d-navbutton {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    touch-action: manipulation;
+    transition-duration: 0.2s;
+    padding-right: 1px;
+    cursor: pointer;
+    &.hidden {
+      cursor: default;
+      opacity: 0;
+      animation-name: depict_slider_button_unclickable;
+      animation-duration: 5s;
+      animation-fill-mode: forwards;
+    }
+    &.left {
+      transform: translateY(-50%) rotate(180deg);
+      left: -1px; // fix chrome rendering half a px of not the button
+    }
+    &.right {
+      right: -1px;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    @content;
+  }
+  @keyframes depict_slider_button_unclickable {
+    0% {
+      pointer-events: all;
+    }
+    100% {
+      pointer-events: none;
+      visibility: hidden; // make not keyboard focusable with tab
+    }
+  }
+}
+
+@mixin SlidableItems($fade-to: variables.$brand-lighter-grey, $fade-from: rgba(238, 238, 240, 0)) {
+  .depict-slider {
+    width: 100%;
+    position: relative;
+    .sliding {
+      height: 100%;
+      @include utils.flex-gap(10px, "row nowrap");
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      overflow-x: scroll;
+      /* Internet Explorer 10+; next 3 properties stolen from: https://stackoverflow.com/a/38994837*/
+      -ms-overflow-style: none;
+      /* Firefox */
+      scrollbar-width: none;
+      // Chrome and Safari
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+    // TODO: break out button button positioning related lib code into a package and import that here instead of duplicating the code
+    // @include slider_button_positioning.button_positioning {
+    @include button_positioning {
+      height: calc(100% + 2px);
+      padding-top: 0;
+      padding-left: 0;
+      padding-bottom: 0;
+      width: 26px;
+      background: linear-gradient(270deg, $fade-to 50%, $fade-from 105%);
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      border: none;
+
+      @include supports-hover.supports-hover() {
+        &:hover {
+          svg {
+            transform: scale(1.2);
+          }
+        }
+      }
+      svg {
+        transition-duration: 150ms;
+      }
+
+      &:active {
+        opacity: 0.9;
+      }
+    }
+  }
+}

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;
+      }
+    }
+  }
+}