pixel-react 1.13.43 → 1.13.44

package/lib/styles/VariableInput.scss

@@ -1,127 +0,0 @@
-.ff_variable_input_container {
-  .ff_label_container {
-    display: flex;
-    align-items: center;
-    margin-bottom: 4px;
-
-    &.ff_danger_label {
-      .ff_input_label {
-        color: var(--error);
-      }
-
-      .ff_required_asterisk {
-        color: var(--error);
-      }
-    }
-  }
-
-  .ff_required_asterisk {
-    color: var(--input-error-text-color);
-    font-size: 1.1em;
-    margin-right: 4px;
-  }
-
-  .ff_input_label {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--text-color);
-
-    &.ff_no_hover {
-      color: var(--toggle-disable-icon-color);
-    }
-
-    &.ff_disabled_label {
-      color: var(--toggle-disable-icon-color);
-      cursor: not-allowed;
-    }
-
-    &.ff_danger_label {
-      color: var(--error);
-    }
-  }
-
-  .ff_content_editable {
-    min-width: 8rem;
-    border: 1px solid var(--input-default-border-color);
-    padding: 8px;
-    min-height: 30px;
-    border-radius: 4px;
-    font-size: 14px;
-    line-height: 20px;
-    transition: border-color 0.2s ease;
-    position: relative;
-    text-align: left;
-    display: flex;
-    align-items: center;
-    overflow: auto;
-
-    .ff_var_red {
-      color: var(--status-rejected-text-color);
-    }
-
-    .ff_var_def_color {
-      color: var(--text-color);
-    }
-
-    .ff_var_green {
-      color: var(--status-success-text-color);
-    }
-
-    &::after {
-      content: '*';
-      color: var(--input-error-text-color);
-      font-size: 1.2em;
-      position: absolute;
-      top: 2px;
-      right: 2px;
-      display: none;
-    }
-
-    &.ff_required::after {
-      display: inline;
-    }
-
-    &.ff_required_empty:focus-within,
-    &.ff_required_empty:focus {
-      border-color: var(--input-error-text-color);
-    }
-
-    &:empty::before {
-      content: attr(data-placeholder);
-      color: var(--ff-search-filed-placeholder-text);
-      position: absolute;
-      user-select: none;
-      pointer-events: none;
-      font-size: medium;
-    }
-
-    &.ff_disabled {
-      pointer-events: none;
-      opacity: 0.5;
-      background-color: var(--input-default-border-color);
-    }
-
-    &.ff_invalid_input {
-      border: 1px solid var(--input-error-text-color);
-    }
-  }
-
-  .ff_suggestions {
-    border: 1px solid var(--input-default-border-color);
-    margin-top: 4px;
-    padding: 4px;
-    border-radius: 4px;
-    list-style-type: none;
-    background-color: var(--ff-select-background-color);
-    max-height: 150px;
-    overflow-y: auto;
-  }
-
-  .ff_suggestion_item {
-    padding: 4px;
-    cursor: pointer;
-    &:hover {
-      background-color: var(--ff-select-background-color);
-    }
-  }
-}

package/lib/styles/VariableSuggestionInputDropDown.scss

@@ -1,39 +0,0 @@
-.ff-add-variable-container {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  position: relative;
-
-  .ff-add-variable-input {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-  }
-}
-
-.ff-variable-dropdown-container {
-  scrollbar-width: none;
-  padding: 4px;
-  width: auto;
-  background-color: var(--variable-dropdown-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 3px;
-  position: absolute;
-  overflow: hidden;
-  overflow-y: auto;
-  top: 34px;
-  height: 150px;
-  .ff-variable-option {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    cursor: pointer;
-    &:hover {
-      background-color: var(--hover-color);
-    }
-  }
-}

package/lib/styles/VerticalSlider.scss

@@ -1,263 +0,0 @@
-@use '../../../breakpoints.scss' as *;
-.ff-slider-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  height: 550px;
-  background-color: var(--ff-background-color);
-  position: relative;
-  @include md {
-    height: 650px;
-  }
-  @include sm {
-    height: 800px;
-    flex-direction: column-reverse;
-  }
-  @include xs {
-    height: 800px;
-    flex-direction: column-reverse;
-  }
-  .ff-custom-dots {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    margin-left: 5%;
-    margin-bottom: 20%;
-    width: 0;
-    .transition-layer {
-      position: absolute;
-      width: 6px;
-      height: 32px;
-      background-color: var(--ff-primary-color); // Active slide color
-      border-radius: 20px;
-      transition: transform 0.7s ease-in-out;
-      pointer-events: none;
-
-      &.no-transition {
-        transition: none;
-      }
-    }
-    @include md {
-      margin-left: 10px;
-    }
-    @include sm {
-      display: none;
-    }
-    @include xs {
-      display: none;
-    }
-    .nav-button {
-      width: 6px;
-      height: 32px;
-      padding: 0;
-      border-radius: 20px;
-      background-color: var(--base-bg-color);
-      border: none;
-      cursor: pointer;
-      transition: background-color 0.3s;
-      @include groupXsSm {
-        width: 32px !important;
-        height: 6px !important;
-        margin-left: 10px;
-        margin-right: 10px;
-      }
-    }
-  }
-  .ff-custom-dots-mobile {
-    width: auto;
-    position: relative;
-    display: flex;
-    margin-top: 20px;
-    justify-content: center;
-    .transition-layer-mobile {
-      position: absolute;
-      width: 32px;
-      height: 6px;
-      background-color: var(--ff-primary-color);
-      border-radius: 20px;
-      transition: transform 0.7s ease-in-out;
-      pointer-events: none;
-
-      &.no-transition {
-        transition: none;
-      }
-    }
-    .nav-button {
-      width: 6px;
-      height: 32px;
-      padding: 0;
-      margin-left: 10px;
-      margin-right: 10px;
-      border-radius: 20px;
-      background-color: var(--base-bg-color);
-      border: none;
-      cursor: pointer;
-      transition: background-color 0.3s;
-      @include groupXsSm {
-        width: 32px !important;
-        height: 6px !important;
-        margin-left: 10px;
-        margin-right: 10px;
-      }
-    }
-  }
-  .ff-vertical-slider-container {
-    width: 100%;
-    max-width: 1200px;
-    height: 500px;
-    margin: 0 auto;
-    overflow: hidden;
-    position: relative;
-    @include md {
-      height: 600px;
-    }
-    @include sm {
-      height: 800px;
-    }
-    @include xs {
-      height: 800px;
-    }
-    .slick-list {
-      height: 100% !important;
-      overflow: visible !important;
-    }
-
-    .slick-track {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-
-    .slick-slide {
-      display: flex !important;
-      width: 93% !important;
-      height: 400px !important;
-      align-items: center;
-      justify-content: space-between;
-      border-radius: 10px;
-      background-color: var(--ff-background-color);
-      padding: 20px;
-      transition: transform 0.7s ease-in-out ease-in-out !important;
-      will-change: transform;
-
-      @include md {
-        height: 450px;
-      }
-
-      & > div {
-        height: 100%;
-        width: 100%;
-      }
-      .slide {
-        height: 100%;
-        @include md {
-          padding: 10px;
-        }
-        @include sm {
-          flex-direction: column;
-          align-items: center;
-          text-align: center;
-          padding: 10px;
-          padding-top: 0;
-          padding-left: 0;
-        }
-        @include xs {
-          flex-direction: column;
-          align-items: center;
-          text-align: center;
-          padding: 10px;
-          padding-top: 0px;
-          padding-left: 0;
-        }
-      }
-
-      .ff-content {
-        flex: 1;
-        padding: 2px;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-
-        @include sm {
-          padding-left: 0;
-        }
-        @include xs {
-          padding-left: 0;
-        }
-        h3 {
-          color: var(--ff-primary-text-color);
-          margin-top: 0;
-          margin-bottom: 0;
-        }
-
-        p {
-          color: var(--ff-secondary-text-color);
-        }
-
-        ul {
-          list-style: none;
-          padding: 0;
-
-          li {
-            color: var(--ff-secondary-text-color);
-            padding-left: 20px;
-            position: relative;
-            margin-bottom: 8px;
-
-            &::before {
-              content: url('../../assets/icons/tick.svg');
-              position: absolute;
-              left: 0;
-              font-size: 18px;
-              margin-left: -5px;
-            }
-          }
-        }
-      }
-
-      .image {
-        flex: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: var(--base-bg-color);
-        border-radius: 16px;
-        @include md {
-          flex: none;
-          margin-bottom: 20px;
-        }
-        @include sm {
-          max-width: 100%;
-          width: 100%;
-          height: auto;
-          object-fit: contain;
-          margin-bottom: 15px;
-        }
-        @include xs {
-          max-width: 100%;
-          width: 100%;
-          height: auto;
-          object-fit: contain;
-          margin-bottom: 15px;
-        }
-
-        .img {
-          max-width: 100%;
-          height: auto;
-          border-radius: 8px;
-          @include groupXsSm {
-            width: 100% !important;
-            height: 100% !important;
-          }
-        }
-      }
-    }
-  }
-
-  .slide {
-    display: flex !important;
-    gap: 24px;
-  }
-}

package/lib/styles/WebsiteInput.scss

@@ -1,39 +0,0 @@
-@use '../../assets/styles/colors' as *;
-@use '../../assets/styles/fonts' as *;
-.input-container {
-  display: inline-block;
-  width: 100%;
-}
-
-.custom-input {
-  width: 100%;
-  padding: 8px 13px;
-  min-width: 281px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background-color: #f7f9fc;
-  color: #7a869a;
-  outline: none;
-  transition: border-color 0.2s ease-in-out;
-  @extend .fontMd;
-
-  &::placeholder {
-    color: #7a869a;
-  }
-
-  &:focus {
-    // border-color: #a1a9b3;
-    // background-color: #fff;
-  }
-}
-
-.input-error {
-  border-color: red;
-}
-
-.helper-text {
-  color: red;
-  font-size: 12px;
-  margin-top: 5px;
-  margin-left: 5px;
-}

package/lib/styles/WebsiteSelect.scss

@@ -1,93 +0,0 @@
-@use '../../assets/styles/fonts' as *;
-@use '../../assets/styles/colors' as *;
-.select-container {
-  display: inline-block;
-  width: 100%;
-  position: relative;
-  outline: none;
-}
-
-.ff-website-select {
-  position: relative;
-  width: 100%;
-  min-width: 281px;
-  padding: 8px 13px;
-  border-radius: 6px;
-  background-color: #f7f9fc;
-  color: #848f9c;
-  cursor: pointer;
-  transition: border-color 0.2s ease-in-out;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  @extend .fontMd;
-}
-
-.ff-website-select-arrow {
-  position: absolute;
-  top: 50%;
-  right: 16px;
-  transform: translateY(-50%);
-}
-
-.ff-website-select-icon {
-  transition: transform 0.2s ease-in-out;
-}
-
-.rotated {
-  transform: rotate(180deg);
-}
-
-.custom-dropdown {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  top: 100%;
-  max-height: 160px;
-  z-index: 999999;
-  border-radius: 4px;
-  border: 1px solid var(--ff-select-option-border-color);
-  margin-top: 4px;
-  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
-  background-color: var(--ff-select-background-color);
-  overflow-y: auto;
-  list-style: none;
-  padding: 0;
-}
-
-.dropdown-option {
-  padding: 10px 16px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.dropdown-option:hover {
-  background: #f7f9fc;
-}
-.custom-select {
-  position: relative;
-}
-.ff-select-icon {
-  transition: transform 0.2s ease-in-out;
-}
-
-.rotate-icon {
-  transform: rotate(180deg);
-}
-.ff-select__error {
-  border: 1px solid #e42525;
-}
-
-.error-text {
-  color: #e42525;
-  font-size: 12px;
-  margin-top: 5px;
-  margin-left: 5px;
-}
-
-.disabled-option {
-  color: gray;
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.6;
-}

package/lib/styles/_colors.scss

@@ -1,157 +0,0 @@
-$brand-color: #71347b;
-$text-color: #1e161f;
-$icons-default-color: #71347b;
-$default-icon-color: #a3a3a3;
-$border-color: #f0e7f4;
-$disable-color: #71347b80;
-$hover-color: #f7ebff;
-$pop-up-background-blur: #14041c;
-$drawer-footer-bg: #ffffff;
-$slider-table-color: #efe1f9;
-$tooltip-bg-color: #1e161f;
-$tooltip-text-color: #ffffff;
-$toggle-strip-color: #cfd1e2;
-$toggle-cross-color: #aeb0c0;
-$toggle-strip-shadow: #00000040; // TODO : Color Name is Not Provided By Designers
-$toggle-button-bg-color: #ffffff; // TODO : Color Name is Not Provided By Designers
-$toggle-disable-icon-color: #767994; // TODO : Color Name is Not Provided By Designers
-$arrow-button-bg-color: #ffffff; // TODO : Color Name is Not Provided By Designers
-$shadow-strip-enable-shadow: #141a60;
-$text-bg-highlight: #f5fb00;
-$toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);
-$drawer-footer-border: #f0e7f4;
-$primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);
-$table-header-color: #f0e7f4;
-$table-lines-color: #d7b5e3;
-$primary-button-color: linear-gradient(
-  188.79deg,
-  #71347b 2.94%,
-  #46164d 93.09%
-);
-
-$primary-button-hover: linear-gradient(
-  179.06deg,
-  #8d3b9a 3.49%,
-  #781f86 99.22%
-);
-
-$primary-button-disable: linear-gradient(180deg, #46164d 0%, $brand-color 100%);
-$primary-button-text-color: #ffffff;
-$secondary-button-color-text: linear-gradient(
-  179.06deg,
-  #71347b 3.49%,
-  #46164d 99.22%
-);
-$secondary-button-text-color: #46164d;
-$secondary-button-hover: linear-gradient(
-  179.06deg,
-  #71347b0d 3.49%,
-  #46164d0d 99.22%
-);
-$tertiary-button-color: linear-gradient(
-  179.06deg,
-  #71347b0d 3.49%,
-  #46164d0d 99.22%
-);
-$tertiary-button-hover: linear-gradient(
-  179.06deg,
-  #71347b1a 3.49%,
-  #46164d1a 99.22%
-);
-$delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);
-$delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);
-$delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);
-$secondary-button-color: linear-gradient(180deg, #46164d 0%, #71347b 100%);
-$secondary-icon-color: #71347b;
-
-///!-----------------------------------------------------------------------------------------------------
-
-$drawer-title-color: #252c37;
-$button-bg-color: #f6ebff;
-$description-text: #d9d9d9;
-$error_light: #e42525;
-$text-area-border-hover: #1e161f;
-$text-area-border-color: #a3a3a3;
-$default-color: #747474;
-///!-----------------------------------------------------------------------------------------------------
-
-$description-text: #d9d9d9;
-$ff-success: #079455;
-$ff-warning: #f79009;
-$ff-error-light: #e42525;
-$ff-chips-fill-color: #f9d5ff;
-$ff-chips-blur-color: #5757571A;
-$hovered-add-button-color: #fce9ff; // TODO: Change the color variable name
-$arrows-button-border-color: #ded1e5; // TODO: Change the color variable name
-$add-icon-hover-color: #431b4a; ////TODO: color need to be add into style guide
-
-$default-icon-color: #a3a3a3;
-$expandable-menu-default-bg: #fdfaff;
-$expandable-menu-option-bg: #610b861a;
-$file-dropzone-default-color: #71347b1a;
-$file-dropzone-selected-color: #71347b33;
-$file-details-container-shadow: #1e161f29;
-$file-details-bg: #ffffff;
-
-$variable-dropdown-bg: #ffffff;
-
-$dataset-tooltip-title: #808080;
-$dataset-tooltip-value: #ffffff;
-$line-chart-data: #4c90ff;
-$state-dropdown-bg-color: #dcd1e5;
-$line-loader-background-overlay: #14041c33;
-
-
-
-:root {
-  --tooltip-bg-color: #{$tooltip-bg-color};
-  --status-approved-text-color: #016102;
-  --status-warning-text-color: #ff8b00;
-  --status-rejected-text-color: #c60202;
-  --status-skipped-text-color: #3c3838;
-  --status-approved-bg-color: #c6efcd;
-  --status-rejected-bg-color: #f7d9d9;
-  --status-warning-bg-color: #fae2c6; // TODO: Change the color variable name
-  --status-skipped-bg-color: #c4c3c3; // TODO: Change the color variable name
-  --brand-color: #{$brand-color};
-  --icons-default-color: #{$icons-default-color};
-  --default-icon-color: #{$default-icon-color};
-  --default-color: #747474; // todo color need to be add into style guide
-  --primary-icon-color: #ffffff;
-  --secondary-icon-color: #71347b;
-  --system-color--error: #c50303;
-  --hover-color: #{$hover-color};
-  --brand2-color: #610b86; // Todo:Change the color variable name
-  --status-warning-hover-bg-color: #fcd8ac; // Todo:Change the color variable name
-  --status-percentage-growth-bg-color: #ecedf8; // Todo:Change the color variable name
-  --primary-icon-color: #{$primary-button-text-color};
-  --secondary-icon-color: #71347b;
-  --description-text-color: #{$description-text};
-  --expandable-menu-default-bg: #{$expandable-menu-default-bg}; // TODO: Change the color variable name
-  --expandable-menu-option-bg: #{$expandable-menu-option-bg}; // TODO: Change the color variable name
-  --text-color: #{$text-color};
-  --file-dropzone-default-color: #{$file-dropzone-default-color};
-  --file-dropzone-selected-color: #{$file-dropzone-selected-color};
-  --file-details-container-shadow: #{$file-details-container-shadow}; // TODO: Change the color variable name
-  --file-details-bg: #{$file-details-bg}; // TODO: Change the color variable name
-  --error-light: #{$error_light};
-
-  --tabs-label-default-color: #{tabs-label-default-color};
-  --tabs-label-active-color: #{tabs-label-active-color};
-  --tabs-border-color: #{tabs-border-color};
-  --tabs-bg-color: #{tabs-bg-color};
-  --tab-bg-color: #{tab-bg-color};
-  --toggle-button-bg-color: #{$toggle-button-bg-color}; // TODO: Change the color variable name
-  --toggle-strip-shadow: #{$toggle-strip-shadow}; // TODO: Change the color variable name
-  --toggle-strip-color: #{$toggle-strip-color}; // TODO: Change the color variable name
-  --disable-color: #{$disable-color};
-  --toggle-strip-color: #{$toggle-strip-color};
-  --add-icon-hover-color: #{$add-icon-hover-color}; // TODO: Change the color variable name
-  --arrows-button-border-color: #{$arrows-button-border-color}; // TODO: Change the color variable name
-  --arrow-button-bg-color: #{$arrow-button-bg-color}; // TODO: Change the color variable name
-  --text-bg-highlight: #{$text-bg-highlight};
-  --slider-table-color: #{$slider-table-color};
-  --variable-dropdown-bg: #($variable-dropdown-bg);
-  --dataset-tooltip-title: #($dataset-tooltip-title),
-    --dataset-tooltip-value: #($dataset-tooltip-value);
-}