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

package/dist/scss/vars.scss

@@ -1,213 +0,0 @@
-@use 'sass:math';
-
-/////////////////////////////
-// BREAKPOINTS
-/////////////////////////////
-
-$breakpoint-xs-width: 400px !default;
-$breakpoint-s-width: 768px !default;
-$breakpoint-m-width: 1024px !default;
-$breakpoint-l-width: 1440px !default;
-
-//////////////////////////////
-// BASELINE GRID
-//////////////////////////////
-
-$baseline-px: 25px !default;
-$baseline-body-size: 13px !default;
-$baseline: math.div($baseline-px, $baseline-body-size) + rem;
-
-@function base($multiplier) {
-  @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
-}
-
-//////////////////////////////
-// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
-//////////////////////////////
-
-$color-dark-gray: #333333 !default;
-$color-gray: #9a9a9a !default;
-$color-light-gray: #dadada !default;
-$color-background-gray: #f3f3f3 !default;
-$color-red: #ff6f76 !default;
-$color-yellow: #fdffa4 !default;
-$color-green: #b2ffd6 !default;
-$color-purple: #f3ddf3 !default;
-
-//////////////////////////////
-// STYLES
-//////////////////////////////
-
-$style-radius-s: 3px !default;
-$style-radius-m: 4px !default;
-$style-radius-l: 9px !default;
-$style-stroke-width: 1px !default;
-
-$style-stroke-width-s: 1px !default;
-$style-stroke-width-m: 2px !default;
-
-//////////////////////////////
-// MISC
-//////////////////////////////
-
-$top-header-offset: calc(var(--base) - 1px);
-$top-header-offset-m: calc(var(--base) * 3);
-$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
-
-//////////////////////////////
-// SHADOWS
-//////////////////////////////
-
-@mixin shadow-sm {
-  box-shadow:
-    0 2px 3px 0 rgba(0, 2, 4, 0.05),
-    0 10px 4px -8px rgba(0, 2, 4, 0.02);
-}
-
-@mixin shadow-m {
-  box-shadow:
-    0 0 30px 0 rgb(0 2 4 / 12%),
-    0 30px 25px -8px rgb(0 2 4 / 10%);
-}
-
-@mixin shadow-lg {
-  box-shadow:
-    0 20px 35px -10px rgba(0, 2, 4, 0.2),
-    0 6px 4px -4px rgba(0, 2, 4, 0.02);
-}
-
-@mixin shadow-lg-top {
-  box-shadow:
-    0 -20px 35px -10px rgba(0, 2, 4, 0.2),
-    0 -6px 4px -4px rgba(0, 2, 4, 0.02);
-}
-
-@mixin shadow {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
-
-  &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-}
-
-@mixin inputShadowActive {
-  box-shadow:
-    0 2px 3px 0 rgba(0, 2, 4, 0.16),
-    0 6px 4px -4px rgba(0, 2, 4, 0.13);
-}
-
-@mixin inputShadow {
-  @include shadow-sm;
-
-  &:not(:disabled) {
-    &:hover {
-      box-shadow:
-        0 2px 3px 0 rgba(0, 2, 4, 0.13),
-        0 6px 4px -4px rgba(0, 2, 4, 0.1);
-    }
-
-    &:active,
-    &:focus-within,
-    &:focus {
-      @include inputShadowActive;
-    }
-  }
-}
-
-@mixin soft-shadow-bottom {
-  box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
-}
-
-//////////////////////////////
-// STYLE MIXINS
-//////////////////////////////
-
-@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
-  &:before,
-  &:after {
-    content: ' ';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &:before {
-    background: $color;
-    opacity: $opacity;
-  }
-
-  &:after {
-    backdrop-filter: blur(8px);
-  }
-}
-
-@mixin blur-bg-light {
-  @include blur-bg(var(--theme-bg), 0.3);
-}
-
-@mixin formInput() {
-  @include inputShadow;
-  font-family: var(--font-body);
-  width: 100%;
-  border: 1px solid var(--theme-elevation-150);
-  background: var(--theme-input-bg);
-  color: var(--theme-elevation-800);
-  border-radius: 0;
-  font-size: 1rem;
-  height: base(2);
-  line-height: base(1);
-  padding: base(0.5) base(0.75);
-  -webkit-appearance: none;
-
-  &[data-rtl='true'] {
-    direction: rtl;
-  }
-
-  &::-webkit-input-placeholder {
-    color: var(--theme-elevation-400);
-    font-weight: normal;
-    font-size: 1rem;
-  }
-
-  &::-moz-placeholder {
-    color: var(--theme-elevation-400);
-    font-weight: normal;
-    font-size: 1rem;
-  }
-
-  &:hover {
-    border-color: var(--theme-elevation-250);
-  }
-
-  &:focus,
-  &:focus-within,
-  &:active {
-    border-color: var(--theme-elevation-400);
-    outline: 0;
-  }
-
-  &:disabled {
-    background: var(--theme-elevation-200);
-    color: var(--theme-elevation-450);
-
-    &:hover {
-      border-color: var(--theme-elevation-150);
-    }
-  }
-}
-
-@mixin lightInputError {
-  background-color: var(--theme-error-50);
-  border: 1px solid var(--theme-error-500);
-}
-
-@mixin darkInputError {
-  background-color: var(--theme-error-100);
-  border: 1px solid var(--theme-error-400);
-
-  &:hover {
-    border-color: var(--theme-error-500);
-  }
-}

package/dist/scss/z-index.scss

@@ -1,9 +0,0 @@
-/////////////////////////////
-// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
-/////////////////////////////
-
-$z-page: 20;
-$z-page-content: 30;
-$z-nav: 40;
-$z-modal: 50;
-$z-status: 60;

package/dist/templates/Default/Wrapper/index.scss

@@ -1,25 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.template-default {
-  min-height: 100vh;
-  display: grid;
-  position: relative;
-  grid-template-columns: 0 auto;
-  transition: grid-template-columns var(--nav-trans-time) linear;
-  isolation: isolate;
-
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-
-  &--nav-open {
-    width: 100%;
-    grid-template-columns: var(--nav-width) auto;
-
-    .template-default {
-      &__nav-overlay {
-        transition: opacity var(--nav-trans-time) linear;
-      }
-    }
-  }
-}

package/dist/templates/Default/index.scss

@@ -1,67 +0,0 @@
-@import '../../scss/styles.scss';
-
-.template-default {
-  background-color: var(--theme-bg);
-  color: var(--theme-text);
-
-  [dir='rtl'] &__nav-toggler-wrapper {
-    left: unset;
-    right: 0;
-  }
-
-  &__nav-toggler-wrapper {
-    position: fixed;
-    z-index: var(--z-modal);
-    top: 0;
-    left: 0;
-    height: var(--app-header-height);
-    width: var(--gutter-h);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__wrap {
-    min-width: 0;
-    width: 100%;
-    flex-grow: 1;
-    position: relative;
-    background-color: var(--theme-bg);
-    &:before {
-      content: '';
-      display: block;
-      position: absolute;
-      inset: 0;
-      background-color: inherit;
-      opacity: 0;
-      z-index: var(--z-status);
-      visibility: hidden;
-      transition: all var(--nav-trans-time) linear;
-    }
-  }
-
-  @include mid-break {
-    &__nav-toggler-wrapper {
-      .hamburger {
-        left: unset;
-      }
-    }
-  }
-
-  @include small-break {
-    &__nav-toggler-wrapper {
-      width: unset;
-      justify-content: unset;
-
-      .hamburger {
-        display: none;
-      }
-    }
-
-    .template-default {
-      &__wrap {
-        min-width: 100vw;
-      }
-    }
-  }
-}

package/dist/templates/Minimal/index.scss

@@ -1,28 +0,0 @@
-@import '../../scss/styles';
-
-.template-minimal {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  padding: base(3) $baseline;
-  margin-left: auto;
-  margin-right: auto;
-  min-height: 100%;
-  background-color: var(--theme-bg-color);
-  color: var(--theme-text);
-
-  &--width-normal {
-    .template-minimal__wrap {
-      max-width: 500px;
-      width: 100%;
-    }
-  }
-
-  &--width-wide {
-    .template-minimal__wrap {
-      max-width: 1024px;
-      width: 100%;
-    }
-  }
-}

package/dist/views/API/RenderJSON/index.scss

@@ -1,90 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.query-inspector {
-  &__json-children {
-    position: relative;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 8px;
-      width: 1px;
-      height: 100%;
-      border-left: 1px dashed var(--theme-elevation-200);
-    }
-  }
-
-  &__list-wrap {
-    position: relative;
-  }
-
-  &__list-toggle {
-    all: unset;
-    width: 100%;
-    text-align: left;
-    cursor: pointer;
-    border-radius: 3px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    position: relative;
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    left: -3px;
-    width: calc(100% + 3px);
-
-    svg {
-      margin-left: 5px;
-    }
-
-    svg .stroke {
-      stroke: var(--theme-elevation-400);
-    }
-
-    &:hover {
-      background-color: var(--theme-elevation-100);
-    }
-
-    &--empty {
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-
-  &__toggle-row-icon {
-    &--open {
-      transform: rotate(0deg);
-    }
-    &--closed {
-      transform: rotate(-90deg);
-    }
-  }
-
-  &__value-type {
-    &--number {
-      .query-inspector__value {
-        color: var(--number-color);
-      }
-    }
-
-    &--string {
-      .query-inspector__value {
-        color: var(--string-color);
-      }
-    }
-  }
-
-  &__row-line--nested {
-    margin-left: 25px;
-  }
-
-  &__bracket {
-    position: relative;
-
-    &--position-end {
-      left: 5px;
-      width: calc(100% - 5px);
-    }
-  }
-}

package/dist/views/API/index.scss

@@ -1,124 +0,0 @@
-@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

@@ -1,46 +0,0 @@
-@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

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

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

@@ -1,58 +0,0 @@
-@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);
-    }
-  }
-}