@depict-ai/react-ui 2.0.5 → 2.0.6

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

@@ -0,0 +1,728 @@
+@use "../../../helpers/utils";
+@use "../../../helpers/custom_input";
+@use "SortAndFilterModal";
+@use "../MorphingSign";
+@use "../../../variables";
+@use "../../../helpers/supports-hover";
+@use "../Buttons";
+@use "sass:color";
+
+@mixin SortAndFilter(
+  $mobile-top-level-collapse-color: variables.$brand-black,
+  $mobile-top-level-collapse-background: #fff,
+  $custom-input-checked-background: #fff,
+  $custom-input-background: #fff,
+  $custom-input-indicator-color: variables.$brand-black,
+  $checkbox-background-color: #fff,
+  $checkbox-checked-background-color: variables.$brand-black,
+  $checkbox-checkmark-color: #fff,
+  $checkbox-border-radius: if(variables.$border-radius == 0, 0, if(variables.$border-radius == 0px, 0, 2px)),
+  // if global border radius is 0 or 0px, don't round input fields in their default value
+  $checkbox-border: 1px solid variables.$brand-black,
+  $checkbox-top-offset: 0px,
+  $checkbox-left-offset: 0px,
+  $radio-border: 1px solid variables.$brand-black,
+  $radio-background-color: #fff,
+  $radio-selected-dot-color: variables.$brand-black,
+  $radio-selected-dot-size: 14px,
+  $radio-selected-offset: 0px,
+  $separator-color: variables.$brand-dark-grey,
+  $price-range-min-max-text-color: variables.$brand-dark-grey,
+  $range-input-bg-color: variables.$brand-lightest-grey,
+  $top-level-summary-background: variables.$brand-black,
+  $hovered-top-level-summary-background: variables.$brand-dark-grey,
+  $hovered-range-input-bg-color: variables.$brand-lighter-grey,
+  $hovered-checkbox-bg: variables.$brand-lighter-grey,
+  $hovered-checkbox-checked-background-color: false,
+  $input-row-label-color: variables.$brand-dark-grey,
+  $checked-input-row-label-color: #000,
+  $input-row-label-font-weight: 400,
+  $checked-input-row-label-font-weight: 500,
+  $showing-selected-subfilter-count-color: variables.$brand-grey,
+  $filter-available-products-color: variables.$brand-grey,
+  $count-zero-input-row-label-color: rgb(194, 194, 194),
+  $spacing_between_input_rows: 10px,
+  $ungrouped-top-margin: 25px,
+  $hovered-checkbox-border: 2px solid variables.$brand-black,
+  $hovered-radio-border: 2px solid variables.$brand-black,
+  $sort-and-filter-button-padding: 10px 20px,
+  $expandable-seperator-color: variables.$brand-lightest-grey,
+  $expandable-seperator-hover-color: variables.$brand-lighter-grey,
+  $expandable-seperator-height: 1px,
+  $filter-group-heading-color: #fff,
+  $filter-groups-morphing-sign-color: #fff,
+  $filter-group-summary-border-radius: 4px,
+  $sort-and-filter-modal-background: variables.$brand-lighter-grey,
+  $filter-group-heading-padding: 10px,
+  $filter-group-summary-spacings: 10px,
+  $range-input-field-border-radius: 4px,
+  $range-input-field-border: none,
+  $filter-group-title-bold: false,
+  $view-more-clear-background: rgb(253, 253, 253),
+  $filter-collapsible-body-background: rgb(238, 238, 240),
+  $sort-and-filter-modal-section-title-font-weight: false,
+  $sort-and-filter-modal-section-expanded-title-font-weight: $sort-and-filter-modal-section-title-font-weight
+) {
+  $input-row-height-goal: 20px;
+  $count-distance-to-right: 30px;
+  $largest-border-on-custom-input: max(
+    custom_input.get_border_width($checkbox-border),
+    custom_input.get_border_width($radio-border)
+  );
+
+  @if (not $hovered-checkbox-checked-background-color) {
+    @if color.lightness($checkbox-checked-background-color) >= 50% {
+      $hovered-checkbox-checked-background-color: color.scale($checkbox-checked-background-color, $lightness: -10%);
+    } @else {
+      $hovered-checkbox-checked-background-color: color.scale($checkbox-checked-background-color, $lightness: +20%);
+    }
+  }
+
+  .major-minor-transition {
+    transition: filter 150ms ease-in-out, background 250ms ease-in-out, color 250ms ease-in-out,
+      border 250ms ease-in-out;
+  }
+
+  .filter-results-for-one-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  *:not(.filter-results-for-one-row) > .sort-and-filter-buttons .inner {
+    justify-content: space-between;
+  }
+
+  .sorting-attributes,
+  .sorting-direction {
+    padding: 10px;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    @include utils.flex-gap(10px, "column nowrap");
+  }
+
+  .sort-and-filter-buttons {
+    .outer {
+      margin-top: -5px;
+    }
+    .inner {
+      display: flex;
+      justify-content: flex-end;
+      // Note: this can't be done with gap: or embedded_num_products will break since it assumes that the spacing is included in the width of these elements + margin
+      @include utils.flex-gap(10px, "row nowrap");
+      align-items: center;
+      overflow: hidden;
+      padding-top: 5px;
+      // hack around having to have overflow: hidden for embedded_num_products but still wanting to be able to see the overflowing number of filters badge
+    }
+    &.fake .toggle-button {
+      transition: none;
+    }
+    .toggle-button {
+      white-space: nowrap;
+      @include utils.flex-gap(5px, "row nowrap");
+      padding: $sort-and-filter-button-padding;
+      position: relative;
+
+      svg path {
+        transition-duration: 250ms;
+      }
+
+      &.major {
+        &.for-sorting {
+          @include utils.flex-gap(10px, "row nowrap");
+        }
+      }
+    }
+
+    .num-filters {
+      position: absolute;
+      right: -4px;
+      top: -4px;
+      background: black;
+      color: white;
+      border-radius: 13px;
+      width: 20px;
+      line-height: 1;
+      height: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: opacity 250ms ease-in-out;
+      font-size: 12px;
+      z-index: calc(variables.$search-page-base-z-index + 1);
+    }
+    .open-filters-button-container {
+      position: relative;
+    }
+  }
+
+  label {
+    margin: 0;
+  }
+
+  .PLP-results {
+    .sorting,
+    .filters {
+      flex-shrink: 0;
+      flex-basis: 330px;
+    }
+  }
+  // Shared body style for filters and sorting containers
+  .filters .body,
+  .sorting .body {
+    display: flex;
+    flex-direction: column;
+    @include custom_input.custom_input(
+      $checkbox-background-color,
+      $checkbox-checked-background-color,
+      $checkbox-checkmark-color,
+      $checkbox-border-radius,
+      $checkbox-border,
+      $checkbox-left-offset,
+      $checkbox-top-offset,
+      $radio-border,
+      $radio-background-color,
+      $radio-selected-dot-color,
+      $radio-selected-dot-size,
+      $radio-selected-offset,
+      $hovered-checkbox-bg,
+      $hovered-checkbox-checked-background-color,
+      $hovered-checkbox-border,
+      $hovered-radio-border,
+      $width-and-height: calc(#{$input-row-height-goal} - #{$largest-border-on-custom-input})
+    );
+  }
+  .filters {
+    .body {
+      & > * {
+        // WhiteSortAndFilter wants to add a border above the space here which is why we're not using utils.flex-gap / margins
+        &:not(:first-child) {
+          padding-top: calc($filter-group-summary-spacings * 0.5);
+        }
+        &:not(:last-child) {
+          padding-bottom: calc($filter-group-summary-spacings * 0.5);
+        }
+      }
+
+      .input-row {
+        // Only input row in filters
+        padding-bottom: calc(#{$spacing_between_input_rows} / 2);
+        padding-top: calc(#{$spacing_between_input_rows} / 2);
+        justify-content: space-between;
+        &,
+        & > .left {
+          align-items: center;
+          display: flex;
+        }
+        .text {
+          //line-height: 1.8; /** Fix for ÅÄÖ getting cut-off **/
+          line-height: calc(
+            #{$input-row-height-goal} + #{$largest-border-on-custom-input}
+          ); // Sorry ÅÄÖ, hope you survive this
+          display: -webkit-box;
+          text-overflow: ellipsis;
+          white-space: pre-line;
+          overflow-wrap: anywhere;
+          color: $input-row-label-color;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          overflow: hidden;
+          font-weight: $input-row-label-font-weight;
+          word-break: break-word;
+        }
+        *:checked,
+        .fake-checked {
+          & ~ .text {
+            color: $checked-input-row-label-color;
+            font-weight: $checked-input-row-label-font-weight;
+          }
+        }
+        &.count-0 * + .text {
+          color: $count-zero-input-row-label-color;
+        }
+      }
+      .input-row,
+      .hierarchical .checkbox-details.expandable .category-parent {
+        .count {
+          color: $filter-available-products-color;
+          font-weight: 400;
+        }
+      }
+      .input-row:hover .count {
+        color: black;
+      }
+
+      .selected-w-sign {
+        display: flex;
+        align-items: center;
+        @include utils.flex-gap(10px, "row nowrap");
+        .show-selected {
+          display: flex;
+          @include utils.flex-gap(5px, "row nowrap");
+          align-items: center;
+          color: $showing-selected-subfilter-count-color;
+          fill: $showing-selected-subfilter-count-color;
+          span {
+            line-height: 1;
+          }
+        }
+      }
+      .ungrouped {
+        margin-top: $ungrouped-top-margin;
+      }
+
+      .clear-all-filters {
+        margin-top: 5px;
+        font-weight: 400;
+        padding: 0.7em;
+        text-transform: uppercase;
+        font-size: 1.1em;
+      }
+
+      details {
+        summary {
+          list-style: none;
+          &::-webkit-details-marker {
+            display: none;
+          }
+          cursor: pointer;
+          & > .summary {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+        }
+        &.filter-collapsible {
+          .filter-group-summary {
+            background: $top-level-summary-background;
+            border-radius: $filter-group-summary-border-radius;
+
+            &:focus {
+              outline: none;
+            }
+            &:focus-visible {
+              background: $hovered-top-level-summary-background;
+            }
+            @include supports-hover.supports-hover() {
+              &:hover {
+                background: $hovered-top-level-summary-background;
+              }
+            }
+            & > .summary {
+              color: $filter-group-heading-color;
+              padding: $filter-group-heading-padding;
+              & > span {
+                @if $filter-group-title-bold {
+                  font-weight: $filter-group-title-bold;
+                }
+              }
+              & > svg {
+                transform: rotate(270deg);
+              }
+            }
+          }
+          &[open] .filter-group-summary {
+            border-radius: $filter-group-summary-border-radius $filter-group-summary-border-radius 0px 0px;
+          }
+        }
+      }
+
+      .filter-collapsible-body {
+        background: $filter-collapsible-body-background;
+        display: flex;
+        flex-direction: column;
+        @include utils.flex-gap(1px, "column nowrap");
+        border-radius: 0px 0px 4px 4px;
+        overflow: hidden;
+
+        .view-more-clear {
+          background: $view-more-clear-background;
+          display: flex;
+          justify-content: space-between;
+          $gap: 10px;
+
+          .clear-group {
+            @include utils.flex-gap(calc($gap - calc(calc(21.064px - 8.42px) / 2)), "row nowrap");
+            margin-left: auto;
+            svg {
+              width: 11px;
+              height: 12px;
+            }
+          }
+
+          .expand-filter {
+            margin-right: auto;
+            @include utils.flex-gap($gap, "row nowrap");
+            &.expanded svg {
+              clip-path: polygon(20% 48%, 80% 48%, 80% 50.8%, 20% 50.8%);
+              transform: scale(1.6);
+            }
+          }
+
+          button {
+            background: transparent;
+            border: none;
+            margin-bottom: 0;
+            margin-right: 0;
+            margin-left: 0;
+            color: black;
+            cursor: pointer;
+            padding: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-transform: uppercase;
+            svg {
+              path {
+                fill: black;
+              }
+            }
+            &:focus-visible {
+              outline: none;
+              filter: Buttons.$secondary-button-focus-visible-filter;
+            }
+          }
+        }
+
+        .filter-part {
+          background: white;
+          padding: 15px 10px 20px 10px;
+          display: flex;
+          flex-direction: column;
+          @include utils.flex-gap(10px, "column nowrap");
+        }
+      }
+      *:not(.ungrouped) > form {
+        margin-bottom: calc(-1 * calc(#{$spacing_between_input_rows} / 2));
+        margin-top: calc(-1 * calc(#{$spacing_between_input_rows} / 2));
+      }
+      .hierarchical {
+        margin-left: -20px;
+
+        &.any-expandable {
+          .count {
+            margin-right: $count-distance-to-right;
+          }
+        }
+
+        .checkbox-details {
+          padding-left: 20px;
+
+          &.expandable {
+            position: relative;
+
+            & summary {
+              &:before,
+              &:after {
+                pointer-events: none;
+                content: "";
+                position: absolute;
+                right: 0;
+                background: $expandable-seperator-color;
+                height: $expandable-seperator-height;
+                width: calc(100% - 20px); // Reduce for padding
+              }
+
+              &:before {
+                // so that two adjacent separators merge into each other
+                top: calc(-0.5 * #{$expandable-seperator-height});
+              }
+
+              &:after {
+                bottom: calc(-0.5 * #{$expandable-seperator-height});
+              }
+
+              @include supports-hover.supports-hover() {
+                &:hover,
+                .input-row:hover ~ details > & {
+                  &:after,
+                  &:before {
+                    background: $expandable-seperator-hover-color;
+                    z-index: 1;
+                  }
+                }
+              }
+              &:focus-visible,
+              .input-row ~ details:focus-visible > & {
+                &:after,
+                &:before {
+                  background: $expandable-seperator-hover-color;
+                  z-index: 1;
+                }
+              }
+            }
+
+            & > .input-row {
+              position: absolute;
+              padding-right: 30px;
+            }
+            & > details {
+              &:not([open]),
+              &[open] > .category-parent > .summary {
+                padding-top: calc(#{$spacing_between_input_rows} / 2);
+                padding-bottom: calc(#{$spacing_between_input_rows} / 2);
+              }
+              .category-parent {
+                &:focus {
+                  outline: none;
+                  box-shadow: none;
+                }
+                &:focus-visible {
+                  outline: none;
+                  box-shadow: none;
+                }
+                @supports selector(:focus-visible) {
+                  &:not(:focus-visible) {
+                    @include supports-hover.supports-hover() {
+                      &:not(:hover) {
+                        @include default_morphing_sign_in_expandable();
+                      }
+                    }
+                    @media (hover: none) {
+                      @include default_morphing_sign_in_expandable();
+                    }
+                  }
+                  @include supports-hover.supports-hover() {
+                    &:hover {
+                      .morphing-sign {
+                        transform: scale(1.5);
+                      }
+                      .count {
+                        color: black;
+                      }
+                    }
+                  }
+                  &:focus-visible {
+                    .count {
+                      color: black;
+                    }
+                    .morphing-sign {
+                      transform: scale(1.5);
+                    }
+                  }
+                }
+                @supports (not (selector(:focus-visible))) {
+                  @include supports-hover.supports-hover() {
+                    &:not(:hover) {
+                      @include default_morphing_sign_in_expandable();
+                    }
+                    &:hover {
+                      .morphing-sign {
+                        transform: scale(1.5);
+                      }
+                      .count {
+                        color: black;
+                      }
+                    }
+                  }
+                  @media (hover: none) {
+                    @include default_morphing_sign_in_expandable();
+                  }
+                }
+                & > .summary {
+                  justify-content: flex-end;
+                  $morphing-sign-width: calc(#{$input-row-height-goal} + #{$largest-border-on-custom-input});
+                  .count {
+                    margin-right: calc(#{$count-distance-to-right} - #{$morphing-sign-width});
+                  }
+                  .morphing-sign {
+                    // same as custom inputs
+                    width: $morphing-sign-width;
+                    transition-duration: 150ms;
+                    transition-timing-function: ease-in-out;
+                    height: $morphing-sign-width;
+                    span {
+                      background: black;
+                      transition-duration: 150ms;
+                      transition-timing-function: ease-in-out;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .range {
+        .input-group {
+          width: 100%;
+          display: flex;
+          // use paddings to not confuse useExpandingContainer
+          padding-top: 10px;
+          padding-bottom: 25px;
+          .field {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            input {
+              border: $range-input-field-border;
+              border-radius: $range-input-field-border-radius;
+              background: $range-input-bg-color;
+              transition-duration: 50ms;
+              padding-top: 8px;
+              padding-bottom: 8px;
+              width: 100%;
+              outline: none;
+              text-align: center;
+              -moz-appearance: textfield;
+              &:focus-visible {
+                background: $hovered-range-input-bg-color;
+              }
+              @include supports-hover.supports-hover() {
+                &:hover {
+                  background: $hovered-range-input-bg-color;
+                }
+              }
+              &::-webkit-outer-spin-button,
+              &::-webkit-inner-spin-button {
+                -webkit-appearance: none;
+              }
+            }
+          }
+          .separator {
+            flex-basis: 25px;
+            flex-shrink: 0;
+            display: flex;
+            font-size: 19px;
+            align-items: center;
+            justify-content: center;
+            color: $separator-color;
+          }
+        }
+
+        .slider {
+          height: 5px;
+          position: relative;
+          background: #ddd;
+          border-radius: 5px;
+          .progress {
+            height: 100%;
+            left: 25%;
+            right: 25%;
+            position: absolute;
+            border-radius: 5px;
+            background: variables.$brand-black;
+          }
+        }
+        .range-group {
+          position: relative;
+          input {
+            position: absolute;
+            width: 100%;
+            height: 0;
+            top: -2.5px;
+            margin: 0;
+            background: none;
+            pointer-events: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            &:focus {
+              outline: none;
+            }
+            $thumb_size: 20px;
+            &::-webkit-slider-thumb {
+              cursor: pointer;
+              height: $thumb_size;
+              width: $thumb_size;
+              border-radius: 50%;
+              background: variables.$brand-black;
+              @include supports-hover.supports-hover() {
+                &:hover {
+                  background: variables.$brand-dark-grey;
+                }
+              }
+              pointer-events: auto;
+              -webkit-appearance: none;
+              box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
+            }
+            &::-moz-range-thumb {
+              // TODO: overflows to the left
+              cursor: pointer;
+              height: $thumb_size;
+              width: $thumb_size;
+              border: none;
+              border-radius: 50%;
+              background: variables.$brand-black;
+              @include supports-hover.supports-hover() {
+                &:hover {
+                  background: variables.$brand-dark-grey;
+                }
+              }
+              pointer-events: auto;
+              -moz-appearance: none;
+              box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
+            }
+            &:focus-visible {
+              &::-webkit-slider-thumb {
+                background: variables.$brand-grey;
+              }
+              &::-moz-range-thumb {
+                background: variables.$brand-grey;
+              }
+            }
+          }
+        }
+
+        .value-text {
+          padding-top: 10px;
+          display: flex;
+          justify-content: space-between;
+          color: $price-range-min-max-text-color;
+        }
+      }
+      .checkbox-grid {
+        display: flex;
+        flex-wrap: wrap;
+        @include utils.flex-gap(10px, "row wrap");
+        .major,
+        .minor {
+          padding: 5px 10px;
+          &.minor {
+            border: 1px solid #d5d5d5;
+          }
+        }
+      }
+    }
+  }
+  .sorting {
+    .body {
+      background: rgb(238, 238, 240);
+      @include utils.flex-gap(1px, "column nowrap");
+      line-height: 1;
+      .input-row {
+        align-items: center;
+        justify-content: flex-start;
+        display: flex;
+      }
+    }
+  }
+
+  @include MorphingSign.MorphingSign($filter-groups-morphing-sign-color);
+  @include SortAndFilterModal.SortAndFilterModal(
+    $mobile-top-level-collapse-color,
+    $mobile-top-level-collapse-background,
+    $sort-and-filter-modal-background: $sort-and-filter-modal-background,
+    $title-font-weight: $sort-and-filter-modal-section-title-font-weight,
+    $expanded-title-font-weight: $sort-and-filter-modal-section-expanded-title-font-weight
+  );
+
+  @content;
+}
+
+@mixin default_morphing_sign_in_expandable {
+  .morphing-sign span {
+    background: #333333;
+
+    &:first-child {
+      width: 5%;
+      left: 47.5%;
+    }
+
+    &:last-child {
+      height: 5%;
+      top: 47.5%;
+    }
+  }
+}