@depict-ai/react-ui 0.0.76 → 0.0.78

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

@@ -1,802 +0,0 @@
-@use "../../../helpers/utils";
-@use "../../../helpers/custom_input";
-@use "SortAndFilterModal";
-@use "../MorphingSign";
-@use "../../../variables";
-@use "../../../helpers/supports-hover";
-@use "../Buttons";
-@use "sass:color";
-@use "sass:map";
-
-$brand-black: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 800);
-$brand-dark-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 600);
-$brand-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 400);
-$brand-light-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 300);
-$brand-lighter-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 200);
-$brand-lightest-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 100);
-
-// Mega hack right now, we want to wait on Vicki's redesign of this
-
-$custom-input-checked-background: #fff;
-$custom-input-background: #fff;
-$custom-input-indicator-color: $brand-black;
-$checkbox-background-color: #fff;
-$checkbox-checked-background-color: $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 $brand-dark-grey;
-$checkbox-top-offset: 0px;
-$checkbox-left-offset: 0px;
-$radio-border: 1px solid $brand-dark-grey;
-$radio-background-color: #fff;
-$radio-selected-dot-color: $brand-black;
-$radio-selected-dot-size: 14px;
-$radio-selected-offset: 0px;
-$hovered-checkbox-bg: $brand-lighter-grey;
-$hovered-checkbox-checked-background-color: $brand-dark-grey;
-$hovered-checkbox-border: 2px solid $brand-black;
-$hovered-radio-border: 2px solid $brand-black;
-
-/// Mixin that styles the sorting and filtering menus.
-@mixin SortAndFilter() {
-  $spacing_between_input_rows: variables.get-merged(
-    variables.$filters-configuration-defaults,
-    variables.$filters-configuration,
-    "spacing-between-input-rows"
-  );
-  $input-row-height: max(
-    variables.get-merged(
-      variables.$filters-configuration-defaults,
-      variables.$filters-configuration,
-      "input-row-height-goal"
-    ),
-    1em
-  ); // if text gets bigger we have to get bigger too to not cut off the text
-  // it was meant to be 20px but there was a bug so I'm setting it to 21px now so it doesn't change
-  $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;
-    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");
-      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: #fff;
-      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,
-      $input-row-height,
-      $largest-border-on-custom-input
-    );
-  }
-  .filters {
-    .body {
-      $filter-group-summary-spacings: false; // Set to px value if space is wanted between the filter group
-      @if $filter-group-summary-spacings {
-        & > * {
-          // 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: $input-row-height; // Sorry ÅÄÖ, hope you survive this
-          display: -webkit-box;
-          text-overflow: ellipsis;
-          white-space: pre-line;
-          overflow-wrap: anywhere;
-          color: variables.get-text-color("neutral", "default");
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 1;
-          overflow: hidden;
-          word-break: break-word;
-          font-weight: variables.get-font-weight(400);
-        }
-
-        *:checked,
-        .fake-checked {
-          & ~ .text {
-            color: variables.get-text-color("neutral", "pressed");
-            font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 500);
-          }
-        }
-
-        &.count-0 * + .text {
-          color: variables.get-text-color("subtle", "default");
-        }
-      }
-
-      .input-row,
-      .hierarchical .checkbox-details.expandable .category-parent {
-        .count {
-          color: variables.get-text-color("subtle", "default");
-          font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 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: variables.get-text-color("subtle", "default");
-          fill: variables.get-text-color("subtle", "default");
-
-          span {
-            line-height: 1;
-          }
-        }
-      }
-
-      .ungrouped {
-        // Spacing above filters that aren't in a group
-        margin-top: 25px;
-      }
-
-      .clear-all-filters {
-        margin-top: 5px;
-        font-weight: 400;
-        padding: 0.7em;
-        text-transform: variables.$uppercase-text-transform;
-        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 {
-          border-top: 1px solid variables.get-border-color("neutral", "default");
-
-          .filter-group-summary {
-            //border-radius: $filter-group-summary-border-radius;
-
-            &:focus {
-              outline: none;
-            }
-
-            &:focus-visible {
-              background: variables.get-background-color("base", "hover");
-            }
-
-            @include supports-hover.supports-hover() {
-              &:hover {
-                background: variables.get-background-color("base", "hover");
-              }
-            }
-
-            &:active {
-              @include utils.highlight-background(
-                variables.get-background-color("base", "hover"),
-                2%,
-                2%
-              ); // need real subtle here so we use the illegal mixin
-            }
-
-            & > .summary {
-              color: variables.get-text-color("neutral", "default");
-              padding: 15px 10px;
-
-              & > svg {
-                transform: rotate(270deg);
-              }
-            }
-          }
-
-          &[open] .filter-group-summary {
-            //border-radius: $filter-group-summary-border-radius $filter-group-summary-border-radius 0px 0px;
-            border-bottom: 1px solid variables.get-border-color("subtle", "default");
-
-            & > .summary {
-              & > span {
-                // Make filter group title medium when expanded
-                font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 500);
-              }
-            }
-          }
-        }
-      }
-
-      .filter-collapsible-body {
-        margin-bottom: 15px;
-        display: flex;
-        flex-direction: column;
-        @include utils.flex-gap(1px, "column nowrap");
-        border-radius: 0px 0px 4px 4px;
-        overflow: hidden;
-
-        .view-more-clear {
-          border-top: 1px solid variables.get-border-color("subtle", "default");
-          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: variables.$uppercase-text-transform;
-            svg {
-              path {
-                fill: black;
-              }
-            }
-
-            &:focus-visible {
-              outline: none;
-              filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
-            }
-          }
-        }
-
-        .filter-part {
-          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;
-            $expandable-separator-height: 1px;
-            $expandable-separator-hover-change-factor: 20%;
-
-            & summary {
-              &:before,
-              &:after {
-                pointer-events: none;
-                content: "";
-                position: absolute;
-                right: 0;
-                height: $expandable-separator-height;
-                width: calc(100% - 20px); // Reduce for padding
-                background: variables.get-background-color("base", "disabled");
-              }
-
-              &:before {
-                // so that two adjacent separators merge into each other
-                top: calc(-0.5 * #{$expandable-separator-height});
-              }
-
-              &:after {
-                bottom: calc(-0.5 * #{$expandable-separator-height});
-              }
-
-              @include supports-hover.supports-hover() {
-                &:hover,
-                .input-row:hover ~ details > & {
-                  &:after,
-                  &:before {
-                    background: variables.get-background-color("subtle", "hover");
-                    z-index: 1;
-                  }
-                }
-              }
-
-              &:focus-visible,
-              .input-row ~ details:focus-visible > & {
-                &:after,
-                &:before {
-                  background: variables.get-background-color("subtle", "hover");
-                  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: #{$input-row-height};
-
-                  .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: 0.5px solid variables.get-border-color("base", "default");
-              background: variables.get-background-color("base", "disabled");
-              transition-duration: 50ms;
-              padding-top: 8px;
-              padding-bottom: 8px;
-              width: 100%;
-              outline: none;
-              text-align: center;
-              -moz-appearance: textfield;
-
-              &:focus-visible {
-                background: variables.get-background-color("base", "hover");
-              }
-
-              @include supports-hover.supports-hover() {
-                &:hover {
-                  background: variables.get-background-color("base", "hover");
-                }
-              }
-
-              &::-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: variables.get-text-color("neutral", "default");
-          }
-        }
-
-        .slider {
-          height: 5px;
-          position: relative;
-          background: #ddd;
-          border-radius: 5px;
-
-          .progress {
-            height: 100%;
-            left: 25%;
-            right: 25%;
-            position: absolute;
-            border-radius: 5px;
-            background: variables.get-background-color("inverse", "default");
-          }
-        }
-
-        .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.get-background-color("inverse", "default");
-              @include supports-hover.supports-hover() {
-                &:hover {
-                  background: variables.get-background-color("inverse", "hover");
-                }
-              }
-              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.get-background-color("base", "default");
-              @include supports-hover.supports-hover() {
-                &:hover {
-                  background: variables.get-background-color("inverse", "hover");
-                }
-              }
-              pointer-events: auto;
-              -moz-appearance: none;
-              box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
-            }
-
-            &:focus-visible {
-              &::-webkit-slider-thumb {
-                background: variables.get-background-color("inverse", "hover");
-              }
-
-              &::-moz-range-thumb {
-                background: variables.get-background-color("inverse", "hover");
-              }
-            }
-          }
-        }
-
-        .value-text {
-          padding-top: 10px;
-          display: flex;
-          justify-content: space-between;
-          color: variables.get-text-color("neutral", "default");
-        }
-      }
-
-      .checkbox-grid {
-        display: flex;
-        flex-wrap: wrap;
-        @include utils.flex-gap(10px, "row wrap");
-
-        .major,
-        .minor {
-          padding: 5px 10px;
-
-          &.minor {
-            border: 1px solid #d5d5d5;
-          }
-        }
-      }
-
-      @include CheckboxColor();
-    }
-  }
-  .sorting {
-    .body {
-      @include utils.flex-gap(1px, "column nowrap");
-      line-height: 1;
-      color: variables.get-text-color("neutral", "default");
-
-      .input-row {
-        align-items: center;
-        justify-content: flex-start;
-        display: flex;
-      }
-    }
-  }
-
-  @include MorphingSign.MorphingSign();
-
-  @content;
-}
-
-@mixin default_morphing_sign_in_expandable {
-  .morphing-sign {
-    span {
-      background: variables.get-background-color("inverse", "hover");
-
-      &:first-child {
-        width: 5%;
-        left: 47.5%;
-      }
-
-      &:last-child {
-        height: 5%;
-        top: 47.5%;
-      }
-    }
-  }
-}
-
-@mixin CheckboxColor() {
-  .checkbox-color {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    .input-row {
-      width: calc(50% - 10px);
-    }
-  }
-}