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

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

@@ -0,0 +1,140 @@
+.sp-hidden,
+.sp-initial,
+.sp-palette-button-container,
+.sp-alpha,
+.sp-fill {
+  @apply !hidden;
+}
+
+.sp-replacer {
+  @apply box-border flex h-9 w-[12.5rem] cursor-pointer select-none justify-between gap-4 rounded-lg border border-gray-300 bg-white px-[0.9375rem] py-[0.4375rem];
+
+  &.sp-active,
+  &:hover,
+  &:focus {
+    @apply border-none bg-gray-100 px-4 py-2;
+  }
+
+  .SearchWidget-filter & {
+    @apply w-full;
+  }
+}
+
+.sp-preview {
+  @apply relative flex select-none gap-2 overflow-hidden text-ellipsis whitespace-nowrap;
+
+  &::after {
+    @apply overflow-hidden text-ellipsis whitespace-nowrap pl-[1.875rem] text-sm text-gray-500 [&:where([data-placeholder])]:[content:attr(data-placeholder)] [&[data-color]]:text-gray-900 [&[data-color]]:[content:attr(data-color)];
+  }
+}
+
+.sp-preview-inner {
+  @apply absolute bottom-0 left-0 right-0 top-0 block h-5 w-5 rounded-full;
+}
+
+.sp-preview:not([data-placeholder^='#']) {
+  .sp-preview-inner.sp-clear-display {
+    @apply border border-dashed border-gray-300 !bg-white;
+  }
+}
+
+.sp-dd {
+  @apply relative h-5 w-5 overflow-hidden before:btu-icon before:btu-icon-chevron-down before:btu-icon-md;
+
+  .sp-active & {
+    @apply before:btu-icon-chevron-up;
+  }
+}
+
+.sp-container {
+  @apply z-[100001] grid max-w-[11.625rem] grid-cols-[auto_auto] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg;
+}
+
+.sp-container[popover] {
+  @apply inset-[unset];
+}
+
+.sp-picker-container {
+  @apply col-start-1 col-end-3 row-start-1 row-end-5 grid [grid:subgrid/subgrid];
+}
+
+.sp-top,
+.sp-top-inner {
+  @apply contents;
+}
+
+.sp-color {
+  @apply relative col-start-1 col-end-2 row-start-1 row-end-2 ml-4 mt-4 h-[7.75rem] w-[7.75rem];
+}
+
+.sp-sat {
+  @apply h-full w-full bg-[linear-gradient(to_right,#fff,rgb(204_154_129_/_0%))];
+}
+
+.sp-val {
+  @apply h-full w-full bg-[linear-gradient(to_top,#000,rgb(204_154_129_/_0%))];
+}
+
+.sp-dragger {
+  @apply absolute h-[0.625rem] w-[0.625rem] cursor-pointer select-none rounded-full border-2 border-white bg-transparent outline outline-gray-900;
+}
+
+.sp-hue {
+  @apply relative col-start-2 row-start-1 mr-4 mt-4 w-[1.25rem] justify-self-end bg-[linear-gradient(to_bottom,_#EB3323_0%,#FAF050_17%,#72FB4E_33%,#53BAF9_50%,#1017F5_67%,#EB36D9_83%,#EB333B_100%)];
+}
+
+.sp-slider {
+  @apply absolute -left-[0.0625rem] -right-[0.0625rem] top-0 box-border h-[0.625rem] cursor-pointer select-none rounded-sm border-2 border-white bg-transparent outline outline-gray-700;
+}
+
+.sp-input-container {
+  @apply col-start-1 col-end-3 row-start-2 mx-4 mb-4 mt-2;
+}
+
+.sp-container .sp-input {
+  @apply box-border pe-[3.25rem];
+}
+
+.sp-clear {
+  @apply z-[1] col-start-1 col-end-3 row-start-2 mr-8 mt-[1.0625rem] cursor-pointer select-none self-start justify-self-end before:btu-icon before:btu-icon-ban before:text-gray-700;
+}
+
+.sp-palette-container {
+  @apply col-start-1 col-end-3 row-start-3 flex flex-wrap gap-2 border-t border-gray-200 p-4;
+}
+
+.sp-palette,
+.sp-palette-row {
+  @apply contents;
+}
+
+.sp-palette .sp-thumb-el {
+  @apply relative h-6 w-6 cursor-pointer;
+
+  &.sp-thumb-active {
+    @apply after:btu-icon after:btu-icon-check before:absolute before:-bottom-1 before:-left-1 before:-right-1 before:-top-1 before:rounded-full before:border before:border-gray-300 before:bg-transparent after:absolute after:bottom-[0.125rem] after:left-[0.125rem] after:right-[0.125rem] after:top-[0.125rem] after:btu-icon-md [&:where(.sp-thumb-dark)]:after:text-white-light [&:where(.sp-thumb-light)]:after:text-black-light;
+  }
+}
+
+.sp-palette .sp-thumb-inner {
+  @apply block h-full w-full overflow-hidden rounded-full;
+}
+
+.sp-button-container {
+  @apply col-start-1 col-end-3 row-start-4 flex items-center justify-end gap-3 border-t border-gray-200 bg-white px-4 py-3;
+}
+
+.sp-cancel {
+  @apply btu-button btu-button-gray btu-button-md;
+}
+
+.sp-choose {
+  @apply btu-button btu-button-primary btu-button-md;
+}
+
+/* Hide the row when the picker has no palette swatches. */
+.sp-palette-container:has(
+    .sp-palette.sp-thumb .sp-palette-row:empty + .sp-palette-row:empty
+  ) {
+  @apply hidden;
+}

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

@@ -0,0 +1,253 @@
+.ComboInput {
+  --ComboInput-listPadding: 1rem;
+
+  @apply inline-flex w-full max-w-full cursor-pointer items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 focus:border-primary-600;
+
+  &:not(.Page-create &) {
+    @apply hover:bg-gray-100;
+  }
+}
+
+.ComboInput[aria-expanded='true'] {
+  @apply ring-primary-100 border-primary-600 ring-4 more-contrast:border-transparent more-contrast:ring-primary-400;
+
+  .ComboInput-icon {
+    @apply before:-rotate-180;
+  }
+
+  .ComboInput-filter {
+    @apply [display:block];
+  }
+
+  .ComboInput-label {
+    @apply hidden;
+  }
+}
+
+.ComboInput-label:not(.Page-create *) {
+  @apply text-sm text-[var(--combo-label-color,_theme(colors.gray.900))] empty:before:truncate empty:before:text-gray-500 empty:before:content-[attr(data-placeholder)];
+}
+
+.ComboInput-label,
+.ComboInput-selected {
+  @apply w-full truncate;
+}
+
+.ComboInput-filter {
+  @apply hidden rounded-none border-0 bg-transparent p-0 placeholder:text-gray-500 focus:[box-shadow:none];
+}
+
+.ComboInput-icon {
+  @apply before:btu-icon before:btu-icon-chevron-down before:transition;
+}
+
+.ComboInput-list {
+  @apply Dropdown min-w-[300px] max-w-[50vw];
+
+  &.is-missing li:not([data-missing-option='true']) {
+    @apply hidden;
+  }
+
+  &.is-expanded {
+    @apply Dropdown-is-open cursor-pointer;
+
+    .ComboInput-option[aria-selected='true'] {
+      .ContentSelector-placeholder {
+        @apply more-contrast:text-white;
+      }
+    }
+
+    &:not(:hover) {
+      .ComboInput-option.is-active {
+        @apply bg-inherit outline outline-1 outline-primary-600 [box-shadow:inset_0_0_0_4px_theme(colors.primary.100)] [outline-offset:-1px] aria-selected:bg-primary-50 more-contrast:outline-primary-400 more-contrast:[box-shadow:inset_0_0_0_4px_theme(colors.primary.400)] aria-selected:more-contrast:bg-primary-900 aria-selected:more-contrast:text-white;
+      }
+    }
+  }
+
+  &:has(> li:first-child > .ComboInput-heading:first-child),
+  &:has(
+      > .ComboInput-placeholder-option:first-child
+        + li
+        > .ComboInput-heading:first-child
+    ) {
+    @apply pt-0;
+  }
+
+  &[aria-multiselectable='true'] {
+    .ComboInput-option[role='option']:where(
+        :not([data-create], [data-sublist])
+      ) {
+      .ComboInput-check {
+        @apply block scale-50 opacity-0 transition-[opacity_scale] duration-250 [transition-timing-function:theme(transitionTimingFunction[spring-stiff])] before:btu-icon before:btu-icon-check before:text-inherit;
+      }
+
+      &[aria-selected='true'] {
+        .ComboInput-check {
+          @apply scale-100 opacity-100;
+        }
+      }
+    }
+  }
+}
+
+.ComboInput-heading {
+  @apply flex flex-row-reverse items-center justify-end gap-3 border-t bg-white px-4 py-2 text-xs text-gray-500 data-[hidden=true]:hidden;
+
+  .ComboInput-list > li:first-child > &,
+  .ComboInput-list > .ComboInput-placeholder-option:first-child + li > & {
+    @apply border-t-0;
+  }
+}
+
+.ComboInput-option {
+  @apply grid px-4 py-2 text-sm text-gray-900 [overflow-wrap:anywhere] [word-break:normal];
+
+  &:not(.nested):not([aria-selected='true']) {
+    @apply hover:bg-gray-100;
+  }
+
+  &:where(&[role='option']:not([data-create], [data-sublist])) {
+    @apply grid-cols-[auto_minmax(0,1fr)_theme(spacing.6)] items-center gap-2;
+
+    &[aria-selected='true'] {
+      @apply bg-primary-50 text-primary-800 more-contrast:bg-primary-900 more-contrast:text-white;
+    }
+  }
+
+  &:where(&[data-select-all='true'], &[data-create='true']:not(.nested)) {
+    @apply border-b;
+
+    & + .ComboInput-placeholder-option.is-empty + li .ComboInput-heading {
+      @apply border-t-0;
+    }
+  }
+
+  &:where(
+      &.is-hidden,
+      &[data-no-permission='true'],
+      &[data-is-owner='true'],
+      &.is-empty
+    ) {
+    @apply hidden;
+  }
+}
+
+.ComboInput-check:where([aria-hidden='true']) {
+  @apply opacity-0;
+}
+
+.ComboInput-option-iframe {
+  @apply pointer-events-none;
+}
+
+.ComboInput-placeholder-option {
+  @apply hidden;
+}
+
+/* Caps height of uninitialized ComboInputs */
+select {
+  @apply max-h-[2.25rem];
+}
+
+/********************************/
+/***** "Create New" Options *****/
+/********************************/
+.ComboInput-option > a[data-create='true'] {
+  @apply btu-heading-6 block px-4 py-2 no-underline before:btu-icon before:btu-icon-plus before:me-2;
+}
+
+.ComboInput-option[data-create='true'],
+.ComboInput-option.nested li {
+  @apply p-0;
+}
+
+/** multiple content type options **/
+.ComboInput-option-nestedLabel {
+  @apply flex select-none items-center justify-between px-4 py-2 text-xs text-gray-500;
+}
+
+.ComboInput-option-arrow-icon {
+  @apply before:btu-icon before:btu-icon-chevron-down before:transition;
+
+  .ComboInput-option.nested[aria-expanded='true'] & {
+    @apply before:-rotate-180;
+  }
+}
+
+/*****************************/
+/***** Favorites styling *****/
+/*****************************/
+.ComboInput-option-favorite {
+  @apply flex size-6 items-center justify-center touch-device:size-6 touch-device:p-1;
+}
+
+.ComboInput-option-favorite.is-unstarred {
+  @apply invisible touch-device:visible;
+
+  .ComboInput-option.is-active & {
+    @apply visible;
+  }
+
+  .ComboInput-option-favorite-icon {
+    @apply size-4 before:btu-icon before:btu-icon-star before:[--Icon-size:theme(size.4)];
+  }
+}
+
+.ComboInput-option-favorite:not(.is-unstarred)
+  .ComboInput-option-favorite-icon {
+  @apply block size-4 bg-primary-800 [clip-path:theme(shape.starFilled)];
+}
+
+/*****************************/
+/***** One-off instances *****/
+/*****************************/
+.DashboardWidget-filters .ComboInput {
+  @apply w-auto;
+}
+
+.DashboardWidget-pagination .ComboInput {
+  @apply border-transparent;
+}
+
+/* Sites access widget - has checkbox to select site group */
+.ComboInput-selectOption {
+  @apply before:btu-icon before:btu-icon-square;
+
+  &.is-checked {
+    @apply before:btu-icon-square-check;
+  }
+}
+
+/* Module picker - has template previews in iframes */
+:where(.ComboInput-label, .ComboInput-option):has(.Card) {
+  .ComboInput-option-iframe {
+    @apply mb-1 max-w-72;
+
+    .Card-title {
+      @apply font-medium;
+    }
+  }
+}
+
+.ComboInput-label:has(.ComboInput-option-iframe .Card) {
+  @apply w-72;
+}
+
+.ContentSelector-select + .ComboInput {
+  @apply w-1/2;
+
+  /* Display status badge on content */
+  .ComboInput-selected {
+    .Label {
+      @apply inline-block;
+    }
+  }
+}
+
+select[name='authorPersonaId'] + .ComboInput {
+  @apply -order-1 w-fit max-w-[25%];
+}
+
+select[name='authorPersonaId'].is-readOnly + .ComboInput {
+  @apply pointer-events-none opacity-50;
+}