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

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

@@ -1,523 +0,0 @@
-/*
-  SearchResult handles the search results themselves, along with controls
-  such as pagination, sorting, and image size controls.
-*/
-.SearchResult {
-  --search-controls-h: 68px;
-  --pagination-h: 80px;
-  --actions-button-w: 0px;
-
-  @apply relative grid h-full w-full grid-cols-[auto_auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_12px] grid-rows-[var(--search-controls-h)_minmax(0px,1fr)_var(--pagination-h)] items-center overflow-hidden bg-gray-50 [grid-area:results] [grid-template-areas:'toggle_sorts_fields_watching_._size-toggle_views_actions_.''results_results_results_results_results_results_results_results_results''limit_limit_limit_limit_pagination_pagination_pagination_pagination_pagination'];
-
-  &:has(.SearchResult-pagination) {
-    @apply after:absolute after:z-0 after:col-span-full after:row-[3/4] after:h-full after:w-full after:bg-white;
-  }
-
-  &:has(.SearchResult-actions-toggle) {
-    --actions-button-w: calc(36px + (2 * 4px));
-  }
-
-  /*
-    Keeps the controls buttons from jumping around while the ComboInput
-    renders.
-  */
-  &:has(.SearchResult-sorts) {
-    --controls-opacity: 0;
-
-    &:has(.SearchResult-sorts .ComboInput-selected) {
-      --controls-opacity: 1;
-    }
-  }
-
-  .SearchWidget-controlsToggle {
-    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray me-1 ms-4 bg-white opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:toggle] before:btu-icon before:btu-icon-list-filter hover:bg-gray-200 hover:outline-gray-500;
-
-    &[aria-expanded='true'] {
-      @apply btu-button-pressed bg-primary-50 outline-primary-600 hover:bg-gray-200 hover:text-gray-700 hover:outline-gray-500;
-    }
-  }
-}
-
-/* Global search has a few extra buttons to account for */
-.SearchWidget.is-global {
-  .SearchResult {
-    --fullscreen-button-w: calc(36px + 4px + 12px);
-
-    @apply grid-cols-[auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_var(--fullscreen-button-w)_var(--popup-close-w)] [grid-template-areas:'toggle_sorts_fields_._size-toggle_views_actions_fullscreen_close''results_results_results_results_results_results_results_results_results''limit_limit_limit_pagination_pagination_pagination_pagination_pagination_pagination'];
-  }
-}
-
-.SearchResult-items {
-  @apply contents;
-}
-
-/* Ellipsis menu at top right of search widget */
-.SearchResult-actions {
-  .SearchResult-selection {
-    @apply relative mb-1 inline-flex w-full items-center justify-between gap-2 px-4 pb-4 pt-2 text-sm font-semibold text-gray-900 after:absolute after:-left-4 after:-right-4 after:top-[60px] after:h-px after:bg-gray-200;
-  }
-
-  & > .SearchResult-selectionCount {
-    @apply relative mb-1 px-4 pb-6 pt-[14px] text-sm font-semibold text-gray-900 after:absolute after:left-0 after:right-0 after:top-[60px] after:h-px after:bg-gray-200;
-  }
-
-  & > .SearchResult-action {
-    @apply absolute right-4 top-4 z-10;
-  }
-}
-
-.SearchResult-selectionReset {
-  @apply btu-button btu-button-fill-none btu-button-error;
-}
-
-.SearchResult-actions-body {
-  .SearchResult-action-link {
-    @apply Dropdown-item;
-
-    &[href*='/searchAdvancedFull'] {
-      @apply hidden;
-    }
-  }
-
-  > h2 {
-    @apply ComboInput-heading;
-  }
-}
-
-.SearchResult-actions-toggle + .frame {
-  @apply Dropdown;
-}
-
-.SearchResult-actions-toggle[aria-expanded='true'] + .frame {
-  @apply Dropdown-is-open;
-}
-
-.SearchResult-view {
-  @apply contents;
-
-  > .Message {
-    @apply mx-4 self-start [grid-area:results];
-  }
-}
-
-.SearchResult-views {
-  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:views];
-}
-
-.SearchResult-views > ul {
-  @apply inline-flex items-stretch rounded-lg border border-gray-300 bg-white;
-
-  > li {
-    @apply [&:not(:first-child)]:border-l [&:not(:first-child)]:border-solid [&:not(:first-child)]:border-l-gray-300 [&:not(:first-child)_>_a]:rounded-l-none [&:not(:last-child)_>_a]:rounded-r-none;
-
-    > a {
-      @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray bg-white before:btu-icon before:btu-icon-circle-dashed hover:bg-gray-200 focus:z-[1];
-
-      &[data-label='list'] {
-        @apply before:btu-icon-list;
-      }
-
-      &[data-label='mixed'] {
-        @apply before:btu-icon-layout-list;
-      }
-
-      &[data-label='grid'] {
-        @apply before:btu-icon-layout-grid;
-      }
-
-      &[data-label='board'] {
-        @apply before:btu-icon-kanban;
-      }
-
-      &[data-label='taxonomy'],
-      &[data-label='hierarchy'] {
-        @apply before:btu-icon-network;
-      }
-    }
-  }
-
-  > li.selected > a {
-    @apply btu-button-pressed bg-primary-50;
-  }
-}
-
-.SearchResult-pagination {
-  @apply z-[1] me-6 ms-4 justify-self-end [grid-area:pagination];
-
-  /* Hide page result count on smaller viewports */
-  ul.pagination {
-    /* Prevents border from appearing around empty element
-      Cases:
-        1. results fit on single page on a small viewport
-        2. 0 results on any viewport */
-    @apply hidden [&:has(.next,.previous)]:inline-flex;
-
-    li {
-      @apply first:hidden first:truncate [&:nth-child(2)]:border-s-0;
-    }
-
-    /* Hides extraneous button border when only next and last buttons are displayed */
-    li.next {
-      @apply border-s-0;
-    }
-
-    li.previous ~ li.next {
-      @apply border-s;
-    }
-  }
-}
-
-/* Buttons to select specific result page. Hidden on small/medium viewports. */
-.SearchResult-pages {
-  @apply hidden xl:contents;
-
-  > ol {
-    @apply h-full xl:flex [&_>li>a]:flex [&_>li>a]:h-full [&_>li>a]:items-center [&_>li>a]:justify-center;
-  }
-
-  /* Normally the surrounding pagination controls, like previous and next, create nice round corners on either side.
-    But when the controls aren't needed, at the ends of the list, the rounded corners need to
-    be applied to the container of the page buttons. */
-  &:last-child:has(> ol > li a.is-active:last-child) > ol {
-    @apply rounded-br-lg rounded-tr-lg [clip-path:border-box];
-
-    /* Prevents extraneous border when on final results page */
-    li:last-child > a {
-      @apply border-e-0;
-    }
-  }
-
-  /* Active page buttons get left borders. Surrounding buttons usually provide the other borders. */
-  li a.is-active {
-    @apply border border-b-0 border-t-0 border-solid border-s-gray-300 bg-gray-100;
-  }
-
-  /* Applies border between previous and page 1 buttons */
-  li:first-child:has(a:not(.is-active)) {
-    @apply border-s border-s-gray-300;
-  }
-
-  /* When an active page button is somewhere at the start, or middle of the pagination,
-    it only needs a right border */
-  li:not(:last-child) a.is-active {
-    @apply border-e-gray-300;
-  }
-}
-
-.SearchResult-page {
-  @apply btu-button btu-button-fill-none [--button-border-radius:0];
-}
-
-.SearchResult-sorts {
-  @apply mx-1 min-w-[100px] max-w-max opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:sorts];
-}
-
-/* Special button style for collapsed sorts */
-.__sorts-collapsed {
-  @apply w-[36px] min-w-[unset];
-
-  .ComboInput {
-    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray border-none bg-white hover:bg-gray-200 hover:outline-gray-500;
-
-    .ComboInput-icon {
-      @apply before:btu-icon-arrow-down-a-z;
-    }
-
-    &[aria-expanded='true'] {
-      .ComboInput-icon {
-        @apply before:btu-icon-x;
-      }
-    }
-  }
-}
-
-/* "Select Fields" button at top left of SearchResult */
-.SearchResult-fields {
-  /* Disappears on small viewports (per Product discussion) - see responsive styles below */
-  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:fields];
-
-  a {
-    @apply btu-button btu-button-gray text-nowrap text-sm font-semibold text-gray-700 no-underline;
-  }
-}
-
-.SearchResult-limit {
-  /* Needs to stretch a little farther than grid area 'limit' to avoid awkward stretching */
-  @apply z-[1] me-4 ms-6 w-fit [grid-area:limit] [grid-column:1/5];
-}
-
-/* Contains actual search result items */
-.SearchResult-list {
-  @apply __table-wrapper relative h-full w-full border-b border-b-gray-200 [grid-area:results] empty:hidden;
-
-  &.is-processing {
-    @apply pointer-events-none opacity-30;
-  }
-
-  tbody > tr {
-    @apply last:border-b-0;
-  }
-
-  > .Message {
-    @apply mx-4;
-  }
-}
-
-/* Appears when the user selects "Print Search" from the more actions menu */
-.searchResult-print {
-  > h1 {
-    @apply p-4 text-sm font-medium text-gray-900;
-  }
-}
-
-.SearchResult-images figure {
-  @apply relative h-[238px] w-auto min-w-[200px] overflow-clip rounded-lg border border-gray-300 bg-gray-50 shadow-sm;
-
-  &:has(input[type='checkbox']:checked) {
-    @apply border-primary-500;
-  }
-
-  > input[type='checkbox'] {
-    @apply absolute right-4 top-4 z-10 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:block before:rounded-[1px] before:bg-white after:inset-1.5 checked:border-primary-50 checked:bg-primary-800 checked:before:hidden hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;
-
-    ~ a {
-      @apply absolute inset-0 flex items-end justify-between gap-2 bg-transparent;
-    }
-  }
-
-  a {
-    @apply no-underline;
-
-    &:hover figcaption {
-      @apply bg-gray-100;
-    }
-  }
-
-  /* Images do not occupy full height of figure to make room for caption */
-  img {
-    @apply h-[168px] w-full object-contain;
-  }
-
-  &.is-missing {
-    @apply after:btu-icon after:btu-icon-image-off before:absolute before:left-0 before:top-0 before:flex before:h-[168px] before:w-full before:items-center before:justify-center before:bg-gray-50 after:absolute after:left-1/2 after:top-[84px] after:-translate-x-1/2 after:-translate-y-1/2 after:text-gray-400 after:btu-icon-xl;
-
-    > img {
-      @apply hidden;
-    }
-  }
-
-  figcaption {
-    @apply flex h-[71px] w-full flex-col items-start justify-center overflow-hidden border-t border-t-gray-200 bg-white py-4 pe-10 ps-4 text-sm;
-
-    .contentTitle--v5 {
-      @apply w-full truncate text-sm font-medium text-gray-900;
-    }
-
-    .contentType--v5 {
-      @apply w-full truncate text-xs text-gray-500;
-    }
-
-    .contentStatus--v5 {
-      @apply absolute left-4 top-4 shadow-sm;
-    }
-  }
-
-  .ContentSummary-info {
-    @apply btu-button-gray btu-button-xs absolute bottom-5 right-2 m-0 shrink-0 touch-device:btu-button-sm;
-  }
-}
-
-/* Image height controls. Hidden on small viewports. Images instead default to 12dvh + 50px */
-.SearchResult-imageHeightContainer {
-  @apply relative opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:size-toggle];
-}
-
-.SearchResult-imageHeightToggle {
-  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray mx-1 shrink-0 bg-white before:btu-icon before:btu-icon-zoom-in hover:bg-gray-200 hover:outline-gray-500;
-
-  &[aria-expanded='true'] {
-    @apply btu-button-pressed bg-primary-50 outline-primary-600 before:btu-icon-x;
-  }
-}
-
-.SearchResult-imageHeightInput {
-  @apply hidden;
-
-  &.is-open {
-    @apply absolute -top-px right-12 mb-4 inline-flex w-[240px] items-center justify-center gap-2 justify-self-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-700 before:btu-icon before:btu-icon-minus after:btu-icon after:btu-icon-plus;
-  }
-
-  > input[type] {
-    @apply w-full;
-  }
-}
-
-/* "Watching?" checkbox appears on some Search Widgets */
-.SearchResult-query {
-  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:watching];
-}
-
-/* Allows image height controls */
-.SearchResult-images {
-  &[data-height] {
-    --image-height-adjusted: calc(var(--image-height) * 0.25);
-    --figure-height: calc(var(--image-height-adjusted) + 125px);
-
-    figure {
-      @apply @md/searchResult:h-[var(--figure-height)];
-
-      img {
-        @apply @md/searchResult:h-[calc(var(--image-height-adjusted)+55px)];
-      }
-
-      &.is-missing {
-        @apply @md/searchResult:before:h-[calc(var(--image-height-adjusted)+55px)] @md/searchResult:after:top-[calc((var(--image-height-adjusted)+55px)/2)];
-      }
-    }
-  }
-}
-
-.SearchResult-list,
-.SearchResult-mixed,
-.SearchWidget-result {
-  > .LinkList-wrapper {
-    @apply mx-4 mb-4 rounded-lg shadow-md;
-  }
-
-  > .LinkList-wrapper,
-  > .SearchResult-mixed .SearchResult-images {
-    @apply btu-scrollshadow-50 before:absolute before:left-4 before:content-[--whitespace] after:absolute after:right-4 after:content-[--whitespace];
-  }
-}
-
-/* Grid view -> available on Images or Videos content type, among others */
-.SearchResult-list {
-  > .SearchResult-images {
-    --min-figure-width: max(200px, calc(var(--figure-height) * 248 / 238));
-    @apply grid gap-4 px-4 pb-4 [grid-template-columns:1fr_1fr] @md/searchResult:grid-cols-[repeat(auto-fill,minmax(var(--min-figure-width),1fr))];
-
-    figure {
-      @apply w-full max-md:min-w-0;
-    }
-  }
-}
-
-.SearchResult-mixed {
-  @apply relative grid w-full overflow-x-auto [grid-area:results];
-
-  > .LinkList-wrapper {
-    @apply before:row-[2/2] after:row-[2/2];
-  }
-
-  /* Row of images that appear at top of mixed view */
-  > .SearchResult-images {
-    /* Differentiates padding & margin to keep drop shadow visible */
-    @apply mx-4 mb-4 flex gap-4 pb-2 before:row-[1/1] after:row-[1/1];
-
-    figure {
-      @apply aspect-[248/238] w-fit shrink-0;
-    }
-  }
-}
-
-.SearchResult-actions-wrapper {
-  @apply contents;
-
-  .SearchResult-actions-toggle {
-    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray mx-1 bg-white opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:actions] before:btu-icon before:btu-icon-ellipsis hover:bg-gray-200 hover:outline-gray-500;
-
-    &[aria-expanded='true'] {
-      @apply btu-button-pressed bg-primary-50 outline-primary-600 before:btu-icon-x;
-    }
-  }
-
-  .SearchResult-fullscreen {
-    @apply btu-button btu-button-text-hidden btu-button-gray me-1 ms-3 overflow-visible bg-white opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:fullscreen] before:btu-icon before:btu-icon-maximize after:absolute after:right-[43px] after:h-full after:w-px after:bg-gray-200 hover:bg-gray-100;
-  }
-}
-
-/* Shown when user toggles Summary fiels in "Select Fields" menu */
-.SearchResult-summaryField {
-  @apply inline text-xs text-gray-500;
-
-  &:not(:first-child) {
-    @apply before:mx-2 before:my-1 before:inline-block before:h-[2px] before:w-[2px] before:rounded-full before:bg-gray-500;
-  }
-}
-
-/* * * * * * * * * * * * * */
-/* * RESPONSIVE STYLES * * */
-/* * * * * * * * * * * * * */
-
-/* We use container queries to dynamically resize/hide certain search controls. */
-.Popup .SearchResult,
-.Page-main .SearchResult {
-  @apply @container/searchResult;
-
-  @container searchResult (max-width: 610px) {
-    .SearchResult-sorts {
-      @apply __sorts-collapsed;
-    }
-  }
-
-  @container searchResult (max-width: 540px) {
-    .SearchResult-fields {
-      @apply hidden;
-    }
-
-    .SearchResult-imageHeightContainer {
-      @apply hidden;
-    }
-
-    .SearchResult-images[data-height] figure {
-      @apply h-[calc(12dvh+50px)];
-
-      img {
-        @apply h-[calc(12dvh)];
-      }
-
-      &.is-missing {
-        @apply before:h-[calc(12dvh)] after:top-[calc(6dvh)];
-      }
-    }
-  }
-
-  @container searchResult (min-width: 550px) {
-    .SearchResult-pagination ul.pagination {
-      /* Displays pagination if there's at least 1 page of results */
-      @apply [&:has(>li>ol>li)]:inline-flex;
-
-      li {
-        @apply first:list-item;
-      }
-
-      > li {
-        @apply [&:nth-child(2)]:border-s;
-      }
-
-      li.next {
-        @apply border-s;
-      }
-    }
-  }
-}
-
-/* SlackAuth Search Result View styling */
-.SearchResult:has(.SlackAuthContainer) {
-  .SlackAuthContainer {
-    @apply ms-1;
-  }
-}
-
-.SearchResult-items a.icon-null[data-label^='slack'] {
-  @apply before:btu-icon-slack;
-}
-
-/* Loader overlay for search results (covers the page, dimmed background, centered spinner) */
-.searchResult-loader-overlay {
-  @apply pointer-events-none fixed inset-0 flex items-center justify-center !bg-gray-900 bg-opacity-30 text-gray-800;
-}
-
-.searchResult-loader-spinner {
-  @apply btu-loader size-20;
-}