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

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

@@ -1,444 +0,0 @@
-html::view-transition-group(dashboard-widget) {
-  @apply [animation-duration:500ms] [animation-timing-function:cubic-bezier(0.9,0,0.1,1)];
-}
-
-html::view-transition-old(dashboard-widget) {
-  @apply opacity-0;
-}
-
-html::view-transition-new(dashboard-widget) {
-  @apply animate-widget-maximize-fade-in;
-}
-
-.DashboardWidget {
-  --margin: theme(padding.4);
-
-  @media (min-width: theme(screens.sm)) {
-    --margin: theme(padding.6);
-  }
-
-  @apply relative grid items-center overflow-clip rounded-2xl border border-gray-300 bg-white [grid-template-columns:[fullbleed-start]_var(--margin)_[main-start]_1fr_[inner-buffer]_auto_[main-end]_var(--margin)_[fullbleed-end]] before:h-[1px] before:bg-gray-200 before:[grid-column:fullbleed-start/fullbleed-end];
-
-  th.hasComboInput {
-    @apply flex;
-
-    .ComboInput {
-      @apply ms-2 grow;
-    }
-  }
-
-  .LinkList-wrapper,
-  .DT-wrapper {
-    @apply h-full overflow-y-auto border-t border-t-gray-200 [grid-column:fullbleed-start/fullbleed-end] last:mb-4;
-  }
-
-  > table {
-    @apply col-span-full border-t border-t-gray-200 last:mb-4;
-  }
-
-  > .table {
-    @apply contents;
-  }
-
-  .DT-wrapper table tbody tr th:first-child {
-    @apply bg-transparent text-sm;
-  }
-
-  .PR {
-    @apply contents;
-
-    > form {
-      @apply grid [grid-column:fullbleed-start/fullbleed-end] [grid-template-columns:subgrid] [grid-template-rows:1fr_auto_auto];
-    }
-  }
-
-  .DashboardWidget-pagination {
-    @apply ms-auto [grid-column:main-start/main-end] empty:hidden;
-  }
-
-  .ActionBar {
-    @apply border-b-0 [grid-column:fullbleed-start/fullbleed-end];
-  }
-
-  .Message {
-    @apply rounded-lg border [grid-column:main-start/main-end] last:mb-[--margin] [&:has(+_.DashboardWidget-controls)]:mb-[--margin];
-  }
-
-  .DashboardWidget-title + .Message,
-  .DashboardWidget-maximize + .Message {
-    @apply mt-[var(--margin,theme(spacing.6))];
-  }
-
-  ul.LinkTable {
-    @apply [grid-column:fullbleed-start/fullbleed-end];
-
-    > li {
-      @apply rounded-none border-b border-gray-200 last:border-b-0;
-
-      &:has(> a:focus-visible) {
-        @apply ring-inset;
-      }
-    }
-
-    > li > a {
-      @apply my-4 px-[--margin];
-    }
-
-    &:last-child > li:last-child:has(> a:focus-visible) {
-      @apply rounded-b-2xl;
-    }
-  }
-
-  .LinkList-wrapper,
-  .LinkTable.is-scrollable {
-    @apply btu-scrollshadow-25 pb-6 before:absolute before:row-start-2 before:content-[--whitespace] after:absolute after:row-start-2 after:content-[--whitespace];
-
-    &:has(
-        + :where(
-            .DashboardWidget-pagination:not(:empty),
-            + .Actionbar:not(:empty)
-          )
-      ) {
-      @apply pb-0; /* remove the bottom padding since the pagination or action bar will handle it */
-    }
-  }
-
-  > form {
-    @apply my-4;
-  }
-
-  > .frame {
-    @apply grid grid-cols-subgrid [grid-column:fullbleed-start/fullbleed-end];
-  }
-
-  > * {
-    @apply [grid-column:main-start/main-end];
-  }
-}
-
-.DashboardRow-cell.is-maximized {
-  @apply grid;
-}
-
-/* Add a backdrop behind the maximized widget */
-.transition-backdrop {
-  @apply before:absolute before:inset-0 before:z-20 before:backdrop-blur before:transition-all before:duration-300 before:ease-out before:[background-color:theme(backdropColor.dialog)];
-}
-
-@starting-style {
-  .transition-backdrop {
-    @apply before:opacity-0 before:[backdrop-filter:blur(0px)];
-  }
-}
-
-.DashboardRow-cell.is-maximized .DashboardWidget {
-  @apply max-h-[calc(100dvh_-_theme(spacing.8))] w-[calc(100vw_-_theme(spacing.8))] place-self-center overflow-auto shadow-lg;
-}
-
-button.DashboardWidget-maximize {
-  @apply btu-button btu-button-gray row-start-1 justify-self-end bg-white btu-button-container-none [grid-column:inner-buffer/main-end] before:btu-icon before:btu-icon-maximize-2;
-}
-
-/* Toggle the icon button to show minimized state */
-.DashboardRow-cell.is-maximized button.DashboardWidget-maximize {
-  @apply btu-button-pressed before:btu-icon-minimize-2;
-}
-
-.DashboardRow-cell.transition-dashboard-widget {
-  @apply [view-transition-name:dashboard-widget];
-}
-
-/* "Quick Start" Widget styles */
-.CreateNewWidget {
-  @apply overflow-visible rounded-none border-none bg-transparent p-0 before:content-none;
-
-  /* Configuration UI of Quick Start */
-  &:has(> form) {
-    @apply m-[--margin] overflow-clip rounded-2xl border border-solid border-gray-300 bg-white;
-  }
-
-  .DashboardWidget-controls a {
-    @apply before:btu-icon-settings;
-  }
-
-  .CIG-row {
-    @apply block;
-  }
-
-  .CIG-title {
-    @apply hidden;
-  }
-
-  .LinkCarousel {
-    @apply m-0 mb-1 pb-5;
-  }
-
-  .LinkCarousel-item {
-    @apply aspect-[16_/_4] overflow-visible;
-  }
-
-  form:has(.CIG) {
-    @apply m-0 grid grid-cols-subgrid [grid-column:fullbleed-start/fullbleed-end];
-
-    .CIG {
-      @apply px-0 [grid-column:main-start/main-end];
-    }
-  }
-}
-
-.DashboardWidget-title {
-  @apply btu-heading-5 row-start-1 flex w-auto items-center justify-between whitespace-normal text-balance py-4 text-gray-900 [grid-column:main-start/inner-buffer] [&:has(a)]:py-2.5;
-
-  /* Slightly larger padding on wider screens; reduce when title contains a control button */
-  @media (min-width: theme(screens.sm)) {
-    @apply py-5 [&:has(a)]:py-3.5;
-  }
-
-  a {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon;
-  }
-}
-
-.DashboardWidget-controls {
-  @apply row-start-1 flex w-auto items-center gap-2 [grid-column:inner-buffer/main-end];
-
-  a {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
-  }
-
-  > form button {
-    @apply btu-button btu-button-fill-none btu-button-gray btu-button-sm btu-button-container-none before:btu-icon before:btu-icon-file-input;
-  }
-
-  &:has(.DashboardWidget-maximize) form button {
-    @apply me-3;
-  }
-
-  > form {
-    @apply contents;
-  }
-
-  .icon-action-create {
-    @apply before:btu-icon-plus;
-  }
-
-  .icon-action-search {
-    @apply before:btu-icon-search;
-  }
-}
-
-.DashboardWidget-filters {
-  --Input-focusBackground: var(--color-gray2);
-
-  @apply relative flex w-full items-center gap-2 overflow-auto overscroll-x-contain px-[--margin] py-4 transition-opacity [grid-column:fullbleed-start/fullbleed-end];
-
-  form {
-    @apply flex w-full min-w-max items-center justify-end gap-2 transition-opacity;
-  }
-}
-
-/* Guard against the one-frame flash when Bridge.js renames .widget-filters →
-   .DashboardWidget-filters in a requestAnimationFrame callback after AJAX injection. */
-@starting-style {
-  .DashboardWidget-filters,
-  .DashboardWidget-filters form {
-    @apply opacity-0;
-  }
-}
-
-.SemRushDashboardWidget .pagination {
-  @apply mb-4 mt-0 [grid-column:inner-buffer/main-end];
-}
-
-/* Hide empty filters */
-.DashboardWidget-filters:not(:has(* + input)) {
-  @apply hidden;
-
-  /* Hidden filters won't include the spacing which separates the Message,
-  so we need to add it. */
-  ~ .Message {
-    @apply mt-4;
-  }
-
-  /* Hidden filters cause the Widget title border to stack on the LinkList
-  border which visually doubles its height. So, we remove the border-top. */
-  + .LinkList-wrapper {
-    @apply border-t-0;
-  }
-}
-
-.DashboardPage-heading {
-  @apply absolute [font-size:0];
-}
-
-/* Calendar Dashboard Widget styles*/
-/** There are three calendar dashboard widgets currently with varying design & underlying DOM structure
-  * Scheduled Events widget (legacy)
-  * Editorial Calendar widget - old editorial calendar (legacy)
-  * Calendar widget - new editorial calendar
-**/
-/* Filters & pagination styling */
-.DashboardWidget.widget-scheduledEvents {
-  @apply @container/calendar;
-
-  .scheduledEvents-date {
-    @apply col-span-full grid py-4 @calendar-lg/calendar:grid-flow-col @calendar-lg/calendar:py-2;
-  }
-
-  .scheduledEvents-dateRange {
-    @apply btu-heading-5 text-black;
-  }
-
-  .DashboardWidget-filters {
-    @apply col-span-full row-start-2 ms-0 flex-col items-start justify-end px-[--margin] pb-0 pt-2 @calendar-sm/calendar:flex-row @calendar-sm/calendar:items-center @calendar-lg/calendar:col-start-1 @calendar-lg/calendar:col-end-2 @calendar-lg/calendar:row-start-1 @calendar-lg/calendar:mt-0 @calendar-lg/calendar:justify-start @calendar-lg/calendar:pt-0;
-  }
-
-  /* Scheduled events widget specific styles */
-  .scheduledEvents-date:has(
-      .DashboardWidget-filters .scheduledEvents-dateRange
-    ) {
-    @apply grid-cols-[1fr_auto];
-
-    .DashboardWidget-pagination {
-      @apply my-0 me-[--margin] ms-2 self-end;
-    }
-
-    .DashboardWidget-filters {
-      @apply col-auto row-start-1 pe-0 pt-0;
-    }
-
-    .DashboardWidget-filters > .scheduledEvents-dateRange {
-      @apply -order-1 grow;
-    }
-  }
-
-  /* Pagination styles for new and old editorial calendar dashboard widgets */
-  .DashboardWidget-pagination.scheduledEvents-datePagination:has(
-      li > .scheduledEvents-dateRange,
-      li > form
-    ) {
-    @apply col-span-full my-0 ms-0 flex-wrap items-center justify-start border-none px-[--margin] @calendar-sm/calendar:flex-nowrap @calendar-sm/calendar:justify-end @calendar-lg/calendar:col-start-2 @calendar-lg/calendar:col-end-3 @calendar-lg/calendar:pb-0;
-
-    .ComboInput {
-      @apply border-gray-300;
-    }
-
-    li:has(.ComboInput) {
-      @apply me-2;
-    }
-
-    li:has(.scheduledEvents-dateRange) {
-      @apply -order-1 mb-2 w-full grow border-none p-0 @calendar-sm/calendar:mb-0 @calendar-sm/calendar:w-auto @calendar-lg/calendar:absolute @calendar-lg/calendar:left-1/2 @calendar-lg/calendar:-translate-x-1/2;
-    }
-
-    li.previous {
-      @apply rounded-s-lg border-y border-gray-300;
-    }
-
-    li.currentDate {
-      @apply border-y border-gray-300;
-    }
-
-    li.next {
-      @apply rounded-e-lg border-y border-e border-gray-300;
-    }
-  }
-}
-
-/* Calendar view & events styles for scheduled events & old editorial calendar widgets */
-.DashboardWidget.widget-scheduledEvents:not(.Calendar) {
-  > .Month {
-    @apply mb-6;
-  }
-
-  > .Week {
-    @apply mb-6 overflow-clip rounded-lg border;
-  }
-
-  /* Calendar events styles */
-  .LinkTable {
-    tr {
-      @apply flex flex-wrap items-center p-4 hover:bg-transparent;
-    }
-    td {
-      @apply p-0;
-    }
-
-    td:not(.LinkTable-main, .LinkTable-label) {
-      @apply text-xs text-gray-500;
-    }
-
-    td.LinkTable-main {
-      @apply w-full max-w-none gap-2 text-sm font-medium text-gray-700;
-    }
-
-    td.LinkTable-main .Label {
-      @apply me-1;
-    }
-
-    tbody > tr:last-child {
-      @apply border-b-0;
-    }
-
-    td:not(.LinkTable-main, .LinkTable-label, :last-child) {
-      @apply after:btu-icon after:btu-icon-dot;
-    }
-
-    .LinkTable-main > a[target='scheduleEventsList'] {
-      @apply text-xs font-semibold;
-    }
-
-    tr:has(a[target='scheduleEventsList']) {
-      @apply border-t border-t-gray-200 py-2;
-    }
-  }
-}
-
-/* New Editorial Calendar Widget specific styles */
-.DashboardWidget.Calendar > .Month,
-.DashboardWidget.Calendar > .Week {
-  @apply col-span-full rounded-none border-none;
-}
-
-/*
-  Content Reporting Widget specific styles
-  TODO: possibly remove these styles when ticket is completed: https://perfectsense.atlassian.net/browse/BSP-17271
-*/
-.DashboardWidget.Widget-reports {
-  > .Message {
-    @apply row-[4/4] mb-[--margin] mt-0;
-  }
-
-  > .LinkTable {
-    @apply row-[4/4] pb-[--margin];
-  }
-}
-
-/* Report Widget (Values) specific styles */
-.DashboardWidget:has(> .NB) {
-  @apply @container/NB;
-}
-.DashboardWidget .NB {
-  @apply grid grid-cols-[repeat(auto-fit,minmax(var(--cell-min-w),1fr))] gap-4 overflow-clip [--cell-min-w:120px] @lg:[--cell-min-w:150px] @2xl:[--cell-min-w:180px] @4xl:[--cell-min-w:200px];
-
-  &:last-child {
-    @apply pb-[--margin];
-  }
-
-  > .NB-item {
-    @apply flex max-w-full flex-col gap-1 overflow-clip rounded-lg border border-gray-300 p-3 align-baseline;
-  }
-
-  .NB-number {
-    @apply btu-heading-3 truncate text-gray-900;
-  }
-
-  .NB-label {
-    @apply truncate text-xs text-gray-500;
-  }
-}
-.DashboardWidget
-  > :where(.DashboardWidget-title, .DashboardWidget-controls)
-  + .NB {
-  @apply pt-[--margin];
-}

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

@@ -1,78 +0,0 @@
-.DateStringCalendar {
-  .Month {
-    @apply gap-1 border-none bg-transparent;
-  }
-
-  .DateStringCalendarForm {
-    @apply flex flex-nowrap items-center justify-between py-4 pb-3;
-  }
-
-  .DateStringCalendarForm-previous,
-  .DateStringCalendarForm-next {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-md before:btu-icon;
-  }
-
-  .DateStringCalendarForm-previous {
-    @apply -order-1 before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
-  }
-
-  .DateStringCalendarForm-next {
-    @apply before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left;
-  }
-
-  .DateStringCalendarForm-month + .ComboInput {
-    @apply w-auto;
-  }
-
-  .DateStringCalendarForm-year {
-    @apply w-[4.375rem] px-2 text-sm;
-  }
-
-  .DateStringCalendarDate {
-    @apply flex justify-center pb-4;
-
-    .Month-day {
-      @apply size-9 rounded-full p-4 text-sm;
-    }
-
-    .Month-dowLabel {
-      @apply size-9 bg-inherit px-3;
-    }
-  }
-
-  .DateStringCalendarTime {
-    @apply relative py-4 before:absolute before:-left-[var(--space,_0px)] before:-right-[var(--space,_0px)] before:top-0 before:h-[1px] before:bg-gray-200;
-
-    .DateStringCalendarTime-custom {
-      @apply grid grid-cols-3 gap-2;
-    }
-  }
-
-  .DateStringCalendarAction {
-    @apply relative flex items-center gap-3 py-4 before:absolute before:-left-[var(--space,_0px)] before:-right-[var(--space,_0px)] before:top-0 before:h-[1px] before:bg-gray-200;
-
-    &-set {
-      @apply btu-button btu-button-primary;
-    }
-
-    &-now {
-      @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray;
-    }
-
-    &-clear {
-      @apply btu-button btu-button-gray ms-auto;
-    }
-  }
-
-  .is-hidden {
-    @apply hidden;
-  }
-}
-
-.Popup:has(.DateStringCalendar) .Popup-close {
-  @apply hidden;
-}
-
-.DateStringCalendarEmbedded-widget {
-  @apply Widget w-max rounded-lg border;
-}

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

@@ -1,11 +0,0 @@
-.DateTimeInput {
-  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray flex-row-reverse gap-4 px-4 font-normal before:btu-icon before:btu-icon-calendar empty:btu-button-text-hidden;
-
-  &.is-empty {
-    @apply text-gray-500 before:text-gray-700;
-  }
-
-  &:not(.is-empty) {
-    @apply min-w-max;
-  }
-}