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

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

@@ -0,0 +1,821 @@
+@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);
+    }
+  }
+}