pixel-react 1.13.43 → 1.13.44

package/lib/styles/StatusButton.scss

@@ -1,96 +0,0 @@
-@mixin status-colors($bg-color, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-}
-
-.ff-status-button {
-  border: none;
-  border-radius: 4px;
-  padding: 0 4px;
-  cursor: pointer;
-  width: 80px;
-  height: 16px;
-
-  &__text {
-    color: inherit;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 76px;
-    text-transform: capitalize;
-  }
-
-  &--passed {
-    @include status-colors(
-      var(--status-button-bg-passed),
-      var(--status-button-text-passed)
-    );
-  }
-
-  &--failed {
-    @include status-colors(
-      var(--status-button-bg-failed),
-      var(--status-button-text-failed)
-    );
-  }
-
-  &--running {
-    @include status-colors(
-      var(--status-button-bg-running),
-      var(--status-button-text-running)
-    );
-  }
-
-  &--skipped {
-    @include status-colors(
-      var(--status-button-bg-skipped),
-      var(--status-button-text-skipped)
-    );
-  }
-
-  &--warning {
-    @include status-colors(
-      var(--status-button-bg-warning),
-      var(--status-button-text-warning)
-    );
-  }
-
-  &--terminated {
-    @include status-colors(
-      var(--status-button-bg-terminated),
-      var(--status-button-text-terminated)
-    );
-  }
-
-  &--partially-executed {
-    @include status-colors(
-      var(--status-button-bg-partiallyExecuted),
-      var(--status-button-text-partiallyExecuted)
-    );
-  }
-
-  &--aborted {
-    @include status-colors(
-      var(--status-button-bg-aborted),
-      var(--status-button-text-aborted)
-    );
-  }
-
-  &--not-executed {
-    @include status-colors(
-      var(--status-button-bg-notExecuted),
-      var(--status-button-text-notExecuted)
-    );
-  }
-  &--default {
-    @include status-colors(
-      var(--status-button-bg-default),
-      var(--status-button-text-default)
-    );
-  }
-
-  &:disabled {
-    opacity: 50%;
-    cursor: not-allowed;
-  }
-}

package/lib/styles/StatusCard.scss

@@ -1,101 +0,0 @@
-$ff-status-colors: (
-  passed: var(--ff-card-passed-status-bg-color),
-  failed: var(--ff-card-failed-status-bg-color),
-  warning: var(--ff-card-warning-status-bg-color),
-  skipped: var(--ff-card-skipped-status-bg-color),
-  flaky: var(--ff-card-flaky-status-bg-color),
-  total: var(--card-total-defect-color),
-  defect: var(--card-defect-density),
-  open: var(--ff-card-failed-status-bg-color),
-  closed: var(--ff-card-passed-status-bg-color),
-  quality: var(--ff-card-warning-status-bg-color),
-);
-
-.ff-card-container {
-  height: 78px;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  overflow: hidden;
-  cursor: pointer;
-
-  &:hover {
-    @each $state, $color in $ff-status-colors {
-      &.#{$state} {
-        border-color: $color;
-        .ff-status-bar {
-          border-right: 1px solid $color;
-        }
-      }
-    }
-  }
-
-  .ff-status-bar {
-    width: 12%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    border-right: 1px solid var(--border-color);
-    border-radius: 3px;
-
-    .ff-status-text {
-      transform: rotate(-90deg);
-      transform-origin: center;
-      display: flex;
-      align-items: start;
-      height: 16px;
-      width: 6px;
-    }
-  }
-
-  @each $state, $color in $ff-status-colors {
-    &.#{$state} {
-      .ff-status-bar {
-        background-color: $color;
-        color: var(--base-bg-color);
-      }
-
-      .ff-content {
-        .ff-number {
-          color: $color;
-        }
-      }
-
-      &.toggled {
-        background-color: $color;
-        border: 1px solid $color;
-
-        .ff-status-bar {
-          border-right: 1px solid $color;
-          background-color: var(--base-bg-color);
-          color: $color;
-        }
-
-        .ff-content {
-          background-color: $color;
-        }
-      }
-    }
-  }
-
-  .ff-content {
-    height: 100%;
-    flex: 1;
-    padding: 0px 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .ff-number {
-      margin-bottom: 4px;
-      color: inherit;
-    }
-  }
-
-  .ff-content.red-background {
-    gap: 8px;
-  }
-}

package/lib/styles/StatusIndicator.scss

@@ -1,124 +0,0 @@
-.ff-status-indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  height: 40px;
-  padding: 11px 10px 11px 8px;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
-  border: 0.5px solid transparent;
-  background-color: transparent;
-
-  &__content {
-    display: flex;
-    align-items: center;
-  }
-
-  &__icon {
-    flex-shrink: 0;
-    padding: 0;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
-
-    &--danger {
-      background-color: var(--ff-icon-hover-color-dark-variant);
-      color: var(--ff-delete-button-attachment);
-    }
-
-    &--success {
-      background-color: var(--status-button-text-warning);
-      color: var(--status-success-text-color);
-    }
-
-    &--default {
-      background-color: var(--ff-icon-hover-color-dark-variant);
-      color: var(--ff-avatar-background-color);
-    }
-  }
-
-  &__label {
-    white-space: nowrap;
-    padding-left: 8px;
-
-    &--danger,
-    &--success {
-      color: var(--text-color);
-    }
-
-    &--default {
-      color: var(--ff-avatar-background-color);
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &--default {
-    color: var(--ff-avatar-background-color);
-    background-color: transparent;
-
-    &-bg {
-      background-color: var(--success-button-bg);
-    }
-
-    &-border {
-      border-color: var(--ff-avatar-background-color);
-    }
-
-    &:hover {
-      background-color: var(--toast-close-icon-wrapper-bg);
-      border-color: var(--ff-avatar-background-color);
-    }
-  }
-
-  &--success {
-    color: var(--status-success-text-color);
-    background-color: transparent;
-
-    &-bg {
-      background-color: var(--success-button-bg);
-    }
-
-    &-border {
-      border-color: var(--status-success-text-color);
-    }
-
-    &:hover {
-      background-color: var(--toast-close-icon-wrapper-bg);
-      border-color: var(--status-success-text-color);
-    }
-  }
-
-  &--danger {
-    color: var(--ff-delete-button-attachment);
-    background-color: transparent;
-
-    &-bg {
-      background-color: var(--success-button-bg);
-    }
-
-    &-border {
-      border-color: var(--ff-delete-button-attachment);
-    }
-
-    &:hover {
-      background-color: var(--toast-close-icon-wrapper-bg);
-      border-color: var(--ff-delete-button-attachment);
-    }
-  }
-
-  &--hover-border {
-    border: 0.5px solid transparent;
-  }
-
-  &:hover {
-    &--hover-border {
-      border-color: transparent;
-    }
-  }
-}

package/lib/styles/StepGroupDetailView.scss

@@ -1,37 +0,0 @@
-.ff-view-step-group {
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    overflow: hidden;
-
-    &__header {
-        padding: 4px 8px;
-        display: flex;
-        justify-content: space-between;
-        background-color: var(--arrows-button-border-color);
-
-        &_info {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        &_link {
-            display: flex;
-            align-items: center;
-
-            &__line {
-                padding: 0px !important;
-            }
-        }
-    }
-
-    &__content {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-
-        &__item {
-            padding: 8px;
-            box-sizing: border-box;
-        }
-    }
-}

package/lib/styles/StepInnerTable.scss

@@ -1,160 +0,0 @@
-.ff-fixed-header-steps-table {
-  scrollbar-width: none;
-
-
-  .ff-table-steps {
-    width: 100%;
-
-    .steps-inner-thead {
-      tr {
-        th {
-          visibility: hidden;
-        }
-      }
-    }
-
-    .ff-steps-tbody {
-
-      tr:hover,
-      tr.hover {
-        background-color: var(--hover-color);
-
-        .icon-container {
-          opacity: 1;
-          transform: translateX(0);
-        }
-
-        .ff-table-drag,
-        .ff-table-drag-icon,
-        .ff-table-checkbox {
-          opacity: 1 !important;
-        }
-      }
-
-      .steps-edit-row {
-
-        &>td {
-          padding: 0px;
-        }
-
-        &:hover {
-          background-color: transparent;
-        }
-
-      }
-
-      tr {
-        .action-column {
-          opacity: 0;
-        }
-
-        .icon-container {
-          padding-left: 4px;
-          opacity: 0;
-          display: flex;
-          justify-content: flex-end;
-          transition: opacity 0.3s ease, transform 0.3s ease;
-          transform: translateX(20px);
-        }
-
-        .ff-data-checkbox-container {
-          display: flex;
-          align-items: center;
-          overflow: hidden;
-
-          .ff-table-checkbox {
-            opacity: 0;
-          }
-
-          .ff-table-drag {
-            opacity: 0;
-            transition: opacity 0.3s ease, transform 0.3s ease;
-          }
-
-          .ff-table-drag-icon {
-            opacity: 0;
-            transition: opacity 0.3s ease, transform 0.3s ease;
-          }
-
-          .ff-margin-container {
-            display: flex;
-            align-items: center;
-          }
-
-          &-content {
-            display: flex;
-            align-items: center;
-          }
-        }
-
-        td {
-          color: var(--table-column-text-color);
-
-          &.clickable-cell {
-            cursor: pointer;
-          }
-
-        }
-
-        .step-detail-cell {
-          padding: 4px;
-        }
-
-        .other-detail-cell {
-          padding: 7px 8px;
-        }
-      }
-    }
-  }
-
-  .steps-border-borderRadius {
-    border: 1px solid var(--slider-table-color);
-    border-radius: 5px;
-    border-collapse: none !important;
-  }
-
-  .steps-no-data-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-
-  .ff-accordion-arrow {
-    margin-left: 4px;
-    transition: transform 0.25s ease-in-out;
-    cursor: pointer;
-
-    .steps-arrow-svg>svg:hover {
-      color: var(--text-color) !important;
-    }
-  }
-
-  .ff-accordion-arrow.expanded {
-    transform: rotate(90deg);
-  }
-}
-
-.step-result-stats {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 2px;
-  margin-left: 4px;
-  white-space: nowrap;
-}
-
-.drag-icon {
-  cursor: grab !important;
-
-  &:active {
-    cursor: grabbing !important;
-  }
-
-  &-disabled {
-    cursor: default !important;
-    opacity: 0;
-    ;
-  }
-}

package/lib/styles/StepLandingTable.scss

@@ -1,93 +0,0 @@
-.ff-accordion-table-container-steps {
-  overflow-y: auto;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-
-  .ff-accordion-table {
-    width: 100%;
-    flex-shrink: 0;
-
-    .ff-table-header {
-      text-align: left;
-      padding: 7px 8px;
-      color: var(--text-color);
-      background-color: var(--border-color);
-    }
-
-    &--primary-bg {
-      background-color: var(--table-with-accordion-header-primary-bg);
-    }
-
-    &--secondary-bg {
-      background-color: var(--secondary-bg);
-    }
-
-    &--default-bg {
-      background-color: var(--default-bg);
-    }
-  }
-
-  .ff-accordion-fixed-header {
-    position: sticky;
-    top: 0;
-    z-index: 99;
-    background-color: var(--file-details-bg);
-  }
-
-  .ff-accordion-table-body {
-    flex-grow: 1;
-    overflow-y: auto;
-  }
-
-
-
-  .column-table-accordion {
-    width: 100%;
-
-    .step-title-article {
-      display: flex;
-
-      &:hover {
-        background-color: var(--hover-color);
-      }
-
-      .step-result {
-        padding: 4px 8px;
-        overflow: hidden;
-
-        &-text {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-
-      .accordion-header {
-        display: flex;
-        align-items: center;
-        padding: 4px 8px 4px 24px;
-
-        .accordion-arrow {
-          margin-left: 4px;
-          transition: transform 0.2s ease-in-out;
-          cursor: pointer;
-
-          .steps-arrow-svg>svg:hover {
-            color: var(--text-color) !important;
-          }
-
-          img {
-            height: 30px;
-            width: 35px;
-          }
-        }
-
-        .accordion-arrow.expanded {
-          transform: rotate(90deg);
-        }
-      }
-    }
-  }
-}

package/lib/styles/SwitchButton.scss

@@ -1,31 +0,0 @@
-/* Container Styling */
-.ff-switch-container {
-  display: flex;
-  background-color: var(--base-bg-color);
-  height: 24px;
-  width: 48px;
-  border-radius: 5px;
-  border: 1px solid var(--brand-color);
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  overflow: hidden;
-
-  /* Button Styling */
-  .ff-switch-button {
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    /* Button Hover Effect */
-    &:hover {
-      background-color: var(--hover-color);
-      color: var(--brand-color);
-    }
-  }
-
-  /* Active Button */
-  .ff-switch-button.active {
-    background-color: var(--brand-color);
-    color: var(--base-bg-color);
-  }
-}