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

package/src/legacy/tool-ui/src/main/webapp/v4/ContentEdit.less

@@ -0,0 +1,1512 @@
+@import (reference) url('./Dropdown.less');
+
+.Page-content,
+.Popup {
+  --ContentEdit-toolbarWidth: calc(
+    var(--Icon-size) + var(--gap-m) * 2 + var(--gap-s) * 2
+  );
+  --ContentEdit-toolbarHeight: calc(
+    var(--gap-m) * 2 + var(--Icon-size) + var(--gap-s) * 2
+  );
+  --ContentEdit-workstreamHeight: 0px;
+  --ContentEdit-barTop: calc(
+    var(--Page-headerBottom) + var(--ContentEdit-workstreamHeight)
+  );
+  --ContentEdit-barHeight: calc(
+    var(--gap-m) * 2 + var(--lineHeight-xl) + var(--ContentEdit-barBorderHeight)
+  );
+  --ContentEdit-barBorderHeight: 4px;
+  --ContentEdit-height: calc(
+    100dvh - var(--ContentEdit-workstreamHeight) - var(--ContentEdit-barHeight)
+  );
+  --ContentEdit-previewWidth: 100vw;
+
+  &.is-workstream {
+    --ContentEdit-workstreamHeight: calc(
+      var(--gap-m) * 2 + var(--lineHeight-m)
+    );
+  }
+
+  .is-asideHidden {
+    .ContentEdit-preview {
+      left: 0;
+      position: absolute;
+      top: calc(var(--ContentEdit-barHeight));
+      width: 100%;
+    }
+
+    .ContentEdit-right.is-visible {
+      display: none;
+    }
+  }
+}
+
+.Page.is-alertBroadcasting .Page-content .ContentEdit {
+  --ContentEdit-height: calc(
+    100dvh - var(--ContentEdit-workstreamHeight) - var(--ContentEdit-barHeight) -
+      var(--Page-broadcastHeight)
+  );
+}
+
+.Popup {
+  --ContentEdit-barTop: calc(
+    var(--Page-headerBottom) + var(--ContentEdit-workstreamHeight) +
+      var(--gap-m) * 2 + var(--lineHeight-m)
+  );
+
+  .ContentEdit {
+    height: calc(
+      100vh - var(--ContentEdit-barTop) - var(--ContentEdit-barBorderHeight)
+    );
+
+    &.is-inGrid {
+      height: unset;
+      margin: 0;
+    }
+  }
+
+  .Widget .ContentEdit:not(.is-inGrid) {
+    margin: calc(0px - var(--gap-l));
+  }
+}
+
+// Live Blog
+.objectId-edit-heading {
+  .Popup-heading;
+}
+
+.popup-objectId-edit-heading {
+  display: block;
+  overflow: hidden;
+  padding: var(--gap-m) calc(var(--gap-l) * 2 + var(--Icon-size)) var(--gap-m)
+    var(--gap-l);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ContentEdit {
+  background: var(--color-white);
+  display: grid;
+  grid-template:
+    'left' 1fr
+    'toolbar' auto ~'/'
+    minmax(0, 1fr);
+  height: var(--ContentEdit-height);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-top: calc(
+    var(--ContentEdit-workstreamHeight) + var(--ContentEdit-barHeight)
+  );
+
+  &.is-live {
+    --Revision-revisionColor: var(--color-green5);
+    --Revision-revisionActiveColor: var(--color-green6);
+    --Revision-revisionTextColor: var(--color-black);
+    --Revision-revisionBackgroundColor: var(--color-green1);
+  }
+
+  &.is-archived {
+    --Revision-revisionColor: var(--color-red6);
+    --Revision-revisionActiveColor: var(--color-red6);
+    --Revision-revisionTextColor: var(--color-white);
+    --Revision-revisionBackgroundColor: var(--color-red3);
+  }
+
+  &.is-updated {
+    --Revision-revisionColor: var(--color-green3);
+    --Revision-revisionActiveColor: var(--color-green4);
+    --Revision-revisionTextColor: var(--color-black);
+    --Revision-revisionBackgroundColor: var(--color-green1);
+  }
+
+  &.is-draft,
+  &.is-draft.is-workflow,
+  &.is-scheduled {
+    --Revision-revisionColor: var(--color-yellow3);
+    --Revision-revisionActiveColor: var(--color-yellow4);
+    --Revision-revisionTextColor: var(--color-black);
+    --Revision-revisionBackgroundColor: var(--color-yellow1);
+  }
+
+  &.is-workflow {
+    --Revision-revisionColor: var(--color-gray6);
+    --Revision-revisionActiveColor: var(--color-gray7);
+    --Revision-revisionTextColor: var(--color-black);
+    --Revision-revisionBackgroundColor: var(--color-gray3);
+  }
+
+  &:has(.ContentEdit-right.is-visible .ContentEditDrawer-widget)
+    .ContentEdit-left {
+    margin-bottom: calc(
+      var(--gap-l) * 7 + calc(var(--ContentEdit-toolbarHeight))
+    );
+  }
+
+  @keyframes scaleAndSpin {
+    from {
+      transform: scale(1.1) rotate(0deg);
+    }
+
+    to {
+      transform: scale(1.1) rotate(360deg);
+    }
+  }
+}
+
+.ContentEdit-toolbar {
+  background: var(--color-white);
+  border: 1px solid var(--color-gray2);
+  border-width: 1px 0 0;
+  display: flex;
+  flex-wrap: nowrap;
+  grid-area: toolbar;
+  justify-content: space-evenly;
+  padding: var(--gap-m);
+  width: auto;
+  z-index: 11;
+
+  button.is-active {
+    .IconButton.is-focus;
+
+    &:hover,
+    &:focus {
+      --IconButton-name: 'close';
+    }
+  }
+
+  button.is-error {
+    border: 1px solid var(--color-red6);
+    border-radius: 50%;
+    color: var(--color-red6);
+  }
+}
+
+.ContentEdit-right {
+  --ContentEdit-titleHeight: calc(var(--gap-s) * 4 + var(--iconSize-s));
+
+  background: var(--color-white);
+  bottom: var(--ContentEdit-toolbarHeight);
+  display: none;
+  grid-area: right;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: calc(var(--ContentEdit-barTop) + var(--ContentEdit-barHeight));
+  width: 100dvw;
+  z-index: 10;
+
+  &:has(.ContentEditDrawer-widget) {
+    top: auto;
+  }
+
+  &[data-right-tab='chat_bubble'] {
+    --contentRight-width: 360px;
+
+    > .frame.loaded {
+      height: calc(
+        100% - var(--ContentEdit-titleHeight) - var(--borderWidth-thin)
+      );
+
+      .Widget {
+        height: 100%;
+        padding: 0;
+      }
+    }
+  }
+
+  // newPost container should be max half the height of conversations widget
+  .Conversation-newPost {
+    .CIG-small {
+      .ProseMirror {
+        max-height: calc(
+          ((var(--ContentEdit-height) - var(--ContentEdit-barHeight)) / 2) -
+            var(--ProseMirror-toolbar-h) - (var(--Widget-padding) * 2) -
+            var(--gap-l)
+        );
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .ContentEdit-right-top {
+    position: sticky;
+    top: 0;
+    z-index: 11;
+  }
+
+  .Widget-title {
+    top: var(--ContentEdit-titleHeight);
+  }
+}
+
+.ContentEdit-right-top {
+  align-items: center;
+  background: var(--color-gray2);
+  border-bottom: 1px solid var(--color-gray3);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--gap-s) var(--gap-l);
+  padding-right: calc(var(--gap-l) - var(--gap-s));
+
+  > .ContentEdit-right-title {
+    .Text.is-m;
+
+    font-weight: bold;
+    text-transform: capitalize;
+  }
+
+  > .ContentEdit-right-close {
+    --Icon-size: var(--iconSize-s);
+  }
+}
+
+.ContentEdit-right.is-visible {
+  display: block;
+}
+
+.ContentEdit-workstream {
+  .Link.is-white;
+
+  align-items: center;
+  background: var(--color-gray6);
+  color: var(--color-white);
+  display: flex;
+  height: var(--ContentEdit-workstreamHeight);
+  left: 0;
+  padding: 0 var(--gap-l);
+  position: fixed;
+  right: 0;
+  top: var(--Page-headerBottom);
+
+  a {
+    text-decoration: underline;
+  }
+}
+
+.ContentEdit-workstreamProgress {
+  --RPB-size: var(--iconSize-m);
+
+  min-height: var(--Text-height);
+  order: -1;
+  padding-left: var(--RPB-size);
+  position: relative;
+
+  .RPB {
+    display: inline-block;
+    left: 0;
+    position: absolute;
+    top: calc((var(--Text-height) - var(--RPB-size)) / 2);
+
+    .RPB-bg {
+      stroke: var(--color-gray5);
+    }
+
+    .RPB-fg {
+      stroke: var(--color-gray2);
+    }
+  }
+}
+
+.ContentEdit-workstreamProgressText {
+  display: none;
+}
+
+.ContentEdit-workstreamMessage {
+  margin-left: var(--gap-s);
+  max-width: calc(100% - 100px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ContentEdit-workstreamActions {
+  flex: auto;
+  text-align: right;
+
+  > * {
+    display: inline-block;
+  }
+}
+
+.ContentEdit-workstreamSkip,
+.ContentEdit-workstreamStop {
+  margin-left: var(--gap-l);
+}
+
+.ContentEdit-bar {
+  align-items: center;
+  background: linear-gradient(
+    to right,
+    rgb(255 255 255 / 0%),
+    var(--color-gray2) var(--gap-xl)
+  );
+  display: grid;
+  grid-area: bar;
+  grid-auto-flow: column;
+  grid-gap: var(--gap-m);
+  height: calc(
+    var(--ContentEdit-barHeight) - var(--ContentEdit-barBorderHeight)
+  );
+  justify-content: flex-end;
+  padding: 0 calc(var(--gap-l) - var(--gap-s)) 0
+    calc(var(--gap-xl) + var(--gap-l));
+  position: fixed;
+  right: 0;
+  top: var(--ContentEdit-barTop);
+  white-space: nowrap;
+  z-index: 300;
+
+  .ContentEdit-publish {
+    background-color: transparent;
+    box-shadow: none;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-rows: auto;
+    grid-gap: var(--gap-m);
+    justify-items: end;
+    padding-top: 0;
+
+    .ContentEdit-publishButton {
+      .Button.is-green;
+      .Text.is-m;
+    }
+  }
+
+  > .icon-action-publish {
+    align-items: center;
+    display: flex;
+    flex-direction: row-reverse;
+    order: -1;
+    position: relative;
+
+    .WorkInProgressSaveStatus {
+      .Link.is-gray;
+
+      display: none;
+      margin-right: var(--gap-l);
+      opacity: 1;
+
+      &[data-status='deleted'] {
+        pointer-events: none;
+      }
+
+      @media (@mq-s) {
+        display: inherit;
+      }
+    }
+  }
+
+  button[name='action-trash'] {
+    .Link.is-red;
+  }
+}
+
+.ContentEdit-overlay {
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  margin-right: var(--gap-l);
+  padding: 0 calc(var(--gap-xs) + var(--Icon-size)) 0 0;
+  text-transform: none;
+  vertical-align: baseline;
+
+  &:hover {
+    color: inherit;
+  }
+
+  &::after {
+    .Icon;
+
+    content: 'arrow_drop_down';
+    position: absolute;
+    right: 0;
+    top: calc(50% - var(--Icon-size) / 2);
+  }
+}
+
+.ContentEdit-controlsToggle {
+  .IconButton;
+
+  --IconButton-name: 'more_horiz';
+}
+
+.ContentEdit-overlayList,
+.ContentEdit-controlsList {
+  .Dropdown;
+
+  max-width: 100vw;
+  overflow-y: auto;
+  z-index: 400;
+
+  &[data-tether-ry='t'] {
+    top: calc(
+      var(--Tether-rt) + var(--Tether-rh) + var(--gap-s) +
+        var(--Dropdown-markerSize)
+    );
+  }
+
+  .is-locked & {
+    .icon-action-delete,
+    .icon-object-draft,
+    .icon-action-save,
+    .icon-action-trash,
+    .widget-publishing-tools {
+      display: none;
+    }
+  }
+}
+
+.ContentEdit-overlayList a {
+  .Dropdown-item;
+}
+
+.ContentEdit-controlsList [role='menuitem'] {
+  .Dropdown-item;
+}
+
+.ContentEdit-overlayList.is-open,
+.ContentEdit-controls.is-open .ContentEdit-controlsList {
+  .Dropdown.is-open;
+}
+
+.ContentEdit-controls.is-open {
+  .ContentEdit-controlsToggle {
+    &:hover,
+    &:focus {
+      --IconButton-name: 'close';
+    }
+  }
+}
+
+.ContentEdit-revisionInfo {
+  .Text.is-m;
+
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  font-weight: bold;
+  margin: 0;
+
+  > span {
+    overflow-wrap: anywhere;
+  }
+
+  > :not(:last-child) {
+    .ContentEdit-revisionIcon::after {
+      content: '\22C5';
+      padding: 0 var(--gap-xs);
+    }
+  }
+
+  > :last-child {
+    .ContentEdit-revisionIcon::after {
+      display: none;
+    }
+  }
+}
+
+.ContentEdit-revisionMarker {
+  background-color: var(--Revision-revisionColor);
+  border-radius: 50%;
+  display: inline-block;
+  height: var(--Icon-size);
+  margin-right: var(--gap-s);
+  min-height: var(--Icon-size);
+  min-width: var(--Icon-size);
+  width: var(--Icon-size);
+}
+
+.ContentEdit-revisionActions {
+  > a {
+    white-space: nowrap;
+  }
+
+  > a:not(:first-child) {
+    margin-left: var(--gap-l);
+  }
+}
+
+.ContentEdit-workflowToggle,
+.ContentEdit-restoreToggle {
+  .Button;
+  .Button.is-dominant;
+  .Text.is-m;
+
+  &::after {
+    .Icon;
+
+    content: 'arrow_drop_down';
+    transition: transform var(--time-xs);
+  }
+
+  &.is-open {
+    &::after {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.ContentEdit-workflowWrapper {
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .CIG-label {
+    display: none;
+  }
+
+  .CIG-small {
+    margin-top: 0;
+  }
+}
+
+.ContentEdit-workflow,
+.ContentEdit-restore {
+  --Popup-gap: var(--gap-l);
+
+  background: var(--color-white);
+  box-shadow: var(--shadow-3);
+  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: 400;
+
+  &[data-tether-rx='l'],
+  &[data-tether-rx='r'] {
+    left: var(--Popup-gap) /*rtl:ignore*/;
+    right: var(--Popup-gap) /*rtl:ignore*/;
+
+    &::before {
+      left: auto;
+      right: calc(var(--gap-s) * 2 + var(--Icon-size) * 1.5 + var(--gap-m) * 2);
+    }
+  }
+
+  &[data-tether-ry='t'] {
+    --Popup-maxHeight: calc(
+      100vh - var(--Tether-rt) - var(--Tether-rh) - var(--Popup-gap)
+    );
+
+    bottom: auto;
+    max-height: var(--Popup-maxHeight);
+    top: calc(var(--Tether-rt) + var(--Tether-rh));
+    transform-origin: top;
+
+    &::before {
+      border-color: transparent transparent var(--color-gray1) transparent;
+      top: 0;
+    }
+
+    .ContentEdit-workflowWrapper {
+      max-height: calc(
+        var(--Popup-maxHeight) - (4 * var(--gap-l) - 2 * var(--gap-m)) - 2 *
+          var(--gap-s) - 2px - var(--lineHeight-l)
+      );
+    }
+  }
+
+  &[data-tether-ry='b'] {
+    --Popup-maxHeight: calc(
+      var(--Tether-rt) - var(--Page-headerBottom) - var(--Popup-gap)
+    );
+
+    bottom: calc(100vh - var(--Tether-rt));
+    max-height: var(--Popup-maxHeight);
+    top: auto;
+    transform-origin: bottom;
+
+    &::before {
+      border-color: var(--color-gray1) transparent transparent transparent;
+      bottom: 0;
+    }
+
+    .ContentEdit-workflowWrapper {
+      max-height: calc(
+        var(--Popup-maxHeight) - (4 * var(--gap-l) - 2 * var(--gap-m)) - 2 *
+          var(--gap-s) - 2px - var(--lineHeight-l)
+      );
+    }
+  }
+
+  .CIG {
+    --CIG-padding: var(--gap-l);
+
+    margin-left: calc(0px - var(--gap-l));
+    margin-right: calc(0px - var(--gap-l));
+    padding-bottom: 0;
+  }
+
+  .CIG-row {
+    padding-top: var(--gap-m);
+
+    .ComboInput.is-multiple {
+      width: 100%;
+    }
+  }
+
+  .CIG-row:focus-within::after,
+  .CIG-row.state-changed:not(:focus-within)::after,
+  .CIG-row:focus-within > .CIG-wordCount {
+    opacity: 0;
+  }
+
+  .ContentEdit-workflowActions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    margin: var(--gap-l) var(--gap-m) 0 0;
+
+    // "Add a comment" link takes full width, pushing schedule+publish to next row
+    .Conversation-add-comment {
+      flex-basis: 100%;
+      margin-bottom: var(--gap-m);
+    }
+
+    > button:not(.ContentEdit-publishButton) {
+      display: block;
+      white-space: normal;
+      width: 100%;
+
+      &:disabled {
+        opacity: 0.3;
+        pointer-events: none;
+      }
+    }
+
+    .ContentEdit-publishButton {
+      .Button.is-green;
+      .Text.is-m;
+
+      display: inline-block;
+      margin-top: 0;
+      width: auto;
+    }
+
+    .ContentEdit-workflowScheduleLink {
+      display: inline-block;
+      margin-right: var(--gap-s);
+
+      &.is-empty {
+        .IconButton;
+
+        --IconButton-name: 'date_range';
+
+        padding: unset;
+      }
+    }
+
+    &.is-scheduling {
+      .ContentEdit-publishButton {
+        .Button.is-yellow;
+      }
+    }
+  }
+
+  &.is-open {
+    display: block;
+    transform: none;
+  }
+}
+
+.ContentEdit-workflowTitle,
+.ContentEdit-restoreTitle {
+  .Text.is-m;
+
+  background: var(--color-gray1);
+  display: block;
+  font-weight: bold;
+  margin: 0;
+  padding: var(--gap-m) var(--gap-l);
+  text-align: left;
+  white-space: normal;
+}
+
+.ContentEdit-restore > .ContentEdit-restoreWrapper:not(.is-active) {
+  display: none;
+}
+
+.ContentEdit-workflow > .ContentEdit-workflowWrapper:not(.is-active) {
+  display: none;
+}
+
+.ContentEdit-workflowLink {
+  .Link;
+  .Text.is-m;
+
+  display: block;
+  margin: var(--gap-m);
+  text-align: center;
+  width: calc(100% - 2 * var(--gap-m));
+}
+
+.ContentEdit-workflow .ContentEdit-overrideMessage {
+  .Text.is-m;
+
+  display: block;
+  padding: var(--gap-l) var(--gap-l) var(--gap-m) var(--gap-l);
+  text-align: left;
+  white-space: pre-wrap;
+}
+
+.ContentEdit-restoreWrapper {
+  .ContentEdit-restoreBody {
+    min-height: 125px;
+    padding: var(--gap-l);
+
+    .ContentEdit-restoreToDraft {
+      margin-bottom: var(--gap-l);
+    }
+  }
+}
+
+.ContentEdit-workflowWrapper {
+  .ContentEdit-workflowBody {
+    border-bottom: 1px solid var(--color-gray3);
+    min-height: calc(233px + calc(var(--gap-m) + var(--gap-s)));
+    padding-bottom: var(--gap-l);
+  }
+
+  .ContentEdit-publish {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    padding: 0 var(--gap-l);
+
+    .ContentEdit-publishButton {
+      margin: 0 0 0 var(--gap-m);
+    }
+
+    &.is-scheduling > .ContentEdit-publishButton {
+      margin: var(--gap-s) 0 0 var(--gap-m);
+    }
+  }
+}
+
+.ContentEdit-workflow:not(.is-publishOverride) {
+  .ContentEdit-workflowLink {
+    display: none;
+  }
+
+  .ContentEdit-workflowActions {
+    padding: calc(var(--gap-l) - var(--gap-m)) var(--gap-l) var(--gap-l)
+      var(--gap-l);
+  }
+}
+
+.ContentEdit-publish {
+  background-color: var(--color-white);
+  box-shadow: var(--shadow-3);
+  padding-top: var(--gap-l);
+  position: relative;
+  text-align: right;
+
+  > [name='newSchedule'],
+  .ContentEdit-draftUpdate {
+    & + .ComboInput {
+      display: none;
+    }
+  }
+
+  > .ContentEdit-publishButton {
+    .is-locked & {
+      display: none;
+    }
+
+    &[disabled] {
+      opacity: 0.5;
+    }
+
+    .is-save & {
+      .Button.is-dominant;
+    }
+
+    &[disabled] {
+      opacity: 0.5;
+    }
+  }
+
+  &.is-scheduling {
+    > [name='newSchedule'],
+    .ContentEdit-draftUpdate {
+      & + .ComboInput {
+        display: block;
+      }
+    }
+
+    > .ContentEdit-publishButton {
+      .Button.is-yellow;
+    }
+  }
+
+  .DateTimeInput.is-empty {
+    .IconButton;
+
+    --IconButton-name: 'date_range';
+
+    padding: unset;
+  }
+}
+
+.ContentEdit-previewButtonWrapper {
+  height: calc(var(--gap-s) * 2 + var(--Icon-size));
+  position: relative;
+  width: calc(var(--gap-s) * 2 + var(--Icon-size));
+}
+
+.ContentEdit-previewButtonCircle {
+  height: 100%;
+  position: absolute;
+  transform: scale(1);
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    height: 50%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+}
+
+.is-previewing & .ContentEdit-previewButtonWrapper.is-animating {
+  .ContentEdit-previewButtonCircle {
+    animation: scaleAndSpin 600ms linear infinite;
+
+    &::before {
+      background-image: linear-gradient(
+        to right,
+        var(--color-blue5),
+        var(--color-blue4)
+      );
+      border-radius: var(--Icon-size) var(--Icon-size) 0 0;
+    }
+
+    &::after {
+      background-image: linear-gradient(
+        to right,
+        var(--color-blue5),
+        transparent
+      );
+      border-radius: 0 0 var(--Icon-size) var(--Icon-size);
+      top: 50%;
+    }
+  }
+
+  .ContentEdit-previewButton::after {
+    background: var(--color-white);
+    opacity: 1;
+  }
+}
+
+.ContentEdit-previewButton {
+  .IconButton;
+
+  --IconButton-name: 'remove_red_eye';
+
+  position: absolute;
+  z-index: 2;
+
+  &::after {
+    transition: transform var(--time-s) var(--ease-out);
+  }
+
+  .is-previewing & {
+    .IconButton.is-focus;
+
+    &:hover,
+    &:focus {
+      --IconButton-name: 'close';
+    }
+  }
+}
+
+.ContentEdit-saveButton {
+  .IconButton;
+
+  --IconButton-name: 'save';
+
+  text-transform: uppercase;
+
+  &::before {
+    pointer-events: none;
+  }
+}
+
+.ContentEdit-restoreButton {
+  .Button;
+  .Text.is-m;
+
+  background: transparent;
+  width: 100%;
+
+  &.Dropdown-item {
+    font-size: var(--fontSize-s);
+    padding: calc(var(--gap-s) - 1px) var(--gap-m);
+    text-align: center;
+  }
+}
+
+.ContentEdit-left {
+  display: block;
+  grid-area: left;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &.is-openDrawer {
+    padding-bottom: calc(
+      (var(--ContentEdit-height) + var(--ContentEdit-barHeight)) / 2.5
+    );
+  }
+}
+
+.ContentEdit-main {
+  grid-area: main;
+  overflow: clip;
+}
+
+.ContentEdit-title {
+  .Text.is-xl;
+
+  background: var(--color-gray2);
+  border-bottom: var(--ContentEdit-barBorderHeight) solid
+    var(--Revision-revisionColor);
+  left: 0;
+  overflow: hidden;
+  padding: var(--gap-m) var(--gap-l);
+  position: fixed;
+  right: 0;
+  text-overflow: ellipsis;
+  top: var(--ContentEdit-barTop);
+  white-space: nowrap;
+  z-index: 300;
+
+  .ContentLabel > .visibilityLabel {
+    display: none;
+  }
+
+  .ComboInput {
+    margin: calc(0px - var(--gap-s)) var(--gap-l) calc(0px - var(--gap-s)) 0;
+    vertical-align: bottom;
+    width: auto;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .Label {
+    border-radius: 0;
+    font-size: var(--fontSize-m);
+    text-transform: initial;
+  }
+}
+
+.ContentEdit-right {
+  grid-area: right;
+
+  .CIG .ComboInput {
+    width: 100%;
+  }
+
+  .CIG-row {
+    &:focus-within {
+      > .CIG-label {
+        background: inherit;
+      }
+    }
+  }
+}
+
+.is-compactRails {
+  .ContentEdit-right {
+    .Icon.is-s;
+    .Text.is-s;
+
+    .Widget {
+      .CIG-row[data-type='record']:not(.is-unlabeled) > .CIG-large {
+        > .toggleable-form > .CIG,
+        > .CIG {
+          > .CIG-row:only-child {
+            // Hide the shadow when a row is by itself.
+            box-shadow: 0 0 0 2px var(--color-gray1);
+          }
+        }
+      }
+    }
+  }
+}
+
+.ContentEdit-preview {
+  background: var(--color-white);
+  // Accounts for toolbar border height of 1px
+  bottom: calc(var(--ContentEdit-toolbarHeight) + 1px);
+  position: fixed;
+  right: 0;
+  top: calc(var(--ContentEdit-barTop) + var(--ContentEdit-barHeight));
+  transform: translateY(100vh);
+  transition-duration: var(--time-l);
+  transition-property: transform;
+  transition-timing-function: var(--ease-out);
+  z-index: 200;
+
+  &::before {
+    background: var(--color-gray1);
+    content: '';
+    height: 100vh;
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    transition: opacity var(--time-xs);
+    transition-timing-function: ease-out;
+    width: var(--ContentEdit-previewWidth);
+    will-change: opacity;
+    z-index: 1; // layered above the preview frame content to allow for interaction.
+  }
+
+  &::after {
+    content: unset;
+  }
+
+  h1 {
+    display: none;
+  }
+}
+
+.is-previewing {
+  .ContentEdit-preview {
+    display: flex;
+    flex-direction: column;
+    transform: none;
+    width: var(--ContentEdit-previewWidth);
+  }
+
+  .ContentEdit {
+    padding-right: 0;
+  }
+}
+
+.is-dragging .ContentEdit-preview {
+  z-index: 1000000;
+}
+
+.ContentEdit-previewDisplay {
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: relative;
+  width: 100%;
+
+  iframe:not('.Preview-overlayFrame') {
+    background: var(--color-white);
+  }
+
+  iframe {
+    height: 10000px;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    transform-origin: top left;
+    width: var(--ContentEdit-previewFrameWidth, 1920px);
+  }
+}
+
+.ContentEdit-preview {
+  .PreviewFrame-typeDisplay {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    position: relative;
+    width: 100%;
+
+    iframe:not('.Preview-overlayFrame') {
+      background: var(--color-white);
+    }
+
+    iframe {
+      height: var(
+        --PreviewFrame-height,
+        calc(100% / var(--PreviewFrame-scale))
+      );
+      left: 0;
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      transform-origin: top left;
+      width: var(--ContentEdit-previewFrameWidth, 1920px);
+    }
+  }
+}
+
+.ContentEdit-previewControls,
+.ContentEdit-previewTypes {
+  align-items: center;
+  background: var(--color-gray2);
+  border-bottom: 2px solid var(--color-gray3);
+  display: flex;
+  flex-flow: row wrap;
+  flex-shrink: 0;
+  height: auto;
+  padding: var(--gap-s) var(--gap-s) 0;
+
+  .ComboInput {
+    margin-left: var(
+      --gap-s
+    ); // Usese a larger gap to visually space the controls equally from the edges.
+
+    max-width: fit-content;
+
+    &::before {
+      content: none;
+    }
+  }
+
+  .ContentEdit-previewTypesForm {
+    order: -2;
+  }
+
+  .deviceWidthSelect + .ComboInput {
+    flex: 10;
+    order: -2;
+  }
+
+  .DateTimeInput {
+    order: -1;
+  }
+
+  .DateTimeInput.is-empty {
+    .IconButton;
+
+    --IconButton-name: 'date_range';
+
+    padding-top: 0;
+  }
+
+  .action-share {
+    .IconButton;
+
+    --IconButton-name: 'open_in_new';
+
+    margin-left: auto;
+    order: 0;
+  }
+
+  // Hide the controls initially while the preview frame is loading to prevent FOUC.
+  [name^='previewControls'] {
+    opacity: 0;
+  }
+
+  .frame.loaded[name^='previewControls'] {
+    display: contents;
+    opacity: 1;
+  }
+
+  .ContentEdit-previewControls {
+    display: contents;
+  }
+}
+
+.ContentEdit-previewControls {
+  > form {
+    display: contents;
+  }
+}
+
+.ContentEdit-previewControlsSpacer {
+  flex: 1;
+  margin-left: auto;
+  order: -1;
+}
+
+.ContentEdit-secondaryPreviewControls {
+  background: var(--color-gray3);
+  display: flex;
+  flex: 1 0 auto;
+  flex-flow: row wrap;
+  margin: var(--gap-s) calc(-1 * var(--gap-s)) 0;
+  padding: 0 var(--gap-s);
+  width: 100%;
+
+  .ComboInput {
+    flex: 1;
+    min-width: 33.33%; // At most, allow 3 ComboInputs in a single row.
+    width: auto;
+
+    &::before {
+      content: none;
+    }
+  }
+}
+
+.ContentEdit-newRevision {
+  --Link-color: var(--color-blue5);
+  --Link-hoverColor: var(--color-blue6);
+
+  .Button;
+  .Button.is-dominant;
+  .Text.is-m;
+}
+
+@media (@mq-s) {
+  .ContentEdit-workflow,
+  .ContentEdit-restore {
+    width: 400px;
+
+    &[data-tether-rx='l'] {
+      left: var(--Tether-rl) /*rtl:ignore*/;
+      right: auto /*rtl:ignore*/;
+    }
+
+    &[data-tether-rx='r'] {
+      left: auto /*rtl:ignore*/;
+      right: calc(100vw - var(--Tether-rl) - var(--Tether-rw)) /*rtl:ignore*/;
+    }
+  }
+
+  .is-previewing {
+    .ContentEdit-before {
+      display: none;
+    }
+  }
+}
+
+@media (@mq-m) {
+  .Page-content,
+  .Popup {
+    --ContentEdit-leftWidth: calc(
+      100vw - var(--ContentEdit-previewWidth) - var(--ContentEdit-toolbarWidth)
+    );
+    --ContentEdit-previewWidth: 50vw;
+
+    .is-asideHidden {
+      .ContentEdit-preview {
+        left: 50%;
+        position: absolute;
+        top: calc(var(--ContentEdit-barHeight));
+        width: calc(50% - var(--ContentEdit-toolbarWidth));
+      }
+
+      .ContentEdit {
+        grid-template:
+          'left toolbar' 1fr ~'/'
+          1fr var(--ContentEdit-toolbarWidth);
+      }
+
+      .ContentEdit-right.is-visible {
+        display: none;
+      }
+    }
+
+    &.is-previewing {
+      .is-asideHidden {
+        .ContentEdit-left {
+          width: 50%;
+        }
+      }
+    }
+  }
+
+  .ContentEdit {
+    grid-template:
+      'left right toolbar' 1fr ~'/'
+      1fr var(--ContentEdit-rightWidth) var(--ContentEdit-toolbarWidth);
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    transition: padding-right var(--time-s) var(--ease-out);
+
+    &.is-inGrid {
+      height: calc(100vh - var(--ContentEdit-barTop));
+    }
+
+    &:has(.ContentEdit-right.is-visible .ContentEditDrawer-widget)
+      .ContentEdit-left {
+      margin-bottom: 0;
+    }
+  }
+
+  .ContentEdit-right {
+    border-left: 1px solid var(--color-gray3);
+    bottom: auto;
+    position: relative;
+    right: auto;
+    top: auto;
+    width: auto;
+  }
+
+  .ContentEdit-toolbar {
+    border-width: 0 0 0 1px;
+    display: block;
+    width: var(--ContentEdit-toolbarWidth);
+
+    > li {
+      margin-bottom: var(--gap-s);
+    }
+
+    button[data-icon-button-name='manage_search'] {
+      bottom: 0;
+      margin-bottom: var(--gap-l);
+      position: absolute;
+    }
+  }
+
+  .ContentEdit-preview {
+    z-index: auto;
+  }
+
+  .is-previewing {
+    .ContentEdit-left {
+      margin-right: 0;
+      overflow-x: hidden;
+      width: var(--ContentEdit-leftWidth);
+    }
+
+    .ContentEdit {
+      padding-right: 0;
+    }
+  }
+
+  .ContentEdit-workstreamProgress {
+    padding-left: calc(var(--RPB-size) + var(--gap-s));
+  }
+
+  .ContentEdit-workstreamProgressText {
+    display: block;
+  }
+
+  .ContentEdit-workstreamMessage {
+    border-left: 1px solid var(--color-gray5);
+    margin-left: calc(var(--gap-l) / 2);
+    padding-left: calc(var(--gap-l) / 2);
+  }
+
+  .ContentEdit-bar {
+    position: absolute;
+    top: var(--ContentEdit-workstreamHeight);
+  }
+
+  .ContentEdit-left {
+    .Widget {
+      --Widget-padding: var(--gap-xl);
+
+      border-bottom: solid 1px var(--color-gray2);
+
+      &.is-collapsed {
+        padding-bottom: 0;
+      }
+
+      .Widget-title {
+        z-index: 12;
+      }
+    }
+
+    &.is-openDrawer {
+      padding-bottom: calc(var(--lineHeight-xxl) * 5.5);
+    }
+
+    // Widget placed at the top that only contains a Message
+    > .Widget:first-child:has(> .Message:only-child) {
+      padding-bottom: 0;
+
+      .Message {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .ContentEdit-title {
+    position: absolute;
+    top: var(--ContentEdit-workstreamHeight);
+  }
+
+  .ContentEdit-right {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .CIG {
+      --CIG-padding: var(--gap-l);
+    }
+  }
+
+  .ContentEdit-preview {
+    border-left: 1px solid var(--color-gray3);
+    bottom: 0;
+    right: var(--ContentEdit-toolbarWidth);
+    transform: scaleX(0.000001);
+    transform-origin: right;
+  }
+}
+
+@media (@mq-l) {
+  .Page-content,
+  .Popup {
+    --ContentEdit-previewWidth: calc((100vw - 320px) / 2);
+
+    &.is-preview-menu {
+      --ContentEdit-previewWidth: calc(
+        (100vw - var(--ContentEdit-rightWidth) - 250px)
+      );
+    }
+  }
+
+  .ContentEdit-preview {
+    right: var(--ContentEdit-toolbarWidth);
+  }
+
+  .ContentEdit-revisionActions {
+    margin-left: auto;
+  }
+}
+
+@media (@mq-xl) {
+  .Page-content,
+  .Popup {
+    --ContentEdit-rightWidth: 320px;
+  }
+}
+
+.ContentEdit-workflowLog,
+.ContentEdit-workflowActions {
+  padding: calc(var(--gap-l) - var(--gap-m)) var(--gap-l) var(--gap-m)
+    var(--gap-l);
+}
+
+.ContentEdit-workflowLog {
+  textarea::after {
+    display: none;
+  }
+}
+
+@media (@mq-xl) {
+  .Page-content,
+  .Popup {
+    --ContentEdit-rightWidth: 320px;
+  }
+}
+
+// Legacy.
+.content-edit,
+.contentForm-aside,
+.widget-preview {
+  display: contents;
+}
+
+.widget-publishingExtra,
+.widget-publishingHistory {
+  display: none;
+}
+
+.editpagebutton {
+  display: none;
+}
+
+.state-disabled {
+  opacity: 0.7;
+  pointer-events: none;
+}