pixel-react 1.13.43 → 1.13.44

package/lib/styles/ChipWithCount.scss

@@ -1,30 +0,0 @@
-.ff-chip-with-count-container {
-  display: flex;
-  gap: 4px;
-  .ff-chip-label {
-    border: 1px solid var(--brand-color);
-    border-radius: 12px;
-    padding: 4px 8px;
-    color: var(--switch-license-header-text-color);
-    &:hover {
-      background-color: var(--brand-color);
-      color: var(--primary-button-text-color);
-    }
-  }
-  .ff-chip-count {
-    border: 1px solid var(--brand-color);
-    border-radius: 20px;
-    padding: 4px 8px;
-    background-color: var(--default-chip-count-background-color);
-    color: var(--switch-license-header-text-color);
-    &:hover {
-      background-color: var(--brand-color);
-      color: var(--primary-button-text-color);
-    }
-  }
-}
-.ff-chip-tooltip {
-  .ff-chip-tooltip-label {
-    padding: 4px 8px;
-  }
-}

package/lib/styles/ChipsAccordion.scss

@@ -1,65 +0,0 @@
-.ff-chips-accordion {
-  border: 1px solid var(--nlp-border-color);
-  border-radius: 4px;
-  padding: 6px 8px;
-  justify-content: space-between;
-  display: flex;
-  overflow: hidden;
-  margin-left: 8px;
-  position: relative;
-  gap: 8px;
-  background-color: var(--base-bg-color);
-  .ff-chips-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-    transition: max-height 0.3s ease;
-    max-height: 20px;
-    overflow: hidden;
-    &.expanded {
-      max-height: 150px;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-    &.expanded::-webkit-scrollbar {
-      width: 0px;
-    }
-    .chips-container {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      align-items: center;
-      width: 100%;
-      .chip {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 2px 4px;
-        border: none;
-        border-radius: 4px;
-        background-color: var(--toast-close-icon-wrapper-bg);
-        cursor: pointer;
-        transition: background-color 0.15s ease, color 0.15s ease;
-        color: var(--nlp-chips-blur-text-color);
-      }
-      .chip.selected-chip {
-        background-color: var(--nlp-selected-chip-bg);
-        color: var(--nlp-chips-select-text-color);
-      }
-    }
-    .chip-text {
-      cursor: pointer !important;
-    }
-  }
-  .ff-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: transform 0.2s ease;
-    &.expanded {
-      transform: rotate(180deg);
-    }
-  }
-}

package/lib/styles/ColorBarSelector.scss

@@ -1,26 +0,0 @@
-.ff-excel-color-selector {
-  position: absolute;
-  width: 14px;
-  height: 3px;
-  bottom: 3px;
-  z-index: 200;
-  box-shadow: 0px 0px 1px var(--text-color);
-  transform: scale(1);
-  transition: transform 0.2s ease;
-
-  .ff-excel-color-selector-picker {
-    width: 100%;
-    height: 0;
-    padding: 0;
-    visibility: hidden;
-  }
-}
-
-.ff-excel-color-selector:hover {
-  transform: scale(1.2);
-}
-
-.color-selector-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}

package/lib/styles/ColorPalette.scss

@@ -1,62 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-style-guide {
-  border-radius: 12px;
-
-  .style-guide-header {
-    background-color: var(--brand-color);
-
-    height: 100px;
-    padding: 40px;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    color: var(--tooltip-text-color);
-
-    & div {
-      @extend .font-size-32;
-      font-weight: 600;
-    }
-    & span {
-      @extend .fontLg;
-      font-weight: 400;
-    }
-  }
-
-  .style-guide-content {
-    padding: 20px;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    grid-gap: 40px;
-
-    .color-card {
-      display: flex;
-      flex-direction: column;
-      padding: 10px;
-
-      .color-box {
-        height: 82px;
-        width: 210px;
-        border-radius: 12px;
-        margin-bottom: 10px;
-        > p {
-          color: var(--colorCode);
-          backdrop-filter: invert(100%);
-        }
-      }
-
-      .color-name {
-        @extend .fontMd;
-        font-weight: 500;
-        margin-bottom: 5px;
-        text-transform: capitalize;
-        word-wrap: break-word;
-      }
-
-      .color-code {
-        @extend .fontSm;
-        font-weight: 400;
-        color: var(--text-color);
-      }
-    }
-  }
-}

package/lib/styles/Comments.scss

@@ -1,282 +0,0 @@
-@use '../../assets/styles/fonts';
-.ff-comments-container-box {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .comment-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-  .commentContainer {
-    width: 100%;
-    position: relative;
-    &.no-border {
-      border-left: none;
-      border-bottom-left-radius: 0;
-      height: 12vh;
-    }
-  }
-
-  .comment-reply-container {
-    position: relative;
-
-    .inputContainer {
-      max-width: 650px;
-    }
-  }
-
-  .ff-editable-container {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    color: var(--ff-comment-text-color);
-    width: 90%;
-    &::before {
-      content: '';
-      position: absolute;
-      left: -24px;
-      height: 100%;
-      width: 6px;
-      border-inline-start: 1px solid var(--ff-comment-border-color);
-      border-bottom: 1px solid var(--ff-comment-border-color);
-      background: transparent;
-      border-end-start-radius: 10px;
-    }
-  }
-  .commentContainer__avatar {
-    background-color: var(--ff-comment-input-border-color);
-    color: var(--ff-comment-avatar-text-color);
-    font-weight: bold;
-    border-radius: 4px;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 10px;
-    position: absolute;
-    top: -8px;
-    left: -14px;
-    z-index: 1;
-    @extend .fontSm;
-  }
-
-  .comment-actions {
-    display: flex;
-    position: relative;
-    top: 12px;
-    left: -20px;
-    gap: 8px;
-
-    .action-icon {
-      cursor: pointer;
-    }
-
-    &.no-border {
-      left: 19px;
-    }
-    .ff-comment-action-item {
-      display: flex;
-      gap: 4px;
-    }
-  }
-
-  .ff-first-comment {
-    width: 100%;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    border: 1px solid var(--ff-comment-border-color);
-    @extend .fontSm;
-    .ff-comment-heading {
-      padding: 8px;
-    }
-
-    &.no-border {
-      border: none;
-    }
-  }
-
-  .input-wrapper {
-    position: relative;
-    display: flex;
-    padding-bottom: 8px;
-  }
-
-  .inputContainer {
-    display: flex;
-    max-width: 620px;
-  }
-
-  .typography-text {
-    max-width: 610px;
-    overflow-wrap: anywhere;
-  }
-
-  .inputContainer_input {
-    padding: 5px;
-    border: 1px solid var(--ff-comment-border-color);
-    border-radius: 4px;
-    resize: none;
-    margin: 0 10px;
-    outline: none;
-    &:focus,
-    &:focus-visible {
-      outline: 1px solid var(--ff-comment-input-border-color);
-    }
-  }
-  .inputEditContainer__input {
-    padding: 5px;
-    border: 1px solid var(--ff-comment-border-color);
-    border-radius: 4px;
-    width: 100%;
-    outline: none;
-    &:focus,
-    &:focus-visible {
-      outline: 1px solid var(--ff-comment-input-border-color);
-    }
-  }
-
-  .edit-comment {
-    right: 50px;
-    bottom: -5px;
-    position: relative;
-    background: var(--ff-comment-avatar-text-color);
-    height: 20px;
-    width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-  }
-
-  .reply-comment {
-    right: 2%;
-    bottom: 28%;
-    position: absolute;
-    background: var(--ff-comment-avatar-text-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-
-  .commentsContainer {
-    padding: 8px 8px 8px 24px;
-  }
-  .child-comments {
-    position: relative;
-    margin-left: 8px;
-    width: 100%;
-    &.first-level-child,
-    &.second-level-child {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      margin-top: 8px;
-    }
-
-    &.first-level-child:before {
-      height: calc(100% - 98px);
-    }
-    &:empty:before {
-      content: none;
-    }
-  }
-  .reply-text {
-    right: 46px;
-    bottom: -4px;
-    position: relative;
-    background: var(--ff-comment-avatar-text-color);
-    height: 20px;
-    width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-  }
-  .ff-message-container {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    position: relative;
-    left: 25px;
-    margin-bottom: 8px;
-  }
-  .ff-message {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-  .ff-message-name {
-    @extend .fontSm;
-    fontweight: 600;
-  }
-  .ff-message-time {
-    color: var(--ff-comment-text-color);
-    @extend .fontXs;
-  }
-  .editable-text {
-    word-wrap: break-word;
-    color: var(--ff-comment-text-color);
-    &:focus,
-    &:focus-visible {
-      outline: 1px solid var(--ff-comment-input-border-color);
-    }
-    @extend .fontSm;
-    margin-bottom: -8px;
-  }
-  .adding-text,
-  .editable-text {
-    width: 100%;
-  }
-
-  .first_input {
-    width: 100%;
-    &:focus {
-      outline: none;
-      border-color: var(--ff-comment-input-border-color);
-    }
-    &::-webkit-scrollbar {
-      width: 3px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--ff-comment-text-color);
-      border-radius: 4px;
-    }
-  }
-  .child-comments-1,
-  .child-comments-2 {
-    position: relative;
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: 4px;
-      bottom: 0;
-      width: 1px;
-      background: var(--ff-comment-border-color);
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: -16px;
-      left: 0;
-      height: 28px;
-      width: 6px;
-      border-inline-start: 1px solid var(--ff-comment-border-color);
-      border-bottom: 1px solid var(--ff-comment-border-color);
-      background: transparent;
-      border-end-start-radius: 10px;
-    }
-
-    &:last-child:after {
-      display: none;
-    }
-  }
-}

package/lib/styles/ConditionalDropdown.scss

@@ -1,24 +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;
-    position: relative;
-    .ff-password-icon {
-      position: absolute;
-      right: 50px;
-    }
-  }
-}
-.ff-conditional-variable-dropdown {
-  padding: 4px;
-  width: auto;
-  height: 320px;
-}

package/lib/styles/ConnectingBranch.scss

@@ -1,227 +0,0 @@
-.connecting-branch-container {
-  .ff-connecting-branch-grid-container {
-    display: grid;
-    grid-template-columns:
-      minmax(100px, 0.5fr) minmax(240px, 1.5fr) minmax(130px, 0.8fr)
-      5fr;
-    grid-auto-rows: auto;
-
-    .ff-selectedMachines {
-      display: contents;
-    }
-
-    .ff-selectedMachines-input {
-      grid-column: 2 / 3;
-      display: grid;
-    }
-
-    .ff-input-box-container {
-      margin-bottom: 24px;
-      width: 100%;
-    }
-    .ff-input-box-aligned {
-      margin-bottom: 40px;
-    }
-
-    .ff-machine-instance-row {
-      display: contents;
-    }
-
-    .ff-selectedMachines-connecting-line {
-      grid-column: 3 / 4;
-      position: relative;
-
-      .ff-line {
-        position: absolute;
-        height: 1px;
-        background-color: var(--brand-color);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-      }
-
-      .ff-left-icon {
-        height: 8px;
-        width: 8px;
-        background-color: var(--brand-color);
-        border-radius: 50%;
-        margin-right: 5px;
-      }
-      .ff-left-icon-aligned {
-        position: relative;
-        left: -4px;
-      }
-      .ff-selectedMachines-connecting-line-text {
-        position: absolute;
-        top: -10px;
-        left: 50%;
-        transform: translateX(-50%);
-        background-color: var(--brand-color);
-        color: var(--tooltip-text-color);
-        padding: 4px;
-        border-radius: 12px;
-        text-align: center;
-      }
-
-      .ff-right-icon {
-        width: 0;
-        height: 0;
-        border-top: 3.8px solid transparent;
-        border-bottom: 3.8px solid transparent;
-        border-left: 12px solid var(--brand-color);
-        position: absolute;
-        right: -1px;
-      }
-
-      &.ff-second-line {
-        position: relative;
-        margin-left: 20px;
-      }
-      .ff-vertical-line {
-        position: absolute;
-        left: 24px;
-        top: 0;
-        width: 1px;
-        height: auto;
-        background-color: var(--brand-color);
-      }
-    }
-
-    .ff-machine-instance {
-      grid-column: 4 / 5;
-    }
-    .ff-machine-env-button {
-      padding: 4px 0;
-      margin-bottom: 16px;
-    }
-    .ff-selectedMachines-connecting-line {
-      margin-top: 16px;
-    }
-
-    .ff-selectedMachines-connecting-line.ff-no-instance-line {
-      margin-top: 16px;
-    }
-
-    .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {
-      width: 100%;
-      background-color: var(--brand-color);
-      height: 1px;
-      position: relative;
-    }
-
-    .ff-run-level-execution-dataset {
-      height: 66px;
-      margin-bottom: 8px;
-      border-radius: 4px;
-      margin-bottom: 16px;
-      position: relative;
-
-      .ff-curved-connector {
-        position: absolute;
-        left: -70px;
-        transform: translateX(-50%);
-        width: 40px;
-        height: 0;
-
-        .ff-curve {
-          position: relative;
-          width: 80px;
-          height: 0;
-          border: 1px dashed var(--brand-color);
-          border-top: none;
-          border-right: none;
-          border-bottom-left-radius: 8px;
-          display: flex;
-          flex-direction: column-reverse;
-
-          .ff-curve-right-icon {
-            width: 0;
-            height: 0;
-            border-top: 3.8px solid transparent;
-            border-bottom: 3.8px solid transparent;
-            border-left: 12px solid var(--brand-color);
-            margin-left: 78px;
-            position: absolute;
-            bottom: -4px;
-          }
-
-          .ff-selectedMachines-connecting-line-text {
-            position: absolute;
-            left: 50%;
-            top: 75px;
-            transform: translateX(-50%);
-            background-color: var(--brand-color);
-            color: var(--tooltip-text-color);
-            font-weight: 400;
-            font-size: 8px;
-            padding: 4px;
-            border-radius: 12px;
-            text-align: center;
-            width: 44px;
-          }
-        }
-
-        .ff-connector-0 {
-          border: none;
-          bottom: 3px;
-        }
-
-        .ff-curve-right-icon-0 {
-          display: none;
-        }
-      }
-    }
-
-    .ff-select-machine-input {
-      grid-column: 2 / 3;
-    }
-
-    .ff-grid-item.ff-dynamic-item {
-      grid-column: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      place-self: first baseline;
-      top: 1px;
-      left: 20px;
-    }
-
-    .ff-script-count-container {
-      grid-column: 1;
-      align-self: center;
-      background-color: var(--brand-color);
-      color: var(--tooltip-text-color);
-      text-align: center;
-      border-radius: 4px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 4px;
-
-      .ff-script-count-box {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-// Styles for stories
-.ff-parent-node-container {
-  border: 1px solid green;
-  height: 30px;
-  border-radius: 10px;
-  padding: 2px;
-}
-.ff-child-node-container {
-  border: 1px solid red;
-  height: 40px;
-  width: 300px;
-  border-radius: 10px;
-  padding: 8px;
-}

package/lib/styles/ConnectingBranches.scss

@@ -1,3 +0,0 @@
-.ff-connecting-branch-grid-wrapper {
-  box-sizing: border-box;
-}