@inceptionbg/iui 2.0.35 → 2.0.37

package/src/styles/components/_dialog.scss

@@ -1,119 +0,0 @@
-@use '../variables/bp';
-@use '../common/maps/info-types' as *;
-
-$dialog-sizes: (
-  m: 400px,
-  l: 750px,
-  xl: 1200px,
-);
-
-.iui-dialog {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--neutral-t);
-  backdrop-filter: blur(8px);
-  animation: fade-in 0.2s forwards;
-  &.closing {
-    animation: fade-out 0.2s forwards;
-    display: flex;
-  }
-}
-
-.iui-dialog-container {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  background-color: var(--background);
-  border-radius: 16px;
-  min-width: 400px;
-  max-width: 98vw;
-  max-height: 95dvh;
-  animation: scale-in 0.2s forwards;
-  overflow: hidden;
-  padding: 24px;
-
-  .iui-dialog-header {
-    display: flex;
-    gap: 16px;
-    flex-shrink: 0;
-    .iui-dialog-desc {
-      color: var(--text);
-      word-break: break-word;
-      white-space: pre-line;
-    }
-    .iui-dialog-title {
-      display: flex;
-      gap: 16px;
-      width: 100%;
-      justify-content: space-between;
-      align-items: baseline;
-      h4 {
-        font-weight: 600;
-        margin-bottom: 8px;
-      }
-      .close-icon {
-        margin: -14px;
-      }
-    }
-  }
-  .iui-dialog-content {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    flex: 1;
-    margin: -24px;
-    padding: 24px;
-    &:not(.no-overflow) {
-      overflow: auto;
-      overscroll-behavior: none;
-    }
-  }
-
-  @each $key, $value in $dialog-sizes {
-    &.#{$key} {
-      width: $value;
-    }
-  }
-  .dialog-type-icon {
-    min-height: 24px;
-    min-width: 24px;
-    padding: 12px;
-    border-radius: 24px;
-    @each $key in $info-types {
-      &.#{$key} {
-        color: var(--#{$key});
-        background-color: var(--#{$key}-100);
-      }
-    }
-  }
-  .iui-dialog-actions {
-    display: flex;
-    gap: 8px;
-    justify-content: right;
-    padding-top: 24px;
-    border-top: var(--border);
-  }
-}
-
-@media #{bp.$mobile} {
-  .iui-dialog-container {
-    height: 100dvh;
-    width: 100vw !important;
-    max-width: 100vw;
-    border-radius: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    .iui-dialog-content {
-      padding: 16px;
-    }
-    .iui-dialog-actions {
-      padding: 16px;
-      flex-direction: column-reverse;
-    }
-  }
-}

package/src/styles/components/_form.scss

@@ -1,8 +0,0 @@
-.iui-form-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-}

package/src/styles/components/_header.scss

@@ -1,157 +0,0 @@
-@use '../variables/bp';
-
-.iui-header {
-  box-shadow: var(--container-shadow);
-  background: var(--primary);
-  color: var(--text-inverse);
-  height: var(--header-height);
-  width: 100dvw;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 8px;
-  box-sizing: border-box;
-  z-index: 2;
-  .env-badge {
-    color: var(--text);
-    font-weight: bold;
-    font-size: 14px;
-  }
-  .header-button {
-    height: 40px;
-    width: 40px;
-    padding: 8px;
-    border-radius: 50px;
-    circle {
-      fill: var(--white);
-    }
-    svg {
-      height: 24px !important;
-      width: 24px !important;
-      color: var(--white);
-    }
-    &:hover,
-    &.active {
-      // background-color: var(--primary-600);
-      background-color: var(--neutral-hover);
-      circle {
-        fill: var(--primary);
-      }
-    }
-  }
-}
-
-///// Modules /////
-.module-name {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-right: 8px;
-  border-radius: var(--container-radius);
-  user-select: none;
-  &:hover {
-    background-color: var(--neutral-hover);
-    color: var(--primary);
-  }
-}
-.modules-menu {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  padding: 8px !important;
-  top: var(--header-height) !important;
-  left: 0 !important;
-  border-top-left-radius: 0px !important;
-  border-top-right-radius: 0px !important;
-  @media #{bp.$mobile} {
-    grid-template-columns: 1fr;
-  }
-  .module-item {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    align-items: center;
-    padding: 8px;
-    border-radius: 8px;
-    .menu-item-label {
-      font-weight: 600;
-      white-space: pre-line;
-      text-align: center;
-    }
-  }
-}
-.module-item .menu-item-icon,
-.module-icon {
-  background: var(--neutral-200);
-  width: 40px;
-  height: 40px;
-  border-radius: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    color: var(--primary);
-    height: 20px;
-    width: 20px;
-  }
-}
-
-///// User Box /////
-.user-box {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: var(--header-height);
-  position: relative;
-  border-radius: 32px;
-  padding-left: 8px;
-  // margin-left: -8px;
-  padding-right: 24px;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-drag: none;
-  .user-icon {
-    color: var(--white);
-    height: 36px;
-    width: 36px;
-  }
-  .user-info {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 150px;
-    .user-name {
-      font-size: 14px;
-      font-weight: 600;
-    }
-    .org-name {
-      font-size: 12px;
-      color: var(--neutral-200);
-    }
-    p {
-      line-height: 1.5;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  .user-notif-badge {
-    border: 1px solid var(--primary);
-    background-color: var(--danger);
-    right: -5px;
-  }
-  &:hover {
-    background-color: var(--primary-600);
-  }
-}
-.header-user-menu {
-  top: var(--header-height) !important;
-  right: 0 !important;
-  left: auto !important;
-  border-top-left-radius: 0px !important;
-  border-top-right-radius: 0px !important;
-}
-
-@media #{bp.$mobile} {
-  .user-info {
-    display: none;
-  }
-}

package/src/styles/components/_input.scss

@@ -1,167 +0,0 @@
-.iui-input-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 6px;
-  p {
-    color: var(--text);
-    font-size: 14px;
-  }
-  .input-label {
-    font-weight: 500;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    cursor: default;
-    &.required {
-      &::after {
-        content: ' *';
-        color: var(--danger);
-      }
-    }
-  }
-
-  ////// Input wrapper //////
-  .iui-input-wrapper-field {
-    position: relative;
-    border: var(--border);
-    border-radius: 8px;
-    background-color: var(--background);
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    min-height: 40px;
-    height: 40px;
-
-    .icon {
-      margin: -4px;
-      padding: 4px;
-      height: 16px;
-      width: 16px;
-      cursor: pointer;
-      color: var(--neutral);
-      &:hover {
-        color: var(--primary);
-      }
-    }
-
-    &.height-auto {
-      height: auto;
-    }
-    &.with-end-section input {
-      padding-right: 0px;
-    }
-    .end-section {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin: 0 12px 0 8px;
-    }
-  }
-
-  ///// Helper text /////
-  .helper-text {
-    color: var(--neutral);
-    font-size: 13px;
-    margin: 0 8px;
-    white-space: pre-line;
-    &.error-text {
-      display: none;
-    }
-  }
-
-  ///// STATES /////
-
-  // Disabled
-  &.disabled .iui-input-wrapper-field {
-    pointer-events: none;
-    user-select: none;
-    background-color: var(--background-disabled);
-    .icon,
-    p {
-      color: var(--text-disabled);
-    }
-  }
-
-  // Focused
-  &.focus,
-  &:has(input:focus) {
-    .iui-input-wrapper-field {
-      border-color: var(--primary);
-      box-shadow: 0px 0px 1px 3px var(--primary-200);
-      &:has(input:user-invalid),
-      &:has(input.error) {
-        border-color: var(--danger);
-        box-shadow: 0px 0px 1px 3px var(--danger-200);
-      }
-    }
-  }
-
-  // Error state
-  &:has(input:user-invalid),
-  &:has(input.error),
-  &.error {
-    .iui-input-wrapper-field {
-      border-color: var(--danger);
-      .icon:hover {
-        color: var(--danger);
-      }
-    }
-    .helper-text {
-      color: var(--danger);
-      &.helper-hidden {
-        display: none;
-      }
-      &.error-text {
-        display: block;
-      }
-    }
-  }
-
-  input,
-  textarea {
-    &:-webkit-autofill {
-      animation-name: auto-fill;
-      animation-duration: 500ms;
-    }
-    width: 100%;
-    font-size: 16px;
-    padding: 8px 12px;
-    border: none;
-    &:disabled {
-      background-color: var(--background-disabled);
-    }
-    &::placeholder {
-      color: var(--neutral-400);
-      font-weight: 200 !important;
-      font-style: italic;
-      user-select: none;
-    }
-  }
-
-  textarea {
-    resize: none;
-    &.resize {
-      resize: vertical;
-    }
-  }
-}
-
-.fake-input {
-  opacity: 0;
-  height: 1px !important;
-  position: absolute;
-  padding: 0 !important;
-  margin: 0;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.phone-input {
-  display: flex;
-  align-items: center;
-  .phone-code-input {
-    min-width: 90px;
-    max-width: 90px;
-  }
-}

package/src/styles/components/_inputCheckbox.scss

@@ -1,48 +0,0 @@
-.iui-checkbox {
-  display: inline-flex;
-  align-items: flex-start;
-  user-select: none;
-  padding: 8px;
-  font-size: var(--fs-m);
-  width: fit-content;
-  gap: 8px;
-  cursor: pointer;
-  .box {
-    position: relative;
-    height: 20px;
-    width: 20px;
-    border-radius: 5px;
-    border: 2px solid var(--neutral-400);
-    min-width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
-    color: var(--text-inverse);
-    &.selected {
-      background-color: var(--primary);
-      border-color: var(--primary);
-    }
-  }
-  p {
-    white-space: pre-line;
-    line-height: 20px;
-    vertical-align: middle;
-  }
-
-  &.disabled {
-    user-select: none;
-    cursor: default;
-    input {
-      cursor: default;
-    }
-    .box {
-      background-color: var(--neutral-200);
-      border-color: var(--neutral-300);
-      color: var(--neutral-300);
-    }
-    p {
-      color: var(--text-disabled);
-    }
-  }
-}

package/src/styles/components/_inputDateTime.scss

@@ -1,161 +0,0 @@
-.date-input {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  position: relative;
-  .calendar-btn {
-    padding: 8px 8px 8px 12px;
-  }
-  .inputs {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    input {
-      width: min-content;
-      padding: 0px;
-      &.error {
-        color: var(--danger);
-      }
-    }
-  }
-}
-
-.react-calendar {
-  border: none !important;
-  -webkit-user-select: none;
-  user-select: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 12px 0;
-  button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    background: none;
-    border: none;
-    border-radius: 20px;
-    &:enabled:hover {
-      background: var(--neutral-hover);
-    }
-  }
-
-  // Header
-  &__navigation {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 4px;
-    width: 100%;
-    white-space: nowrap;
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 36px;
-      width: 36px;
-    }
-    &__label {
-      font-weight: 600;
-      font-size: 16px;
-      padding: 8px 12px;
-    }
-    &__arrow {
-      padding: 4px 12px 8px;
-      font-size: 30px;
-      line-height: 36px;
-      color: var(--neutral-400);
-    }
-  }
-
-  // Weekdays
-  &__month-view__weekdays {
-    text-align: center;
-    display: grid !important;
-    grid-template-columns: repeat(7, 1fr);
-    abbr[title] {
-      text-decoration: none;
-    }
-  }
-
-  // Item
-  &__tile {
-    flex: unset !important;
-    font-size: 15px;
-    font-weight: 500;
-    height: 40px;
-    &--now:not(&--active) {
-      background: var(--primary-100) !important;
-      color: var(--primary);
-      &:enabled:hover {
-        background: var(--primary-200) !important;
-      }
-    }
-    &--active,
-    &--hasActive {
-      background: var(--primary) !important;
-      color: var(--text-inverse) !important;
-    }
-  }
-
-  // Days
-  &__month-view__days {
-    margin-top: 16px;
-    display: grid !important;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 4px;
-    &__day {
-      width: 40px;
-      &--neighboringMonth {
-        color: var(--neutral-400);
-      }
-    }
-  }
-
-  // Months
-  &__year-view__months {
-    display: grid !important;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
-    &__month {
-      padding: 0 12px;
-    }
-  }
-  // Years
-  &__decade-view__years {
-    display: grid !important;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 8px;
-    &__year {
-      font-size: 16px;
-      padding: 0 12px;
-    }
-  }
-}
-
-.time-input-wrapper {
-  width: 110px;
-  min-width: 110px;
-  .time-input {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 0 12px;
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    input[type='number'] {
-      height: 40px;
-      padding: 0;
-      text-align: left;
-    }
-    span {
-      font-size: 13px;
-    }
-  }
-}