@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/views/HierarchyList/HierarchyTable/SlotTable.scss

@@ -1,214 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .slot-table {
-    overflow: auto;
-    max-width: 100%;
-
-    table {
-      min-width: 100%;
-      border-collapse: separate;
-      border-spacing: 0;
-    }
-
-    thead {
-      color: var(--theme-elevation-400);
-    }
-
-    tbody {
-      color: var(--theme-elevation-550);
-    }
-
-    &__th {
-      font-weight: normal;
-      text-align: left;
-      vertical-align: middle;
-      padding: calc(var(--base) * 0.6);
-      padding-block-start: 0;
-      min-width: 150px;
-      position: relative;
-
-      [dir='rtl'] & {
-        text-align: right;
-      }
-
-      &:first-child {
-        padding-inline-start: calc(var(--base) * 0.8);
-      }
-
-      &:last-child {
-        padding-inline-end: calc(var(--base) * 0.8);
-      }
-
-      &--drag {
-        width: calc(var(--base) * 2);
-        min-width: calc(var(--base) * 2);
-        padding: 0;
-      }
-
-      &--checkbox {
-        width: calc(var(--base) * 2);
-        min-width: calc(var(--base) * 2);
-        padding: calc(var(--base) * 0.6);
-        text-align: center;
-      }
-    }
-
-    &__tr {
-      position: relative;
-      line-height: 1;
-
-      // Zebra striping
-      &:nth-child(odd) {
-        background: var(--theme-elevation-50);
-
-        td:first-child {
-          border-top-left-radius: var(--style-radius-s);
-          border-bottom-left-radius: var(--style-radius-s);
-        }
-
-        td:last-child {
-          border-top-right-radius: var(--style-radius-s);
-          border-bottom-right-radius: var(--style-radius-s);
-        }
-      }
-
-      &--clickable {
-        cursor: pointer;
-
-        &:hover {
-          background: var(--theme-elevation-100);
-        }
-
-        &:focus {
-          outline: none;
-          background: var(--theme-elevation-100);
-        }
-      }
-
-      &--selected {
-        background: var(--theme-elevation-100) !important;
-      }
-    }
-
-    &__td {
-      vertical-align: middle;
-      padding: calc(var(--base) * 0.6);
-      min-width: 150px;
-      position: relative;
-
-      &:first-child {
-        padding-inline-start: calc(var(--base) * 0.8);
-      }
-
-      &:last-child {
-        padding-inline-end: calc(var(--base) * 0.8);
-      }
-
-      &--drag {
-        width: calc(var(--base) * 2);
-        min-width: calc(var(--base) * 2);
-        padding: 0;
-        text-align: center;
-      }
-
-      &--checkbox {
-        width: calc(var(--base) * 2);
-        min-width: calc(var(--base) * 2);
-        padding: calc(var(--base) * 0.6);
-        text-align: center;
-      }
-    }
-
-    &__drag-handle {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: grab;
-      color: var(--theme-elevation-400);
-      padding: calc(var(--base) * 0.25);
-
-      &:hover {
-        color: var(--theme-elevation-550);
-      }
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    &__drag-header {
-      display: block;
-      width: 16px;
-      height: 16px;
-    }
-
-    &__checkbox {
-      // Uses CheckboxInput component - no additional styles needed
-    }
-
-    // Condensed appearance
-    &--appearance-condensed {
-      border-radius: var(--style-radius-s);
-
-      table {
-        border-collapse: collapse;
-      }
-
-      thead {
-        background: var(--theme-elevation-50);
-
-        th:first-child {
-          border-top-left-radius: var(--style-radius-s);
-        }
-
-        th:last-child {
-          border-top-right-radius: var(--style-radius-s);
-        }
-      }
-
-      tbody tr {
-        &:nth-child(odd) {
-          background: transparent;
-
-          td:first-child,
-          td:last-child {
-            border-radius: 0;
-          }
-        }
-
-        &:last-child {
-          td:first-child {
-            border-bottom-left-radius: var(--style-radius-s);
-          }
-
-          td:last-child {
-            border-bottom-right-radius: var(--style-radius-s);
-          }
-        }
-      }
-
-      .slot-table__th,
-      .slot-table__td {
-        padding: calc(var(--base) * 0.3);
-        border: 0.5px solid var(--theme-elevation-100);
-
-        &:first-child {
-          padding-inline-start: calc(var(--base) * 0.6);
-        }
-
-        &:last-child {
-          padding-inline-end: calc(var(--base) * 0.6);
-        }
-      }
-    }
-
-    @include mid-break {
-      &__th,
-      &__td {
-        max-width: 70vw;
-      }
-    }
-  }
-}

package/dist/views/HierarchyList/HierarchyTable/index.scss

@@ -1,136 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .hierarchy-tables {
-    margin-top: calc(var(--base) * 1.5);
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) * 1.8);
-
-    // Name cell with icon
-    &__name-cell {
-      display: flex;
-      align-items: center;
-      gap: calc(var(--base) * 0.3);
-    }
-
-    &__edit-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--theme-text);
-      flex-shrink: 0;
-      padding: 0;
-      background: none;
-      border: none;
-      cursor: pointer;
-      border-radius: var(--style-radius-s);
-      border: 1px solid transparent;
-
-      &:hover,
-      &:focus-visible {
-        color: var(--theme-elevation-800);
-        background-color: var(--theme-elevation-150);
-        border-color: var(--theme-elevation-200);
-      }
-
-      &:hover,
-      &:focus-visible {
-        color: var(--theme-elevation-800);
-        background-color: var(--theme-elevation-150);
-      }
-    }
-
-    &__name-link {
-      display: inline-flex;
-      align-items: center;
-      gap: calc(var(--base) * 0.5);
-      color: var(--theme-text);
-      text-decoration: none;
-      background: none;
-      border: none;
-      padding: 0;
-      font: inherit;
-      cursor: pointer;
-      text-align: left;
-
-      &:hover {
-        color: var(--theme-elevation-800);
-        text-decoration: underline;
-      }
-    }
-
-    &__thumbnail {
-      display: inline-block;
-      max-width: var(--base);
-      height: var(--base);
-      border-radius: var(--style-radius-s);
-      flex-shrink: 0;
-    }
-
-    &__name-icon {
-      display: flex;
-      flex-shrink: 0;
-    }
-
-    &__name-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      line-height: var(--base);
-    }
-
-    &__chevron {
-      margin-inline-start: auto;
-      padding-inline-start: calc(var(--base) * 0.5);
-
-      svg {
-        width: 12px;
-        height: 12px;
-        color: var(--theme-elevation-400);
-      }
-    }
-
-    // Column widths
-    &__col-name {
-      width: auto;
-      min-width: 200px;
-    }
-
-    &__col-collection {
-      width: 140px;
-      min-width: 100px;
-    }
-
-    &__col-date {
-      width: 150px;
-      min-width: 120px;
-    }
-
-    &__col-type {
-      width: 120px;
-      min-width: 100px;
-      &:not(.slot-table__th) {
-        color: var(--theme-elevation-550);
-      }
-    }
-
-    // Section title within collapsible header
-    &__section-title {
-      margin: 0;
-      font-weight: 500;
-      color: var(--theme-text);
-    }
-
-    &__load-more-wrap {
-      padding: calc(var(--base) * 0.5);
-      padding-left: calc(var(--base) * 0.8);
-      padding-top: calc(var(--base) * 0.2);
-    }
-
-    &__group-label {
-      padding-bottom: calc(var(--base) * 0.8);
-      color: var(--theme-text);
-    }
-  }
-}

package/dist/views/HierarchyList/TypeFilter/index.scss

@@ -1,32 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.type-filter {
-  &--active {
-    .type-filter__button {
-      &:after {
-        content: '';
-        height: 8px;
-        width: 8px;
-        border-radius: 50%;
-        position: absolute;
-        top: 0;
-        right: 0;
-        background: var(--theme-success-550);
-        transform: translate3d(40%, -40%, 0px);
-
-        [data-theme='light'] & {
-          background: var(--theme-success-400);
-        }
-      }
-    }
-    .type-filter__count {
-      font-variant-numeric: tabular-nums;
-      padding: 0px 3px;
-      border-radius: var(--style-radius-s);
-      margin-left: -4px;
-      margin-right: calc(var(--base) * 0.25);
-      font-weight: 500;
-      background: var(--theme-elevation-50);
-    }
-  }
-}

package/dist/views/HierarchyList/index.scss

@@ -1,68 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .hierarchy-list {
-    width: 100%;
-
-    &__wrap {
-      padding-bottom: var(--spacing-view-bottom);
-
-      & > *:not(:last-child) {
-        margin-bottom: var(--base);
-      }
-    }
-
-    .list-header {
-      a {
-        text-decoration: none;
-      }
-    }
-
-    &__allowed-types {
-      color: var(--theme-elevation-500);
-      padding-top: calc(var(--base) * 0.2);
-    }
-
-    &__sub-header {
-      flex-basis: 100%;
-      padding-top: calc(var(--base) * 0.75);
-    }
-
-    &__step-nav-icon-label {
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: calc(var(--base) * 0.25);
-    }
-
-    &__controls {
-      display: flex;
-      gap: var(--spacing-sm);
-      align-items: center;
-    }
-
-    &__no-results {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--base);
-
-      & > * {
-        margin: 0;
-      }
-    }
-
-    @include mid-break {
-      margin-top: base(0.25);
-
-      &__wrap {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-
-      &__sub-header {
-        margin-top: 0;
-      }
-    }
-  }
-}

package/dist/views/List/GroupByHeader/index.scss

@@ -1,17 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .group-by-header {
-    display: flex;
-    gap: var(--base);
-
-    &__heading {
-      margin: 0;
-      flex-grow: 1;
-    }
-
-    .list-selection__actions button {
-      margin: 0;
-    }
-  }
-}

package/dist/views/List/ListHeader/index.scss

@@ -1,62 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .list-drawer {
-    .list-header__title {
-    }
-
-    &__header {
-      margin-top: base(2.5);
-      width: 100%;
-
-      @include mid-break {
-        margin-top: base(1.5);
-      }
-    }
-
-    .doc-drawer__toggler.list-header__create-new-button {
-      background: transparent;
-      border: 0;
-      padding: 0;
-      cursor: pointer;
-      color: inherit;
-      border-radius: var(--style-radius-s);
-
-      &:hover .pill {
-        background: var(--theme-elevation-250);
-      }
-
-      &:focus:not(:focus-visible),
-      &:focus-within:not(:focus-visible) {
-        outline: none;
-      }
-
-      &:focus-visible {
-        outline: var(--accessibility-outline);
-        outline-offset: var(--accessibility-outline-offset);
-      }
-
-      &:disabled {
-        pointer-events: none;
-      }
-
-      .pill {
-        cursor: inherit;
-      }
-    }
-
-    &__select-collection-wrap {
-      margin-top: base(1);
-    }
-
-    @include mid-break {
-      .collection-list__header {
-        margin-bottom: base(0.5);
-      }
-
-      &__select-collection-wrap {
-        margin-top: calc(var(--base) / 2);
-      }
-    }
-  }
-}

package/dist/views/List/index.scss

@@ -1,145 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .collection-list {
-    width: 100%;
-
-    &__wrap {
-      padding-bottom: var(--spacing-view-bottom);
-
-      & > *:not(:last-child) {
-        margin-bottom: var(--base);
-      }
-    }
-
-    .list-header {
-      a {
-        text-decoration: none;
-      }
-    }
-
-    &__sub-header {
-      flex-basis: 100%;
-      padding-top: calc(var(--base) * 0.75);
-    }
-
-    &__tables {
-      .table-wrap:not(:last-child) {
-        margin-bottom: calc(var(--base) * 2);
-      }
-
-      .table-wrap--group-by:first-child {
-        margin-top: calc(var(--base) * 2);
-      }
-    }
-
-    .table {
-      table {
-        width: 100%;
-        overflow: auto;
-
-        [class^='cell'] > p,
-        [class^='cell'] > span,
-        [class^='cell'] > a {
-          line-clamp: 4;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 4;
-          overflow: hidden;
-          display: -webkit-box;
-          max-width: 100vw;
-        }
-
-        #heading-_select,
-        .cell-_select {
-          min-width: unset;
-        }
-
-        #heading-_dragHandle,
-        .cell-_dragHandle {
-          width: 20px;
-          min-width: 0;
-        }
-      }
-    }
-
-    &__list-selection {
-      position: fixed;
-      bottom: 0;
-      z-index: 10;
-      padding: base(0.8) 0;
-      width: 100%;
-      background-color: var(--theme-bg);
-
-      .btn {
-        margin: 0 0 0 base(0.4);
-      }
-
-      .btn {
-        background-color: var(--theme-elevation-100);
-        cursor: pointer;
-        padding: 0 base(0.4);
-        border-radius: $style-radius-s;
-
-        &:hover {
-          background-color: var(--theme-elevation-200);
-        }
-      }
-    }
-
-    &__list-selection-actions {
-      display: flex;
-      gap: base(0.25);
-    }
-
-    &__shimmer {
-      margin-top: base(1.75);
-      width: 100%;
-      > div {
-        margin-top: 8px;
-      }
-    }
-
-    @include mid-break {
-      margin-top: base(0.25);
-
-      &__wrap {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-
-      &__header {
-        gap: base(0.5);
-      }
-
-      &__sub-header {
-        margin-top: 0;
-      }
-
-      &__search-input {
-        margin: 0;
-      }
-
-      // on mobile, extend the table all the way to the viewport edges
-      // this is to visually indicate overflowing content
-      .table {
-        display: flex;
-        flex-direction: column;
-        width: calc(100% + calc(var(--gutter-h) * 2));
-        max-width: unset;
-        left: calc(var(--gutter-h) * -1);
-        position: relative;
-        padding-left: var(--gutter-h);
-
-        &::after {
-          content: '';
-          height: 1px;
-          padding-right: var(--gutter-h);
-        }
-      }
-    }
-
-    @include small-break {
-      margin-bottom: base(4);
-    }
-  }
-}