@pisell/private-materials 3.4.156 → 3.4.158

package/es/plus/inventory/index.less

@@ -0,0 +1,559 @@
+.inventory-page {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 480px;
+  padding: 24px;
+  overflow: auto;
+  color: #1d2939;
+  background: #fff;
+
+  h2,
+  h3 {
+    margin: 0;
+    font-weight: 600;
+  }
+  h2 {
+    font-size: 22px;
+  }
+  h3 {
+    font-size: 16px;
+  }
+  > .pisell-lowcode-alert {
+    margin-bottom: 12px;
+  }
+}
+
+.inventory-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eaecf0;
+  p {
+    margin: 6px 0 0;
+    color: #667085;
+  }
+}
+
+.inventory-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 16px;
+  &-end {
+    justify-content: flex-end;
+  }
+  &-primary {
+    margin-left: auto;
+  }
+}
+
+.inventory-search {
+  width: 280px;
+  max-width: 100%;
+}
+.inventory-filter {
+  min-width: 145px;
+}
+.inventory-muted {
+  color: #667085;
+  font-size: 13px;
+}
+.inventory-notice {
+  margin: 0 0 16px;
+}
+.inventory-table {
+  min-width: 0;
+}
+.inventory-table-loading-placeholder {
+  min-height: 160px;
+}
+.inventory-table-loading {
+  > div > .pisell-lowcode-spin .pisell-lowcode-spin-dot {
+    margin-top: -12px;
+    margin-left: -12px;
+  }
+  > div > .pisell-lowcode-spin .pisell-lowcode-spin-text {
+    margin-top: 8px;
+    font-size: 13px;
+    color: #667085;
+  }
+}
+.inventory-pagination {
+  margin-top: 16px;
+  text-align: right;
+}
+.inventory-table .pisell-lowcode-table-cell {
+  font-variant-numeric: tabular-nums;
+}
+.inventory-table .pisell-lowcode-table-cell .pisell-lowcode-btn-link {
+  padding-inline: 6px;
+}
+.inventory-table
+  .pisell-lowcode-table-cell:first-child
+  .pisell-lowcode-btn-link {
+  padding-left: 0;
+}
+
+.inventory-item-link,
+.inventory-text-button,
+.inventory-nav-label {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  text-align: left;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  &:focus-visible {
+    outline: 2px solid #1677ff;
+    outline-offset: 3px;
+    border-radius: 4px;
+  }
+}
+.inventory-item-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: #1677ff;
+  max-width: 280px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.inventory-cover {
+  width: 64px;
+  height: 64px;
+  border-radius: 8px;
+  object-fit: cover;
+  background: #f2f4f7;
+  &-small {
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+  }
+}
+.inventory-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 20px;
+  padding: 16px 20px;
+  border: 1px solid #eaecf0;
+  border-radius: 8px;
+  background: #f9fafb;
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  span {
+    color: #667085;
+    font-size: 13px;
+  }
+  strong {
+    font-size: 23px;
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+  }
+}
+.inventory-form-columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 20px;
+}
+.inventory-path {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  white-space: normal;
+  max-width: 360px;
+}
+.inventory-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 20px 0;
+  h3 {
+    margin: 0;
+  }
+}
+.inventory-location-layout {
+  display: flex;
+  flex: 1;
+  min-height: 360px;
+  gap: 24px;
+}
+.inventory-navigation {
+  flex: 0 0 235px;
+  max-height: 75vh;
+  overflow-y: auto;
+  border-right: 1px solid #eaecf0;
+  padding-right: 16px;
+}
+.inventory-location-main {
+  flex: 1;
+  min-width: 0;
+}
+.inventory-location-main > .inventory-toolbar {
+  margin-top: 20px;
+}
+.inventory-nav-row {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 38px;
+  padding: 6px 8px;
+  margin: 2px 0;
+  border: 0;
+  border-radius: 6px;
+  color: #344054;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  &.is-selected {
+    background: #e6f4ff;
+    color: #0958d9;
+    font-weight: 500;
+  }
+  &:hover {
+    background: #f2f4f7;
+  }
+}
+.inventory-nav-label {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.inventory-nav-root,
+.inventory-nav-shelf {
+  cursor: pointer;
+}
+.inventory-nav-shelves {
+  margin-left: 28px;
+  border-left: 1px solid #eaecf0;
+  padding-left: 8px;
+}
+.inventory-inactive-dot {
+  color: #8c8c8c;
+  font-size: 12px;
+  font-weight: 400;
+}
+.inventory-nav-empty {
+  display: block;
+  padding: 12px;
+  color: #8c8c8c;
+  font-size: 13px;
+}
+.inventory-nav-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  min-height: 38px;
+  padding: 8px;
+  color: #667085;
+  font-size: 13px;
+
+  > .pisell-lowcode-spin {
+    display: inline-flex;
+    flex: 0 0 16px;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    line-height: 1;
+  }
+}
+.inventory-modal-body {
+  padding: 20px 0;
+
+  > .pisell-lowcode-alert {
+    margin-bottom: 16px;
+  }
+}
+
+.inventory-drawer-root {
+  .pisell-lowcode-drawer-content,
+  .pisell-lowcode-drawer-body {
+    height: 100%;
+  }
+}
+
+.inventory-drawer {
+  --inventory-drawer-header-height: 88px;
+
+  &__root {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+  }
+
+  &__sidebar {
+    display: flex;
+    flex: 0 0 72px;
+    flex-direction: column;
+    align-items: stretch;
+    border-right: 1px solid #f0f0f0;
+    background: #fafafa;
+  }
+
+  &__sidebar-slot {
+    display: block;
+  }
+
+  &__sidebar-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--inventory-drawer-header-height);
+    padding: 8px 4px;
+    border: 0;
+    background: transparent;
+    color: rgba(0, 0, 0, 0.55);
+    font: inherit;
+    cursor: pointer;
+    transition: color 0.2s, background 0.2s;
+
+    > .anticon {
+      font-size: 18px;
+    }
+
+    > span:last-child {
+      font-size: 12px;
+      line-height: 16px;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      background: transparent;
+      content: '';
+    }
+
+    &:hover:not(:disabled),
+    &.is-active {
+      color: #1677ff;
+      background: #fff;
+    }
+
+    &.is-active::before {
+      background: #1677ff;
+    }
+
+    &:disabled {
+      color: #bfbfbf;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #1677ff;
+      outline-offset: -2px;
+    }
+  }
+
+  &__main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 12px;
+    box-sizing: border-box;
+    min-height: var(--inventory-drawer-header-height);
+    padding: 16px;
+    background: #e6f4ff;
+  }
+
+  &__icon {
+    display: flex;
+    flex: 0 0 40px;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #dbeafe;
+    color: #1677ff;
+    font-size: 20px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__heading {
+    flex: 1;
+    min-width: 0;
+
+    h2 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #101828;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  &__subtitle {
+    margin-top: 2px;
+    color: #667085;
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+
+  &__content {
+    flex: 1;
+    min-height: 0;
+    padding: 16px;
+    overflow: auto;
+    background: #fff;
+
+    > .pisell-lowcode-alert {
+      margin-bottom: 16px;
+    }
+
+    > .pisell-lowcode-spin-nested-loading {
+      min-height: 80px;
+    }
+  }
+
+  &__card {
+    border-color: #eaecf0;
+    border-radius: 10px;
+
+    & + & {
+      margin-top: 12px;
+    }
+
+    > .pisell-lowcode-card-head {
+      min-height: 42px;
+      padding: 0 16px;
+      font-size: 14px;
+      font-weight: 600;
+      border-bottom-color: #eaecf0;
+    }
+
+    > .pisell-lowcode-card-body {
+      padding: 16px;
+    }
+
+    .inventory-metrics {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      gap: 16px;
+    }
+  }
+
+  &__info-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 0;
+  }
+
+  &__info-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+    font-size: 14px;
+
+    dt {
+      flex-shrink: 0;
+      color: #667085;
+    }
+
+    dd {
+      min-width: 0;
+      margin: 0;
+      color: #101828;
+      font-weight: 500;
+      text-align: right;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+
+    .pisell-lowcode-tag {
+      margin-inline-end: 0;
+    }
+  }
+
+  &__footer {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    flex-shrink: 0;
+    gap: 8px;
+    padding: 24px;
+    border-top: 1px solid #f0f0f0;
+    background: #fff;
+  }
+}
+
+@media (max-width: 900px) {
+  .inventory-page {
+    padding: 16px;
+  }
+  .inventory-navigation {
+    flex-basis: 195px;
+  }
+  .inventory-location-layout {
+    gap: 16px;
+  }
+}
+@media (max-width: 640px) {
+  .inventory-drawer__sidebar {
+    flex-basis: 64px;
+  }
+  .inventory-drawer__footer {
+    padding: 16px;
+  }
+  .inventory-header {
+    flex-wrap: wrap;
+  }
+  .inventory-location-layout {
+    flex-direction: column;
+  }
+  .inventory-navigation {
+    flex-basis: auto;
+    max-height: 220px;
+    border-right: 0;
+    border-bottom: 1px solid #eaecf0;
+    padding-bottom: 12px;
+  }
+  .inventory-form-columns {
+    grid-template-columns: 1fr;
+  }
+  .inventory-metrics strong {
+    font-size: 18px;
+  }
+  .inventory-section-heading {
+    flex-wrap: wrap;
+  }
+}