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

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

@@ -1,678 +0,0 @@
-/* -------------- */
-/*      CIG       */
-/* -------------- */
-.CIG {
-  @apply relative flex flex-wrap p-0 @container/CIG [--CIG-padding:theme(spacing.6)];
-
-  &.is-empty {
-    @apply hidden;
-  }
-}
-
-.toggleable-form > .CIG > .CIG-row:first-child {
-  @apply pt-0;
-}
-
-/* TabContainer CIGs are flush on both axes. */
-.CIG.TC {
-  &:has(> .TabBar) {
-    @apply pt-0;
-  }
-
-  /* Embedded TabBars need to use the CIG padding for negative margins to stretch the full width. */
-  & .tabs-wrapper > .TabBar,
-  > .TabBar {
-    @apply grow basis-full [--pull-inline:var(--CIG-padding)];
-  }
-}
-
-.CIG-label {
-  /* line-height is set here to make sure that labels with/without action icons are always the same height */
-  @apply relative -order-2 flex h-min items-center text-sm font-semibold leading-6 text-gray-700;
-}
-
-.CIG-label label {
-  @apply min-w-max;
-}
-
-.CIG-requiredLabel {
-  @apply ps-2 text-sm font-normal text-gray-500;
-}
-
-/* Adjusts spacing between RCIG-list, view switcher and label when "Items Type" dropdown is missing */
-.CIG-label + .CIG-large .RCIG.is-previewable > {
-  .repeatablePreviewControls {
-    @apply top-[calc(theme(fontSize.md.1)_-_theme(spacing.7))];
-  }
-
-  .RCIG-expandAll {
-    @apply top-[calc(0px_-_theme(spacing.2)_*_2_-_theme(iconSize.lg)_+_theme(fontSize.md.1))];
-  }
-
-  .repeatablePreviewControls + .RCIG-list {
-    @apply mt-[calc(theme(fontSize.md.1)_+_theme(spacing.2))];
-  }
-}
-
-.CIG-comments {
-  @apply ms-1 delay-[0.12s] before:btu-icon-message-circle-plus;
-
-  &.has-comments {
-    @apply before:btu-icon-message-circle after:absolute after:right-[2px] after:top-[4px] after:size-[10px] after:rounded-full after:border after:bg-error-600 after:[clip-path:circle()] hover:bg-primary-50 hover:text-primary-800;
-  }
-}
-
-.CIG-help {
-  @apply ms-1 before:btu-icon-wrench;
-}
-
-.CIG-guide {
-  @apply ms-2 before:btu-icon-circle-help;
-}
-
-.CIG-guide,
-.CIG-help,
-.CIG-comments {
-  @apply order-1;
-}
-
-.CIG-wordCount {
-  --space: 0.375rem;
-  @apply order-last ms-auto mt-[--space] text-sm font-normal text-gray-500 opacity-0;
-
-  &.has-min-or-max {
-    @apply flex justify-end opacity-100;
-
-    .CIG-wordCount-min + .CIG-wordCount-max {
-      @apply ps-1;
-    }
-  }
-}
-
-.CIG-help,
-.CIG-guide,
-.CIG-comments,
-.AIChatButton {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs -translate-x-[4px] opacity-0 [transition:opacity_0.3s_cubic-bezier(0.25,_0,_0.2,_1),_transform_0.2s_cubic-bezier(0.25,_0,_0.2,_1)] before:btu-icon touch-device:-translate-x-0 touch-device:opacity-100 touch-device:transition-none;
-}
-
-.CIG-guide + .CIG-help {
-  @apply delay-[0.08s]; /* stagger the entrance transition for each button. TODO: set this in the element style from backend?... */
-
-  + .CIG-comments {
-    @apply delay-[0.1s];
-  }
-}
-
-.CIG-label:has(> .CIG-guide + .CIG-help + .CIG-comments) {
-  @apply delay-[0.12s];
-}
-
-.AIChatButton {
-  @apply delay-[0.16s]; /* stagger the entrance transition for each button. TODO: set this in the element style from backend?... */
-}
-
-.CIG-pending,
-.CIG-updated {
-  @apply basis-full text-sm font-normal text-gray-500;
-}
-
-.CIG-search {
-  @apply btu-button btu-button-fill-none btu-button-primary me-6 btu-button-container-none before:btu-icon before:btu-icon-search;
-}
-
-.CIG > .CIG-note {
-  @apply relative order-[-1] -mx-[--space] w-screen;
-}
-
-.CIG > .CIG-note > .CIG-noteItem {
-  @apply mt-0;
-}
-
-.CIG > .CIG-note > .CIG-noteItem > .Message {
-  @apply my-0 rounded-none border-0 border-b;
-}
-
-.CIG-note:empty,
-.CIG-note:has([data-dynamic-html]:empty) {
-  @apply hidden;
-}
-
-.CIG-row > .CIG-note,
-.CIG-noteItem {
-  @apply order-12 mt-1.5 text-sm text-gray-500;
-  [data-dynamic-html] .Message {
-    @apply mb-0 mt-1.5 [overflow-wrap:anywhere];
-  }
-}
-
-/* Equalize the ComboInput widths so that they look aligned. */
-.CIG .ComboInput {
-  @apply w-auto min-w-[25cqw] max-w-[100cqw];
-}
-
-/* Width of small inputs (this should not affect grid fields like items in a gallery) */
-.CIG
-  .CIG-row:not(.is-gridItem .CIG-row):has(
-    > .CIG-small.inputSmall:not(.is-grid)
-  ) {
-  > .CIG-label,
-  > .CIG-note {
-    @apply w-full;
-  }
-
-  /* Only constrain the width when the CIG container is wide enough at over 312px */
-  > .CIG-small.inputSmall:not(.is-grid) {
-    @apply @[312px]/CIG:min-w-[312px] @[312px]/CIG:max-w-[540px] @[312px]/CIG:basis-1/2;
-  }
-
-  /* Inside a layout with columns, unset the min width to prevent fields from 
-  overlapping on smaller viewports. Set flex basis back to full so that the fields are not
-  really small here. These will still get the max width of 540px. */
-  &.is-minimal,
-  &.is-half,
-  &.is-third,
-  &.is-quarter {
-    > .CIG-small.inputSmall:not(.is-grid) {
-      @apply min-w-[unset] basis-full;
-    }
-  }
-}
-
-.CIG-large,
-.CIG-small {
-  --CIG-space: 0.375rem;
-  @apply mt-[--CIG-space] basis-full;
-}
-
-/* -------------- */
-/*    CIG-row     */
-/* -------------- */
-.CIG-row {
-  --CIG-row-space: 1.5rem;
-
-  @apply relative flex max-h-min min-w-[200px] basis-full flex-row flex-wrap content-start @container/CIG-row;
-
-  /* The colored vertical "thread" to the side of each row.
-    The 1px left offset is to stay true to the design so that there is a slight gap betweem the thread and container.
-    The 3px top offset is shifted down a few pixels to make it look a little more aligned with label. */
-  &::after {
-    @apply absolute bottom-0 left-[calc(1px_-_var(--space))] top-[3px] w-0.5 origin-left scale-x-0 rounded-lg bg-primary-600 opacity-0 transition;
-  }
-
-  /* Rows could be empty or have no visible children. */
-  &:empty,
-  &:has(> [type='hidden']:only-child) {
-    @apply hidden;
-  }
-
-  /* Show word count when focused and reduces width of note if it contains a message */
-  &:focus-within {
-    .CIG-wordCount {
-      @apply opacity-100;
-
-      transition: opacity 0.25s cubic-bezier(0.25, 0, 0.2, 1);
-    }
-    &:has(> .CIG-note .Message) > .CIG-note {
-      @apply me-2 flex-1;
-    }
-  }
-
-  /* hidden/unselected Tab Container CIG-rows, shouldn't have padding */
-  &:not(.TC-unselected) {
-    @apply mt-[--CIG-row-space];
-  }
-
-  /* Word count element in all Cig rows (except the last sibling row). */
-  &:has(+ .CIG-row) .CIG-wordCount {
-    @apply mb-[calc(-1_*_(var(--space)_+_theme(lineHeight.4)))]; /* negative margin keeps the word count from pushing the next CIG-row down. */
-  }
-}
-
-/* CIG-row children need to run out the row (unless specified in :not()).
-  This is due to changing the flex direction from column (v4) to row. */
-.CIG-row
-  > *:not(.CIG-label, .AIChatButton, .CIG-note, .CIG-wordCount, .File-upload) {
-  @apply w-full basis-full;
-}
-
-/*
-  Fades out the surrounding buttons when the user focuses the input. */
-.CIG-row:has(
-    textarea:focus,
-    input:focus,
-    a:focus,
-    button:focus,
-    .ComboInput:focus,
-    .ProseMirror:focus,
-    .is-highlighted
-  ) {
-  > .CIG-label .CIG-guide:not(:hover),
-  > .CIG-label .CIG-help:not(:hover),
-  > .CIG-label .CIG-comments:not(:hover),
-  > .AIChatButton:not(:hover) {
-    @apply opacity-50 touch-device:opacity-100;
-  }
-}
-
-.CIG-row.is-highlighted > .CIG-label > a {
-  @apply opacity-100;
-}
-
-/* Fade in the surrounding buttons when the user interacts with the input. */
-.CIG-row:where(.is-openPopup, :hover, :focus-within) > .CIG-label > *,
-.CIG-row:where(.is-openPopup, :hover, :focus-within) > .AIChatButton {
-  @apply translate-x-0 opacity-100;
-}
-
-/* Displays status thread in various cases */
-.CIG-row:where(
-    :focus-within,
-    .is-error,
-    .is-pending,
-    .state-changed:not(:focus-within),
-    .is-openPopup,
-    .is-highlighted
-  ) {
-  @apply after:transform-none after:opacity-100;
-}
-
-/* Blue field label when the row is focused. */
-.CIG-row:where(:focus-within, .is-openPopup, .is-highlighted):not(.is-error)
-  > .CIG-label {
-  @apply text-primary-700;
-}
-
-/* Messages inside CIG-row should present differently. */
-.CIG-row > .Message {
-  @apply mt-[0.375rem] gap-2 border-none !bg-transparent p-0;
-  &.is-error {
-    @apply text-error-600;
-  }
-}
-
-/* Rounded border on embedded CIG (usually). */
-.CIG-row:where(
-    [data-type='record'],
-    [data-type='period'],
-    [data-type='duration'],
-    [data-type='date'],
-    [data-type='dateString']
-  ) {
-  > .CIG-large {
-    > .toggleable-form > .CIG,
-    > .CIG {
-      --CIG-radius: theme(borderRadius.lg);
-      @apply rounded-[--CIG-radius] border p-[--CIG-padding];
-
-      &:has(> .CIG-row) {
-        @apply pt-0;
-      }
-    }
-  }
-}
-
-/* Narrow row modifiers. */
-.CIG:has(
-    > .CIG-row.is-minimal,
-    > .CIG-row.is-half,
-    > .CIG-row.is-third,
-    > .CIG-row.is-quarter
-  ) {
-  --gap: calc(2 * var(--CIG-padding));
-
-  @apply gap-x-[--gap];
-}
-
-.CIG-row {
-  &:where(.is-minimal, .is-half, .is-third, .is-quarter) {
-    @apply basis-auto;
-  }
-
-  &.is-minimal {
-    @apply basis-[min-content];
-  }
-
-  &.is-half {
-    @apply flex-[1_0_calc(50%_-_var(--gap))];
-  }
-
-  &.is-third {
-    @apply flex-[1_0_calc(33.33333%_-_var(--gap))];
-  }
-
-  &.is-quarter {
-    @apply flex-[1_0_calc(25%_-_var(--gap))];
-  }
-}
-
-.CIG-row.is-updated {
-  &::after {
-    @apply transform-none bg-purple-400 opacity-100;
-  }
-}
-
-/* Red thread when the row contains errors. */
-.CIG-row.is-error {
-  @apply after:bg-error-600;
-
-  > .CIG-label {
-    @apply text-error-600;
-  }
-
-  .CIG-small,
-  .CIG-large {
-    input,
-    textarea {
-      @apply focus:ring-error-100 focus:border-error-600;
-    }
-  }
-}
-
-/* Gray/yellow thread when the row is pending change. */
-.CIG-row.is-pending {
-  @apply after:[background-image:linear-gradient(theme(colors.gray.500)_60%,theme(colors.warning.400)_60%)] after:[background-size:1px_20px];
-}
-
-/* Yellow thread when the row has changed. */
-.CIG-row.state-changed:not(:focus-within) {
-  @apply after:bg-warning-300 after:more-contrast:bg-warning-700;
-
-  > .CIG-label {
-    @apply text-warning-900 more-contrast:text-warning-800;
-  }
-}
-
-/* Boolean field checkboxes should look like toggles. */
-.CIG-row[data-type='boolean'] > .CIG-small > input[type='checkbox'] {
-  @apply Checkbox-toggle;
-}
-
-/* When inside an unlabeled row, the thread ui is positioned at the very top. */
-.CIG-row:where(
-    [data-type='record'],
-    [data-type='list/record'],
-    [data-type='set/record'],
-    [data-type='text']
-  )
-  > .CIG-large
-  > .toggleable-form
-  > .CIG
-  > .CIG-row {
-  &:after {
-    @apply top-0;
-  }
-}
-
-/* Embedded CIG rows need no padding-top since the container comes with space. */
-.CIG-large > .CIG.TC > .CIG-row:first-child {
-  @apply pt-0;
-}
-
-/* Remove all gaps around CIG inside unlabeled row by itself. */
-.CIG-row:where(
-    [data-type='record'],
-    [data-type='list/record'],
-    [data-type='set/record']
-  )
-  > .CIG-large {
-  > .toggleable-form > .CIG,
-  > .CIG,
-  > .RCIG-list > .RCIG-item > .CIG {
-    &:has(> div.CIG-row.is-unlabeled:where(:only-of-type, :last-child)) {
-      @apply rounded-none border-none p-0;
-    }
-
-    > div.CIG-row.is-unlabeled:where(:only-of-type, :last-child) {
-      @apply mt-0 ps-0;
-
-      > .CIG-label,
-      > .AIChatButton {
-        @apply hidden;
-      }
-      > .CIG-small,
-      > .CIG-large {
-        @apply mt-0;
-      }
-    }
-  }
-}
-
-/* Make certain types of rows not editable. */
-.ContentEdit.is-locked,
-.CIG.is-readOnly,
-.CIG-row:where(.is-readOnly, .is-pending, .is-updated),
-.StandardForm.is-locked {
-  input[type],
-  input[data-preview]:not([data-preview='']) + .ContentSelector-search,
-  input[data-previewable='true']:not([data-preview]) + .ContentSelector-search,
-  input[data-previewable='true'][data-preview=''] + .ContentSelector-search,
-  select,
-  textarea,
-  .locationMap,
-  .regionMap,
-  .CIG-label,
-  .CIG-note,
-  .CodeMirror,
-  .ComboInput,
-  .ComboInput-label,
-  .ContentSelector-placeholder,
-  .DateTimeInput,
-  .Enhancement,
-  .ProseMirrorContainer,
-  .ProseMirror-tableContainer,
-  .RichTextEditor {
-    --combo-label-color: theme(colors.gray.400);
-    @apply pointer-events-none border-0 text-gray-400;
-  }
-
-  input[data-previewable='false']:not([data-preview]) + .ContentSelector-search,
-  input[data-previewable='false'][data-preview=''] + .ContentSelector-search,
-  input[data-previewable='true']:not([data-preview])
-    + .ContentSelector-search::after,
-  input[data-previewable='true'][data-preview='']
-    + .ContentSelector-search::after,
-  input[data-preview]:not([data-preview='']) + .ContentSelector-search::before,
-  input[data-preview]:not([data-preview='']) + .ContentSelector-search::after,
-  .leaflet-control:not(.leaflet-control-zoom),
-  .AIChatButton,
-  .CIG-help,
-  .CIG-guide,
-  .Dropdown-container,
-  .ContentSelector-clear,
-  .ImageEditor-open,
-  .MultiSortable-buttonToggle,
-  .ProsemirrorEnhancementMenu-container-button,
-  .ProseMirrorToolbar,
-  .ProseMirror-tableSubmenuItem,
-  .RCIG-controls,
-  .RCIG-remove,
-  .RCIG-swap,
-  .RCS-remove,
-  .RCS-controls,
-  .Repeatable-controls,
-  .RichTextEditor-toolbar,
-  .RTI-add,
-  .EIG-controls {
-    @apply !hidden;
-  }
-
-  .MultiSortable:hover {
-    @apply cursor-[unset];
-  }
-
-  .RCIG-item.MultiSortable > .RCIG-title:hover {
-    @apply cursor-pointer;
-  }
-
-  .RCIG-item {
-    @apply !grid-cols-[auto];
-  }
-
-  .RCIG-title {
-    @apply bg-none;
-  }
-
-  .RTI-remove {
-    @apply hidden;
-  }
-
-  .is-collapsed {
-    @apply w-full;
-  }
-
-  .readOnlyDisplay {
-    @apply m-4 text-gray-400;
-  }
-
-  /* Image editor readonly */
-  .is-imagePreview {
-    @apply after:col-span-full after:h-full after:rounded-b-lg after:border after:[grid-row:2/3];
-
-    .ImageEditor-editToggle {
-      @apply my-1 after:border-none;
-    }
-  }
-
-  /* Single and Repeatable Content selector inputs in readonly mode */
-  .CIG-small:has(> .ContentSelector-select),
-  .RCS-list > li {
-    @apply pointer-events-none border-gray-300 text-gray-400;
-  }
-}
-
-/* When CIG-row is readonly and ProseMirror is empty, hide the extra blank space */
-.CIG-row.is-readOnly .AutoExpand:has(> .ProseMirrorContainer + textarea:empty) {
-  @apply m-0;
-
-  .ProseMirrorContainer {
-    @apply hidden;
-  }
-}
-
-.CIG-row:only-child.is-unlabeled > .Message.is-error {
-  @apply ms-[calc(var(--CIG-padding)_+_theme(spacing.4))];
-}
-
-/* Query Field support. */
-.CIG.TC.is-query {
-  --CIG-padding: 0;
-
-  .QueryField input[type] {
-    @apply hidden;
-  }
-}
-
-.CIG-row.is-query.is-disabled .QueryField-toggle {
-  @apply hidden;
-}
-
-/* DateOnly Field */
-.CIG-row[data-type$='dateOnly'] > .CIG-small {
-  @apply flex;
-
-  input,
-  .ComboInput {
-    @apply w-[100px];
-  }
-
-  .ComboInput:last-of-type {
-    @apply ms-2;
-  }
-
-  .DateOnly-month {
-    & + .ComboInput {
-      &,
-      .ComboInput-filter {
-        @apply w-[150px] min-w-[150px];
-      }
-    }
-  }
-
-  .DateOnly-day {
-    & + .ComboInput {
-      &,
-      .ComboInput-filter {
-        @apply w-[150px] min-w-[150px];
-      }
-    }
-  }
-}
-
-/* Duration, Period */
-.CIG-row[data-type$='duration'],
-.CIG-row[data-type$='period'] {
-  .TC {
-    @apply grid auto-cols-min grid-flow-col-dense gap-x-10;
-
-    > .CIG-row {
-      @apply pt-0;
-    }
-  }
-
-  > .CIG-large .CIG > .CIG-row {
-    @apply w-[100px] min-w-[100px];
-  }
-}
-
-/* Date, DateString */
-.CIG-row[data-type$='date'],
-.CIG-row[data-type$='dateString'] {
-  > .CIG-large .CIG > .CIG-row {
-    > .CIG-small,
-    > .CIG-note {
-      @apply order-first;
-    }
-  }
-}
-
-.CIG-small > .DateStringCalendarEmbedded .DateStringCalendarEmbedded-widget {
-  @apply block border-none;
-
-  .DateStringCalendarTime,
-  /* Unset the horizontal borders which appear in these pseudo-elements */
-  .DateStringCalendarAction {
-    @apply before:content-none;
-  }
-
-  .DateStringCalendarTime {
-    @apply py-2;
-
-    .ComboInput {
-      @apply min-w-min;
-    }
-  }
-
-  .DateStringCalendarAction {
-    @apply py-0;
-  }
-}
-
-.CIG-small .passwordChange:has(> .Message) {
-  @apply mt-4;
-}
-
-.RteSettings-customKeyboardConfig .CIG-small,
-.RteSettings-customKeyboardConfig textarea {
-  @apply tracking-[0.6rem];
-}
-
-/* Author persona writing style - override readonly styles here so the links are clickable */
-.CIG-row[data-field-name='writingStyleProfile'] {
-  @apply !pointer-events-auto !opacity-100;
-}
-
-.CIG-row.is-unlabeled > .AIChatButton {
-  @apply absolute right-0 top-[calc(-1_*_var(--button-size-md))] ms-0 ![display:initial];
-}
-
-/* Focus state for CIG-small in read-only rows */
-:is(.CIG-row.is-readOnly, .CIG.is-readOnly) .CIG-small:focus-within {
-  @apply rounded-lg outline-dashed outline-[4px] outline-gray-300;
-
-  /* Remove default focus styles */
-  :focus:not(.ImageEditor-editToggle, .filePreview > a),
-  .ProseMirrorContainer {
-    @apply !border-transparent !ring-0;
-  }
-}