@brightspot/ui 3.0.1-cms-ui-migration.3 → 3.0.1

package/src/legacy/tool-ui/src/Viewers.css

@@ -1,21 +0,0 @@
-.Viewers {
-  @apply relative;
-
-  > .Viewers-some {
-    /* Overlap the list of viewers. */
-    @apply flex -space-x-4;
-  }
-
-  > .Viewers-some > .Viewers-viewer {
-    @apply relative overflow-hidden rounded-full;
-
-    .Avatar {
-      --avatar-size: theme('avatar.size.xs');
-      @apply border-[1.5px] border-white dark:bg-[oklch(from_var(--avatar-bg-color)_calc(l_*_1.6)_c_h)];
-    }
-
-    &:where([data-editing], [data-locked]) .Avatar {
-      @apply border-success-400;
-    }
-  }
-}

package/src/legacy/tool-ui/src/Week.css

@@ -1,23 +0,0 @@
-.Week-row {
-  @apply relative flex min-h-[72px];
-
-  &:not(:last-child) {
-    @apply before:absolute before:bottom-0 before:left-[39px] before:right-0 before:h-px before:bg-gray-200;
-  }
-}
-
-.Week-day {
-  @apply flex items-center border-e text-center [background:linear-gradient(to_right,theme(colors.gray.50)_38px,theme(colors.gray.200)_38px,theme(colors.gray.200)_39px,theme(colors.white.DEFAULT)_39px,theme(colors.white.DEFAULT))];
-}
-
-.Week-dow {
-  @apply w-[38px] px-[7px] text-xs font-semibold text-gray-500;
-}
-
-.Week-dom {
-  @apply w-14 px-4 text-sm text-gray-500;
-}
-
-.Week-content {
-  @apply w-full p-1 text-xs;
-}

package/src/legacy/tool-ui/src/Widget.css

@@ -1,622 +0,0 @@
-/* The file sets up the basic grid structure for Widgets, establishing uniform horizontal spacing around the content inside it.
-   This spacing can be adjusted for different use cases through a combination of one or more of the following:
-    1) --space css variable for the Widget
-    2) grid-column property and horizontal padding of individual components
-
-   The file also sets the default styles for Widget-title & Widget-controls in both collapsible and noncollapsible widgets.
-
-   Any use cases that need to overwrite these styles should be added to this file.
-*/
-.Widget {
-  --Widget-padding: var(--gap-l);
-  --space: theme(spacing.6); /* keep in sync with Revisions.css */
-
-  @apply relative grid bg-white [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_[content-end]_var(--space)_[fullbleed-end]];
-
-  > *:not(.ContentEdit-preview) {
-    @apply [grid-column:content-start_/_content-end];
-  }
-}
-
-.Widget-title {
-  @apply btu-heading-5 sticky top-0 z-10 overflow-x-clip text-ellipsis whitespace-nowrap border-b border-b-gray-200 bg-white py-3.5 text-gray-900;
-
-  .Label {
-    @apply inline-flex;
-  }
-}
-
-.Widget-controls {
-  @apply sticky top-0 z-[11] flex items-center gap-2 border-b border-b-gray-200 bg-inherit empty:hidden;
-}
-
-.Widget-controls.is-locked {
-  @apply !hidden;
-}
-
-/* By default widget titles take up the entire width of widget grid
- * Note: There are use cases where Widget-title is present outside of Widget (e.g ContentSummary popup)
-*/
-.Widget .Widget-title {
-  @apply px-[--space] [grid-column:fullbleed-start_/_fullbleed-end];
-}
-
-.Widget:not(.is-collapsible) {
-  &:has(.Widget-controls:not(:empty)) > .Widget-title {
-    @apply pe-0 [grid-column:fullbleed-start_/_span_2];
-  }
-
-  /* Widget controls appear on the top right corner of the widget on the same row as title */
-  .Widget-controls {
-    @apply pe-[--space] [grid-column:span_2_/_fullbleed-end];
-  }
-
-  .Admin-leftNav-controls {
-    @apply ps-2;
-  }
-
-  .Admin-main & {
-    /* When Widget-controls is moved inside form by JavaScript, make form participate in grid */
-    form:has(> .Widget-controls) {
-      @apply contents;
-    }
-
-    /* For Admin pages pin controls to row 1 so they align with the title */
-    .Widget-controls:has(> button:not(.FormFilter-icon)) {
-      @apply bg-white [grid-row:1];
-    }
-  }
-}
-
-.Widget-actionsToggle {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
-}
-
-.Widget-actionsList {
-  @apply Dropdown z-[10000];
-
-  [role='menuitem'] {
-    @apply Dropdown-item;
-  }
-}
-
-.Widget-actions.is-open {
-  .Widget-actionsList {
-    @apply Dropdown-is-open;
-  }
-
-  .Widget-actionsToggle {
-    @apply btu-button-pressed;
-  }
-}
-
-.Widget
-  :is(
-    .widget-urls.is-readOnly,
-    .widget-urlsRepeatable.is-readOnly,
-    .ContentEditSites-owner.is-readOnly,
-    .ContentEditSites-access.is-readOnly
-  ) {
-  @apply pointer-events-none select-none opacity-75;
-}
-
-.Widget .is-readOnly .UrlsWidget-itemLabel a,
-.widget .is-readOnly .RCIG-title:after,
-.widget .is-readOnly .ContentSummary-info,
-.widget .is-readOnly .ContentSelector-edit {
-  @apply pointer-events-auto cursor-pointer;
-}
-
-/* Collapsible widgets where widget titles have expand/collapse controls (e.g. Right rail publishing tools)
-** Note: In this use case Widget-controls are children of Widget-title instead of their sibling
-*/
-.Widget.is-collapsible {
-  @apply h-[min-content];
-
-  .Widget-title {
-    @apply cursor-pointer py-2 hover:bg-gray-100 focus-visible:ring-0;
-  }
-
-  .Widget-expand {
-    @apply relative inline-flex w-full items-center gap-2 focus:ring-0;
-  }
-
-  .Widget-title:has(.Widget-expand:focus-visible) {
-    @apply ring-offset-4 ring-1 ring-inset ring-primary-600 ring-offset-primary-100 more-contrast:ring-4;
-  }
-
-  .Widget-controls {
-    @apply order-2 ms-auto border-b-0;
-  }
-
-  .Widget-collapse {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-chevron-up before:transition-transform;
-  }
-}
-
-.Widget.is-collapsed {
-  @apply overflow-clip border-b-0 pb-0;
-
-  .Widget-collapse {
-    @apply before:rotate-180;
-  }
-
-  > div,
-  > table {
-    @apply hidden;
-  }
-}
-
-.Widget.is-error > .Widget-title {
-  @apply text-error-600;
-
-  .Widget-expand {
-    @apply after:btu-icon after:btu-icon-circle-alert after:text-error-600;
-  }
-}
-
-.Widget-heading {
-  @apply py-2 text-sm font-semibold text-gray-900;
-}
-
-.Widget-restoreButton {
-  @apply btu-button btu-button-text-hidden btu-button-gray before:btu-icon before:btu-icon-archive-restore;
-}
-
-/* Customizing spacing and widget styles for different use cases */
-.Widget > form,
-.Widget > form > .fixedScrollable {
-  &:has(> .TC, > .CIG, > .SearchInput, > .ActionBar) {
-    @apply grid grid-cols-subgrid [grid-column:fullbleed-start_/_fullbleed-end];
-
-    & > :not(.ActionBar, .Widget-controls, .Message) {
-      @apply px-0 [grid-column:content-start_/_content-end];
-    }
-  }
-
-  > .ActionBar {
-    @apply mt-6;
-  }
-}
-
-/* Provide a matching gap at the bottom of scrollable widgets with a CIG at the end */
-.Widget > .StandardForm .CIG:not(+ .ActionBar),
-.Widget > form > .fixedScrollable > .CIG:last-child {
-  @apply pb-[--CIG-padding];
-}
-
-/*
-  Occupy more space when a Widget has a message which isn't followed by any other elements.
-  eg: Open the notification popup with no notifications.
- */
-.Widget .Message:not(:has(+ *)) {
-  @apply my-4 rounded-lg border;
-}
-
-/* Tabs, Messages & ActionBar components inside Widgets should take up the entire width of widget
-   These selectors have been copied down from v4 styles
-*/
-.Widget,
-.Widget > form,
-.Widget > form > .fixedScrollable {
-  > .TabBar,
-  > .Message:has(+ *),
-  > * > .Message:has(+ *) {
-    @apply [grid-column:fullbleed-start_/_fullbleed-end];
-  }
-
-  > .TC,
-  > .CIG,
-  > .SearchInput {
-    @apply px-0 [grid-column:content-start_/_content-end];
-  }
-
-  > .CIG > .TabBar {
-    @apply [--pull-inline:var(--space)];
-  }
-
-  > .ActionBar {
-    @apply border-b-0 px-[--space] [grid-column:fullbleed-start_/_fullbleed-end];
-  }
-}
-
-/* Data Tables inside a widget (Eg: Admin > About page) */
-.Widget > table.DT {
-  @apply table-fixed [grid-column:fullbleed-start_/_fullbleed-end];
-  th,
-  td {
-    @apply overflow-hidden text-ellipsis text-nowrap;
-  }
-}
-
-/* Profile Dropdown popup widget */
-.Widget:has(.ProfileDropdown-items) {
-  --space: theme(spacing.4);
-
-  > .ProfileDropdown-items {
-    @apply [grid-column:fullbleed-start_/_fullbleed-end];
-  }
-
-  > .Widget-title {
-    @apply py-3;
-  }
-}
-
-/* Notifications Widget */
-.Widget.ToolUserNotifications {
-  --space: theme(spacing.4);
-  @apply w-[360px];
-}
-
-/* Content edit right rail collapsible widget styles */
-.ContentEdit-right :where(.Widget) {
-  --space: theme(spacing.4);
-
-  .Widget-title {
-    @apply text-sm;
-  }
-
-  &.is-collapsible {
-    .Widget-collapse {
-      @apply size-7 p-1;
-    }
-
-    &:not(.is-collapsed) .Widget-title {
-      @apply bg-primary-50 hover:bg-gray-100;
-    }
-
-    &:not(.is-collapsed):not(.is-error) .Widget-title {
-      @apply text-primary-800 hover:text-gray-900;
-    }
-  }
-}
-
-/* Looking Glass Widget styles */
-.Widget[name='lookingGlass'] {
-  .Widget-title {
-    @apply flex items-center;
-  }
-
-  img {
-    @apply my-6;
-  }
-
-  ul:has(.LookingGlass-actions) {
-    @apply m-0 px-[--space] [grid-column:fullbleed-start_/_fullbleed-end];
-  }
-}
-
-/* Module Picker Widget styles */
-.Widget[name='AddEmbeddedContent'] {
-  > .StyleEmbeddedContent {
-    @apply col-span-full;
-  }
-}
-
-/* Date Widget */
-.Widget > .DateStringCalendar {
-  @apply contents;
-
-  > * {
-    @apply [grid-column:content-start_/_content-end];
-  }
-
-  > .DateStringCalendarDate,
-  > .DateStringCalendarForm {
-    @apply px-4 [grid-column:fullbleed-start_/_fullbleed-end];
-  }
-}
-
-/* Diff Widget */
-.Widget[name='diff'] > * {
-  @apply col-span-full;
-}
-
-/* Conversations Widget */
-.Widget:has(.Conversation-posts) {
-  .Widget-title {
-    @apply px-4;
-  }
-}
-
-/* When a Widget is a child of a Widget it should go full width */
-.Widget > .Widget {
-  @apply col-span-full;
-}
-
-/* Conversation Edit Popup */
-.Widget[name='conversation-edit-post'] {
-  &:has(.Widget-controls) {
-    .Widget-title {
-      @apply pe-16;
-    }
-  }
-
-  .Widget-controls {
-    @apply z-10;
-  }
-
-  .Widget-actions {
-    @apply fixed left-[calc(var(--Tether-rl)+var(--Tether-rw)-(var(--Icon-size)*2)-theme(spacing.7)-theme(spacing.3))];
-  }
-}
-
-.Admin-nav :where(.Widget),
-.ContentEdit-right :where(.Widget) {
-  --space: theme(spacing.4);
-
-  > .Message:has(+ *) {
-    @apply rounded-lg border [grid-column:content-start_/_content-end];
-  }
-}
-
-.Admin-main.is-miller :where(.Widget > .BulletedList) {
-  @apply [grid-column:fullbleed-start_/_fullbleed-end];
-
-  > li {
-    @apply px-[--space];
-  }
-}
-
-.Popup :where(.Widget:has(> .Admin)) {
-  --space: 0rem;
-}
-
-/* Search Widget styles */
-btu-widget.SearchWidget-moreFilters {
-  --space: 0rem;
-}
-
-btu-widget.SearchWidget-recent,
-btu-widget.SearchWidget-saved,
-btu-widget.SearchWidget-create {
-  --space: 1rem;
-}
-
-/* Content Reporting Widget */
-.ContentReportingWidget .Widget {
-  @apply [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_auto_[content-end]_var(--space)_[fullbleed-end]];
-
-  .ContentReporting-runLink {
-    @apply [grid-column:3] [grid-row:1];
-  }
-
-  .Widget-controls {
-    @apply ps-2;
-  }
-}
-
-/* Advanced Query Field Popup widget */
-.Widget.SearchWidgetAdvanced {
-  @apply grid-cols-[[fullbleed-start]_var(--space)_[content-start]_auto_1fr_[content-end]_var(--space)_[fullbleed-end]];
-
-  > form {
-    > .ComboInput {
-      @apply col-span-1 col-start-[content-start];
-    }
-
-    > button.Link {
-      @apply col-span-1 col-end-[content-end];
-    }
-  }
-}
-
-/* Search Select/Hide Fields Popup Widget */
-.Widget.SearchFields .SearchFields-tab-container {
-  @apply [grid-column:fullbleed-start/fullbleed-end];
-}
-
-/* ContentTools Popup widget */
-.Widget.ContentTools {
-  --space: 1rem;
-}
-
-/* WIPs & SharedPreviews popups */
-.ToolUserWorksInProgress.Widget,
-.ToolUserSharedPreviews.Widget {
-  --space: 0.5rem;
-}
-
-/* TwoFactor Auth Popup */
-.Widget[name='toolUserTfa'] {
-  .QRCode {
-    @apply text-md;
-  }
-
-  .QRCode img {
-    @apply my-6 aspect-square place-self-center;
-  }
-}
-
-/* Pre-Publish Popup Widget */
-.Widget.PrePublish {
-  --space: 0;
-
-  :is(.fixedScrollable) {
-    @apply max-h-full overflow-y-auto px-6;
-  }
-
-  > .Popup-content {
-    @apply overflow-y-auto;
-  }
-}
-
-.fixedScrollable .CIG-row {
-  @apply after:left-[calc(1px_-_var(--CIG-padding))];
-}
-
-/* ContentEditDrawer Widget (The Shelf) */
-.Widget .ContentEditDrawer-widget {
-  @apply col-span-full;
-}
-
-/* TableSizer Widget */
-.Widget.TableSizer {
-  --space: 0.75rem; /* 0.25rem already added from border-spacing in TableSizerPopup.css */
-
-  @apply bg-gray-50;
-}
-
-/* Translations Widget */
-.Widget[data-internal-name='com.psddev.translation.page.TranslationTab'] > * {
-  @apply col-span-full;
-}
-
-/* Mail Publishing Widget */
-.Page[data-href*='/cms/admin/mail-publishing'] .Page-content > .Widget {
-  @apply h-full [grid-template-rows:auto_1fr_auto];
-
-  > * {
-    @apply col-span-full;
-  }
-}
-
-/* Simple fullscreen widgets (e.g. Slack Verification) */
-.Page-content > .Widget:not(~ .Widget) {
-  @apply h-full content-start;
-
-  &:has(> .Widget-title + .Message + .ActionBar) {
-    @apply grid-rows-[auto_auto_1fr];
-
-    > .Message {
-      @apply col-[content-start/content-end];
-    }
-
-    > .ActionBar {
-      @apply self-end;
-    }
-  }
-}
-
-/* Calendar Event summary widget */
-.CalendarEventSummary.Widget > .ContentSummary-content {
-  @apply col-span-full;
-}
-
-.Popup[name='CalendarEventSummaryOverlay'] .Widget-title {
-  @apply justify-between;
-}
-
-/* Calendar Color Manage widget */
-.Widget.CalendarColorManagerPage {
-  @apply h-full grid-rows-[1fr_max-content];
-
-  > form:has(.TC) {
-    @apply row-span-full [grid:subgrid/subgrid];
-
-    > .objectInputs.TC {
-      @apply col-span-full content-baseline border-b !px-[--space] pb-6;
-    }
-
-    > button {
-      @apply btu-button btu-button-primary my-4 ms-auto !px-[--space];
-    }
-  }
-}
-
-/* Admin pages with full screen search view */
-.Widget.SearchPage {
-  @apply SearchWidget;
-
-  > .Widget-title {
-    @apply ![grid-area:title];
-  }
-
-  > .SearchWidget-history {
-    @apply [grid-area:history];
-  }
-
-  .SearchResult-fullscreen {
-    @apply hidden;
-  }
-}
-
-/* When the upload widget is processing the upload, prevent user interactions. */
-.Widget[name='uploadFiles'] {
-  &.loading {
-    @apply !overflow-clip;
-    form {
-      @apply pointer-events-none select-none blur-[1px] grayscale-[50%];
-      button[name='action-upload'] {
-        @apply btu-button-disabled;
-      }
-    }
-  }
-}
-
-/* GraphQL Widget */
-.Widget.GraphQL-widget > * {
-  @apply col-span-full;
-}
-
-/* Site Switcher Widget */
-.frame[name='siteSwitch'] .Widget > * {
-  @apply col-span-full;
-}
-
-.Widget[name='conversation-reply'] {
-  @apply grid-rows-[auto_1fr];
-}
-
-/* External Import Widget */
-.ExternalItemImport .Widget > form {
-  > h1 {
-    @apply hidden;
-
-    + .Message ~ .ActionBar {
-      @apply mt-0 border-t-0;
-    }
-  }
-}
-
-/* View scheduled events popup */
-.Widget.ScheduleEventsList {
-  table {
-    @apply col-span-full;
-  }
-
-  /* make pagination here match dashboard widget pagination */
-  .pagination {
-    @apply order-1 my-[22px] ms-auto;
-
-    .ComboInput:not([aria-expanded='true'], :focus-visible) {
-      @apply border-transparent;
-    }
-  }
-}
-
-/* Truncate the dialog heading for the schedule events popup.
-   Override display:flex to block so text-overflow:ellipsis renders. */
-dialog:modal
-  .Popup-content:has(.ScheduleEventsList)
-  > :where(.Widget-title, h1) {
-  @apply block truncate;
-}
-
-.Widget-filters,
-.Widget-filter {
-  @apply flex items-center;
-}
-
-.Widget-filters {
-  @apply border-b border-b-gray-200 bg-gray-50 px-[--space] py-3 ![grid-column:fullbleed-start/fullbleed-end];
-}
-
-.Widget-filter {
-  @apply z-0 flex-row-reverse;
-}
-
-.Widget-filterLabel {
-  @apply text-sm font-medium;
-}
-
-/* Developer Bulk Operations Page */
-.Widget.DeveloperBulkOperations {
-  > ul li {
-    @apply py-1;
-  }
-
-  > ul a {
-    @apply text-sm;
-  }
-}