pixel-react 1.13.43 → 1.13.44

package/lib/styles/PromptContainer.scss

@@ -1,106 +0,0 @@
-@use '../../assets/styles/mixins';
-.ff-prompt-container-Block {
-  position: relative;
-  padding-bottom: 10px;
-  background-color: var(--ai-prompt-bg);
-  width: 100%;
-  border-radius: 8px;
-  border: 1px solid var(--border-color);
-  transition: height 0.3s ease;
-  cursor: pointer;
-  .ff-prompt-number-bg-color {
-    position: absolute;
-    top: -5px;
-    right: 8px;
-    height: 12px;
-    background: var(--tabs-border-color);
-    color: var(--text-color);
-    border-radius: 4px;
-    padding: 0 2px;
-  }
-
-  .ff-prompt-content {
-    padding: 0 16px;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    position: relative;
-  }
-  .ff-prompt-content.expanded {
-    -webkit-line-clamp: unset;
-    line-clamp: unset;
-    max-height: none;
-  }
-  .read-more-btn {
-    border: none;
-    background-color: var(--ai-prompt-bg);
-    color: var(--brand-color);
-    cursor: pointer;
-    margin: 8px 16px 0 0;
-    text-decoration: underline;
-    offset: auto;
-    position: absolute;
-    bottom: 37px;
-    right: 0;
-    .read-more-btn-text {
-      display: flex;
-      padding: 0px 5px;
-    }
-  }
-  .read-less-btn {
-    display: inline;
-    white-space: nowrap;
-    background-color: transparent;
-    color: var(--brand-color);
-    cursor: pointer;
-    text-decoration: underline;
-    margin-left: 5px;
-  }
-
-  &.expanded {
-    height: auto;
-  }
-  .ff-prompt-icons {
-    @include mixins.horizontal-space-between();
-    @extend .ff-prompt-content;
-    justify-content: end;
-    flex-wrap: wrap;
-  }
-  .ff-prompt-icons-leftside {
-    display: flex;
-    gap: 8px;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-  .ff-prompt-icons-rightside {
-    @include mixins.center-content();
-    .ff-prompt-icons-style {
-      padding: 2px;
-    }
-  }
-
-  &:hover {
-    background-color: var(--hover-color);
-  }
-}
-
-.ff-prompt-container-Block.active {
-  border: 1px solid var(--icons-default-color);
-  background-color: var(--hover-color);
-}
-.ff-prompt-container-Block.active .ff-prompt-icons-leftside,
-.ff-prompt-container-Block:hover .ff-prompt-icons-leftside {
-  opacity: 1;
-}
-.ff-prompt-container-Block.active .read-more-btn,
-.ff-prompt-container-Block:hover .read-more-btn {
-  background-color: var(--hover-color);
-}
-.ff-prompt-container-Block.active .ff-prompt-number-bg-color,
-.ff-prompt-container-Block:hover .ff-prompt-number-bg-color {
-  border: 0.5px solid var(--ff-editor-line-bg);
-  background: var(--base-bg-color);
-}

package/lib/styles/RadialChart.scss

@@ -1,16 +0,0 @@
-@use '../../../assets/styles/fonts';
-
-.ff-radial-chart-container {
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  svg {
-    vertical-align: middle;
-    text {
-      @extend .font-size-8;
-      font-size: var(--fontSize) !important;
-      font-weight: 400;
-    }
-  }
-}

package/lib/styles/RadioButton.scss

@@ -1,121 +0,0 @@
-@use '../../assets/styles/_fonts';
-
-@mixin circle($size, $border: none) {
-  width: $size;
-  height: $size;
-  border-radius: 50%;
-  @if $border != none {
-    border: $border;
-  }
-}
-@mixin transition($properties, $duration: 0.3s) {
-  transition: $properties $duration;
-}
-
-.ff-radio-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-
-  .ff-radio {
-    @extend .fontSm;
-    position: relative;
-    color: var(--text-color);
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    .ff-radio-input {
-      display: none;
-    }
-
-    .ff-radio-custom {
-      box-sizing: border-box;
-      @include circle(1rem, 0.0625rem solid var(--radio-button-border));
-      position: relative;
-      margin-right: 0.5rem;
-      display: flex;
-      align-items: center;
-      transform: translateZ(0);
-      justify-content: center;
-      @include transition(border-color, background-color);
-
-      &-fill {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 0.75rem;
-        height: 0.75rem;
-        border-radius: 50%;
-        @include transition(background-color);
-        will-change: transform;
-        backface-visibility: hidden;
-      }
-
-      &::after {
-        content: '';
-        @include circle(1.5rem, 0.25rem solid #f7edff);
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        opacity: 0;
-        @include transition(opacity);
-      }
-    }
-
-    &:hover .ff-radio-custom {
-      border: 0.0625rem solid var(--brand-color);
-
-      &-fill {
-        background-color: var(--drawer-footer-bg);
-      }
-
-      &::after {
-        opacity: 1;
-        @include transition(opacity);
-      }
-    }
-
-    .ff-radio-input:checked + .ff-radio-custom {
-      border-color: var(--brand-color);
-
-      .ff-radio-custom-fill {
-        background: var(--brand-color);
-      }
-    }
-
-    .ff-radio-input:disabled + .ff-radio-custom {
-      border: 0.0625rem solid var(--radio-button-border);
-      cursor:not-allowed;
-
-      .ff-radio-custom-fill {
-        background: var(--drawer-footer-bg);
-      }
-
-      &::after {
-        border: 0.25rem solid var(--radio-button-hover);
-        opacity: 0;
-        @include transition(opacity);
-      }
-    }
-
-    .ff-radio-input:checked:disabled + .ff-radio-custom {
-      border-color: var(--brand-color);
-      background-color: var(--drawer-footer-bg);
-
-      .ff-radio-custom-fill {
-        background: var(--brand-color);
-      }
-    }
-
-    &--disabled {
-      cursor: default;
-
-      .ff-radio-custom {
-        opacity: 0.5;
-      }
-    }
-  }
-}

package/lib/styles/RadioGroup.scss

@@ -1,17 +0,0 @@
-.ff-radio-group {
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-}
-.ff-radio-label-wrapper {
-  position: relative;
-  top: 2px;
-}
-.ff-required-asterisk {
-  color: var(--input-error-text-color);
-}
-
-.ff-radio-error-msg {
-  padding-left: 8px;
-  letter-spacing: 0.5px;
-}

package/lib/styles/Recaptcha.scss

@@ -1,11 +0,0 @@
-.ff-recaptcha-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    
-    .ff-recaptcha-error {
-      color: var(--input-error-text-color);
-      font-size: 12px;
-      margin-top: 4px;
-    }
-  }

package/lib/styles/ScriptSwitchButton.scss

@@ -1,33 +0,0 @@
-/* Container Styling */
-.ff-script-switch-container {
-  display: flex;
-  background-color: var(--base-bg-color);
-  height: 24px;
-  width: 48px;
-  border-radius: 6px;
-  border: 1px solid var(--border-color);
-  align-items: center;
-  justify-content: center;
-
-  /* Button Styling */
-  .ff-script-switch-button {
-    padding: 0.1px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    outline: none;
-    transition: all 0.3s ease;
-
-    /* Button Hover Effect */
-    &:hover {
-      background-color: var(--hover-color);
-      color: var(--brand-color);
-    }
-  }
-
-  /* Active Button */
-  .ff-script-switch-button.active {
-    background-color: var(--ff-line-number-bg);
-    color: var(--base-bg-color);
-  }
-}

package/lib/styles/Search.scss

@@ -1,153 +0,0 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-gradient-border-container {
-  position: relative;
-  padding: 0.8px 1px 0.8px 1px;
-
-  &.ai-search-active {
-    border-radius: 4.5px;
-    background: var(--ai-search-border-color);
-    .ff-search-container {
-      border: none !important;
-      box-shadow: none !important;
-    }
-  }
-
-  .ff-search-container {
-    background: transparent;
-    @include mixins.horizontal-space-between();
-
-    .ff-search-input-block {
-      @include mixins.center-vertical();
-      transition: width 0.4s ease;
-    }
-
-    .ff-search-icon {
-      @include mixins.center-content();
-      cursor: pointer;
-      border-radius: 4px;
-
-      &:hover {
-        background-color: var(--ff-search-field-hover-color);
-      }
-
-      .ff-icon-container {
-        svg {
-          path {
-            fill: var(--brand-color);
-          }
-        }
-      }
-    }
-
-    .ff-search-input {
-      @extend .fontXs;
-      border: none;
-      color: var(--tooltip-bg-color);
-      line-height: 12px;
-      visibility: hidden;
-      transition: width 4s ease;
-
-      &:focus {
-        outline: none;
-        border: none;
-      }
-
-      &:hover {
-        border: none;
-      }
-
-      &.ai-search-placeholder-animation {
-        display: inline-block;
-        overflow: hidden;
-        white-space: nowrap;
-        width: 0;
-        animation: placeholder-width-animation 4s ease-in-out infinite;
-      }
-
-      @keyframes placeholder-width-animation {
-        0% {
-          width: 0%;
-        }
-        50% {
-          width: 100%;
-        }
-        100% {
-          width: 0%;
-        }
-      }
-    }
-
-    &.disabled {
-      opacity: 0.5;
-    }
-
-    &.expanded {
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      background-color: var(--ff-search-filed-bg-color);
-
-      .ff-search-icon {
-        &:hover {
-          background-color: var(--ff-search-filed-bg-color);
-        }
-      }
-
-      .ff-vertical-line {
-        height: 8px;
-        width: 1px;
-        border-radius: 1px;
-        background-color: var(--border-color);
-      }
-
-      .ff-ai-search-icon {
-        cursor: pointer;
-      }
-
-      .ff-search-input {
-        visibility: visible;
-        margin-left: 4px;
-
-        &::placeholder {
-          color: var(--ff-search-filed-placeholder-text);
-        }
-      }
-
-      .ff-search-icon {
-        border: none;
-        cursor: default;
-        margin-right: 4px;
-      }
-
-      .ff-search-clear-button {
-        display: grid;
-        place-items: center;
-        cursor: pointer;
-        width: 22px;
-        padding-top: 1px;
-
-        &.showClose {
-          display: none;
-        }
-      }
-
-      .ff-search-close-icon {
-        margin: 4px;
-        cursor: pointer;
-
-        &.showClose {
-          display: none;
-        }
-
-        .ff-icon-container {
-          svg {
-            path {
-              fill: var(--ff-search-filed-close-Icon);
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/lib/styles/Select.scss

@@ -1,222 +0,0 @@
-@use '../../assets/styles/fonts';
-
-@mixin svg-path-style($fill-color: var(--ff-select-brand-color)) {
-  svg {
-    path {
-      fill: $fill-color;
-      transition: all 0.18s ease;
-    }
-  }
-}
-
-@mixin select-state-style($color) {
-  border-color: $color;
-
-  .ff-select-labels {
-    color: $color;
-  }
-
-  .ff-select-arrows-wrapper {
-    .ff-select-arrows {
-      @include svg-path-style($color);
-    }
-  }
-}
-
-.ff-select-wrapper {
-  min-height: 24px;
-  min-width: 50px;
-  &.show-clear-icon {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-  }
-
-  .ff-select {
-    height: 100%;
-    width: 100%;
-    border: 1px solid var(--ff-select-border-color);
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    box-sizing: border-box;
-
-    &:hover {
-      border-color: var(--ff-select-brand-color);
-
-      .ff-select-labels {
-        color: var(--ff-select-default-color);
-      }
-
-      .ff-select-arrows-wrapper {
-        .ff-select-arrows {
-          @include svg-path-style(var(--ff-select-text-hover-color));
-        }
-      }
-    }
-
-    .ff-select-input-icon {
-      margin-left: 6px;
-    }
-
-    .ff-select-inputField {
-      @extend .fontSm;
-      width: 100%;
-      height: 100%;
-      padding: 0 0 0 8px;
-      border: none;
-      outline: none;
-      letter-spacing: 0.5px;
-      z-index: 10;
-      background: transparent;
-      position: relative;
-      text-overflow: ellipsis;
-
-      &__disabled {
-        cursor: not-allowed;
-        color: var(--ff-select-border-color);
-      }
-
-      &__readonly {
-        cursor: pointer;
-      }
-
-      &__icon {
-        width: calc(100% - 12px);
-        padding: 4;
-      }
-    }
-
-    .ff-select-arrows-wrapper {
-      cursor: pointer;
-      height: 100%;
-      padding: 0 8px 0 0;
-      display: flex;
-      align-items: center;
-
-      .ff-select-arrows {
-        @include svg-path-style(var(--ff-select-border-color));
-      }
-
-      &__disabled {
-        cursor: not-allowed;
-        border-color: var(--ff-select-border-color);
-      }
-    }
-
-    .ff-select-labels {
-      @extend .fontSm;
-      position: absolute;
-      left: 8px;
-      color: var(--ff-select-border-color);
-      letter-spacing: 0.5px;
-      line-height: 18px;
-      transition: 0.18s ease all;
-      border-radius: 4px;
-
-      &__icon {
-        left: 24px;
-      }
-
-      &__active {
-        transform: translateY(-16px);
-        transition: 0.18s ease all;
-        background-color: var(--ff-select-background-color);
-        padding: 0 2px;
-        z-index: 20;
-        left: 8px;
-      }
-    }
-
-    &__focus {
-      border-color: var(--ff-select-brand-color);
-
-      &:hover {
-        @include select-state-style(var(--ff-select-brand-color));
-      }
-
-      .ff-select-labels {
-        @extend .font-size-8;
-        transform: translateY(-16px);
-        transition: 0.18s ease all;
-        color: var(--ff-select-brand-color);
-        background-color: var(--ff-select-background-color);
-        padding: 0 2px;
-        line-height: 18px;
-        z-index: 100000;
-        left: 8px;
-      }
-
-      .ff-select-arrows-wrapper {
-        .ff-select-arrows {
-          transform: rotate(180deg);
-          transition: 0.18s ease all;
-          @include svg-path-style(var(--ff-select-brand-color));
-        }
-      }
-    }
-
-    &__disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-
-      &:hover {
-        @include select-state-style(var(--ff-select-border-color));
-      }
-    }
-
-    &__error {
-      border-color: var(--error_light);
-
-      &:hover {
-        border-color: var(--error_light);
-
-        .ff-select-labels {
-          color: var(--error_light);
-        }
-
-        .ff-select-arrows-wrapper {
-          .ff-select-arrows {
-            @include svg-path-style(var(--ff-select-default-color));
-          }
-        }
-      }
-
-      &__focused {
-        &:hover {
-          .ff-select-arrows-wrapper {
-            .ff-select-arrows {
-              @include svg-path-style(var(--ff-select-brand-color));
-            }
-          }
-        }
-      }
-
-      .ff-select-labels {
-        @extend .font-size-8;
-        transform: translateY(-16px);
-        transition: 0.3s ease all;
-        color: var(--error_light);
-        background-color: var(--ff-select-background-color);
-        padding: 0 2px;
-        line-height: 18px;
-        left: 8px;
-      }
-    }
-
-    &__no_border {
-      border-color: transparent;
-
-      &:hover {
-        border-color: transparent;
-      }
-    }
-  }
-
-  .ff-select-error-msg {
-    padding-left: 8px;
-    letter-spacing: 0.5px;
-  }
-}