@payloadcms/ui 3.0.0-beta.111 → 3.0.0-beta.113

package/dist/elements/BulkUpload/FileSidebar/index.scss

@@ -1,277 +1,279 @@
 @import '../../../scss/styles.scss';
 
-.file-selections {
-  --file-gutter-h: calc(var(--gutter-h) / 4);
-  border-right: 1px solid var(--theme-border-color);
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  width: 300px;
-  overflow: auto;
-  max-height: 100%;
-
-  &__header {
-    position: sticky;
-    top: 0;
-    margin-top: var(--base);
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    background: var(--theme-bg);
-    flex-wrap: wrap;
-
-    p {
-      margin: 0;
-    }
-  }
-
-  &__headerTopRow {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--base);
-    width: 100%;
-    padding-block: var(--base);
-    padding-inline: var(--file-gutter-h);
-  }
-
-  &__header__text {
+@layer payload-default {
+  .file-selections {
+    --file-gutter-h: calc(var(--gutter-h) / 4);
+    border-right: 1px solid var(--theme-border-color);
+    padding: 0;
     display: flex;
     flex-direction: column;
+    width: 300px;
+    overflow: auto;
+    max-height: 100%;
 
-    .error-pill {
-      align-self: flex-start;
-    }
-  }
-
-  &__filesContainer {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-    margin-top: calc(var(--base) / 2);
-    width: 100%;
-    padding-inline: var(--file-gutter-h);
+    &__header {
+      position: sticky;
+      top: 0;
+      margin-top: var(--base);
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      background: var(--theme-bg);
+      flex-wrap: wrap;
 
-    .shimmer-effect {
-      border-radius: var(--style-radius-m);
+      p {
+        margin: 0;
+      }
     }
-  }
 
-  &__fileRowContainer {
-    --rowPadding: calc(var(--base) / 4);
-    position: relative;
-    &:last-child {
-      margin-bottom: calc(var(--base) / 4);
+    &__headerTopRow {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--base);
+      width: 100%;
+      padding-block: var(--base);
+      padding-inline: var(--file-gutter-h);
     }
-  }
 
-  &__fileRow {
-    @include btn-reset;
-    display: flex;
-    padding: var(--rowPadding);
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    border-radius: var(--style-radius-m);
-    max-width: 100%;
-    cursor: pointer;
-    width: 100%;
-
-    &:hover {
-      background-color: var(--theme-elevation-100);
+    &__header__text {
+      display: flex;
+      flex-direction: column;
+
+      .error-pill {
+        align-self: flex-start;
+      }
     }
 
-    .thumbnail {
-      width: base(1.2);
-      height: base(1.2);
-      flex-shrink: 0;
-      object-fit: cover;
-      border-radius: var(--style-radius-s);
+    &__filesContainer {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+      margin-top: calc(var(--base) / 2);
+      width: 100%;
+      padding-inline: var(--file-gutter-h);
+
+      .shimmer-effect {
+        border-radius: var(--style-radius-m);
+      }
     }
 
-    p {
-      margin: 0;
+    &__fileRowContainer {
+      --rowPadding: calc(var(--base) / 4);
+      position: relative;
+      &:last-child {
+        margin-bottom: calc(var(--base) / 4);
+      }
     }
-  }
 
-  &__fileDetails {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
+    &__fileRow {
+      @include btn-reset;
+      display: flex;
+      padding: var(--rowPadding);
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      border-radius: var(--style-radius-m);
+      max-width: 100%;
+      cursor: pointer;
+      width: 100%;
 
-  &__fileRowContainer--active {
-    .file-selections__fileRow {
-      background-color: var(--theme-elevation-100);
-    }
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
 
-    .file-selections__remove {
-      .icon--x {
-        opacity: 1;
+      .thumbnail {
+        width: base(1.2);
+        height: base(1.2);
+        flex-shrink: 0;
+        object-fit: cover;
+        border-radius: var(--style-radius-s);
       }
-    }
-  }
 
-  &__fileRowContainer--error {
-    .file-selections__fileRow {
-      background-color: var(--theme-error-100);
+      p {
+        margin: 0;
+      }
     }
 
-    &.file-selections__fileRowContainer--active .file-selections__fileRow,
-    .file-selections__fileRow:hover {
-      background-color: var(--theme-error-200);
+    &__fileDetails {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
     }
 
-    .file-selections__remove--overlay:hover {
-      background-color: var(--theme-error-50);
+    &__fileRowContainer--active {
+      .file-selections__fileRow {
+        background-color: var(--theme-elevation-100);
+      }
 
-      .icon--x {
-        opacity: 1;
+      .file-selections__remove {
+        .icon--x {
+          opacity: 1;
+        }
       }
     }
-  }
-
-  &__errorCount {
-    margin-left: auto;
-    position: absolute;
-    transform: translate(50%, -50%);
-    top: 0;
-    right: 0;
-  }
 
-  &__fileName {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+    &__fileRowContainer--error {
+      .file-selections__fileRow {
+        background-color: var(--theme-error-100);
+      }
 
-  &__fileSize {
-    font-size: calc(var(--base) / 2);
-    color: var(--theme-elvation-400);
-    flex-shrink: 0;
-  }
+      &.file-selections__fileRowContainer--active .file-selections__fileRow,
+      .file-selections__fileRow:hover {
+        background-color: var(--theme-error-200);
+      }
 
-  &__remove {
-    @include btn-reset;
-    margin: 0;
-    margin-left: auto;
+      .file-selections__remove--overlay:hover {
+        background-color: var(--theme-error-50);
 
-    .icon--x {
-      opacity: 0.75;
+        .icon--x {
+          opacity: 1;
+        }
+      }
     }
-  }
 
-  &__remove--underlay {
-    pointer-events: none;
-    opacity: 0;
-  }
+    &__errorCount {
+      margin-left: auto;
+      position: absolute;
+      transform: translate(50%, -50%);
+      top: 0;
+      right: 0;
+    }
 
-  &__remove--overlay {
-    position: absolute;
-    transform: translateY(-50%);
-    top: 50%;
-    bottom: 50%;
-    right: var(--rowPadding);
-    height: 20px;
-    border-radius: var(--style-radius-m);
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--theme-elevation-200);
+    &__fileName {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-  }
 
-  &__header__actions {
-    display: flex;
-    gap: var(--base);
-  }
+    &__fileSize {
+      font-size: calc(var(--base) / 2);
+      color: var(--theme-elvation-400);
+      flex-shrink: 0;
+    }
 
-  &__toggler {
-    display: none;
-    margin: 0;
-    padding-block: 0;
-  }
+    &__remove {
+      @include btn-reset;
+      margin: 0;
+      margin-left: auto;
 
-  &__header__mobileDocActions {
-    display: none;
-  }
+      .icon--x {
+        opacity: 0.75;
+      }
+    }
 
-  &__animateWrapper {
-    overflow: auto;
-  }
+    &__remove--underlay {
+      pointer-events: none;
+      opacity: 0;
+    }
 
-  &__mobileBlur {
-    @include blur-bg;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
-  }
+    &__remove--overlay {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      bottom: 50%;
+      right: var(--rowPadding);
+      height: 20px;
+      border-radius: var(--style-radius-m);
+      cursor: pointer;
 
-  &__showingFiles {
-    .file-selections__mobileBlur {
-      opacity: 1;
+      &:hover {
+        background-color: var(--theme-elevation-200);
+      }
     }
-  }
 
-  @include mid-break {
-    --file-gutter-h: var(--gutter-h);
-    flex-direction: column-reverse;
-    width: 100%;
-    position: sticky;
-    bottom: 0;
-    flex-shrink: 0;
+    &__header__actions {
+      display: flex;
+      gap: var(--base);
+    }
 
-    &__showingFiles {
-      z-index: 2;
+    &__toggler {
+      display: none;
+      margin: 0;
+      padding-block: 0;
     }
 
-    &__filesContainer {
-      @include blur-bg;
+    &__header__mobileDocActions {
+      display: none;
     }
 
-    &__fileRowContainer {
-      z-index: 1;
+    &__animateWrapper {
+      overflow: auto;
     }
 
-    &__header {
-      margin-top: 0;
+    &__mobileBlur {
+      @include blur-bg;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
     }
 
-    &__headerTopRow {
-      border-top: 1px solid var(--theme-border-color);
-      padding-block: calc(var(--base) * 0.8);
+    &__showingFiles {
+      .file-selections__mobileBlur {
+        opacity: 1;
+      }
     }
 
-    &__header__mobileDocActions {
-      position: relative;
-      display: flex;
+    @include mid-break {
+      --file-gutter-h: var(--gutter-h);
+      flex-direction: column-reverse;
       width: 100%;
-      padding-block: calc(var(--base) * 0.8);
-      padding-inline: var(--file-gutter-h);
-      border-top: 1px solid var(--theme-border-color);
+      position: sticky;
+      bottom: 0;
+      flex-shrink: 0;
 
-      > div {
+      &__showingFiles {
+        z-index: 2;
+      }
+
+      &__filesContainer {
+        @include blur-bg;
+      }
+
+      &__fileRowContainer {
+        z-index: 1;
+      }
+
+      &__header {
+        margin-top: 0;
+      }
+
+      &__headerTopRow {
+        border-top: 1px solid var(--theme-border-color);
+        padding-block: calc(var(--base) * 0.8);
+      }
+
+      &__header__mobileDocActions {
+        position: relative;
         display: flex;
-        justify-content: flex-end;
         width: 100%;
-        button {
-          flex: 0.5;
+        padding-block: calc(var(--base) * 0.8);
+        padding-inline: var(--file-gutter-h);
+        border-top: 1px solid var(--theme-border-color);
+
+        > div {
+          display: flex;
+          justify-content: flex-end;
+          width: 100%;
+          button {
+            flex: 0.5;
+          }
         }
       }
-    }
 
-    &__toggler {
-      padding-right: 0;
-      display: block;
-    }
+      &__toggler {
+        padding-right: 0;
+        display: block;
+      }
 
-    .btn {
-      margin: 0;
+      .btn {
+        margin: 0;
+      }
     }
   }
 }

package/dist/elements/BulkUpload/Header/index.scss

@@ -1,12 +1,14 @@
-.bulk-upload--drawer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: calc(var(--base) * 2.5) var(--gutter-h);
-  height: 48px;
-  border-bottom: 1px solid var(--theme-border-color);
+@layer payload-default {
+  .bulk-upload--drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: calc(var(--base) * 2.5) var(--gutter-h);
+    height: 48px;
+    border-bottom: 1px solid var(--theme-border-color);
 
-  h2 {
-    margin: 0;
+    h2 {
+      margin: 0;
+    }
   }
 }