@inceptionbg/iui 2.0.34 → 2.0.36

package/src/styles/components/_pullover.scss

@@ -1,95 +0,0 @@
-@use '../variables/bp';
-
-$viewportWidth: (25, 50, 75, 100);
-$fixedWidth: (500, 600);
-
-.pullover {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  justify-content: end;
-  overflow: hidden;
-  background: var(--neutral-t);
-  backdrop-filter: blur(4px);
-  animation: fade-in 0.2s forwards;
-  .container {
-    transition: width, 0.2s;
-    background: var(--background);
-    width: 0;
-    max-width: 100vw;
-    .content {
-      display: flex;
-      flex-direction: column;
-      height: 100dvh;
-      overscroll-behavior: none;
-    }
-  }
-  &.open .container {
-    @media #{bp.$mobile} {
-      width: 100%;
-    }
-    @media #{bp.$not-mobile} {
-      @each $key in $viewportWidth {
-        &.vw#{$key} {
-          width: #{$key}vw;
-          .content {
-            min-width: #{$key}vw;
-          }
-        }
-      }
-      @each $key in $fixedWidth {
-        &.w#{$key} {
-          width: #{$key}px;
-          .content {
-            min-width: #{$key}px;
-          }
-        }
-      }
-    }
-  }
-  &.closing {
-    animation: fade-out 0.2s forwards;
-    .container {
-      width: 0px !important;
-    }
-  }
-
-  .pullover-form {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: auto;
-  }
-
-  .pullover-header,
-  .pullover-footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px;
-    padding: 16px 24px;
-    box-shadow: var(--container-shadow);
-    z-index: 2;
-  }
-  .pullover-header {
-    padding-right: 16px;
-    justify-content: space-between;
-    .search-input {
-      width: min(250px, 50vw);
-    }
-  }
-  .pullover-content {
-    flex: 1;
-    overflow: auto;
-    padding: 16px 24px;
-  }
-
-  @media #{bp.$mobile} {
-    .pullover-header,
-    .pullover-content,
-    .pullover-footer {
-      padding: 8px 16px;
-    }
-  }
-}

package/src/styles/components/_scrollbar.scss

@@ -1,18 +0,0 @@
-div {
-  &::-webkit-scrollbar {
-    width: 13px;
-    height: 13px;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: var(--primary-200);
-    border-radius: 100px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--primary);
-    border-radius: 100px;
-    box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
-    &:hover {
-      background-color: var(--primary-600);
-    }
-  }
-}

package/src/styles/components/_sidebar.scss

@@ -1,204 +0,0 @@
-@use '../variables/bp';
-
-.iui-sidebar {
-  --animation: 0.2s cubic-bezier(0.7, 0.1, 0.5, 1);
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--container-shadow);
-  height: calc(100dvh - var(--header-height));
-  width: var(--sidebar-width);
-  transition: width var(--animation);
-  hr {
-    margin-inline: 12px;
-  }
-  .iui-collapse-btn {
-    opacity: 0;
-    position: absolute;
-    box-sizing: border-box;
-    top: 40px;
-    right: -16px;
-    border-radius: 50%;
-    background-color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.15s ease-in-out;
-    border: 1px solid var(--primary);
-    z-index: 11;
-    &:active {
-      transform: translateY(2px);
-    }
-    svg {
-      color: var(--primary);
-    }
-  }
-  &:hover {
-    .iui-collapse-btn {
-      opacity: 1;
-    }
-  }
-
-  &.collapsed {
-    animation: temp-disable-pointer 0.2s forwards;
-    width: var(--sidebar-collapsed-width);
-    &:hover {
-      width: var(--sidebar-width);
-    }
-    &:not(:hover) {
-      .iui-sidebar-content {
-        overflow: hidden;
-      }
-      .iui-sidebar-items .iui-collapse {
-        max-height: 0px !important;
-      }
-      .item-only {
-        padding-left: 15px;
-        .sidebar-item-label {
-          padding-left: 6px;
-        }
-      }
-      .sidebar-footer p {
-        font-size: 10px;
-      }
-    }
-  }
-}
-
-///// ITEMS CONTENT /////
-.iui-sidebar-content {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  overscroll-behavior: none;
-  .iui-sidebar-items {
-    flex: 1;
-    padding: 8px 0;
-
-    // All items and sub-items
-    .iui-sidebar-item {
-      display: grid;
-      grid-auto-flow: column;
-      align-items: center;
-      width: var(--sidebar-width);
-      gap: 8px;
-      white-space: pre-line;
-      user-select: none;
-      // border-right: 3px solid #fff;
-      .sidebar-item-label {
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        line-height: unset;
-      }
-      // &.active {
-      //   background-color: var(--primary-100);
-      // }
-      &.active,
-      &.clickable:hover/*:not(:disabled):not(.disabled)*/ {
-        // border-color: var(--primary);
-        .sidebar-item-label,
-        .sidebar-item-icon {
-          color: var(--primary);
-        }
-      }
-      .sidebar-badge {
-        width: 28px;
-        height: 28px;
-        background-color: var(--primary-200);
-        border-radius: 50px;
-        color: var(--text);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 12px;
-        font-weight: 500;
-      }
-    }
-    // Items only
-    .item-only {
-      grid-auto-columns: auto 1fr auto auto;
-      padding: 12px 20px;
-      transition: padding var(--animation);
-      .sidebar-item-label {
-        transition: padding var(--animation);
-        font-weight: 500;
-      }
-      .sidebar-item-icon {
-        height: 24px;
-        width: 24px;
-        color: var(--text);
-      }
-    }
-    // Sub-items only
-    .sub-item {
-      grid-auto-columns: 1fr auto auto;
-      gap: 4px;
-      padding: 8px 16px 8px 56px;
-      &.primary {
-        .sidebar-item-label {
-          font-weight: 500;
-          color: var(--primary-700);
-        }
-      }
-    }
-    // Expand Icon
-    .sidebar-expand-icon {
-      height: 16px;
-      width: 16px;
-      color: var(--text);
-      transition: transform 0.2s;
-      &.rotate {
-        transform: rotate(180deg);
-      }
-    }
-  }
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-}
-
-///// FOOTER /////
-.sidebar-footer {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: center;
-  padding: 16px 0;
-  .sidebar-logo {
-    width: 70%;
-    max-width: 160px;
-    max-height: 70px;
-    object-fit: contain;
-  }
-}
-
-@media #{bp.$mobileTablet} {
-  .iui-collapse-btn {
-    display: none !important;
-  }
-  .iui-sidebar:not(:hover) {
-    width: var(--sidebar-collapsed-width);
-    .iui-sidebar-content {
-      overflow: hidden;
-    }
-    .iui-sidebar-items .iui-collapse {
-      max-height: 0px !important;
-    }
-    .item-only {
-      padding-left: 15px;
-      .sidebar-item-label {
-        padding-left: 8px;
-      }
-    }
-    .sidebar-footer p {
-      font-size: 10px;
-    }
-  }
-}
-
-@media #{bp.$desktop} {
-  .sidebar-footer:not(.collapsed) {
-    padding: 16px;
-  }
-}

package/src/styles/components/_smallComponents.scss

@@ -1,23 +0,0 @@
-hr {
-  margin: 8px 0;
-  border-width: 0px 0px thin;
-  border-color: var(--border-color);
-}
-
-.iui-collapse {
-  transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-}
-
-.form-disabled {
-  pointer-events: none;
-  opacity: 0.6;
-}
-
-.Toastify__toast {
-  border-radius: 15px !important;
-  opacity: 0.95;
-  hr {
-    border-color: var(--white);
-  }
-}

package/src/styles/components/_table.scss

@@ -1,340 +0,0 @@
-@use '../variables/bp';
-
-// Scrollable table container
-
-// .iui-table {
-//   display: flex;
-//   flex-direction: column;
-//   flex: 1;
-//   overflow: auto;
-//   thead {
-//     position: sticky;
-//     top: 0;
-//   }
-// }
-
-table {
-  border-spacing: 0px;
-  // border-collapse: collapse;
-}
-.iui-table {
-  //// Header ////
-  thead {
-    z-index: 2;
-    background-color: var(--neutral-100);
-    // background-color: var(--primary);
-    // color: var(--text-inverse);
-    tr:first-child th {
-      border-top: var(--borderlight);
-    }
-  }
-  th {
-    padding: 4px 12px;
-    font-weight: bold;
-    height: 40px;
-    p {
-      font-size: 12px;
-    }
-  }
-  .table-container {
-    overflow: auto;
-    // scroll-snap-type: x proximity;
-    // scroll-snap-type: y proximity;
-    // box-shadow: var(--container-shadow);
-    &::-webkit-scrollbar {
-      width: 8px;
-    }
-  }
-  .sticky-header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-  //// Body ////
-  // Row
-  // tr,
-  // td {
-  //   scroll-snap-align: start;
-  // }
-  tbody tr {
-    &.clickable:hover,
-    &.selected {
-      background-color: #f2f2f2;
-      .sticky-column {
-        background-color: #f2f2f2;
-      }
-    }
-    &:has(.iui-icon-btn:hover),
-    &:has(a:hover) {
-      background-color: transparent !important;
-      .sticky-column {
-        background-color: var(--background) !important;
-      }
-    }
-    &.focused {
-      background-color: var(--primary-100);
-      .sticky-column {
-        background-color: var(--primary-100);
-      }
-    }
-    &.loading {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-  // Cell
-  th,
-  td {
-    border-bottom: var(--border-light);
-    // Cell colors
-    &.secondary {
-      background-color: rgba(0, 0, 0, 0.04);
-    }
-  }
-  td {
-    font-size: 14px;
-    height: 48px;
-    padding: 6px 12px;
-    // background-color: var(--background);
-    &.s {
-      height: 40px;
-      padding: 2px 12px;
-    }
-    &.xs {
-      height: 30px;
-      padding: 2px 12px;
-    }
-  }
-  .clickable-cell:hover {
-    background-color: var(--primary-100) !important;
-    cursor: pointer;
-  }
-  // Item Actions
-  .table-item-actions {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 8px;
-  }
-
-  //// Footer ////
-  .table-footer {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 8px;
-    font-size: var(--fs-m);
-    .pagination {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      color: var(--text);
-      p,
-      .offset-input {
-        font-size: 12px !important;
-      }
-      p {
-        white-space: nowrap;
-      }
-      .offset-input {
-        .iui-input-wrapper-field {
-          width: 40px;
-          min-height: 24px;
-          height: 24px;
-        }
-        input {
-          font-size: 12px !important;
-          text-align: center;
-          padding: 0 5px;
-        }
-      }
-
-      @media #{bp.$mobile} {
-        flex-direction: column;
-        align-items: end;
-      }
-    }
-  }
-
-  //// Actions ////
-  .iui-table-header-actions {
-    display: flex;
-    gap: 8px;
-    &:has(> *) {
-      padding: 8px 10px;
-    }
-  }
-
-  @media #{bp.$landscape} {
-    thead {
-      box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.2);
-    }
-    td,
-    th {
-      border-right: var(--border-light);
-      &:first-child:not(.not-first-cell) {
-        border-left: var(--border-light);
-      }
-      &.sticky-column {
-        position: sticky;
-        left: 0;
-        transition: background-color 250ms;
-        // box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.2);
-      }
-    }
-    th.sticky-column {
-      top: 0;
-      background-color: var(--neutral-100);
-    }
-    td.sticky-column {
-      background-color: var(--background);
-    }
-
-    .select-col,
-    .actions-col {
-      padding: 0;
-    }
-    .select-col {
-      width: 50px;
-    }
-    .actions-col {
-      width: 70px;
-    }
-  }
-
-  @media #{bp.$portrait} {
-    tbody,
-    tr {
-      display: block;
-    }
-    tr {
-      padding-bottom: 20px;
-    }
-    td {
-      display: flex;
-      align-items: center;
-      height: unset !important;
-      text-align: left;
-      width: unset !important;
-    }
-    thead {
-      display: none;
-    }
-    tbody tr td {
-      &:before {
-        content: attr(data-th);
-        font-weight: bold;
-        text-align: left;
-        padding-right: 10px;
-      }
-    }
-  }
-}
-
-.iui-filters-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  .table-filter-item {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 6px;
-    .filter-item-label {
-      font-weight: 500;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      cursor: default;
-    }
-  }
-}
-
-.table-sort-item {
-  flex-direction: row-reverse;
-}
-
-.column-pullover {
-  .pullover-content {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-  .dual-list-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-
-    .dual-list-content {
-      display: grid;
-      grid-template-columns: 1fr auto 1fr;
-      grid-template-rows: auto auto 1fr;
-      gap: 16px 12px;
-      flex: 1;
-      min-height: 0;
-    }
-    .list-box {
-      border: var(--border-light);
-      border-radius: 8px;
-      padding: 8px;
-      user-select: none;
-      overflow-y: auto;
-
-      & > .item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 8px;
-        font-size: 14px;
-        svg {
-          color: var(--text);
-          margin-left: 1rem;
-        }
-        &:hover {
-          background-color: var(--primary-o10);
-        }
-        &:active {
-          background-color: var(--primary-o25);
-        }
-        &.dragging {
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-          background-color: #fff !important;
-        }
-      }
-    }
-    .exchange-icon {
-      display: flex;
-      align-items: center;
-      svg {
-        height: 20px;
-        width: 20px;
-      }
-    }
-  }
-}
-
-.edit-row {
-  background: var(--neutral-100);
-  td {
-    &.editable {
-      padding: 4px;
-    }
-    .iui-input-wrapper-field {
-      // border: none;
-      // border-radius: 0;
-      box-shadow: none !important;
-    }
-    .select-wrapper {
-      min-width: 120px;
-    }
-  }
-}
-
-.primary-row {
-  background-color: var(--primary-100);
-}
-
-// .secondary-row {
-//   background-color: #f1f1f1;
-// }

package/src/styles/components/_tabs.scss

@@ -1,33 +0,0 @@
-.iui-tabs {
-  display: flex;
-  overflow: auto;
-  border-bottom: var(--border);
-  flex-shrink: 0;
-  &::-webkit-scrollbar {
-    height: 5px;
-  }
-}
-.iui-tab {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-bottom: 2px solid white;
-  color: var(--neutral-400);
-  user-select: none;
-  font-size: 14px;
-  font-weight: 500;
-  padding: 12px 12px 8px;
-  svg {
-    font-size: 15px;
-  }
-  &:hover:not(.disabled) {
-    color: var(--text);
-  }
-  &.selected:not(.disabled) {
-    border-color: var(--primary);
-    color: var(--primary);
-  }
-}
-.iui-tab-content {
-  padding: 8px;
-}