pixel-react 1.13.43 → 1.13.44

package/lib/styles/IconRadioGroup.scss

@@ -1,64 +0,0 @@
-.ff-icon-radio-group {
-  width: 237px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  gap: 47px;
-  position: relative;
-}
-
-.ff-icon-radio-button {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-  z-index: 5;
-
-  &.selected {
-    background-color: var(--brand-color);
-  }
-
-  &.disabled {
-    opacity: 50%;
-    cursor: not-allowed;
-  }
-
-  .icon-container {
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid var(--border-color);
-    background: var(--drawer-footer-bg);
-    &:hover {
-      background: var(--border-color);
-    }
-
-    &.selected {
-      background-color: var(--brand-color);
-    }
-
-    .icon {
-      width: 14px;
-      height: 14px;
-    }
-  }
-}
-
-.line-connector {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: var(--border-color);
-  z-index: 3;
-  border-radius: 2px 0px 0px 0px;
-  opacity: 0px;
-}

package/lib/styles/Icons.scss

@@ -1,57 +0,0 @@
-.ff-icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 4px;
-  box-sizing: content-box;
-
-  &.ff-icon-danger {
-    &:hover {
-      background-color: var(--ff-icon-color-danger-variant);
-    }
-  }
-  &.ff-icon-dark {
-    background-color: var(--brand-color);
-    border-radius: 4px;
-    &.ff-icon-selected {
-      background-color: var(--ff-icon-selected-color);
-      svg path {
-        fill: var(--brand-color);
-      }
-    }
-    &.ff-icon-click {
-      &:hover {
-        background-color: var(--ff-icon-hover-color-dark-variant);
-        svg path {
-          fill: var(--brand-color);
-        }
-      }
-    }
-  }
-}
-
-.ff-icon-click {
-  cursor: pointer;
-  box-sizing: content-box;
-  &:hover {
-    border-radius: 4px;
-    background-color: var(--ff-icon-hover-fill-color);
-    & > svg {
-      color: var(--brand-color);
-    }
-  }
-}
-
-.ff-icon-disabled {
-  cursor: no-drop;
-  opacity: 0.5;
-  & > svg {
-    color: var(--toggle-strip-color);
-  }
-  &:hover {
-    box-shadow: none;
-    & > svg {
-      color: var(--toggle-strip-color);
-    }
-  }
-}

package/lib/styles/Input.scss

@@ -1,212 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-input-fieldset {
-  display: inline-block;
-  border: none;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-
-  &--disabled {
-    border: none;
-    background: var(--input-disabled-background-color);
-    border-radius: 4px;
-    opacity: 0.5;
-  }
-  .ff-input-container {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-
-    .ff-input {
-      padding: 6px 8px;
-      border: 1px solid var(--input-default-border-color);
-      border-radius: 4px;
-      outline: none;
-      line-height: 18px;
-      @extend .fontSm;
-      &--number,
-      &--isSearchIcon {
-        padding: 6px 24px 6px 8px;
-      }
-      &--medium {
-        padding: 10px 9px;
-      }
-      &:disabled {
-        cursor: not-allowed;
-        border: 1px solid var(--input-default-border-color);
-        background: transparent;
-      }
-      &::placeholder {
-        opacity: 0;
-        @extend .fontXs;
-        line-height: 15px;
-      }
-      &--danger {
-        border-color: var(--input-error-text-color);
-      }
-      &--transparentBackground {
-        background: transparent;
-      }
-      &--no-border {
-        border: none;
-      }
-      &--placeholder {
-        &::placeholder {
-          opacity: 1;
-        }
-      }
-    }
-
-    .ff-input-label-container {
-      pointer-events: none;
-      @extend .ff-input;
-      display: flex;
-      gap: 2px;
-      position: absolute;
-      border: none;
-      outline: none;
-      line-height: 18px;
-      margin-top: 1px;
-      transition: all 0.3s ease-in-out;
-      &--medium {
-        line-height: 25px;
-      }
-      .ff-input-label {
-        color: var(--input-default-label-color);
-        &--danger {
-          color: var(--input-error-text-color);
-        }
-        &--disabled {
-          color: var(--input-default-border-color);
-          background-color: var(--input-label-bg-color);
-        }
-      }
-
-      .required-asterisk {
-        color: var(--input-error-text-color);
-      }
-    }
-    &:hover {
-      .ff-input-label {
-        color: var(--input-default-label-color);
-        &--no-hover {
-          color: var(--input-default-label-color);
-        }
-        &--disabled {
-          color: var(--input-default-border-color);
-        }
-        &--danger {
-          color: var(--input-error-text-color);
-        }
-      }
-      .ff-input {
-        border-color: var(--brand-color);
-        &--no-hover {
-          border-color: var(--input-default-border-color);
-        }
-        &--disabled {
-          background: transparent;
-          border-color: var(--input-default-border-color);
-        }
-        &--danger {
-          border-color: var(--input-error-text-color);
-        }
-      }
-    }
-    &:focus-within {
-      .ff-input-label-container {
-        top: -9px;
-        @extend .fontXs;
-        background-color: var(--input-label-bg-color);
-        line-height: 15px;
-        padding: 0px 2px;
-        margin-left: 10px;
-      }
-      .ff-input-label {
-        &--primary {
-          color: var(--brand-color);
-        }
-        &--danger {
-          color: var(--input-error-text-color);
-        }
-      }
-      .ff-input {
-        border-color: var(--brand-color);
-
-        &--danger {
-          border-color: var(--input-error-text-color);
-        }
-
-        &::placeholder {
-          opacity: 1;
-          margin-bottom: 1px;
-        }
-      }
-    }
-
-    .ff-input-message {
-      @extend .fontXs;
-      padding: 0px 4px;
-      margin-left: 8px;
-      line-height: 15px;
-      &--space {
-        height: 15px;
-      }
-      &--danger {
-        color: var(--input-error-text-color);
-      }
-    }
-
-    &--float {
-      .ff-input-label-container {
-        //re-written label container code to place it at on border
-        top: -9px;
-        font-size: 10px;
-        background-color: var(--input-label-bg-color);
-        line-height: 15px;
-        padding: 0px 2px;
-        margin-left: 10px;
-      }
-      &--disabled {
-        cursor: not-allowed;
-        .ff-input-label-container {
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-}
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.arrow-container {
-  height: 29px;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  justify-content: space-evenly;
-  align-items: center;
-  right: 6px;
-  top: 53%;
-  background: transparent;
-  transform: translateY(-50%);
-
-  &-label {
-    top: 46%;
-  }
-  &-label-error {
-    top: 15px;
-  }
-  &-no-label-error {
-    top: 17px;
-  }
-  &-searchIcon {
-    top: 50%;
-    cursor: pointer;
-  }
-}

package/lib/styles/InputWithDropdown.scss

@@ -1,220 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-input-with-dropdown-container {
-  display: flex;
-  flex-direction: column;
-
-  .ff-input-with-dropdown {
-    display: flex;
-    border: 1px solid var(--input-default-border-color);
-    border-radius: 4px;
-    padding: 0;
-    position: relative;
-    justify-content: space-between;
-
-    .ff-input-with-dropdown--left {
-      display: flex;
-      flex-direction: row-reverse;
-    }
-
-    .ff-input-with-dropdown--right {
-      display: flex;
-      flex-direction: row;
-    }
-    .ff-floating-input--left-dropdown {
-      width: 698px;
-    }
-
-    .ff-floating-label-input-container {
-      display: flex;
-      flex: 1;
-      .ff-floating-label {
-        position: absolute;
-        z-index: 9;
-        color: var(--input-default-border-color);
-        top: 6px;
-        left: 7px;
-        @extend .fontSm;
-        transition: all 0.3s ease-in-out;
-
-        .ff-required-asterisk {
-          color: var(--input-error-text-color);
-        }
-        &--filled {
-          color: var(--input-active-text-color);
-        }
-        &--no-hover {
-          color: var(--input-default-border-color);
-        }
-        &--error {
-          color: var(--input-error-text-color);
-        }
-      }
-
-      .ff-floating-input {
-        width: 100%;
-        padding: 6px 7px;
-        line-height: 18px;
-        border: none;
-        outline: none;
-        border-right: 1px solid var(--input-default-border-color);
-        border-radius: 4px 0 0 4px;
-        @extend .fontSm;
-
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-        &::placeholder {
-          opacity: 0;
-        }
-        &:disabled {
-          cursor: not-allowed;
-          background: transparent;
-        }
-        &--error {
-          border-color: var(--input-error-text-color);
-        }
-        &--left-dropdown {
-          &::placeholder {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    &--no-hover {
-      border-color: var(--input-default-border-color);
-    }
-    &--disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-    &--error {
-      border-color: var(--input-error-text-color);
-    }
-
-    .ff-floating-dropdown {
-      width: 100%;
-      border: none;
-      outline: none;
-      margin: 0;
-
-      &:disabled {
-        cursor: not-allowed;
-      }
-      &:hover {
-        background-color: var(--dropdown-bg-color);
-      }
-    }
-
-    .ff-floating-dropdown--left {
-      min-width: 94px;
-    }
-    .seperatorline {
-      height: 26px;
-      margin-top: 3px;
-      border-right: 0.5px solid var(--brand-color);
-      flex-shrink: 0;
-      border-radius: 2px;
-    }
-  }
-  &:hover {
-    .ff-input-with-dropdown {
-      border-color: var(--brand-color);
-
-      &--filled {
-        border-color: var(--input-default-border-color);
-      }
-      &--disabled {
-        border-color: var(--input-default-border-color);
-      }
-      &--error {
-        border-color: var(--input-error-text-color);
-      }
-      &--left .ff-floating-label {
-        color: var(--input-hover-border-color);
-        &--filled {
-          color: var(--input-default-border-color);
-        }
-        &--disabled {
-          color: var(--input-default-border-color);
-        }
-        &--error {
-          color: var(--input-error-text-color);
-        }
-      }
-      .ff-floating-input {
-        border-color: var(--brand-color);
-        &--filled {
-          border-color: var(--input-default-border-color);
-        }
-        &--disabled {
-          border-color: var(--input-default-border-color);
-        }
-        &--error {
-          border-color: var(--input-error-text-color);
-        }
-      }
-    }
-  }
-
-  &:focus-within {
-    .ff-input-with-dropdown {
-      border-color: var(--input-active-text-color);
-      &--error {
-        border-color: var(--input-error-text-color);
-      }
-
-      .ff-floating-label {
-        top: -9px;
-        background-color: var(--input-label-bg-color);
-        padding: 0px 2px;
-        color: var(--input-active-text-color);
-        line-height: 15px;
-        font-size: 10px !important;
-
-        &--error {
-          color: var(--input-error-text-color);
-        }
-      }
-      .ff-floating-input {
-        border-color: var(--input-active-text-color);
-        &--error {
-          border-color: var(--input-error-text-color);
-        }
-        &::placeholder {
-          opacity: 1;
-        }
-      }
-    }
-  }
-  &--filled {
-    .ff-input-with-dropdown {
-      .ff-floating-label-input-container {
-        border-color: var(--input-active-text-color);
-        .ff-floating-label {
-          //re-written label container code to place it at on border
-          top: -9px;
-          background-color: var(--input-label-bg-color);
-          padding: 0px 2px;
-          line-height: 15px;
-          font-size: 10px !important;
-        }
-      }
-    }
-    span {
-      font-size: 8px;
-    }
-    .required-asterisk {
-      color: var(--input-error-text-color);
-    }
-  }
-
-  .ff-helper-text {
-    color: var(--input-error-text-color);
-    @extend .fontXs;
-    padding: 0 11px;
-  }
-}

package/lib/styles/LabelEditTextField.scss

@@ -1,94 +0,0 @@
-@use '../../assets/styles/fonts' as *;
-
-.ff-label-edit-text-field {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  .ff-label-text-field {
-    display: flex;
-    gap: 5px;
-  }
-  .ff-label-text-field-with-dropdown,
-  .ff-label-text-field-without-dropdown {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  .ff-label {
-    position: absolute;
-    top: 0;
-    left: 10px;
-    transform: translateY(-50%);
-    transition: all 0.2s ease;
-    color: var(--label-edit-text-label-color);
-    background: var(--label-edit-text-background-color);
-    padding: 0 4px;
-    @extend .font-size-8;
-  }
-  .ff-textfield-label {
-    @extend .ff-label;
-    top: 5px;
-  }
-
-  .display-text {
-    padding: 4px;
-    border-radius: 4px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-  }
-
-  .ff-text-field,
-  .dropdown {
-    border: 1px solid var(--label-edit-text-label-color);
-    outline: none;
-    width: fit-content;
-    @extend .fontSm;
-  }
-  .ff-text-field {
-    position: relative;
-    padding: 0 4px;
-    border-radius: 4px;
-  }
-  .ff-text-dropdown-field {
-    flex: 2;
-    border: 1px solid var(--label-edit-text-label-color);
-    border-radius: 4px 0 0 4px;
-    border-right: none;
-    border-width: thin;
-    padding-left: 5px;
-    @extend .fontSm;
-    &:focus-visible {
-      outline: none;
-    }
-  }
-  .dropdown {
-    border-radius: 0 4px 4px 0;
-    flex: 1;
-    height: inherit;
-  }
-
-  .ff-icon-container {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    .confirm-icon,
-    .cancel-icon {
-      cursor: pointer;
-    }
-    .disabled-confirm-icon {
-      cursor: default;
-      opacity: 0.5;
-    }
-  }
-
-  .error-text {
-    margin: 0 0 0 5px;
-    color: var(--label-edit-error-text);
-  }
-}
-.custom-edit-text-field {
-  height: 10px;
-  width: 100px;
-}