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

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/menubar/views/MenuView.less

@@ -1,821 +0,0 @@
-@import (reference) url('../../../../IconButton.less');
-@import (reference) url('../../../../Icon.less');
-@import (reference) url('../../../../Link.less');
-@import (reference) url('../../../../Text.less');
-@import (reference) url('../../../../Reset.less');
-
-:root {
-  --ProseMirror-toolbar-h: calc(
-    var(--gap-xs) * 2 + var(--Icon-size) + calc(var(--gap-xs) * 2) + 2px
-  );
-}
-
-/* Temp placeholder button */
-.ProseMirrorToolbar .overflow-placeholder {
-  width: calc(var(--gap-s) + var(--Icon-size));
-}
-
-/* Overflow button */
-.ProseMirrorToolbar .rte2-toolbar-submenu-2.rte-overflow-btn {
-  z-index: 2;
-
-  > button {
-    .IconButton;
-
-    --IconButton-name: '';
-
-    height: calc(var(--gap-s) + var(--Icon-size));
-    padding: 0;
-    width: calc(var(--gap-s) + var(--Icon-size));
-
-    &::before {
-      padding: 0;
-    }
-
-    &::after {
-      content: none;
-    }
-  }
-}
-
-.rte2-toolbar-submenu-2-items.overflow-items {
-  li:not(.separator) {
-    a {
-      align-items: center;
-      display: flex;
-      font-size: var(--fontSize-s);
-      font-weight: normal;
-      gap: var(--gap-m);
-      line-height: var(--lineHeight-m);
-      padding: var(--gap-s) var(--gap-m);
-
-      /* inset focus ring so it's not clipped by the overflow */
-      &:focus-visible {
-        box-shadow:
-          0 0 2px var(--color-white),
-          inset 0 0 0 2px var(--color-dominant5);
-      }
-
-      /* keyboard shortcut string */
-      .shortcut {
-        .Text.is-xs;
-
-        display: none;
-        flex: 1 0 max-content;
-        text-align: right;
-      }
-    }
-  }
-
-  li.separator {
-    display: grid;
-    place-items: center;
-  }
-
-  li.separator::before {
-    background: var(--color-gray3);
-    content: '';
-    height: 1px;
-    width: 100%;
-  }
-
-  li.separator:last-child {
-    display: none; /* hide when separator is the last item in the list */
-  }
-
-  /* Add a border between items with submenus */
-  li:has(> ul.overflow-submenu),
-  li:has(+ li ul) {
-    border-bottom: solid 1px var(--color-gray3);
-  }
-
-  /* Remove border from item with submenu when its followed by a separator */
-  > li:has(ul):has(+ .separator) {
-    border-bottom: none;
-  }
-
-  li:not(:has(> ul.overflow-submenu)) {
-    cursor: pointer;
-  }
-
-  li > ul {
-    font-size: var(--fontSize-xs);
-    font-weight: 600;
-    line-height: var(--lineHeight-s);
-    text-transform: uppercase;
-  }
-
-  /* Omit pseudo elements for items with no icon so they don't shift layout. */
-  .ProseMirrorToolbar-action a[data-icon=''] {
-    &::before {
-      content: none;
-    }
-  }
-}
-
-.overflow-submenu {
-  color: var(--color-gray7);
-  padding: var(--gap-s) 0 0 var(--gap-m);
-  width: 100%;
-
-  > li {
-    margin-left: calc(var(--gap-m) * -1);
-  }
-}
-
-.ProseMirrorToolbar {
-  --cover-offset-inline: var(--cover-offset-x);
-  --ProseMirror-wordCount: 5em;
-  --ProseMirror-wordCountSpacingWithOneIcon: calc(
-    var(--gap-s) * 2 + var(--Icon-size)
-  );
-  --ProseMirror-wordCountSpacingWithTwoIcons: calc(
-    var(--gap-s) * 4 + var(--Icon-size) * 2
-  );
-  --ProseMirror-wordCountSpacingWithThreeIcons: calc(
-    var(--gap-s) * 8 + var(--Icon-size) * 2
-  );
-
-  background: var(--color-white);
-  border-bottom: 1px solid var(--Input-borderColor);
-  contain: layout style; /* Performance: limits layout recalc scope */
-  display: flex;
-  flex-direction: column;
-  position: sticky;
-  top: calc(var(--lineHeight-s) - 20px);
-  z-index: 9;
-
-  .Icon.is-s;
-  .Text.is-s;
-
-  @keyframes fadeOut {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
-
-  @keyframes moveIn {
-    to {
-      transform: translateX(100%);
-    }
-  }
-
-  // Magic Numbers - Chosen because these settings looked good to the developer (@teckels)
-  @icon-h-spacing: 5;
-  @cluster-mh-spacing: @icon-h-spacing;
-  @cluster-ph-spacing: @icon-h-spacing;
-  @cluster-bar-color: #dddada;
-
-  &-horizontalSubmenu {
-    ul {
-      border-top: 1px solid var(--Input-borderColor);
-      padding: var(--gap-s) 0 var(--gap-s) var(--gap-s);
-      width: 100%;
-
-      .ProseMirrorToolbar-action {
-        padding: 0 var(--gap-s);
-
-        &:first-child {
-          padding-left: 0;
-        }
-
-        &:last-child {
-          border-right: none;
-        }
-
-        .active {
-          &:hover {
-            background-color: var(--color-iconHoverBackground);
-            color: var(--Link-hoverColor);
-          }
-
-          background-color: transparent;
-          color: var(--color-black);
-        }
-      }
-    }
-  }
-
-  [data-rte-style='rte2-toolbar-find'] {
-    background-color: var(--color-white);
-    position: absolute;
-    right: calc(var(--gap-s) * 2 + var(--Icon-size));
-    top: var(--gap-s);
-    z-index: 2;
-  }
-
-  [data-rte-style='rte2-toolbar-ai-inline'] {
-    background-color: var(--color-white);
-    position: absolute;
-    right: var(--gap-s);
-    top: var(--gap-s);
-    z-index: 2;
-  }
-
-  &[data-sidebar-icon-count='2'] [data-rte-style='rte2-toolbar-ai-inline'] {
-    right: calc(var(--gap-s) * 2 + var(--Icon-size));
-  }
-
-  &[data-sidebar-icon-count='3'] [data-rte-style='rte2-toolbar-ai-inline'] {
-    right: calc(var(--gap-s) * 3 + var(--Icon-size) * 2);
-  }
-
-  [data-rte-style='rte2-toolbar-fullscreen'] {
-    background-color: var(--color-white);
-    position: absolute;
-    right: var(--gap-s);
-    top: var(--gap-s);
-    z-index: 2;
-  }
-
-  .is-htmlMode & {
-    /* hide the overflow cover in html mode */
-    ul::after {
-      visibility: hidden;
-    }
-
-    &-action,
-    .rte2-toolbar-separator,
-    .rte2-toolbar-submenu-2 {
-      display: none;
-    }
-
-    [data-rte-style='rte2-toolbar-togglemode'] {
-      display: inline-block;
-    }
-  }
-
-  .Submenu {
-    &.has-icon {
-      > button,
-      > span {
-        .Icon;
-
-        color: var(--color-black);
-        display: block;
-        height: calc(var(--gap-s) + var(--Icon-size));
-        line-height: var(--Icon-size);
-        overflow: hidden;
-        padding: calc(var(--gap-s) / 2);
-        position: relative;
-        text-decoration: none !important;
-        top: 0;
-        width: calc(var(--gap-l) + var(--Icon-size));
-
-        &::before {
-          padding-bottom: 100px;
-        }
-      }
-    }
-
-    .has-no-text {
-      .rte2-toolbar-submenu-2-heading {
-        display: none;
-      }
-    }
-
-    .has-no-icon-no-text {
-      .rte2-toolbar-submenu-2-heading-icon {
-        padding-right: 0;
-      }
-
-      .rte2-toolbar-submenu-2-heading {
-        display: none;
-      }
-
-      > span::after {
-        pointer-events: all;
-        right: 2px;
-      }
-    }
-  }
-
-  .ProseMirrorContainer:hover & {
-    border-color: var(--Input-focusColor);
-  }
-
-  .ProseMirrorContainer:focus-within & {
-    border-color: var(--Input-focusColor);
-  }
-
-  .clusterStart:not(:first-child) {
-    border-left: 1px solid @cluster-bar-color;
-    margin-left: ~'@{cluster-mh-spacing}px';
-    padding-left: ~'@{cluster-ph-spacing}px';
-  }
-
-  > ul {
-    display: flex;
-    flex-wrap: wrap;
-    height: var(--ProseMirror-toolbar-h);
-    overflow: clip; /* prevents overflow scrolling */
-    padding: var(--gap-s);
-    position: relative;
-    width: 100%;
-
-    /* overflow cover with pseudo overflow button */
-    &::after {
-      .Icon;
-
-      align-items: center;
-      background: var(--color-white);
-      content: 'more_horiz';
-      display: grid;
-      height: calc(var(--gap-s) + var(--Icon-size));
-      inset: 0;
-      opacity: 1;
-      overflow: hidden;
-      position: absolute;
-      text-indent: var(--gap-xs); /* center the icon */
-      top: var(--gap-s);
-      transform: translateX(var(--cover-offset-inline, 100%));
-      transition: transform ease var(--time-xs);
-      z-index: 1;
-    }
-
-    [dir='rtl'] &::after {
-      transform: translateX(calc(var(--cover-offset-inline, 100%) * -1));
-    }
-
-    &.coverIntro {
-      &::after {
-        transition-duration: 0ms;
-      }
-    }
-
-    &.coverOutro {
-      &::after {
-        animation:
-          fadeOut var(--time-xs) ease forwards,
-          moveOut 0ms forwards var(--time-xs);
-        transition-delay: var(--time-xs);
-      }
-    }
-  }
-
-  > ul > li {
-    margin-bottom: var(
-      --gap-m
-    ); /* unwanted wrapped item UI will not show up with this extra vertical space */
-  }
-
-  /* Make overflowed items in-accessible */
-  .rte-overflow-btn
-    ~ li:not(
-      [data-rte-style='rte2-toolbar-fullscreen'],
-      [data-rte-style='rte2-toolbar-find'],
-      [data-rte-style='rte2-toolbar-ai-inline']
-    ) {
-    pointer-events: none;
-  }
-
-  .rte2-toolbar-submenu-horizontal {
-    display: none;
-  }
-
-  .rte2-toolbar-separator {
-    background: var(--color-gray4);
-    height: calc(var(--Icon-size) - 2px);
-    margin: calc(var(--gap-s) / 2 + 1px) var(--gap-s);
-    width: 1px;
-  }
-
-  &-action,
-  .rte2-toolbar-separator {
-    display: inline-block;
-    vertical-align: bottom;
-  }
-
-  &-action {
-    z-index: 1;
-
-    > a {
-      color: var(--color-black);
-      display: block;
-      padding: calc(var(--gap-s) / 2);
-      text-decoration: none !important;
-
-      &.active {
-        background: var(--color-gray3);
-      }
-
-      &.active.rte2-toolbar-track-changes {
-        background: transparent;
-
-        &:hover {
-          background-color: var(--color-iconHoverBackground);
-          color: var(--Link-hoverColor);
-        }
-      }
-
-      &[data-icon] {
-        height: calc(var(--gap-s) + var(--Icon-size));
-        overflow: hidden;
-        width: calc(var(--gap-s) + var(--Icon-size));
-
-        &::before {
-          .Icon;
-
-          content: attr(data-icon);
-          top: 0;
-        }
-      }
-
-      &[data-icon='toggle_off'],
-      &.rte2-toolbar-track-ai[data-icon],
-      &.rte2-toolbar-track-changes[data-icon],
-      &.rte2-toolbar-track-changes-show-final {
-        &:hover::before {
-          opacity: 1;
-        }
-
-        &::before {
-          @icon-disabled-state-fade: 0.5;
-
-          opacity: @icon-disabled-state-fade;
-        }
-      }
-
-      &.active.rte2-toolbar-track-changes[data-icon],
-      &.active.rte2-toolbar-track-changes-show-final {
-        &::before {
-          opacity: 1;
-        }
-      }
-
-      &.outOfContext {
-        text-decoration-line: line-through !important;
-      }
-    }
-
-    &:hover {
-      a {
-        background-color: var(--color-iconHoverBackground);
-        color: var(--Link-hoverColor);
-      }
-    }
-
-    &.disabled {
-      a {
-        @icon-disabled-state-fade: 0.5;
-
-        opacity: @icon-disabled-state-fade;
-        pointer-events: none;
-      }
-    }
-
-    &.disabled:hover {
-      a {
-        background: transparent;
-        color: var(--color-black);
-      }
-    }
-  }
-
-  .rte2-toolbar-noicon,
-  .rte2-toolbar-custom {
-    display: inline-block;
-    margin-top: 1px;
-    text-transform: capitalize;
-    vertical-align: text-top;
-  }
-
-  /** The following are menu items that display both text and an icon **/
-  .ProseMirrorToolbar-action > a.rte2-toolbar-track-changes[data-icon],
-  .ProseMirrorToolbar-action > a.rte2-toolbar-track-changes-accept[data-icon],
-  .ProseMirrorToolbar-action > a.rte2-toolbar-track-changes-reject[data-icon],
-  .ProseMirrorToolbar-action
-    > a.rte2-toolbar-track-changes-accept-all[data-icon],
-  .ProseMirrorToolbar-action
-    > a.rte2-toolbar-track-changes-reject-all[data-icon],
-  .ProseMirrorToolbar-action
-    > a.rte2-toolbar-track-changes-show-final[data-icon] {
-    width: auto;
-
-    &::before {
-      padding-right: 0;
-    }
-  }
-
-  [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'] {
-    display: none !important;
-  }
-
-  // Visually hide the upload button so that drag-n-drop uploading remains functional.
-  [data-rte-style='RichTextEditor-upload'] {
-    border: 0;
-    margin: -1px;
-    padding: 0;
-  }
-
-  .rte2-toolbar-submenu-2 {
-    cursor: pointer;
-    display: inline-block;
-    position: relative;
-    vertical-align: bottom;
-
-    &:hover,
-    &.is-open {
-      background: var(--color-iconHoverBackground);
-      color: var(--Link-hoverColor);
-    }
-
-    &.is-open > span::after,
-    &.is-open > button::after {
-      transform: rotate(-180deg);
-    }
-  }
-
-  .rte2-toolbar-submenu-2 {
-    height: calc(var(--gap-s) + var(--Icon-size));
-
-    .rte-toolbar-submenu-icon {
-      display: block;
-      line-height: var(--Icon-size);
-      position: relative;
-
-      &[data-icon] {
-        .Icon;
-
-        overflow: hidden;
-        position: relative;
-        width: var(--Icon-size);
-
-        &::before {
-          content: attr(data-icon);
-        }
-      }
-    }
-
-    &.disabled {
-      @icon-disabled-state-fade: 0.5;
-
-      opacity: @icon-disabled-state-fade;
-      pointer-events: none;
-    }
-
-    &.active {
-      background: var(--color-gray3);
-    }
-
-    &.active.rte-overflow-btn {
-      background: transparent;
-    }
-
-    > span,
-    > button {
-      display: block;
-      padding: calc(var(--gap-s) / 2);
-      position: relative;
-    }
-
-    button[type='button'] {
-      color: var(--color-black);
-    }
-
-    > span::after,
-    > button::after {
-      .Icon;
-
-      content: 'arrow_drop_down';
-      pointer-events: none;
-      right: calc(var(--gap-s) / 2);
-      top: calc(50% - var(--Icon-size) / 2);
-      transition: transform var(--time-xs);
-    }
-  }
-
-  [data-rte-toolbar-submenu='Style'] {
-    .ProseMirrorToolbar.Submenu.has-no-icon-no-text;
-  }
-
-  [data-rte-toolbar-submenu='Align'] {
-    .ProseMirrorToolbar.Submenu.has-no-text;
-    .ProseMirrorToolbar.Submenu.has-icon;
-
-    > span,
-    > button {
-      &::before {
-        content: 'format_align_left';
-      }
-    }
-  }
-
-  [data-rte-toolbar-submenu='Enhancements'] {
-    .ProseMirrorToolbar.Submenu.has-no-text;
-    .ProseMirrorToolbar.Submenu.has-icon;
-
-    > span,
-    > button {
-      &::before {
-        content: 'photo';
-      }
-    }
-  }
-}
-
-.ProseMirrorToolbar {
-  container: rte-toolbar / inline-size;
-
-  > ul {
-    padding-right: calc(
-      var(--ProseMirror-wordCount) + var(--gap-s) * 4 + var(--Icon-size) * 2
-    );
-  }
-
-  .CIG-wordCount {
-    background-color: var(--color-white);
-    bottom: auto;
-    line-height: var(--Icon-size);
-    opacity: 1;
-    padding: calc(var(--gap-s) / 2);
-    top: var(--gap-s);
-    visibility: hidden;
-    z-index: 10;
-  }
-
-  /* Zero out the word count space when the container is narrower than 300px */
-  @container rte-toolbar (max-width: 299px) {
-    > ul {
-      --ProseMirror-wordCount: 0px;
-    }
-  }
-
-  /* Word count will be visible when the container is wider than 300px */
-  @container rte-toolbar (min-width: 300px) {
-    .CIG-wordCount {
-      visibility: visible;
-    }
-  }
-}
-
-@media (@mq-m) {
-  .rte2-toolbar-submenu-2-items.overflow-items {
-    li:not(.separator) {
-      /* show shortcut text on larger viewports */
-      a .shortcut {
-        display: inline-block;
-      }
-    }
-  }
-}
-
-@media (@mq-l) {
-  .ProseMirrorToolbar {
-    overflow-x: visible;
-    overflow-y: visible;
-    white-space: normal;
-
-    > ul {
-      padding-right: calc(
-        var(--ProseMirror-wordCount) + var(--gap-s) * 4 + var(--Icon-size) * 2
-      );
-    }
-
-    .is-htmlMode & {
-      &-action,
-      .rte2-toolbar-separator {
-        display: none;
-      }
-    }
-
-    .rte2-toolbar-track-changes-accept {
-      &::before {
-        content: 'check';
-      }
-    }
-
-    .rte2-toolbar-track-changes-reject {
-      &::before {
-        content: 'close';
-      }
-    }
-
-    .rte2-toolbar-track-changes-show-final {
-      &::before {
-        content: 'remove_red_eye';
-      }
-    }
-  }
-}
-
-// Closed submenus
-.rte2-toolbar-submenu-2 > .rte2-toolbar-submenu-2-items {
-  display: none;
-}
-
-// Open submenus
-body > .rte2-toolbar-submenu-2-items {
-  --Link-color: var(--color-black);
-  --Link-hoverColor: var(--color-black);
-  --Link-hoverDecoration: none;
-
-  background: var(--color-white);
-  box-shadow: var(--shadow-3);
-  max-width: 45vh;
-  opacity: 0;
-  overflow-y: scroll;
-  padding: var(--gap-s) 0;
-  position: fixed;
-  transform: scaleY(0);
-  transform-origin: top;
-  transition:
-    opacity var(--time-xs) var(--ease-in),
-    transform var(--time-s) var(--ease-out);
-  z-index: 200000;
-
-  &.is-opening:not(.is-removing) {
-    opacity: 1;
-    transform: none;
-  }
-
-  &[data-tether-rx='r'] {
-    right: calc(100vw - var(--Tether-rl) - var(--Tether-rw)) /*rtl:ignore*/;
-  }
-
-  &[data-tether-rx='l'] {
-    left: var(--Tether-rl) /*rtl:ignore*/;
-  }
-
-  &[data-tether-ry='b'] {
-    bottom: calc(100vh - var(--Tether-rt));
-    max-height: calc(
-      var(--Tether-rt) - var(--Page-headerHeight) - var(--gap-s)
-    );
-    transform-origin: bottom;
-  }
-
-  &[data-tether-ry='t'] {
-    max-height: calc(
-      100vh - var(--Tether-rt) - var(--Tether-rh) - var(--gap-s) * 2
-    );
-    top: calc(var(--Tether-rt) + var(--Tether-rh));
-    transform-origin: top;
-  }
-
-  li:not(:has(> ul)) {
-    background-color: transparent;
-    display: block;
-    font-size: inherit;
-    padding: 0;
-    text-align: left;
-    text-transform: none;
-
-    &.ProseMirrorToolbar-action a {
-      display: flex;
-      height: auto;
-      padding: var(--gap-s) var(--gap-m);
-      width: 100%;
-
-      &::before {
-        margin-right: var(--gap-s);
-      }
-    }
-
-    &:not(.disabled) {
-      &.active {
-        a {
-          background-color: var(--color-dominant3);
-        }
-      }
-
-      &.focus,
-      &:hover,
-      &:focus {
-        a {
-          background-color: var(--color-dominant1);
-          color: var(--Link-color);
-        }
-      }
-    }
-
-    a.active {
-      background-color: var(--color-dominant3);
-      color: var(--Link-color);
-    }
-  }
-
-  li:has(> ul) .ProseMirrorToolbar-action a::before {
-    margin-right: 0;
-  }
-
-  &:hover > li:focus-visible {
-    box-shadow: none;
-  }
-
-  &:hover > li:not(:hover) {
-    background: var(--color-white);
-
-    a {
-      background: var(--color-white);
-    }
-  }
-}