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

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

@@ -1,659 +0,0 @@
-.ProseMirrorToolbar {
-  @apply sticky top-0 z-[3] flex flex-col rounded-t-lg border-b bg-white transition contain-layout contain-style; /* Performance: using contain limits layout recalc scope */
-}
-
-.CIG[data-type$='RichTextBody'] {
-  --CIG-padding: 0;
-}
-
-.ProseMirrorToolbar {
-  --ProseMirrorToolbar-rightControls: 3.75rem;
-
-  &:has(+ .ProseMirror:focus) {
-    @apply border-primary-600;
-  }
-
-  &:has(.rte2-toolbar-find) {
-    --ProseMirrorToolbar-rightControls: 5.75rem;
-  }
-
-  > ul {
-    --ProseMirror-toolbar-h: calc(theme(spacing.4) + theme(lineHeight.6));
-
-    @apply relative inline-flex h-[var(--ProseMirror-toolbar-h)] w-full flex-wrap items-center gap-y-3 overflow-clip py-2 pr-[calc(var(--ProseMirrorToolbar-rightControls)+var(--ProseMirror-wordCount)+var(--iconSize-xs))] ps-3;
-
-    .rte2-toolbar-submenu-2,
-    .rte2-toolbar-separator,
-    .ProseMirrorToolbar-action
-      > a:where(
-        [data-icon],
-        .rte2-toolbar-noicon:not([class=' rte2-toolbar-noicon'])
-      ) {
-      @apply me-1;
-    }
-  }
-
-  /* Temp placeholder button */
-  .overflow-placeholder {
-    @apply w-[calc(theme(spacing.1)+theme(lineHeight.6))];
-  }
-
-  .rte2-toolbar-separator {
-    @apply h-6 w-0.5 bg-gray-100 last:hidden more-contrast:bg-gray-400;
-  }
-
-  /* SUBMENUS */
-  .rte2-toolbar-submenu-2 {
-    &:not([data-rte-toolbar-submenu='Format']) > button {
-      @apply btu-button-text-hidden;
-    }
-
-    &[data-rte-toolbar-submenu] > button {
-      @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs gap-1 p-1 after:btu-icon after:btu-icon-chevron-down after:transition;
-    }
-
-    &.disabled > button {
-      @apply btu-button-disabled;
-    }
-
-    &.is-open > button {
-      @apply btu-button-pressed after:-rotate-180;
-    }
-
-    &.rte-overflow-btn {
-      @apply h-7;
-    }
-
-    &.rte-overflow-btn > button {
-      @apply z-[2] bg-transparent after:content-none hover:bg-gray-500/10;
-
-      &.is-active {
-        @apply bg-primary-500/10;
-      }
-    }
-
-    /* Make overflowed items inaccessible */
-    &.rte-overflow-btn
-      ~ li:not(
-        [data-rte-style='rte2-toolbar-fullscreen'],
-        [data-rte-style='rte2-toolbar-find'],
-        [data-rte-style='rte2-toolbar-ai-inline']
-      ) {
-      @apply pointer-events-none;
-
-      .is-htmlMode & {
-        @apply pointer-events-auto;
-      }
-    }
-
-    &[data-rte-toolbar-submenu='Align'] button {
-      @apply w-[3.25rem] before:btu-icon before:btu-icon-align-left;
-    }
-
-    &[data-rte-toolbar-submenu='Enhancements'] button {
-      @apply w-[3.25rem] before:btu-icon before:btu-icon-image;
-    }
-  }
-
-  :where(
-      [data-rte-toolbar-submenu='Style'],
-      [data-rte-toolbar-submenu='Align'],
-      [data-rte-toolbar-submenu='Enhancements']
-    ) {
-    .rte2-toolbar-submenu-2-heading {
-      @apply hidden;
-    }
-  }
-
-  li.rte2-toolbar-submenu-horizontal {
-    @apply hidden;
-  }
-
-  .CIG-wordCount {
-    @apply absolute end-3 top-1.5 z-10 opacity-100;
-
-    /* Override inline styles from JS */
-    @apply [--ProseMirror-wordCountSpacingWithOneIcon:52px] [--ProseMirror-wordCountSpacingWithThreeIcons:120px] [--ProseMirror-wordCountSpacingWithTwoIcons:85px];
-  }
-
-  /* actions pinned to right of toolbar */
-  [data-rte-style='rte2-toolbar-find'] {
-    @apply absolute right-11 z-[2] border-r;
-  }
-
-  [data-rte-style='rte2-toolbar-ai-inline'] {
-    @apply absolute right-2 z-[2] border-r;
-  }
-
-  &[data-sidebar-icon-count='2'] [data-rte-style='rte2-toolbar-ai-inline'] {
-    @apply right-11;
-  }
-
-  &[data-sidebar-icon-count='3'] [data-rte-style='rte2-toolbar-ai-inline'] {
-    @apply right-20;
-  }
-
-  [data-rte-style='rte2-toolbar-fullscreen'] {
-    @apply absolute right-2 z-[2];
-  }
-
-  /* track changes */
-  > ul > .ProseMirrorToolbar-action > a[data-icon] {
-    &.rte2-toolbar-track-changes {
-      @apply font-semibold;
-    }
-  }
-
-  .ProseMirrorToolbar-action > a[data-icon] {
-    &.rte2-toolbar-track-changes-accept,
-    &.rte2-toolbar-track-changes-accept-all {
-      @apply before:btu-icon-circle-check-big;
-    }
-
-    &.rte2-toolbar-track-changes-reject,
-    &.rte2-toolbar-track-changes-reject-all {
-      @apply before:btu-icon-circle-x;
-    }
-  }
-}
-
-/* Track changes submenu */
-.ProseMirrorToolbar-horizontalSubmenu > ul {
-  @apply flex flex-wrap gap-2 border-t p-1;
-
-  .ProseMirrorToolbar-action {
-    @apply last:flex last:before:me-2 last:before:h-7 last:before:w-px last:before:bg-gray-200;
-  }
-
-  .ProseMirrorToolbar-action a {
-    @apply btu-button-sm;
-
-    &[data-icon='toggle_on'] {
-      @apply font-normal before:btu-icon-toggle-right;
-    }
-  }
-}
-
-.is-htmlMode .ProseMirrorToolbar {
-  ul {
-    @apply after:invisible;
-  }
-
-  .ProseMirrorToolbar-horizontalSubmenu,
-  .ProseMirrorToolbar-action,
-  .rte2-toolbar-separator,
-  .rte2-toolbar-submenu-2 {
-    @apply hidden;
-  }
-
-  [data-rte-style='rte2-toolbar-togglemode'] {
-    @apply inline-block;
-  }
-}
-
-.rte2-toolbar-submenu-2-items.overflow-items {
-  @apply py-1;
-
-  .shortcut {
-    @apply hidden text-xs text-gray-500 md:block;
-  }
-
-  .separator {
-    @apply before:block before:h-px before:w-full before:bg-gray-200;
-  }
-
-  /* submenu headings */
-  li > ul {
-    @apply px-4 pb-1 pt-[13px] text-xs text-gray-500;
-
-    > li {
-      @apply -mx-4 first:mt-[9px];
-    }
-  }
-
-  /* padding around borders */
-  .ProseMirrorToolbar-action:has(+ li:not(.ProseMirrorToolbar-action)) {
-    @apply pb-1;
-  }
-
-  li:has(ul.overflow-submenu) + li.ProseMirrorToolbar-action,
-  li.separator + li.ProseMirrorToolbar-action {
-    @apply pt-1;
-  }
-
-  /* Add a border between items with submenus */
-  li:has(> ul.overflow-submenu):not(:has(+ .separator)),
-  li:has(+ li ul) {
-    @apply border-b;
-  }
-
-  .ProseMirrorToolbar-action > a {
-    @apply rounded-none;
-
-    &.rte2-toolbar-noicon {
-      @apply before:content-none;
-    }
-  }
-
-  .ProseMirrorToolbar-action.disabled {
-    @apply pointer-events-none text-gray-300 [&_a]:text-gray-300;
-  }
-}
-
-/* overflow cover */
-.ProseMirrorToolbar > ul {
-  @apply after:btu-icon after:btu-icon-ellipsis-vertical after:absolute after:left-1 after:right-0 after:z-[1] after:flex after:h-7 after:items-center after:bg-white after:transition;
-
-  &::after {
-    transform: translateX(var(--cover-offset-x, 100%));
-  }
-}
-
-.ProseMirrorToolbar {
-  .rte2-toolbar-submenu-2.rte-overflow-btn {
-    /* In RTL, hide overflowed items since the cover is disabled */
-    ~ li:not(
-        [data-rte-style='rte2-toolbar-fullscreen'],
-        [data-rte-style='rte2-toolbar-find'],
-        [data-rte-style='rte2-toolbar-ai-inline']
-      ) {
-      @apply rtl:invisible;
-
-      .is-htmlMode & {
-        @apply rtl:visible;
-      }
-    }
-
-    /* Since overflow cover is hidden now, we have to set button icon */
-    > button {
-      @apply rtl:before:btu-icon rtl:before:btu-icon-ellipsis-vertical;
-    }
-  }
-
-  /* Hide overflow cover in RTL */
-  > ul::after {
-    @apply rtl:hidden;
-  }
-}
-
-/* Avoids unusually tall action items in dropdown menus  */
-/* workaround for BSP-17127 */
-.ProseMirrorToolbar-action br {
-  @apply hidden;
-}
-.ProseMirrorToolbar-action > a[data-icon] {
-  @apply gap-x-2 before:btu-icon;
-}
-
-.ProseMirrorToolbar > ul >,
-.ProseMirrorToolbar-horizontalSubmenu {
-  .ProseMirrorToolbar-action > a[data-icon] {
-    @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs;
-
-    &:not(.rte2-toolbar-track-changes):not(
-        [class*='rte2-toolbar-track-changes-']
-      ) {
-      @apply btu-button-text-hidden;
-    }
-  }
-}
-
-/* OPEN SUBMENUS */
-button + .rte2-toolbar-submenu-2-items {
-  @apply Dropdown min-w-min [--Page-headerBottom:var(--page-header-h)];
-
-  &.is-opening:not(.is-removing) {
-    @apply Dropdown-is-open;
-  }
-
-  li.ProseMirrorToolbar-action a {
-    @apply Dropdown-item flex justify-start rounded-none;
-  }
-}
-
-/* individual menu actions */
-.ProseMirrorToolbar > ul > .ProseMirrorToolbar-action.active > a[data-icon] {
-  @apply btu-button-pressed;
-}
-
-.ProseMirrorToolbar-action.disabled > a[data-icon] {
-  @apply btu-button-disabled;
-}
-
-/* Omit pseudo elements for items with no icon so they don't shift layout. */
-.ProseMirrorToolbar-action a[data-icon=''] {
-  @apply before:content-none;
-}
-
-/* TOOLBAR ICONS */
-.ProseMirrorToolbar-action > a[data-icon] {
-  &:where(.rte2-toolbar-bold, .rte2-toolbar-italic, .rte2-toolbar-underline) {
-    @apply before:font-extrabold;
-  }
-
-  &.rte2-toolbar-track-changes-show-final {
-    @apply font-medium;
-  }
-
-  /* overriding icons that had already been set in tailwind-plugin-icon.ts */
-  &[data-icon='photo'] {
-    @apply before:btu-icon-image;
-  }
-
-  &[data-icon='magic_button'] {
-    @apply before:btu-icon-sparkle;
-  }
-
-  /* highlight AI content icon */
-  &[data-icon='wand_stars'] {
-    @apply before:btu-icon-wand-sparkles;
-  }
-
-  /* Material to Lucide icon mappings from RichTextToolbarStyle */
-  &[data-icon='format_bold'] {
-    @apply before:btu-icon-bold;
-  }
-
-  &[data-icon='format_italic'] {
-    @apply before:btu-icon-italic;
-  }
-
-  &[data-icon='format_underlined'] {
-    @apply before:btu-icon-underline;
-  }
-
-  &[data-icon='format_strikethrough'] {
-    @apply before:btu-icon-strikethrough;
-  }
-
-  &[data-icon='vertical_align_top'] {
-    @apply before:btu-icon-superscript;
-  }
-
-  &[data-icon='vertical_align_bottom'] {
-    @apply before:btu-icon-subscript;
-  }
-
-  &[data-icon='link'] {
-    @apply before:btu-icon-link-2;
-  }
-
-  &[data-icon='code'] {
-    @apply before:btu-icon-code;
-  }
-
-  &[data-icon='format_list_bulleted'] {
-    @apply before:btu-icon-list;
-  }
-
-  &[data-icon='format_list_numbered'] {
-    @apply before:btu-icon-list-ordered;
-  }
-
-  &[data-icon='format_align_left'] {
-    @apply before:btu-icon-align-left;
-  }
-
-  &[data-icon='format_align_center'] {
-    @apply before:btu-icon-align-center;
-  }
-
-  &[data-icon='format_align_right'] {
-    @apply before:btu-icon-align-right;
-  }
-
-  &[data-icon='comment'] {
-    @apply before:btu-icon-message-circle-plus;
-  }
-
-  /* Material to Lucide icon mappings from RichTextToolbarAction */
-  &[data-icon='format_clear'] {
-    @apply before:btu-icon-remove-formatting;
-  }
-
-  &[data-icon='format_indent_increase'] {
-    @apply before:btu-icon-indent-increase;
-  }
-
-  &[data-icon='format_indent_decrease'] {
-    @apply before:btu-icon-indent-decrease;
-  }
-
-  &[data-icon='keyboard'] {
-    @apply before:btu-icon-keyboard;
-  }
-
-  &[data-icon='border_all'] {
-    @apply before:btu-icon-table-2;
-  }
-
-  &[data-icon='toggle_off'] {
-    @apply before:btu-icon-toggle-left;
-  }
-
-  &[data-icon='toggle_on'] {
-    @apply before:btu-icon-toggle-right;
-  }
-
-  &[data-icon='check_circle'] {
-    @apply before:btu-icon-circle-check-big;
-  }
-
-  &[data-icon='cancel'] {
-    @apply before:btu-icon-circle-x;
-  }
-
-  &[data-icon='close'] {
-    @apply before:btu-icon-x;
-  }
-
-  &[data-icon='comments_disabled'] {
-    @apply before:btu-icon-message-circle-x;
-  }
-
-  &[data-icon='search'] {
-    @apply before:btu-icon-search;
-  }
-
-  &[data-icon='fullscreen'] {
-    @apply before:btu-icon-maximize-2;
-  }
-
-  &[data-icon='undo'] {
-    @apply before:btu-icon-undo;
-  }
-
-  &[data-icon='redo'] {
-    @apply before:btu-icon-redo;
-  }
-
-  /* Material to Lucide icon mappings from RichTextElement files */
-  &[data-icon='music_note'] {
-    @apply before:btu-icon-radio;
-  }
-
-  &[data-icon='help'] {
-    @apply before:btu-icon-circle-help;
-  }
-
-  &[data-icon='chrome_reader_mode'] {
-    @apply before:btu-icon-table-properties;
-  }
-
-  &[data-icon='textsms'] {
-    @apply before:btu-icon-message-circle-more;
-  }
-
-  &[data-icon='post_add'] {
-    @apply before:btu-icon-clipboard-plus;
-  }
-
-  &[data-icon='short_text'] {
-    @apply before:btu-icon-text;
-  }
-
-  &[data-icon='settings_ethernet'] {
-    @apply before:btu-icon-chevrons-left-right-ellipsis;
-  }
-
-  &[data-icon='format_quote'] {
-    @apply before:btu-icon-quote;
-  }
-
-  &[data-icon='playlist_play'] {
-    @apply before:btu-icon-list-video;
-  }
-
-  &[data-icon='ondemand_video'] {
-    @apply before:btu-icon-video;
-  }
-
-  &[data-icon='widgets'] {
-    @apply before:btu-icon-blocks;
-  }
-
-  &[data-icon='photo_library'] {
-    @apply before:btu-icon-images;
-  }
-
-  /* Additional Material to Lucide icon mappings */
-  &[data-icon='assignment'] {
-    @apply before:btu-icon-clipboard-check;
-  }
-
-  &[data-icon='attachment'] {
-    @apply before:btu-icon-file;
-  }
-
-  &[data-icon='photo_camera'] {
-    @apply before:btu-icon-camera;
-  }
-
-  &[data-icon='subject'] {
-    @apply before:btu-icon-letter-text;
-  }
-
-  &[data-icon='volume_up'] {
-    @apply before:btu-icon-volume-2;
-  }
-
-  &[data-icon='slideshow'] {
-    @apply before:btu-icon-film;
-  }
-
-  &[data-icon='insert_photo'] {
-    @apply before:btu-icon-file-image;
-  }
-
-  &[data-icon='live_tv'] {
-    @apply before:btu-icon-tv-minimal-play;
-  }
-
-  &[data-icon='theaters'] {
-    @apply before:btu-icon-clapperboard;
-  }
-
-  &[data-icon='picture'] {
-    @apply before:btu-icon-image-up;
-  }
-
-  &[data-icon='rate_review'] {
-    @apply before:btu-icon-square-pen;
-  }
-
-  &[data-icon='import_contacts'] {
-    @apply before:btu-icon-book;
-  }
-
-  &[data-icon='toc'] {
-    @apply before:btu-icon-notebook-tabs;
-  }
-
-  &[data-icon='notes'] {
-    @apply before:btu-icon-notebook-text;
-  }
-
-  &[data-icon='play'] {
-    @apply before:btu-icon-square-play;
-  }
-
-  &[data-icon='assessment'] {
-    @apply before:btu-icon-file-chart-pie;
-  }
-
-  &[data-icon='person'] {
-    @apply before:btu-icon-user-pen;
-  }
-
-  &[data-icon='handshake'] {
-    @apply before:btu-icon-handshake;
-  }
-
-  &[data-icon='ballot'] {
-    @apply before:btu-icon-shield-question;
-  }
-
-  &[data-icon='class'] {
-    @apply before:btu-icon-book-type;
-  }
-
-  &[data-icon='description'] {
-    @apply before:btu-icon-file-text;
-  }
-
-  &[data-icon='menu_book'] {
-    @apply before:btu-icon-book-marked;
-  }
-
-  &[data-icon='question_answer'] {
-    @apply before:btu-icon-pencil-line;
-  }
-
-  &[data-icon='school'] {
-    @apply before:btu-icon-badge-info;
-  }
-
-  &[data-icon='auto_stories'] {
-    @apply before:btu-icon-book;
-  }
-
-  &[data-icon='view_compact'] {
-    @apply before:btu-icon-layout-panel-top;
-  }
-
-  &[data-icon='grid_on'] {
-    @apply before:btu-icon-file-spreadsheet;
-  }
-
-  &[data-icon='create_new_folder'] {
-    @apply before:btu-icon-boxes;
-  }
-
-  &[data-icon='feed'] {
-    @apply before:btu-icon-scroll-text;
-  }
-
-  &[data-icon='local_offer'] {
-    @apply before:btu-icon-tag;
-  }
-
-  &[data-icon='home'] {
-    @apply before:btu-icon-house;
-  }
-
-  &[data-icon='slow_motion_video'] {
-    @apply before:btu-icon-list-video;
-  }
-}
-
-.rte2-toolbar-noicon:not([class=' rte2-toolbar-noicon']) {
-  @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs;
-}
-
-[data-rte-style='com-psddev-indesign-TextStyleRangeRichTextElement'],
-[data-rte-style='com-psddev-indesign-TextStyleRangeRichTextElement'],
-[data-rte-style='com-psddev-indesign-ReturnCharacterRichTextElement'],
-[data-rte-style='com-psddev-indesign-ReturnCharacterRichTextElement'],
-[data-rte-style='com-psddev-indesign-UnicodeRichTextElement'] {
-  @apply !hidden;
-}