pixel-react 1.13.43 → 1.13.44

package/lib/styles/DonutChart.scss

@@ -1,76 +0,0 @@
-@use '../../../assets/styles/fonts';
-.ff-donut-chart-section {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-}
-
-.ff-donut-chart-svg-container {
-  display: flex;
-  svg {
-    text:nth-of-type(1) {
-      @extend .fontSm;
-      font-weight: 600;
-    }
-    text:nth-of-type(2) {
-      @extend .fontXL;
-      font-weight: 600;
-    }
-    text:nth-of-type(3) {
-      @extend .font-size-8;
-      font-weight: 500;
-    }
-  }
-}
-.ff-status-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.ff-status-item {
-  display: flex;
-  gap: 40px;
-  justify-content: space-between;
-  opacity: 1;
-  @extend .fontSm;
-  &.ff-highlighted {
-    opacity: 1;
-  }
-
-  &.ff-fade {
-    opacity: 10%;
-  }
-
-  .ff-status-text {
-    font-weight: 500;
-    color: var(--status-skipped-text-color);
-  }
-  .ff-status-details-script-count {
-    display: flex;
-    gap: 4px;
-    font-weight: 600;
-  }
-  .ff-status-details-script-percentage {
-    font-weight: 400;
-    color: var(--brand2-color);
-  }
-}
-
-.ff-status-label {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.ff-status-details {
-  display: flex;
-  gap: 4px;
-}
-
-.ff-status-color {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  opacity: 80%;
-}

package/lib/styles/DownloadClient.scss

@@ -1,67 +0,0 @@
-@use '../../assets/styles/mixins' as *;
-
-.ff-download-client-wrapper {
-  position: absolute;
-  height: 181px;
-  width: 368px;
-  border: 1px solid var(--download-client-border-color);
-  border-radius: 4px;
-  box-shadow: 0px 0px 8px 0px
-    var(--download-client-icon-container-box-shadow-color);
-
-  .ff-download-client-header-wrapper {
-    position: relative;
-    @include center-content;
-    justify-content: space-between;
-    background-color: var(--download-client-header-bg-color);
-
-    .ff-download-client-hollow-triangle {
-      position: absolute;
-      height: 8px;
-      width: 8px;
-      border: 1px solid var(--download-client-border-color);
-      top: -6px;
-      right: 64px;
-      z-index: -1;
-      border-radius: 2px;
-      transform: rotate(45deg);
-    }
-
-    .ff-download-client-header-text {
-      margin-left: 4px;
-    }
-
-    .ff-download-client-close-icon {
-      cursor: pointer;
-      margin-right: 10px;
-    }
-  }
-
-  .ff-download-client-content-text {
-    width: calc(100% - 16px);
-    height: 132px;
-    background-color: #fff;
-    padding: 8px;
-
-    .ff-download-client-description-text {
-      margin-bottom: 8px
-    }
-
-  }
-
-  .ff-download-client-os-wrapper {
-    @include center-content;
-    gap: 24px;
-
-    .ff-os-version-wrapper {
-      @include center-content;
-      height: 64px;
-      width: 64px;
-      cursor: pointer;
-      border-radius: 8px;
-      border: 1px solid var(--download-client-icon-container-border-color);
-      box-shadow: 0px 0px 10px 0px
-        var(--download-client-icon-container-box-shadow-color);
-    }
-  }
-}

package/lib/styles/DragAndDropList.scss

@@ -1,69 +0,0 @@
-$primary-color: #2563eb;
-$primary-hover-color: #235dda;
-$background-color: #f2f2f3;
-$white-color: #fff;
-$border-radius: 5px;
-$box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-$checkbox-size: 20px;
-
-.drag-and-drop-list {
-  height: max-content;
-  width: fit-content;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 30px;
-}
-
-.column {
-  background-color: $background-color;
-  border-radius: $border-radius;
-  padding: 15px;
-  width: 80%;
-  max-width: 500px;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-
-  .task {
-    background-color: $white-color;
-    border-radius: $border-radius;
-    box-shadow: $box-shadow;
-    padding: 4px 8px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 20px;
-    cursor: grab;
-    &-title {
-      word-break: break-all;
-    }
-  }
-}
-
-.container {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-
-  .input {
-    border: 2px solid #ddd;
-    border-radius: $border-radius;
-    padding: 10px;
-    width: 200px;
-  }
-
-  .button {
-    border: none;
-    border-radius: $border-radius;
-    padding: 10px 15px;
-    background-color: $primary-color;
-    color: $white-color;
-    cursor: pointer;
-    margin-left: 10px;
-
-    &:hover {
-      background-color: $primary-hover-color;
-    }
-  }
-}

package/lib/styles/Drawer.scss

@@ -1,140 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-drawer-container {
-  .ff-overlay {
-    position: fixed;
-    inset: 0;
-    background-color: var(--drawer-title-color);
-    opacity: 0.5;
-    transition: all 0.4s ease-in-out;
-  }
-
-  .ff-drawer {
-    margin-bottom: 4px;
-    position: fixed;
-    right: 5px;
-    bottom: 0;
-    top: 87px;
-    background-color: var(--primary-button-text-color);
-    transform: translateX(100%);
-    opacity: 0;
-
-    &--open {
-      transform: translateX(0);
-      opacity: 1;
-    }
-    &--small {
-      width: 442px;
-    }
-    &--medium {
-      width: 664px;
-    }
-    &--large {
-      width: 886px;
-    }
-    &--x-large {
-      width: calc(100vw - 10px);
-    }
-    &--open,
-    &--medium,
-    &--large,
-    &--x-large {
-      transition: all 0.4s ease-in-out;
-      border-radius: 5px;
-      border: 1px solid var(--table-header-color-primary);
-    }
-
-    .ff-drawer-header {
-      padding: 0px 4px;
-      display: flex;
-      gap: 10px;
-      border-bottom: 1px solid var(--table-header-color-primary);
-
-      .ff-drawer-title {
-        @extend .fontSm;
-        font-weight: 600;
-        color: var(--drawer-title-color);
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        width: 100%;
-      }
-      .ff-close-icon {
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .ff-drawer-action-section {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        height: 32px;
-
-        .ff-action-button {
-          display: flex;
-          align-items: center;
-          gap: 5px;
-
-          .ff-expand-collapse-button {
-            cursor: pointer;
-            background-color: var(--button-bg-color);
-            outline: none;
-            border: none;
-            margin: 0;
-            border: 1px solid transparent;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 8px;
-          }
-          .ff-custom-header {
-            background-color: var(--drawer-footer-bg);
-            width: 100%;
-          }
-        }
-      }
-      .ff-custom-header {
-        width: 100%;
-        padding: 0;
-      }
-    }
-
-    .ff-drawer-body {
-      background-color: var(--drawer-footer-bg);
-    }
-    .ff-drawer-body-with-scroll {
-      background-color: var(--drawer-footer-bg);
-      overflow-y: auto;
-    }
-
-    .ff-drawer-footer {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 4px 8px 4px 8px;
-      display: flex;
-      justify-content: space-between;
-      border-top: 1px solid var(--drawer-footer-border);
-      background-color: var(--base-bg-color);
-      transform: translateY(3px);
-      border-radius: 0 0 4px 4px;
-
-      .button-container {
-        display: flex;
-        justify-content: flex-end;
-        gap: 8px;
-      }
-      .ff-custom-footer {
-        padding: 0;
-        background-color: var(--drawer-footer-bg);
-        width: 100%;
-        border-radius: 0 0 8px 8px;
-      }
-    }
-  }
-}

package/lib/styles/Dropdown.scss

@@ -1,117 +0,0 @@
-.ff-select-dropdown-wrapper,
-.ff-select-dropdown-mini-modal-wrapper {
-  max-height: 160px;
-  z-index: 999999;
-  position: absolute;
-  min-width: 50px;
-  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: hidden auto;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 12px;
-
-    &-thumb {
-      background-color: var(--ff-select-scroll-thumb-color);
-      border-radius: 4px;
-    }
-
-    &-track {
-      background: var(--ff-select-scroll-track-bg);
-      border-radius: 4px;
-    }
-  }
-
-  .ff-select-dropdown-option {
-    box-sizing: border-box;
-    cursor: pointer;
-    padding: 0px 8px;
-    border-radius: 4px;
-    min-height: 32px;
-
-    .ff-select-dropdown-text {
-      width: 100%;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    .ff-select-dropdown__icon {
-      margin-right: 4px;
-    }
-
-    .ff-select-dropdown-icon-container {
-      width: calc(100% - 24px);
-      display: flex;
-      flex: 1;
-      align-items: center;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &__selected,
-    &:hover {
-      background-color: var(--ff-select-option-hover-color);
-    }
-
-    &__disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .ff-select-no-option {
-    box-sizing: border-box;
-    padding: 0px 8px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    cursor: not-allowed;
-  }
-}
-
-.ff-select-dropdown-modal-wrapper {
-  max-height: 256px;
-}
-
-.ff-select-dropdown-mini-modal-wrapper {
-  display: flex;
-  justify-content: space-between;
-
-  .ff-select-label-minimodal-wrapper {
-    width: calc(50% - 4px);
-  }
-
-  .ff-select-mini-modal-wrapper {
-    width: 50%;
-    padding: 8px 2px 0px 4px;
-    display: flex;
-    align-items: flex-end;
-    margin-left: 4px;
-    border-left: 1px dashed var(--border-color);
-
-    .ff-select-modal-wrapper {
-      height: fit-content;
-      width: calc(100% - 4px);
-      border-radius: 8px;
-      border: 1px solid var(--ff-select-background-color);
-      box-shadow: 0px 1px 8px 0px var(--ff-select-option-wrapper-box-shadow);
-      border: 1px solid var(--border-color);
-
-      .ff-select-mini-modal-footer {
-        min-height: 32px;
-        border-top: 1px solid var(--border-color);
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: 8px;
-        padding-right: 4px;
-      }
-    }
-  }
-}

package/lib/styles/EditComponent.scss

@@ -1,36 +0,0 @@
-.edit_depends_on_script {
-    border-radius: 8px;
-    margin: 8px;
-    border: 1px solid var(--ff-select-option-wrapper-box-shadow);
-
-    &__header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-radius: 8px 8px 0 0;
-        background: var(--slider-table-color);
-        min-height: 34px;
-        padding: 0 8px;
-
-        &_text {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        &_buttons {
-            display: flex;
-            justify-content: end;
-            gap: 8px;
-        }
-    }
-
-    &__form {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
-        padding: 14px 8px 8px 8px;
-
-
-    }
-}

package/lib/styles/EditLabel.scss

@@ -1,141 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-add-module-container {
-  .ff-add-module-edit-container {
-    display: flex;
-
-    .ff-add-module-input-with-dropdown {
-      display: flex;
-      border: 1px solid var(--input-default-border-color);
-      border-radius: 4px;
-      padding: 0;
-      position: relative;
-      justify-content: space-between;
-
-      &--danger{
-        border-color: var(--input-error-text-color);
-  
-        .ff-add-module-input {
-          border-color: var(--input-error-text-color) !important;
-        }
-      }
-    }
-
-    .ff-add-module-dropdown {
-      .ff-select {
-        background-color: var(--base-bg-color);
-      }
-    }
-
-    &:focus-within {
-      .ff-add-module-input-with-dropdown {
-        border-color: var(--nlp-color);
-
-        .ff-add-module-label-container {
-          top: -6px;
-          @extend .fontXs;
-          background-color: var(--input-label-bg-color);
-          line-height: 12px;
-          padding: 0px 2px;
-          margin-left: 10px;
-
-          .ff-add-module-label {
-            color: var(--nlp-color);
-          }
-        }
-
-        .ff-add-module-input {
-          border-color: var(--nlp-color);
-        }
-
-        &--danger{
-          border-color: var(--input-error-text-color);
-
-          .ff-add-module-input {
-            border-color: var(--input-error-text-color);
-          }
-        }
-      }
-    }
-
-    .ff-add-module-input-container {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-
-      .ff-add-module-label-container {
-        display: flex;
-        gap: 2px;
-        position: absolute;
-        border: none;
-        outline: none;
-        line-height: 18px;
-        padding: 2px 6px;
-        transition: all 0.3s ease-in-out;
-
-        .ff-add-module-label {
-          color: var(--input-default-label-color);
-        }
-      }
-
-      .ff-add-module-input {
-        @extend .fontSm;
-        height: 100%;
-        padding: 0px 6px;
-        border-radius: 4px;
-        border: none;
-        outline: none;
-        line-height: 18px;
-        color: var(--add-module-text-color);
-
-        &--border-right {
-          border-radius: 4px 0 0 4px;
-          border-right: 1px solid var(--input-default-border-color);
-        }
-      }
-
-      &--float {
-        .ff-add-module-label-container {
-          top: -6px;
-          @extend .fontXs;
-          background-color: var(--input-label-bg-color);
-          line-height: 12px;
-          padding: 0px 2px;
-          margin-left: 10px;
-
-          .ff-add-module-label {
-            color: var(--nlp-color);
-          }
-        }
-      }
-    }
-
-    .ff-module-icon-container {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }
-
-    .required-asterisk {
-      color: var(--input-error-text-color);
-      padding-right: 4px;
-    }
-  }
-
-  .ff-add-module-display-text {
-    color: var(--add-module-text-color);
-    white-space: nowrap;
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    .ff-highlight-bg {
-      background-color: var(--text-bg-highlight);
-    }
-  }
-
-  .error-text {
-    margin: 0 0 0 5px;
-    color: var(--label-edit-error-text);
-  }
-}