@inceptionbg/iui 2.0.34 → 2.0.36

package/src/styles/components/_inputRadio.scss

@@ -1,83 +0,0 @@
-// Radio group
-.radio-group {
-  display: flex;
-  width: fit-content;
-  &.column {
-    flex-direction: column;
-  }
-  &.row {
-    align-items: flex-start;
-    flex-direction: row;
-  }
-}
-
-// Radio
-.iui-radio {
-  display: inline-flex;
-  user-select: none;
-  padding: 8px;
-  font-size: var(--fs-m);
-  width: fit-content;
-  gap: 8px;
-  .icon {
-    position: relative;
-    height: 20px;
-    width: 20px;
-    border-radius: 20px;
-    border: 2px solid #d0d5dd;
-    min-width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .dot {
-      height: 8px;
-      width: 8px;
-      border-radius: 8px;
-      background-color: var(--background);
-      transform: scale(0);
-      transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
-    }
-    &.selected {
-      background-color: var(--primary);
-      border-color: var(--primary);
-      .dot {
-        transform: scale(1);
-      }
-    }
-  }
-  .radio-content {
-    p {
-      white-space: pre-line;
-      line-height: 20px;
-    }
-    .label {
-      font-weight: 500;
-    }
-  }
-}
-
-// .radio-large {
-//   align-items: unset;
-//   border: 1px solid;
-//   border-left: 2px solid;
-//   border-color: var(--neutral);
-//   padding: 16px;
-//   width: 100%;
-//   overflow: auto;
-//   cursor: pointer;
-//   &:not(.disabled):not(.active):hover {
-//     border-color: var(--primary);
-//   }
-//   &.selected {
-//     border-color: var(--primary);
-//     background-color: rgba(var(--primary-rgb), 0.03);
-//   }
-//   &.disabled {
-//     opacity: 0.5;
-//     background-color: #f9f9f9;
-//     cursor: auto;
-//   }
-//   .title {
-//     line-height: 1.6;
-//   }
-// }

package/src/styles/components/_inputSelect.scss

@@ -1,8 +0,0 @@
-.select-wrapper.s .iui-input-wrapper-field {
-  height: 24px;
-  min-height: 24px;
-  .icon {
-    height: 12px;
-    width: 12px;
-  }
-}

package/src/styles/components/_list.scss

@@ -1,58 +0,0 @@
-.iui-list {
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  .iui-list-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border: var(--border);
-    border-radius: 8px;
-    padding: 12px 16px;
-    transition:
-      color 0.15s,
-      background-color 0.15s;
-    p {
-      font-size: 14px;
-      line-height: 20px;
-    }
-    .iui-list-item-desc {
-      display: flex;
-      line-height: 1.5;
-      gap: 8px;
-      font-size: 12px;
-      color: var(--neutral);
-      margin-top: 4px;
-      white-space: pre-line;
-    }
-    .iui-list-item-actions {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    &.disabled {
-      cursor: default;
-      opacity: 0.5;
-    }
-    &.clickable:not(.disabled) {
-      cursor: pointer;
-      &:hover {
-        background-color: var(--neutral-hover);
-      }
-      &:has(.iui-icon-btn:hover) {
-        background-color: transparent;
-      }
-      &.active {
-        background-color: var(--primary) !important;
-        color: var(--text-inverse);
-        .iui-list-item-desc {
-          color: var(--neutral-300);
-        }
-        .iui-list-item-actions .iui-icon-btn:not(:hover) {
-          background-color: var(--background);
-        }
-      }
-    }
-  }
-}

package/src/styles/components/_loader.scss

@@ -1,55 +0,0 @@
-.full-screen-loader {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1001;
-  background-color: rgba(255, 255, 255, 0.7);
-  .loader {
-    position: fixed !important;
-  }
-}
-
-.lazy-loader {
-  position: relative;
-  height: calc(100vh - var(--header-height));
-}
-
-.loader {
-  position: absolute;
-  inset: 0;
-  background-color: rgba(255, 255, 255, 0.6);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-.simple-loader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.loader,
-.simple-loader {
-  .spinner {
-    display: inline-block;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    box-shadow: inset -2px 0 0 2px var(--primary);
-    animation: rotate 1.5s linear infinite;
-  }
-}
-
-.empty-loader {
-  width: 100%;
-  .loader {
-    min-height: fit-content;
-  }
-}
-
-.full-page-loader {
-  height: 100%;
-}

package/src/styles/components/_menu-v2.scss

@@ -1,67 +0,0 @@
-.iui-menu-v2 {
-  position: absolute;
-  inset: unset;
-  margin: 4px 0;
-  padding: 4px 0;
-  border: none;
-  border-radius: 8px;
-  background: var(--background);
-  box-shadow: var(--deep-shadow);
-  animation: fade-in 200ms forwards;
-  overscroll-behavior: none;
-  // POSITION
-  position-try-fallbacks: --top, --bottom, --left, --right;
-  &.bottom-left {
-    top: anchor(bottom);
-    left: anchor(left);
-  }
-  &.bottom-right {
-    top: anchor(bottom);
-    right: anchor(right);
-  }
-  &.top-left {
-    bottom: anchor(top);
-    left: anchor(left);
-  }
-  &.top-right {
-    bottom: anchor(top);
-    right: anchor(right);
-  }
-  // SIZE
-  &.s {
-    min-width: 150px;
-  }
-  &.m {
-    min-width: 250px;
-  }
-  &.l {
-    min-width: 500px;
-  }
-  // SCROLLBAR
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  // TRANSITION
-  // transition: display 0.3s, opacity 0.3s;
-
-  // &::backdrop {
-  // background-color: var(--neutral-t);
-  // }
-}
-
-@position-try --top {
-  bottom: unset;
-  top: anchor(bottom);
-}
-@position-try --bottom {
-  top: unset;
-  bottom: anchor(top);
-}
-@position-try --left {
-  left: unset;
-  right: anchor(right);
-}
-@position-try --right {
-  right: unset;
-  left: anchor(left);
-}

package/src/styles/components/_menu.scss

@@ -1,62 +0,0 @@
-.iui-menu {
-  position: absolute;
-  padding: 4px 0;
-  border-radius: 8px;
-  background: var(--background);
-  box-shadow: var(--deep-shadow);
-  overflow: auto;
-  animation: fade-in 200ms forwards;
-  overscroll-behavior: none;
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  &.s {
-    min-width: 150px;
-  }
-  &.m {
-    min-width: 250px;
-  }
-  &.l {
-    min-width: 500px;
-  }
-}
-
-.iui-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  user-select: none;
-  .menu-item-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text);
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-  .menu-item-label {
-    width: 100%;
-  }
-  &.clickable:hover:not(:disabled):not(.disabled):not(.active) {
-    background-color: var(--neutral-hover);
-  }
-  &.active {
-    transition: none;
-    background-color: var(--primary);
-    color: var(--text-inverse);
-    .menu-item-icon {
-      color: var(--text-inverse);
-    }
-  }
-  &.with-devider:not(:last-child) {
-    border-bottom: var(--border);
-  }
-  .menu-item-badge {
-    top: -3px;
-    right: -3px;
-    background-color: var(--danger);
-  }
-}

package/src/styles/components/_notifications.scss

@@ -1,71 +0,0 @@
-.notification-button svg {
-  color: var(--primary);
-  .fa-secondary {
-    opacity: 1;
-    fill: #ffaa33;
-    stroke: #544417;
-    stroke-width: 30px;
-    stroke-opacity: 0.5;
-  }
-}
-
-.notifications {
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100dvh - var(--header-height) - 40px);
-  padding: 16px;
-  max-width: min(500px, 90vw);
-  .notifications-content-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 16px;
-    margin-bottom: 16px;
-    .iui-input-container {
-      width: unset;
-    }
-  }
-  .notifications-options {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    border-bottom: var(--border);
-    margin-bottom: 8px;
-    padding-bottom: 4px;
-  }
-  .notifications-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: auto;
-  }
-
-  .notification {
-    cursor: default;
-    padding: 12px;
-    border-radius: 8px;
-    .notification-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      gap: 16px;
-      .title {
-        color: var(--primary-dark);
-        font-size: 14px;
-        font-weight: bold;
-      }
-      .date {
-        color: var(--neutral);
-        font-size: 11px;
-        margin: 4px 0;
-      }
-    }
-    .desc {
-      font-size: 13px;
-    }
-    &:hover:not(:has(button:hover:not(:disabled))) {
-      background-color: var(--neutral-100);
-    }
-  }
-}

package/src/styles/components/_page.scss

@@ -1,84 +0,0 @@
-@use '../variables/bp';
-
-.iui-header {
-  grid-area: header;
-}
-.iui-sidebar {
-  grid-area: sidebar;
-  grid-row: auto;
-  align-items: stretch;
-}
-.app-content {
-  grid-area: content;
-  overflow: hidden;
-}
-
-.app-layout {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto calc(100dvh - var(--header-height));
-  grid-template-areas:
-    'header header'
-    'sidebar content';
-  width: 100dvw;
-  height: 100dvh;
-  overflow: hidden;
-}
-
-.page-container {
-  display: flex;
-  flex-direction: column;
-  min-height: calc(100vh - var(--header-height));
-  max-height: calc(100vh - var(--header-height));
-}
-
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 1.5rem;
-  min-height: 55px;
-  max-height: 55px;
-  box-shadow: var(--container-shadow);
-  z-index: 10;
-
-  @media #{bp.$mobileTablet} {
-    .breadcrumbs {
-      font-size: 16px;
-    }
-  }
-}
-
-.page-content {
-  display: flex;
-  flex-direction: column;
-  padding: 1.5rem 1.5rem 1rem 1.5rem;
-  flex: 1;
-  overflow-y: auto;
-}
-.scrollable-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow-y: auto;
-  margin: 0 -1.5rem;
-  padding: 0 1.5rem 1rem;
-}
-
-.page-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  padding: 16px 24px;
-  margin: 0 -1.5rem -1rem;
-  &.footer-actions {
-    box-shadow: var(--container-shadow);
-    z-index: 2;
-  }
-  .page-footer-text {
-    text-align: center;
-    font-size: 12px;
-    white-space: pre-line;
-  }
-}

package/src/styles/components/_portal.scss

@@ -1,8 +0,0 @@
-.portal-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-}

package/src/styles/components/_print.scss

@@ -1,77 +0,0 @@
-.iui-print {
-  padding: 0 !important;
-  & > .print-content {
-    background: #fefefe;
-    padding: 10px 50px 60px 50px;
-    p,
-    td {
-      font-size: 10pt;
-    }
-    h4 {
-      font-size: 12pt;
-    }
-    .name {
-      font-size: 11pt;
-      font-weight: bold;
-      margin-bottom: 5px;
-    }
-  }
-}
-
-.print-table {
-  border-spacing: 0px;
-  border-collapse: collapse;
-  thead tr {
-    background: #f1f1f1;
-  }
-  th,
-  td {
-    padding: 4px;
-    border: 1px solid silver;
-  }
-}
-
-@media print {
-  @page {
-    margin: 6.5mm;
-  }
-
-  @media (orientation: landscape) {
-    .iui-print {
-      width: 842pt;
-    }
-  }
-  @media (orientation: portrait) {
-    .iui-print {
-      width: 595pt;
-    }
-  }
-  .pullover {
-    position: static !important;
-    overflow: visible !important;
-  }
-  .iui-print {
-    position: absolute !important;
-    inset: 0 !important;
-    width: 100% !important;
-    background: white !important;
-    overflow: visible !important;
-    .print-content {
-      padding: 0 !important;
-      height: auto !important;
-      overflow: visible !important;
-    }
-  }
-  #root,
-  .no-print {
-    display: none !important;
-  }
-  body {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-    overflow: visible !important;
-  }
-  tbody td {
-    white-space: pre-wrap !important;
-  }
-}

package/src/styles/components/_progressBar.scss

@@ -1,83 +0,0 @@
-.progress-bar-container {
-  width: 100%;
-  max-width: 400px;
-  margin: auto;
-}
-
-.progress-label {
-  margin-bottom: 8px;
-  font-size: 16px;
-  color: var(--text);
-}
-
-.progress-bar-bg {
-  position: relative;
-  width: 100%;
-  height: 32px;
-  background: var(--neutral-200);
-  border-radius: 16px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.progress-bar-fill {
-  position: absolute;
-  left: 0;
-  height: 100%;
-  background: linear-gradient(90deg, var(--primary-400) 0%, var(--primary-600) 100%);
-  transition: width 0.3s cubic-bezier(0.67, 0.01, 0.83, 0.98);
-  overflow: hidden;
-
-  // Subtle shimmer animation to show activity
-  &.loading::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 80%;
-    height: 100%;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.3) 50%,
-      transparent 100%
-    );
-    animation: shimmer 2s ease-in-out infinite;
-  }
-}
-
-.progress-bar-text {
-  width: 100%;
-  text-align: center;
-  font-size: 16px;
-  font-weight: bold;
-  color: var(--text);
-  border-radius: 32px;
-  padding: 0 8px;
-  pointer-events: none;
-  z-index: 1;
-  position: relative;
-
-  // White text overlay that shows only where progress bar is
-  &::after {
-    content: var(--progress-text, '');
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    clip-path: polygon(
-      0 0,
-      var(--progress-clip, 0%) 0%,
-      var(--progress-clip, 0%) 100%,
-      0 100%
-    );
-    transition: clip-path 0.3s cubic-bezier(0.67, 0.01, 0.83, 0.98);
-  }
-}