@inceptionbg/iui 1.0.0

package/src/styles/iui/components/_pagePrelogin.scss

@@ -0,0 +1,66 @@
+.full-page-container {
+  background-color: #f5f5f5;
+  padding: 50px 150px;
+  box-sizing: border-box;
+  min-height: 100vh;
+  h1 {
+    font-size: 40px;
+    font-weight: 900;
+    margin-bottom: 12px;
+  }
+  h2 {
+    color: #a3a3a3;
+    font-size: 16px;
+    line-height: 1.6;
+    white-space: pre-line;
+    span {
+      color: #000;
+    }
+  }
+  h3 {
+    font-size: 20px;
+    margin-bottom: 24px;
+  }
+  .desc-link {
+    color: var(--primary);
+    font-weight: 900;
+    &:hover {
+      text-decoration: underline;
+      color: var(--primary-light);
+    }
+  }
+  .content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    .children {
+      margin: 48px 0;
+    }
+    .full-page-image {
+      display: flex;
+      justify-content: center;
+      padding: 50px;
+      img {
+        max-width: 20vw;
+        max-height: 40vh;
+      }
+    }
+  }
+}
+.iui-prelogin-card {
+  background-color: white;
+  border-radius: 25px;
+  padding: 24px;
+  width: fit-content;
+}
+
+@media (max-width: 700px) {
+  .full-page-container {
+    padding: 20px 30px;
+    .content {
+      display: block;
+    }
+    .full-page-image {
+      display: none !important;
+    }
+  }
+}

package/src/styles/iui/components/_portal.scss

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

package/src/styles/iui/components/_print.scss

@@ -0,0 +1,92 @@
+.iui-print-dialog {
+  position: absolute;
+  z-index: 2000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  min-height: 100vh;
+  width: 100%;
+  animation: fade-in 200ms forwards;
+  & > .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;
+    }
+  }
+  @media print {
+    .content {
+      padding: 0;
+    }
+  }
+}
+.iui-print-actions {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 50px;
+  background-color: #fefefe;
+  box-shadow: $container-shadow;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.print-table {
+  @media print and (orientation: landscape) {
+    width: 842pt;
+  }
+  @media print and (orientation: portrait) {
+    width: 595pt;
+  }
+  // font-size: 10pt;
+  thead tr {
+    background: #f1f1f1;
+  }
+  th {
+    padding: 5px;
+    border: 1px solid silver;
+    p {
+      // font-size: 10pt;
+      padding: 4px 8px !important;
+    }
+  }
+  td {
+    padding: 3px;
+    border: 1px solid silver;
+  }
+}
+
+@media print {
+  #root,
+  .no-print {
+    display: none;
+  }
+  @page {
+    margin: 6.5mm;
+  }
+  body {
+    overflow: visible !important;
+  }
+  tbody td {
+    white-space: nowrap;
+  }
+  //   table {
+  //     page-break-inside: auto;
+  //   }
+  //   tr {
+  //     page-break-inside: avoid;
+  //     page-break-after: auto;
+  //   }
+}

package/src/styles/iui/components/_scrollbar.scss

@@ -0,0 +1,18 @@
+div {
+  &::-webkit-scrollbar {
+    width: 15px;
+    height: 15px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: var(--primary-o25);
+    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-dark);
+    }
+  }
+}

package/src/styles/iui/components/_selectInput.scss

@@ -0,0 +1,15 @@
+.select-wrapper {
+  label {
+    z-index: 1;
+  }
+  fieldset:not(.shrink):not(.focus) label {
+    width: calc(100% - 70px);
+  }
+}
+
+.fake-input {
+  opacity: 0;
+  width: 100%;
+  height: 0;
+  position: absolute;
+}

package/src/styles/iui/components/_sidebar.scss

@@ -0,0 +1,171 @@
+$sidebar-width: 260px;
+
+.iui-sidebar {
+  background: var(--primary);
+  color: white;
+  border-top: 2px solid white;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - $header-height);
+  box-shadow: 2px 0px 5px rgba(180, 177, 177, 0.5);
+  width: $sidebar-width;
+  z-index: 100;
+  box-sizing: border-box;
+  transition: width 0.3s $app-transition;
+  &.collapsed {
+    &:hover {
+      .active-menu {
+        background-color: unset;
+      }
+    }
+    &:not(:hover) {
+      .content-hidden {
+        display: none;
+      }
+      .sidebar-logo {
+        transform: scale(0.5);
+      }
+    }
+  }
+  svg {
+    color: white;
+  }
+
+  @media #{$bp-desktop} {
+    &.collapsed {
+      width: 55px;
+    }
+    &.sidebar-hover:hover {
+      width: $sidebar-width;
+    }
+  }
+  @media #{$bp-mt} {
+    &.collapsed {
+      width: 0px;
+    }
+  }
+}
+
+.iui-sidebar-content {
+  display: flex;
+  flex-direction: column;
+  padding-top: 12px;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: none;
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  hr {
+    border-color: white;
+    opacity: 0.4;
+  }
+  .iui-sidebar-items {
+    flex: 1;
+    width: $sidebar-width;
+  }
+}
+
+.iui-sidebar-item,
+.iui-sidebar-sub-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  user-select: none;
+  &.clickable:hover:not(:disabled):not(.disabled),
+  &.active {
+    background-color: var(--primary-dark);
+    // background-color: var(--primary-light);
+  }
+  &:hover .add-button {
+    display: unset;
+  }
+}
+.iui-sidebar-item {
+  font-weight: bold;
+  height: 45px;
+  padding: 8px 16px;
+}
+.iui-sidebar-sub-item {
+  padding: 0px 20px 0px 56px;
+  height: 32px;
+  &.primary {
+    font-weight: bold;
+  }
+  .add-button {
+    padding: 0;
+    display: none;
+    svg {
+      padding: 0 !important;
+      height: 24px;
+      width: 24px;
+    }
+    &:hover {
+      .fa-secondary {
+        opacity: 0.8;
+      }
+    }
+    .fa-secondary {
+      fill: var(--secondary-light);
+      opacity: 0.4;
+    }
+  }
+}
+
+.sidebar-icon {
+  margin-right: 15px;
+  height: 24px;
+  width: 24px;
+  color: var(--primary);
+}
+.sidebar-expand-icon {
+  height: 16px;
+  width: 16px;
+  opacity: 0.6;
+  transition: transform 0.2s;
+  &.rotate {
+    opacity: 0.9;
+    transform: rotate(180deg);
+  }
+}
+
+.sidebar-logo {
+  margin: 20px 0;
+  width: 70px;
+  transition: transform 0.3s ease-in-out;
+}
+
+.sidebar-colapse {
+  opacity: 0;
+  position: absolute;
+  box-sizing: border-box;
+  top: 40px;
+  right: -16px;
+  border-radius: 50%;
+  background-color: white;
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.15s ease-in-out;
+  border: 1px solid var(--primary);
+  &:active {
+    transform: translateY(2px);
+  }
+  svg {
+    color: var(--primary);
+  }
+}
+
+.iui-sidebar:hover {
+  .sidebar-colapse {
+    opacity: 1;
+  }
+}

package/src/styles/iui/components/_smallComponents.scss

@@ -0,0 +1,24 @@
+hr {
+  margin: 8px 0;
+  border-width: 0px 0px thin;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+.iui-colapse {
+  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: white;
+  }
+}

package/src/styles/iui/components/_table.scss

@@ -0,0 +1,207 @@
+table {
+  border-spacing: 0px;
+  border-collapse: collapse;
+}
+.iui-table {
+  overflow-x: auto;
+  padding-top: 10px;
+
+  //// Header ////
+
+  th {
+    border-bottom: $table-border;
+    font-size: $fs-m;
+    &:last-child {
+      .vertical-separator {
+        display: none;
+      }
+    }
+  }
+  .vertical-separator {
+    height: 14px;
+    width: 2px;
+    background-color: #00000030;
+  }
+
+  //// Body ////
+
+  tbody.no-last-border tr:last-child td {
+    border: none;
+  }
+  // Row
+  tr {
+    margin-bottom: 2px;
+    &.clickable:hover,
+    &.selected {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    &.loading {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+  // Cell
+  td {
+    height: 52px;
+    padding: 7px 16px;
+    font-size: $fs-m;
+    box-sizing: border-box;
+    border-bottom: $table-border;
+  }
+  .clickable-column:hover {
+    background-color: var(--primary-o10) !important;
+  }
+
+  //// Footer ////
+
+  .table-footer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  .pagination {
+    display: flex;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.8);
+    @media screen and (max-width: 850px) {
+      flex-direction: column;
+      align-items: end;
+    }
+    select {
+      color: rgba(0, 0, 0, 0.8);
+      background: none;
+      border: none;
+      text-align: right;
+      cursor: pointer;
+      padding: 0 8px;
+      user-select: none;
+      margin-left: 8px;
+      margin-right: 16px;
+    }
+    .offset-button {
+      margin: 0 4px;
+      padding: 10px;
+      svg {
+        height: 15px;
+        width: 15px;
+      }
+    }
+    .offset-input {
+      width: 30px;
+      border: none;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+      background: none;
+      text-align: center;
+      padding: 5px 0;
+    }
+  }
+
+  @media #{$portrait} {
+    tbody,
+    tr {
+      display: block;
+    }
+    tr {
+      padding: 20px 0;
+    }
+    td {
+      display: flex;
+      align-items: center;
+      height: unset !important;
+      text-align: left;
+    }
+    thead {
+      display: none;
+    }
+    tbody tr td {
+      &:before {
+        content: attr(data-th);
+        font-weight: bold;
+        text-align: left;
+        padding-right: 10px;
+      }
+    }
+  }
+}
+
+.iui-table-filter {
+  .iui-dialog-content {
+    padding: 0;
+    margin: 8px 0;
+  }
+  .table-filter-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    .label {
+      width: 150px;
+    }
+    .field {
+      display: inline-flex;
+      margin: 0 8px;
+      width: 100%;
+    }
+  }
+}
+
+.dual-list-container {
+  .dual-list-content {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+  .list-box {
+    border: $table-border;
+    border-radius: 16px;
+    padding: 10px;
+    user-select: none;
+    & > .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px;
+      svg {
+        color: rgba(0, 0, 0, 0.6);
+        margin-left: 1rem;
+      }
+      &:hover {
+        background-color: var(--primary-o10);
+      }
+      &:active {
+        background-color: var(--primary-o25);
+      }
+    }
+  }
+  .exchange-icon {
+    display: flex;
+    align-items: center;
+    margin: 0 10px;
+    svg {
+      height: 20px;
+      width: 20px;
+    }
+  }
+}
+
+.edit-row {
+  background: #3d497714;
+  td {
+    padding: 0 3px !important;
+  }
+  input {
+    background: white;
+  }
+}
+
+.table-options-btn {
+  background: var(--background-dark);
+  border-radius: 4px;
+  font-weight: 700;
+  &:hover {
+    background-color: #dfe1eb !important;
+  }
+  svg {
+    height: 12px;
+    width: 12px;
+  }
+}

package/src/styles/iui/components/_tabs.scss

@@ -0,0 +1,94 @@
+.iui-tabs {
+  display: flex;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+}
+.iui-tab {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 15px 12px;
+  margin-bottom: 2px;
+  &.selected,
+  &:hover:not(.disabled) {
+    border-bottom: 7px solid var(--primary);
+    padding-bottom: 8px;
+    svg {
+      color: var(--primary);
+    }
+  }
+  svg {
+    margin-right: 6px;
+    font-size: 15px;
+  }
+}
+.iui-tab-content {
+  background: #fff;
+  box-shadow: $container-shadow;
+  border-radius: $container-radius-bottom;
+  padding: 8px;
+}
+
+// .iui-tabs {
+//   display: flex;
+//   overflow: auto;
+//   padding: 0 5px;
+//   // transform: rotateX(180deg);
+//   &::-webkit-scrollbar {
+//     height: 5px;
+//   }
+// }
+// .iui-tab-content {
+//   background-color: rgb(255, 255, 255);
+//   box-shadow: $container-shadow;
+//   border-radius: $container-radius-bottom;
+//   padding: 24px;
+//   margin: -1px 5px 0 5px;
+// }
+// .iui-tab {
+//   // transform: rotateX(180deg);
+//   display: flex;
+//   align-items: center;
+//   user-select: none;
+//   color: rgba(0, 0, 0, 0.87);
+//   font-size: 13px;
+//   font-weight: 500;
+//   padding: 15px 12px;
+//   opacity: 0.6;
+//   box-sizing: border-box;
+//   // background-color: #fff;
+//   &.selected {
+//     opacity: 1;
+//     background-color: #fff;
+//     box-shadow: 0px 0px 5px rgba(180, 177, 177, 0.5);
+//     // border-left: 1px solid #ddd;
+//     // border-right: 1px solid #ddd;
+//     border-top: 4px solid var(--primary);
+//     border-bottom: none;
+//     // border-top-left-radius: 10px;
+//     // border-top-right-radius: 10px;
+//   }
+//   &:hover:not(.disabled):not(.selected) {
+//     opacity: 1;
+//     border-top: 4px solid var(--primary);
+//     padding: 11px 12px 15px;
+//     // border-bottom: 7px solid var(--primary);
+//     // padding-bottom: 8px;
+//     svg {
+//       color: var(--primary);
+//     }
+//   }
+//   &.disabled {
+//     background-color: #ddd;
+//   }
+//   svg {
+//     color: var(--primary);
+//     margin-right: 6px;
+//     font-size: 15px;
+//   }
+// }