@depict-ai/react-ui 2.0.9 → 2.0.10

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

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