pixel-react 1.13.43 → 1.13.44

package/lib/styles/MultiColFooter.scss

@@ -1,316 +0,0 @@
-@use '../../../breakpoints.scss' as *;
-@mixin flexCenter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.ff-footer {
-  @include xs {
-    padding: 30px 40px;
-  }
-  @include sm {
-    padding: 30px 40px;
-  }
-
-  .ff-footer-container {
-    display: flex;
-    min-height: 400px;
-    @include xs {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      .segment-one {
-        grid-column: span 2;
-      }
-    }
-    @include sm {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      .segment-one {
-        grid-column: span 2;
-      }
-    }
-    @include md {
-      display: grid;
-      grid-template-columns: 37% 26% 20% 17%;
-      grid-template-rows: auto auto auto;
-      .segment-one {
-        grid-column: span 4;
-        grid-row: 1;
-      }
-      .segment-two {
-        grid-column: span 1;
-        grid-row: 2;
-        grid-column: 2;
-      }
-      .segment-three {
-        grid-column: span 1;
-        grid-row: 2;
-      }
-      .segment-four {
-        grid-column: span 1;
-        grid-row: 2;
-      }
-      .segment-five {
-        grid-column: span 1;
-        grid-row: 2;
-      }
-      .segment-six {
-        grid-column: span 4;
-        grid-row: 3;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-    @include lg {
-      display: grid;
-      grid-template-columns: 37% 26% 20% 17%;
-      grid-template-rows: auto auto auto;
-      .segment-one {
-        grid-column: span 4;
-        grid-row: 1;
-      }
-      .segment-two {
-        grid-column: span 1;
-        grid-row: 2;
-        grid-column: 2;
-      }
-      .segment-three {
-        grid-column: span 1;
-        grid-row: 2;
-      }
-      .segment-four {
-        grid-column: span 1;
-        grid-row: 2;
-      }
-      .segment-five {
-        grid-column: span 1;
-        grid-row: 2;
-      }
-      .segment-six {
-        grid-column: span 4;
-        grid-row: 3;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    > article:nth-child(1),
-    > article:nth-child(3) {
-      flex-grow: 0;
-      flex-basis: 300px;
-    }
-    > article:nth-child(2),
-    > article:nth-child(4) {
-      flex-grow: 0;
-      flex-basis: 200px;
-    }
-    > article:nth-child(5) {
-      flex-grow: 0;
-      flex-basis: 120px;
-    }
-    > article {
-      flex-grow: 1;
-      flex-basis: 0;
-      @include groupXsSmMd {
-        padding-bottom: 10px;
-        padding-top: 20px;
-      }
-      @include lg {
-        padding-bottom: 10px;
-        padding-top: 20px;
-      }
-      ul {
-        padding: 0;
-        li {
-          list-style: none;
-
-          margin: 12px 0;
-          a {
-            text-decoration: none;
-            color: inherit;
-
-            position: relative;
-
-            &::after {
-              content: '';
-              width: 0;
-              height: 1px;
-              background: var(--base-bg-color);
-              right: 0;
-              left: auto;
-              bottom: 0;
-              position: absolute;
-              -webkit-transition: width 0.2s linear;
-              -o-transition: width 0.2s linear;
-              transition: width 0.2s linear;
-            }
-            &:hover::after {
-              width: 100%;
-              right: auto;
-              left: 0;
-            }
-          }
-        }
-      }
-    }
-    .ff-footer-container-link {
-      display: flex;
-      align-items: center;
-      padding-top: 10px;
-      gap: 4px;
-      > span {
-        > a {
-          color: var(--base-bg-color);
-          text-decoration: none;
-        }
-      }
-    }
-  }
-  .ff-footer-copyright {
-    display: flex;
-    gap: 10px;
-    margin-top: 8px;
-    border-top: 1px solid var(--base-bg-color);
-    @include xs {
-      flex-direction: column;
-    }
-    @include sm {
-      flex-direction: column;
-    }
-    @include md {
-      flex-direction: column;
-    }
-    .ff-footer-copyright-text {
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-between;
-      width: 100%;
-      @include xs {
-        flex-direction: column;
-        align-items: center;
-        margin-top: 8px;
-      }
-      @include sm {
-        flex-direction: column;
-        align-items: center;
-        margin-top: 8px;
-      }
-    }
-  }
-}
-.modal {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--base-bg-color);
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.tabs {
-  display: flex;
-}
-
-.tab {
-  flex: 1;
-  text-align: center;
-  @include flexCenter;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-  height: 34px;
-  border-radius: 8px;
-  padding: 8px;
-  transition: background-color 0.3s ease;
-  &.mobile {
-    padding: 0px;
-  }
-}
-
-.selected {
-  background-color: var(--ff-primary-color);
-  color: var(--base-bg-color);
-}
-
-.content {
-  padding: 20px;
-  padding-left: 4px;
-  font-size: 14px;
-  height: 60vh;
-  overflow-y: scroll;
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--ff-primary-color);
-    border-radius: 4px;
-  }
-}
-
-.alignment-menu-data {
-  padding-left: 0;
-}
-.arrow-top-icon {
-  display: flex;
-  align-items: end;
-  padding-bottom: 10px;
-  flex-wrap: wrap;
-  .social-text {
-    width: 100%;
-    @include sm {
-      @include flexCenter;
-    }
-    @include xs {
-      @include flexCenter;
-    }
-  }
-}
-.arrow-bottom-icon {
-  @extend .arrow-top-icon;
-  justify-content: end;
-  position: relative;
-}
-.arrow-bottom-icon-mobile {
-  @extend .arrow-top-icon;
-  @include flexCenter;
-  position: relative;
-  .social-text {
-    @include sm {
-      margin-top: 0;
-      margin-bottom: 6px;
-    }
-    @include xs {
-      margin-top: 0;
-      margin-bottom: 6px;
-    }
-  }
-}
-.column-header {
-  margin-bottom: 0px;
-}
-.selected-tab-link-button {
-  color: var(--ff-primary-color);
-  background-color: var(--base-bg-color);
-  border: none;
-  text-decoration: underline;
-}
-.ff-footer-content {
-  display: flex;
-  gap: 10px;
-}
-.social-icons {
-  display: flex;
-  gap: 10px;
-  padding-top: 12px;
-  position: relative;
-}
-.get-social-icon {
-  display: flex;
-  align-items: center;
-}
-.term-of-use {
-  margin-top: 10px;
-}
-.reach-out-class {
-  margin-bottom: 0;
-}

package/lib/styles/MultiRadialChart.scss

@@ -1,84 +0,0 @@
-@use '../../../assets/styles/fonts';
-
-.ff-multi-radial-chart-container {
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  &.ff-multi-radial-chart-number {
-    flex-direction: column;
-  }
-
-  &.ff-multi-radial-chart-pill {
-    flex-direction: row;
-  }
-
-  .ff-center-first-text {
-    @extend .font-size-20;
-    color: var(--text-color);
-    font-weight: 600;
-  }
-  .ff-center-text {
-    color: var(--text-color);
-    font-weight: 400;
-  }
-  .ff-center-text-tooltip {
-    @extend .fontSm;
-    font-weight: 600;
-  }
-  .ff-multi-radial-tooltip {
-    position: absolute;
-    @extend .fontSm;
-    font-weight: 400;
-    background-color: var(--tooltip-bg-color);
-    color: var(--primary-icon-color);
-    padding: 5px 10px;
-    border-radius: 4px;
-    pointer-events: none;
-    z-index: 1000;
-  }
-  .ff-legend-container {
-    display: grid;
-    gap: 10px;
-
-    &.ff-number-legend {
-      grid-template-columns: repeat(3, 1fr);
-      margin-top: 21px;
-      .ff-legend-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-    }
-
-    &.ff-pill-legend {
-      grid-template-columns: auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin-left: 8px;
-
-      .ff-legend-item {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .ff-legend-capsule {
-          background-color: var(--status-success-text-color);
-          color: var(--text-color);
-          border-radius: 15px;
-          min-width: 21px;
-          height: 15px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        .ff-legend-key {
-          margin-left: 8px;
-          color: var(--text-color);
-        }
-      }
-    }
-  }
-}

package/lib/styles/MultiSelect.scss

@@ -1,274 +0,0 @@
-@use '../../assets/styles/fonts';
-
-@mixin flex-center($justify: space-between) {
-  display: flex;
-  align-items: center;
-  justify-content: $justify;
-}
-@mixin label-styles {
-  font-family: Poppins;
-  font-weight: 400;
-  letter-spacing: 0.5px;
-  transition: all 0.3s ease;
-}
-@mixin hovered-styles($color) {
-  &:hover {
-    border: 1px solid $color;
-    .ff-multiselect .ff-multiselect__main {
-      .default-label,
-      .active-default-label {
-        color: $color;
-      }
-    }
-  }
-}
-@mixin arrow_fill($color) {
-  .ff-select-arrow {
-    svg {
-      path {
-        fill: $color;
-        transition: all 0.3s ease;
-      }
-    }
-  }
-}
-
-@mixin ff-scroll-style {
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 40px;
-    border-radius: 12px 0px 0px 0px;
-    background: var(--description-text);
-
-    &-track {
-      background: var(--ff-select-scroll-track-bg);
-    }
-
-    &-thumb {
-      background: var(--ff-select-scroll-thumb-color);
-      border-radius: 10px;
-
-      &:hover {
-        background: var(--ff-select-scroll-thumb-hover);
-      }
-    }
-  }
-}
-
-.ff-multiselect-container-with-icon {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  .ff-multiselect-wrapper {
-    flex-grow: 1;
-    box-sizing: border-box;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    position: relative;
-    border: 1px solid var(--default-icon-color);
-    border-radius: 4px;
-    background: transparent;
-    min-width: 150px;
-    height: 32px;
-    .ff-multiselect {
-      position: relative;
-      padding: 6px 4px 6px 8px;
-      border: none;
-      border-radius: 4px;
-      @include flex-center;
-      &__main {
-        display: flex;
-        flex: 1;
-        .default-label {
-          @include label-styles;
-          color: var(--default-icon-color);
-          line-height: 18px;
-        }
-
-        .active-default-label {
-          font-size: 8px !important;
-          height: 8px;
-          @include label-styles;
-          line-height: 12px;
-          color: var(--default-icon-color);
-          padding: 0 4px;
-          position: absolute;
-          left: 8px;
-          top: -6px;
-          pointer-events: none;
-        }
-        .ff-multiselect-chip-container {
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          max-height: 64px;
-          overflow-y: auto;
-          gap: 5px;
-
-          @include ff-scroll-style;
-
-          .ff-multiselect-chip {
-            @include flex-center;
-            box-sizing: border-box;
-            border: 0.5px solid var(--tabs-border-color);
-            padding-left: 4px;
-            gap: 4px;
-            height: 16px;
-            border-radius: 15px;
-            .ff-multiselect-chip-label {
-              line-height: 14px;
-              color: var(--tooltip-bg-color);
-              &.label-padding {
-                padding-right: 3px;
-              }
-            }
-
-            .ff-multiselect-chip-close-icon {
-              color: var(--brand-color); 
-              cursor:pointer;
-              padding: 0px;
-              transition: all 0.3s ease;
-              height: 20px;
-              width:20px;
-              border-radius: 50%;
-            }
-            
-            .ff-multiselect-chip-close-icon:hover {
-              height: 20px;
-              width:20px;
-              border-radius: 50%;
-              background-color: var(--brand-color);
-              color:var(--ff-white-color); 
-            }
-            
-            .ff-multiselect-chip-close-icon:hover circle {
-              color:var(--ff-white-color); 
-            }
-            
-            .ff-multiselect-chip-close-icon:hover path {
-              color:var(--ff-white-color); 
-            }
-            
-          }
-
-          .ff-multiselect-input-container {
-            flex: 1;
-            min-width: 20px;
-            input {
-              width: 100%;
-              min-width: 30px;
-              max-width: calc(100% - 0px);
-              padding: 2px 2px 2px 4px;
-
-              box-sizing: border-box;
-              border: none;
-              font-size: 12px;
-              background: transparent;
-              &:focus {
-                outline: none;
-              }
-              &::placeholder {
-                color: var(--ff-search-filed-placeholder-text);
-              }
-            }
-          }
-        }
-      }
-      .ff-multiselect-more-chip {
-        display: flex;
-        align-items: center;
-        width: 16px;
-      }
-      &__toggle {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        .ff-select-arrow {
-          transition: transform 0.3s ease;
-          transform: rotate(360deg);
-
-          svg {
-            path {
-              transition: all 0.3s ease;
-            }
-          }
-
-          &--opened-dropdown {
-            transform: rotate(180deg);
-            transition: transform 0.3s ease;
-          }
-        }
-      }
-    }
-
-    @include hovered-styles(var(--brand-color));
-    &:hover {
-      @include arrow_fill(var(--brand-color));
-    }
-    &--with-options {
-      height: fit-content;
-    }
-    &--opened-dropdown {
-      border: 1px solid var(--brand-color);
-      height: fit-content;
-      cursor: default;
-      .ff-multiselect .ff-multiselect__main .active-default-label {
-        color: var(--brand-color);
-      }
-      @include hovered-styles(var(--brand-color));
-    }
-    &--error {
-      border: 1px solid var(--error-light);
-      .ff-multiselect .ff-multiselect__main .active-default-label {
-        color: var(--error-light);
-      }
-      @include hovered-styles(var(--error-light));
-      @include arrow_fill(var(--error-light));
-      &:hover {
-        @include arrow_fill(var(--error-light));
-      }
-    }
-    &--disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-      border: 1px solid var(--multi-select-border);
-      .ff-multiselect .ff-multiselect__main .active-default-label {
-        color: var(--multi-select-border);
-      }
-      @include hovered-styles(var(--multi-select-border));
-      @include arrow_fill(var(--multi-select-border));
-      &:hover {
-        @include arrow_fill(var(--multi-select-border));
-      }
-      .ff-multiselect {
-        &__main {
-          .ff-multiselect-chip-container {
-            .ff-multiselect-chip {
-              .ff-multiselect-chip-label {
-                color: var(--text-color-light);
-              }
-            }
-          }
-        }
-      }
-    }
-    .error-text {
-      position: absolute;
-      margin-top: 4px;
-      left: 8px;
-      color: var(--error-light);
-      letter-spacing: 0.5px;
-    }
-  }
-  .ff-manage-labels-text {
-    position: absolute;
-    right: 0;
-    margin-top: 4px;
-  }
-  .ff-label-plus-icon {
-    cursor: pointer;
-  }
-}