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

package/dist/elements/DocumentHeader/Tabs/Tab/index.scss

@@ -0,0 +1,91 @@
+@import '../../../../scss/styles.scss';
+
+.doc-tab {
+  @extend %h5;
+  position: relative;
+
+  &__link {
+    text-decoration: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+
+    // Use a pseudo element for the accessability so that it doesn't take up DOM space
+    // Also because the parent element has `overflow: hidden` which would clip an outline
+    &:focus-visible::after {
+      content: '';
+      border: var(--accessibility-outline);
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+    }
+  }
+
+  &:focus:not(:focus-visible) {
+    opacity: 1;
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    background-color: var(--theme-elevation-50);
+    opacity: 0;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 1;
+    }
+
+    .doc-tab__count {
+      background-color: var(--theme-elevation-150);
+    }
+  }
+
+  &--active {
+    &::before {
+      opacity: 1;
+      background-color: var(--theme-elevation-100);
+    }
+
+    .doc-tab {
+      &__count {
+        background-color: var(--theme-elevation-250);
+      }
+    }
+
+    &:hover {
+      .doc-tab {
+        &__count {
+          background-color: var(--theme-elevation-250);
+        }
+      }
+    }
+  }
+
+  &__label {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    height: 100%;
+    padding: calc(var(--base) / 2) calc(var(--base));
+  }
+
+  &__count {
+    min-width: 22px;
+    text-align: center;
+    padding: 2px 7px;
+    background-color: var(--theme-elevation-100);
+    border-radius: 1px;
+  }
+}

package/dist/elements/DocumentHeader/Tabs/index.scss

@@ -0,0 +1,53 @@
+@import '../../../scss/styles.scss';
+
+.doc-tabs {
+  display: flex;
+
+  &__tabs {
+    display: flex;
+    gap: calc(var(--base) / 2);
+    list-style: none;
+    align-items: center;
+    margin: 0;
+    padding-left: 0;
+  }
+
+  @include mid-break {
+    width: 100%;
+    padding: 0;
+    overflow: auto;
+
+    // this container has a gradient overlay as visual indication of `overflow: scroll`
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: sticky;
+      right: 0;
+      width: calc(var(--base) * 2);
+      height: calc(var(--base) * 2);
+      background: linear-gradient(to right, transparent, var(--theme-bg));
+      flex-shrink: 0;
+      z-index: 1111;
+      pointer-events: none;
+    }
+
+    &__tabs {
+      padding: 0;
+      margin-left: var(--gutter-h);
+    }
+  }
+
+  @include small-break {
+    &__tabs-container {
+      margin-right: var(--gutter-h);
+    }
+
+    &__tabs {
+      gap: var(--gutter-h);
+    }
+  }
+}

package/dist/elements/DocumentHeader/index.scss

@@ -0,0 +1,51 @@
+@import '../../scss/styles.scss';
+
+.doc-header {
+  width: 100%;
+  margin-top: base(0.5);
+  padding-bottom: calc(var(--base) * 1.5);
+  display: flex;
+  align-items: center;
+  position: relative;
+  display: flex;
+  gap: calc(var(--base) / 2);
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 1px;
+    background: var(--theme-elevation-100);
+    width: 100%;
+    left: 0;
+    top: calc(100% - 1px);
+  }
+
+  &__title {
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+  @include mid-break {
+    padding-left: 0;
+    padding-right: 0;
+    margin-top: base(0.25);
+    padding-bottom: calc(var(--base) / 1.5);
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+    padding-bottom: calc(var(--base) / 2);
+
+    &__title {
+      width: 100%;
+      padding-left: var(--gutter-h);
+      padding-right: var(--gutter-h);
+    }
+  }
+
+  @include small-break {
+    margin-top: 0;
+  }
+}

package/dist/elements/LeaveWithoutSaving/index.scss

@@ -0,0 +1,36 @@
+@import '../../scss/styles.scss';
+
+.leave-without-saving {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  &__wrapper {
+    z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: var(--base);
+
+    .btn {
+      margin: 0;
+    }
+  }
+}

package/dist/elements/Nav/NavWrapper/index.scss

@@ -0,0 +1,17 @@
+@import '../../../scss/styles.scss';
+
+.nav {
+  position: sticky;
+  top: 0;
+  left: 0;
+  flex-shrink: 0;
+  height: 100vh;
+  width: var(--nav-width);
+  border-right: 1px solid var(--theme-elevation-100);
+  opacity: 0;
+  transition: opacity var(--nav-trans-time) ease-in-out;
+
+  &--nav-open {
+    opacity: 1;
+  }
+}

package/dist/elements/Nav/index.scss

@@ -0,0 +1,150 @@
+@import '../../scss/styles.scss';
+
+.nav {
+  position: sticky;
+  top: 0;
+  left: 0;
+  flex-shrink: 0;
+  height: 100vh;
+  width: var(--nav-width);
+  border-right: 1px solid var(--theme-elevation-100);
+  opacity: 0;
+  transition: opacity var(--nav-trans-time) ease-in-out;
+
+  &--nav-open {
+    opacity: 1;
+  }
+
+  &__header {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: var(--app-header-height);
+  }
+
+  &__header-content {
+    z-index: 1;
+    position: relative;
+    height: 100%;
+  }
+
+  &__mobile-close {
+    display: none;
+    background: none;
+    border: 0;
+    outline: 0;
+    padding: calc(var(--base) * 0.75) var(--gutter-h);
+  }
+
+  &__scroll {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: var(--app-header-height) base(1) base(2) base(1);
+    overflow-y: auto;
+
+    // remove the scrollbar here to prevent layout shift as nav groups are toggled
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-grow: 1;
+  }
+
+  &__label {
+    color: var(--theme-elevation-400);
+  }
+
+  &__controls {
+    margin-top: auto;
+    margin-bottom: 0;
+
+    > * {
+      margin-top: base(1);
+    }
+
+    a:focus-visible {
+      outline: var(--accessibility-outline);
+    }
+  }
+
+  &__log-out {
+    &:hover {
+      g {
+        transform: translateX(-#{base(0.125)});
+      }
+    }
+  }
+
+  nav {
+    a {
+      position: relative;
+      padding: base(0.125) base(1.5) base(0.125) 0;
+      display: flex;
+      text-decoration: none;
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+        font-weight: 600;
+      }
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+
+      &.active {
+        font-weight: normal;
+        padding-left: 0;
+        font-weight: 600;
+      }
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+
+    &.active {
+      .nav__link-icon {
+        display: block;
+      }
+    }
+  }
+
+  &__link-icon {
+    display: none;
+    margin-right: calc(var(--base) * 0.25);
+    top: -1px;
+    position: relative;
+  }
+
+  @include mid-break {
+    &__scroll {
+      padding: var(--app-header-height) base(0.5) base(2);
+    }
+  }
+
+  @include small-break {
+    &__scroll {
+      padding: var(--app-header-height) var(--gutter-h) base(2);
+    }
+
+    nav a {
+      font-size: base(0.875);
+      line-height: base(1.5);
+    }
+
+    &__mobile-close {
+      display: flex;
+      height: 100%;
+      align-items: center;
+    }
+  }
+}