pixel-react 1.13.43 → 1.13.44

package/lib/styles/Tabs.scss

@@ -1,195 +0,0 @@
-@use '../../assets/styles/colors';
-@use '../../assets/styles/fonts';
-
-.ff-tabs-container {
-  box-sizing: border-box;
-
-  .ff-tab-row {
-    flex: 0 1 auto;
-    &--default {
-      display: flex;
-      gap: 8px;
-      border-radius: 8px 8px 0 0;
-      padding: 8px 8px 0;
-
-      .ff-tab-button {
-        &--default {
-          position: relative;
-          border: none;
-          background: none;
-          padding: 0 4px;
-          display: flex;
-          flex-direction: column;
-          gap: 4px;
-          cursor: pointer;
-
-          .label-count-section {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-
-            .tab-count {
-              background-color: var(--input-default-label-color);
-              color: var(--tab-bg-color);
-              height: 12px;
-              border-radius: 4px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 8px;
-              font-weight: 600;
-              padding: 0 2px;
-
-              &--active {
-                background-color: var(--tabs-label-active-color);
-              }
-            }
-          }
-
-          .ff-tab-bar {
-            width: 100%;
-            border-radius: 2px 2px 0 0;
-            border-color: var(--input-default-label-color);
-
-            &--active {
-              border-top: 2px solid var(--tabs-label-active-color);
-            }
-          }
-
-          &:hover {
-            .ff-tab-bar {
-              border-top: 2px solid var(--input-hover-border-color);
-
-              &--active {
-                border-top: 2px solid var(--tabs-label-active-color);
-              }
-            }
-
-            .ff-tab-label {
-              color: var(--input-hover-border-color) !important;
-
-              &--active {
-                color: var(--tabs-label-active-color) !important;
-              }
-            }
-
-            .tab-count {
-              background-color: var(--input-hover-border-color);
-
-              &--active {
-                background-color: var(--tabs-label-active-color);
-              }
-            }
-          }
-
-          &.disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
-
-    &--capsule {
-      display: flex;
-      gap: 8px;
-      border: 1px solid var(--tabs-border-color);
-      border-radius: 8px;
-      padding: 3px 4px;
-      background-color: var(--tabs-bg-color);
-
-      .ff-tab-button {
-        &--capsule {
-          background: transparent;
-          border: none;
-          padding: 3px 4px;
-          border-radius: 4px;
-          cursor: pointer;
-
-          &:hover {
-            .ff-tab-label {
-              color: var(--input-hover-border-color) !important;
-
-              &--active {
-                color: var(--tabs-label-active-color) !important;
-              }
-            }
-          }
-
-          &.active {
-            background-color: var(--tab-bg-color);
-          }
-
-          .ff-tab-bar {
-            display: none;
-          }
-        }
-      }
-    }
-
-    &--no-border {
-      border: none;
-    }
-
-    &--no-padding {
-      border-radius: 8px;
-      background: white;
-      padding: 0px;
-      justify-content: flex-start;
-      margin-right: 8px;
-
-      .ff-tab-button {
-        &--capsule {
-          background: transparent;
-          border: none;
-          padding: 3px 4px;
-          border-radius: 7px;
-          cursor: pointer;
-
-          &:hover {
-            .ff-tab-label {
-              color: var(--input-hover-border-color) !important;
-
-              &--active {
-                color: var(--tabs-label-active-color) !important;
-              }
-            }
-          }
-
-          &.active {
-            background-color: var(--slider-table-color);
-          }
-
-          .ff-tab-bar {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-  .ff-tab-content {
-    width: inherit;
-  }
-
-  .ff-defaultStatus {
-    position: absolute;
-    top: 2px;
-    right: 0px;
-    width: 6px;
-    height: 6px;
-    background-color: transparent;
-    border-radius: 50%;
-
-    &.ff-successStatus {
-      background-color: var(--confirm-tick-icon-color);
-      box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
-      right: -4px;
-    }
-
-    &.ff-dangerStatus {
-      background-color: var(--delete-text-color);
-      box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
-      right: -4px;
-    }
-  }
-}

package/lib/styles/TabsWithSilder.scss

@@ -1,238 +0,0 @@
-@use '../../assets/styles/colors';
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins' as *;
-
-.ff-tabs-slider-container {
-  box-sizing: border-box;
-
-  .ff-tab-row {
-    flex: 0 1 auto;
-    .ff-tab-button {
-      box-sizing: border-box;
-    }
-    &--default {
-      display: flex;
-      gap: 8px;
-      border-radius: 8px 8px 0 0;
-      padding: 6px 8px 0;
-
-      .ff-tab-button {
-        &--default {
-          position: relative;
-          border: none;
-          background: none;
-          padding: 0 8px;
-          display: flex;
-          flex-direction: column;
-          gap: 4px;
-          cursor: pointer;
-
-          .label-count-section {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            justify-content: center;
-            gap: 5px;
-
-            .tab-count {
-              background-color: var(--input-default-label-color);
-              color: var(--tab-bg-color);
-              height: 12px;
-              border-radius: 4px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 8px;
-              font-weight: 600;
-              padding: 0 2px;
-
-              &--active {
-                background-color: var(--tabs-label-active-color);
-              }
-            }
-          }
-
-          .ff-tab-bar {
-            width: 100%;
-            border-radius: 2px 2px 0 0;
-            border-color: var(--input-default-label-color);
-
-            &--active {
-              border-top: 2px solid var(--tabs-label-active-color);
-            }
-          }
-
-          &:hover {
-            .ff-tab-bar {
-              border-top: 2px solid var(--input-hover-border-color);
-
-              &--active {
-                border-top: 2px solid var(--tabs-label-active-color);
-              }
-            }
-
-            .ff-tab-label {
-              color: var(--input-hover-border-color) !important;
-
-              &--active {
-                color: var(--tabs-label-active-color) !important;
-              }
-            }
-
-            .tab-count {
-              background-color: var(--input-hover-border-color);
-
-              &--active {
-                background-color: var(--tabs-label-active-color);
-              }
-            }
-          }
-
-          &.disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
-
-    &--capsule {
-      display: flex;
-      gap: 8px;
-      border: 1px solid var(--tabs-border-color);
-      border-radius: 8px;
-      padding: 3px 4px;
-      background-color: var(--tabs-bg-color);
-
-      .ff-tab-button {
-        &--capsule {
-          background: transparent;
-          border: none;
-          padding: 3px 4px;
-          border-radius: 4px;
-          cursor: pointer;
-
-          &:hover {
-            .ff-tab-label {
-              color: var(--input-hover-border-color) !important;
-
-              &--active {
-                color: var(--tabs-label-active-color) !important;
-              }
-            }
-          }
-
-          &.active {
-            background-color: var(--tab-bg-color);
-          }
-
-          .ff-tab-bar {
-            display: none;
-          }
-        }
-      }
-    }
-
-    &--no-border {
-      border: none;
-    }
-
-    &--no-padding {
-      border-radius: 8px;
-      background: white;
-      padding: 0px;
-      justify-content: flex-start;
-      margin-right: 8px;
-
-      .ff-tab-button {
-        &--capsule {
-          background: transparent;
-          border: none;
-          padding: 3px 4px;
-          border-radius: 7px;
-          cursor: pointer;
-
-          &:hover {
-            .ff-tab-label {
-              color: var(--input-hover-border-color) !important;
-
-              &--active {
-                color: var(--tabs-label-active-color) !important;
-              }
-            }
-          }
-
-          &.active {
-            background-color: var(--slider-table-color);
-          }
-
-          .ff-tab-bar {
-            display: none;
-          }
-        }
-      }
-    }
-    &--position {
-      position: relative;
-      .ff-tab-icon {
-        position: absolute;
-        @include center-content;
-        align-items: center;
-        z-index: 1;
-        width: 24px;
-        height: 24px;
-        &--previous {
-          top: 4px;
-          left: 4px;
-        }
-        &--next {
-          top: 4px;
-          right: 4px;
-        }
-      }
-    }
-  }
-  .ff-tab-row-section {
-    display: flex;
-    justify-content: space-between;
-    .ff-tab-row-carousel {
-      width: 100%;
-      overflow: hidden;
-      display: flex;
-      .carousel_inner {
-        display: flex;
-        width: 100%;
-        transition: 0.8s ease-in-out;
-        padding: 0;
-        margin: 0;
-      }
-    }
-    &.ff-tab-row--no-border {
-      border: none;
-    }
-  }
-
-  .ff-tab-content {
-    width: inherit;
-  }
-
-  .ff-defaultStatus {
-    position: absolute;
-    top: 2px;
-    right: 0px;
-    width: 6px;
-    height: 6px;
-    background-color: transparent;
-    border-radius: 50%;
-
-    &.ff-successStatus {
-      background-color: var(--confirm-tick-icon-color);
-      box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
-    }
-
-    &.ff-dangerStatus {
-      background-color: var(--delete-text-color);
-      box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
-    }
-  }
-}

package/lib/styles/TestimonialSlider.scss

@@ -1,204 +0,0 @@
-@use '../../../breakpoints.scss' as *;
-
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-@mixin flex-align-center {
-  display: flex;
-  align-items: center;
-}
-@mixin flex-justify-center {
-  display: flex;
-  justify-content: center;
-}
-
-.ff-homepage-testimonial-wrapper {
-  .ff-homepage-testimonial-blog {
-    @include flex-justify-center;
-    gap: 16px;
-    .row {
-      margin: 0 auto;
-      .row-content {
-        display: flex;
-        justify-content: end;
-        padding-bottom: 16px;
-      }
-    }
-    > .slick-slider {
-      overflow: hidden;
-      > .slick-list {
-        margin: 0 auto;
-        > .slick-track {
-          display: flex;
-          gap: 26px;
-        }
-      }
-    }
-    .testimonial-read-more-header {
-      display: flex;
-      justify-content: space-between;
-      background-color: var(--ff-background-color);
-      height: 76px;
-      border-radius: 8px;
-    }
-    .custom-scrollbar {
-      color: var(--ff-secondary-text-color);
-      text-align: left;
-      max-height: 230px;
-      overflow: auto;
-      margin: 16px 0;
-      p {
-        display: inline;
-      }
-      p:last-of-type {
-        margin-bottom: 0px;
-      }
-
-      &::-webkit-scrollbar {
-        width: 5px;
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: var(--ff-secondary-text-color);
-        border-radius: 10px;
-      }
-    }
-    .testimonials-author {
-      @include flex-align-center;
-      gap: 15px;
-      .testimonials-author_name {
-        .one {
-          margin-bottom: 0;
-          margin-top: 0;
-        }
-        .two {
-          margin-top: 0;
-          margin-bottom: 0;
-        }
-      }
-    }
-    .SliderBanner {
-      width: 100%;
-      margin: 0 auto;
-      .homepage-testimonial-card-header {
-        border-radius: 8px;
-        background-color: var(--ff-background-color);
-        @include flex-center;
-        height: 76px;
-        img {
-          max-height: 100%;
-          max-width: 100%;
-          height: auto;
-          width: auto;
-        }
-      }
-    }
-    .ff-homepage-testimonial-card-mid-content {
-      margin-top: 16px;
-      line-height: 24px;
-      color: var(--dataset-tooltip-title);
-      display: flex;
-      flex-direction: column;
-      justify-content: end;
-      gap: 16px;
-      height: 285px;
-      .ff-homepage-testimonial-card-mid-content-header {
-        flex: 1;
-        .highlight-text {
-          color: var(--ff-primary-color);
-
-          display: block;
-        }
-      }
-    }
-    .homepage-testimonial-card-footer {
-      width: 100%;
-      @include flex-align-center;
-      gap: 16px;
-      flex-wrap: wrap;
-      @include xs {
-        flex-direction: column;
-        height: 100px;
-      }
-      @include sm {
-        flex-direction: column;
-        height: 100px;
-      }
-
-      > *:nth-child(1) {
-        flex: 1 1 20%;
-        width: 20%;
-        display: flex;
-      }
-
-      > *:nth-child(2) {
-        flex: 1 1 70%;
-        width: 70%;
-      }
-      .ff-homepage-testimonial-blog-footer-header {
-        line-height: 30px;
-        color: var(--ff-primary-text-color);
-      }
-      .ff-homepage-testimonial-blog-footer-sub {
-        line-height: 21px;
-      }
-      .homepage-testimonial-card-footer-avatar {
-        width: 60px;
-        height: 60px;
-        background-color: var(--ff-primary-color);
-        color: var(--base-bg-color);
-        border-radius: 12px;
-        @include flex-center;
-      }
-    }
-  }
-  .homepage-testimonial-card-btn {
-    @include flex-align-center;
-    padding: 0 auto;
-    gap: 10px;
-    height: 30px;
-    margin-top: 20px;
-    .arrow-border {
-      height: 25px;
-      width: 25px;
-      background-color: var(--base-bg-color);
-      border-radius: 50%;
-    }
-  }
-}
-.ff-hover-icon {
-  cursor: pointer;
-}
-.ff-footer-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-.image-logo {
-  margin: 10px;
-}
-
-.description-content {
-  display: -webkit-box;
-  -webkit-line-clamp: 6; // Number of lines before ellipsis
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: max-height 0.3s ease;
-  position: relative;
-}
-
-.expanded {
-  -webkit-line-clamp: unset; // Show all lines when expanded
-}
-.read-more-text {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-
-  background-color: var(--base-bg-color);
-}
-.read-more-dot {
-  color: var(--dataset-tooltip-title);
-  margin-right: 6px;
-}