@payloadcms/next 3.0.0-beta.55 → 3.0.0-beta.56

package/dist/views/API/index.scss

@@ -0,0 +1,124 @@
+@import '../../scss/styles.scss';
+
+.query-inspector {
+  --string-color: #11b102;
+  --number-color: #62c3f3;
+  display: flex;
+  gap: calc(var(--base) * 2);
+  align-items: flex-start;
+
+  ul {
+    padding-left: calc(var(--base) * 1);
+  }
+
+  &--fullscreen {
+    padding-left: 0;
+    .query-inspector__configuration {
+      display: none;
+    }
+  }
+
+  &__configuration {
+    margin-top: calc(var(--base) * 2);
+    width: 60%;
+    position: sticky;
+    top: var(--base);
+  }
+
+  &__api-url {
+    margin-bottom: calc(var(--base) * 1.5);
+
+    a {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__form-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  &__label {
+    color: var(--theme-elevation-400);
+  }
+
+  &__filter-query-checkboxes {
+    display: flex;
+    gap: var(--base);
+  }
+
+  &__results-wrapper {
+    font-family: var(--font-mono);
+    width: 100%;
+    ul {
+      margin: 0;
+    }
+    li {
+      list-style: none;
+    }
+  }
+
+  &__toggle-fullscreen-button-container {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+
+    @include mid-break {
+      display: none;
+    }
+  }
+
+  &__toggle-fullscreen-button {
+    position: absolute;
+    right: calc(var(--base) * 0.5);
+    top: calc(var(--base) * 0.5);
+    padding: calc(var(--base) * 0.25);
+    background-color: var(--theme-elevation-0);
+    cursor: pointer;
+    z-index: 1;
+    margin: 0;
+    border: 0;
+    border-radius: 3px;
+    color: var(--theme-elevation-300);
+    &:hover {
+      color: var(--theme-elevation-700);
+    }
+  }
+
+  &__results {
+    padding-top: calc(var(--base) * 0.5);
+    padding-left: calc(var(--base) * 0.5);
+    padding-bottom: calc(var(--base) * 0.5);
+    background-color: var(--theme-elevation-50);
+    overflow: auto;
+    min-height: 100vh;
+  }
+
+  @include mid-break {
+    flex-direction: column;
+    padding-left: 0;
+
+    .query-inspector__configuration {
+      position: relative;
+      width: 100%;
+      top: 0;
+      padding-right: var(--gutter-h);
+      padding-left: var(--gutter-h);
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .query-inspector {
+    --number-color: #2e9cd3;
+  }
+}

package/dist/views/Account/Settings/index.scss

@@ -0,0 +1,46 @@
+@import '../../../scss/styles.scss';
+
+.payload-settings {
+  position: relative;
+  margin-bottom: calc(var(--base) * 2);
+
+  h3 {
+    margin: 0;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    height: 1px;
+    background: var(--theme-elevation-100);
+    width: calc(100% + calc(var(--base) * 5));
+    left: calc(var(--gutter-h) * -1);
+    top: 0;
+    position: absolute;
+  }
+
+  &::after {
+    display: none;
+    bottom: 0;
+    top: unset;
+  }
+
+  margin-top: calc(var(--base) * 3);
+  padding-top: calc(var(--base) * 3);
+  padding-bottom: calc(var(--base) * 3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--base);
+
+  @include mid-break {
+    margin-bottom: var(--base);
+    padding-top: calc(var(--base) * 2);
+    margin-top: calc(var(--base) * 2);
+    padding-bottom: calc(var(--base) * 2);
+
+    &::after {
+      display: block;
+    }
+  }
+}

package/dist/views/CreateFirstUser/index.scss

@@ -0,0 +1,5 @@
+.create-first-user {
+  > form > .field-type {
+    margin-bottom: var(--base);
+  }
+}

package/dist/views/Dashboard/Default/index.scss

@@ -0,0 +1,58 @@
+@import '../../../scss/styles.scss';
+
+.dashboard {
+  width: 100%;
+  --gap: var(--base);
+  --cols: 5;
+
+  &__wrap {
+    padding-bottom: var(--spacing-view-bottom);
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+  }
+
+  &__label {
+    margin: 0;
+  }
+
+  &__card-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    gap: var(--gap);
+    flex-wrap: wrap;
+
+    li {
+      width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
+    }
+
+    .card {
+      height: 100%;
+    }
+  }
+
+  @include large-break {
+    --cols: 4;
+  }
+
+  @include mid-break {
+    --gap: var(--base);
+    --cols: 2;
+  }
+
+  @include small-break {
+    --cols: 1;
+
+    &__wrap {
+      gap: var(--base);
+    }
+  }
+}

package/dist/views/Edit/Default/Auth/index.scss

@@ -0,0 +1,61 @@
+@import '../../../../scss/styles.scss';
+
+.auth-fields {
+  padding: calc(var(--base) * 2);
+  background: var(--theme-elevation-50);
+  display: flex;
+  flex-direction: column;
+  gap: var(--base);
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
+    flex-wrap: wrap;
+  }
+
+  &__changing-password {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  .btn {
+    margin: 0;
+  }
+
+  &__api-key-label {
+    position: relative;
+  }
+
+  @include mid-break {
+    padding: var(--base);
+    gap: calc(var(--base) / 2);
+
+    &__changing-password {
+      gap: calc(var(--base) / 2);
+    }
+  }
+}
+
+.field-type.api-key {
+  margin-bottom: var(--base);
+
+  input {
+    @include formInput;
+  }
+}
+
+@keyframes highlight {
+  0% {
+    background: var(--theme-success-500);
+  }
+
+  100% {
+    background: none;
+  }
+}
+
+.highlight {
+  animation: highlight 10s;
+}

package/dist/views/Edit/Default/index.scss

@@ -0,0 +1,21 @@
+@import '../../../scss/styles.scss';
+
+.collection-edit {
+  width: 100%;
+
+  &__form {
+    height: 100%;
+  }
+
+  &__auth {
+    margin-bottom: calc(var(--base) * 2);
+    margin-top: calc(var(--base) * 0.5);
+  }
+
+  @include small-break {
+    &__auth {
+      margin-top: 0;
+      margin-bottom: var(--base);
+    }
+  }
+}

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

@@ -0,0 +1,195 @@
+@import '../../../scss/styles.scss';
+
+.collection-list {
+  width: 100%;
+  margin-top: base(0.5);
+
+  &__wrap {
+    padding-bottom: var(--spacing-view-bottom);
+
+    & > *:not(:last-child) {
+      margin-bottom: var(--base);
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    gap: base(0.75);
+
+    h1 {
+      margin: 0;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    .pill {
+      position: relative;
+      top: -14px;
+      margin: 0;
+    }
+  }
+
+  &__sub-header {
+    flex-basis: 100%;
+    margin-top: base(0.25);
+  }
+
+  .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;
+        width: auto;
+      }
+    }
+  }
+
+  &__no-results {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--base);
+
+    & > * {
+      margin: 0;
+    }
+  }
+
+  &__page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .paginator {
+    margin-bottom: 0;
+  }
+
+  &__page-info {
+    [dir='ltr'] & {
+      margin-right: base(1);
+      margin-left: auto;
+    }
+    [dir='rtl'] & {
+      margin-left: base(1);
+      margin-right: auto;
+    }
+  }
+
+  &__list-selection {
+    position: fixed;
+    bottom: 0;
+    z-index: 10;
+    padding: base(0.75) 0;
+    width: 100%;
+    background-color: var(--theme-bg);
+
+    .btn {
+      margin: 0 0 0 base(0.5);
+    }
+
+    .btn {
+      background-color: var(--theme-elevation-100);
+      cursor: pointer;
+      padding: 0 base(0.25);
+      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;
+      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);
+      }
+    }
+
+    &__page-controls {
+      flex-wrap: wrap;
+    }
+
+    &__page-info {
+      margin-left: 0;
+    }
+
+    .paginator {
+      width: 100%;
+      margin-bottom: $baseline;
+    }
+  }
+
+  @include small-break {
+    margin-top: 0;
+    margin-bottom: base(3);
+
+    &__header {
+      .pill {
+        top: -6px;
+      }
+    }
+  }
+}

package/dist/views/LivePreview/IFrame/index.scss

@@ -0,0 +1,7 @@
+.live-preview-iframe {
+  background-color: white;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: top left;
+}

package/dist/views/LivePreview/Preview/index.scss

@@ -0,0 +1,41 @@
+@import '../../../scss/styles.scss';
+
+.live-preview-window {
+  background-color: var(--theme-bg);
+  width: 60%;
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: sticky;
+  top: var(--doc-controls-height);
+  height: calc(100vh - var(--doc-controls-height));
+  overflow: hidden;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: flex-start;
+  }
+
+  &__main {
+    flex-grow: 1;
+    height: 100%;
+    width: 100%;
+  }
+
+  &--has-breakpoint {
+    .live-preview-iframe {
+      border: 1px solid var(--theme-elevation-100);
+    }
+
+    .live-preview-window {
+      &__main {
+        padding: var(--base);
+      }
+    }
+  }
+
+  @include mid-break {
+    width: 100%;
+  }
+}

package/dist/views/LivePreview/Toolbar/Controls/index.scss

@@ -0,0 +1,59 @@
+@import '../../../../scss/styles.scss';
+
+.live-preview-toolbar-controls {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--base) / 3);
+
+  &__breakpoint {
+    border: none;
+    background: transparent;
+    height: var(--base);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__device-size {
+    display: flex;
+    align-items: center;
+  }
+
+  &__size {
+    width: 50px;
+    height: var(--base);
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--theme-elevation-200);
+    background: var(--theme-elevation-100);
+    border-radius: 2px;
+    font-size: small;
+  }
+
+  &__zoom {
+    width: 55px;
+    border: none;
+    background: transparent;
+    height: var(--base);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__external {
+    flex-shrink: 0;
+    display: flex;
+    width: var(--base);
+    height: var(--base);
+    align-items: center;
+    justify-content: center;
+    padding: 6px 0;
+  }
+
+  .popup-button {
+    display: flex;
+    align-items: center;
+  }
+}

package/dist/views/LivePreview/Toolbar/SizeInput/index.scss

@@ -0,0 +1,10 @@
+.toolbar-input {
+  width: 50px;
+  height: var(--base);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-elevation-100);
+  border-radius: 2px;
+  font-size: small;
+}

package/dist/views/LivePreview/Toolbar/index.scss

@@ -0,0 +1,41 @@
+@import '../../../scss/styles.scss';
+
+.live-preview-toolbar {
+  display: flex;
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+  height: calc(var(--base) * 1.75);
+  align-items: center;
+  flex-shrink: 0;
+
+  &--static {
+    position: relative;
+    width: 100%;
+    justify-content: center;
+    border-bottom: 1px solid var(--theme-elevation-100);
+  }
+
+  &--draggable {
+    @include shadow-lg;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    border-radius: 4px;
+  }
+
+  &__drag-handle {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: grab;
+
+    .icon--drag-handle .fill {
+      fill: var(--theme-elevation-300);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}

package/dist/views/LivePreview/ToolbarArea/index.scss

@@ -0,0 +1,4 @@
+.toolbar-area {
+  width: 100%;
+  height: 100%;
+}