@depict-ai/react-ui 2.0.9 → 2.0.10

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

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

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