@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.1

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

@@ -0,0 +1,678 @@
+/* -------------- */
+/*      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;
+  }
+}