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

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

@@ -1,42 +0,0 @@
-.ViewMirror {
-  display: grid;
-  grid-template:
-    'title' auto
-    'content' 1fr ~'/'
-    1fr;
-  height: 100vh;
-  width: 100vw;
-
-  .ViewMirror-content {
-    grid-area: content;
-  }
-
-  .PreviewFrame {
-    height: 100%;
-  }
-
-  .PreviewFrame-typeDisplay {
-    height: 100%;
-    position: relative;
-    width: 100%;
-
-    > iframe {
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-}
-
-.ViewMirror-title {
-  background: var(--color-dominant7);
-  color: var(--color-white);
-  grid-area: title;
-  padding: var(--gap-s) var(--gap-l);
-}
-
-.ViewMirror-controls {
-  display: none;
-}

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

@@ -1,147 +0,0 @@
-.PreviewFrame {
-  background: var(--color-gray1);
-  display: grid;
-  grid-template:
-    'typeActions typeActions' auto
-    'typeControls typeControls' auto
-    'previewDisplay previewDisplay' 1fr ~'/'
-    minmax(0, 1fr) minmax(0, 1fr);
-  height: 100%;
-  width: 100%;
-
-  .ComboInput {
-    --ComboInput-listPadding: calc(var(--gap-l) / 2);
-
-    min-height: calc(var(--ComboInput-listPadding) * 2 + var(--Text-height));
-    width: auto;
-
-    &::before {
-      display: none;
-    }
-
-    .ComboInput-icon::after {
-      bottom: calc(
-        var(--ComboInput-listPadding) + (var(--Text-height) - var(--Icon-size)) /
-          2
-      );
-      right: var(--ComboInput-listPadding);
-    }
-
-    &,
-    &:focus {
-      padding: var(--ComboInput-listPadding);
-      padding-right: calc(
-        var(--gap-xs) + var(--Icon-size) + var(--ComboInput-listPadding)
-      );
-    }
-
-    &:hover,
-    &:focus {
-      background: var(--color-gray2);
-    }
-  }
-}
-
-.PreviewFrame-types {
-  border-bottom: 1px solid var(--color-gray3);
-  grid-area: types;
-  padding-left: calc(var(--gap-l) / 2);
-}
-
-.PreviewFrame-typeFrame {
-  display: contents;
-}
-
-.PreviewFrame-typeFrame > *:only-child {
-  background: var(--color-white);
-  grid-area: previewDisplay;
-}
-
-.PreviewFrame-typeControlsContainer {
-  display: contents;
-
-  > form {
-    display: contents;
-  }
-}
-
-.PreviewFrame-typeControls {
-  border-bottom: 1px solid var(--color-gray3);
-  grid-area: typeControls;
-  padding: 0 calc(var(--gap-l) / 2);
-}
-
-.PreviewFrame-typeActions {
-  align-items: center;
-  border-bottom: 1px solid var(--color-gray3);
-  display: flex;
-  grid-area: typeActions;
-  justify-content: end;
-  padding-left: var(--gap-l);
-  padding-right: calc(var(--gap-l) - var(--gap-s));
-
-  .DateTimeInput {
-    &.is-empty {
-      .IconButton;
-
-      --IconButton-name: 'date_range';
-
-      padding-top: 0;
-    }
-
-    &::before {
-      border: none;
-    }
-  }
-
-  .action-share {
-    .IconButton;
-
-    --IconButton-name: 'open_in_new';
-
-    order: 0;
-  }
-
-  .action-refresh {
-    .IconButton;
-
-    --IconButton-name: 'refresh';
-
-    order: 0;
-  }
-}
-
-.PreviewFrame-typeDisplay {
-  background: var(--color-white);
-  grid-area: previewDisplay;
-}
-
-.PreviewFrame.HasPreviewSelect {
-  grid-template:
-    'typeActions typeActions' auto
-    'types typeControls' auto
-    'previewDisplay previewDisplay' 1fr ~'/'
-    minmax(0, 1fr) minmax(0, 1fr);
-}
-
-.PreviewFrame-previewToEditToggle {
-  margin-right: auto;
-  white-space: nowrap;
-
-  & > label {
-    align-items: center;
-    display: flex;
-    gap: var(--gap-s);
-  }
-
-  & input {
-    .Checkbox;
-    .Checkbox.is-toggle;
-  }
-}
-
-.PreviewFrame:has(.PreviewFrame-previewToEditToggle input:not(:checked)) {
-  & .Preview-overlayFrame {
-    display: none;
-  }
-}

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

@@ -1,70 +0,0 @@
-.Viewers {
-  --Avatar-size: var(--iconSize-m);
-
-  padding-left: calc(var(--Avatar-size) / 5);
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform var(--time-xl);
-
-  > .Viewers-some,
-  > .Viewers-none {
-    backface-visibility: hidden;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  > .Viewers-some {
-    display: flex;
-    position: relative;
-    transform: rotateX(180deg);
-    white-space: nowrap;
-
-    > .Viewers-viewer {
-      margin-left: calc(0px - var(--Avatar-size) / 5);
-      position: relative;
-
-      &::before {
-        background: var(--color-white);
-        border-radius: 50%;
-        bottom: -1px;
-        content: '';
-        left: -1px;
-        position: absolute;
-        right: -1px;
-        top: -1px;
-      }
-
-      &[data-editing]::before {
-        background: var(--color-yellow4);
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        top: -4px;
-      }
-
-      &[data-locked] {
-        order: 1;
-        z-index: 1;
-      }
-
-      &[data-locked]::after {
-        .Icon;
-
-        background: transparent;
-        bottom: 0;
-        content: 'lock';
-        font-size: var(--fontSize-xs);
-        left: var(--fontSize-s);
-        position: absolute;
-        top: inherit;
-      }
-    }
-  }
-
-  &[data-some] {
-    transform: rotateX(180deg);
-  }
-}

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

@@ -1,32 +0,0 @@
-.Week-row {
-  display: flex;
-
-  &:not(:first-child) {
-    border-top: var(--borderWidth-thin) solid var(--color-gray3);
-  }
-}
-
-.Week-day {
-  background: var(--color-gray1);
-  flex: none;
-  padding: var(--gap-m) var(--gap-l);
-  width: calc(var(--gap-m) * 2 + var(--lineHeight-xs) + var(--lineHeight-xl));
-}
-
-.Week-dow {
-  .Text.is-xs;
-
-  display: block;
-}
-
-.Week-dom {
-  .Text.is-xl;
-
-  display: block;
-}
-
-.Week-content {
-  .Text.is-s;
-
-  padding: 0 var(--gap-l);
-}

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

@@ -1,224 +0,0 @@
-@import (reference) url('./Dropdown.less');
-@import (reference) url('../v4/Icon.less');
-@import (reference) url('../v4/IconButton.less');
-
-.Widget {
-  --Widget-padding: var(--gap-l);
-
-  background: var(--color-white);
-  padding: var(--Widget-padding);
-  position: relative;
-}
-
-.Widget
-  :is(
-    .widget-urls.is-readOnly,
-    .widget-urlsRepeatable.is-readOnly,
-    .ContentEditSites-owner.is-readOnly,
-    .ContentEditSites-access.is-readOnly,
-
-  ) {
-  opacity: 0.7;
-  pointer-events: none;
-  user-select: none;
-}
-
-.Widget .is-readOnly .UrlsWidget-itemLabel a,
-.widget .is-readOnly .RCIG-title::after,
-.widget .is-readOnly .ContentSummary-info,
-.widget .is-readOnly .ContentSelector-edit {
-  cursor: pointer;
-  pointer-events: auto;
-}
-
-.Widget-title {
-  .Text.is-m;
-
-  background: var(--color-gray2);
-  font-weight: bold;
-  margin: 0;
-  overflow: hidden;
-  padding: var(--gap-m) var(--gap-l);
-  position: sticky;
-  text-overflow: ellipsis;
-  top: 0;
-  white-space: nowrap;
-  z-index: 10;
-}
-
-.Widget-heading {
-  .Text.is-s;
-
-  font-weight: bold;
-  margin: var(--gap-l) 0;
-}
-
-.Widget-controls {
-  align-items: center;
-  display: flex;
-  height: calc(var(--gap-m) * 2 + var(--Text-height));
-  position: absolute;
-  right: var(--gap-l);
-  top: 0;
-  z-index: 11;
-
-  > *:not(:first-child) {
-    margin-left: var(--gap-l);
-  }
-
-  &.is-locked {
-    display: none !important;
-  }
-}
-
-.Widget-actions {
-  margin-left: var(--gap-l);
-}
-
-.Widget-restoreButton {
-  .Button;
-  .Text.is-m;
-
-  background: transparent;
-}
-
-.Widget-actionsToggle {
-  .Link;
-  .IconButton;
-
-  --IconButton-name: 'settings';
-
-  margin: 0 calc(0px - var(--gap-s));
-}
-
-.Widget-actionsList {
-  .Dropdown;
-
-  z-index: 10000;
-
-  [role='menuitem'] {
-    .Dropdown-item;
-  }
-}
-
-.Widget-actions.is-open {
-  .Widget-actionsToggle {
-    --IconButton-name: 'close';
-
-    background: var(--color-black);
-    border-radius: 50%;
-    color: var(--color-white);
-  }
-
-  .Widget-actionsList {
-    .Dropdown.is-open;
-  }
-}
-
-// Things that should be full bleed when directly inside Widget.
-.Widget,
-.Widget > form,
-.Widget > form > .fixedScrollable {
-  > .Widget-title,
-  > .TabBar,
-  > .Message,
-  > * > .Message {
-    margin: calc(0px - var(--Widget-padding));
-    margin-bottom: var(--Widget-padding);
-  }
-
-  > .Message:last-child {
-    margin-bottom: calc(0px - var(--Widget-padding));
-  }
-
-  > .TC,
-  > .CIG {
-    margin: calc(0px - var(--Widget-padding));
-    margin-bottom: 0;
-  }
-
-  > .ActionBar {
-    margin: 0 calc(0px - var(--Widget-padding))
-      calc(0px - var(--Widget-padding));
-    padding: var(--Widget-padding);
-  }
-
-  > .inputContainer ~ .ActionBar {
-    margin-top: var(--gap-xl);
-  }
-
-  // CIG rows which exist outside of TC and CIG containers
-  // use margin instead of padding so that the Widget title's margin will collapse into it.
-  > .CIG-row {
-    margin-top: var(--gap-xl);
-    padding-top: 0;
-  }
-}
-
-.Widget-filters {
-  background-color: var(--color-gray3);
-  margin-left: calc(var(--Widget-padding) * -1);
-  margin-right: calc(var(--Widget-padding) * -1);
-  margin-top: calc(var(--Widget-padding) * -1);
-  min-height: calc(var(--gap-l) * 2);
-  padding: 0 var(--Widget-padding);
-}
-
-.Widget-filters,
-.Widget-filter {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
-.Widget-filter {
-  width: 100%;
-}
-
-btu-widget {
-  display: block;
-
-  .Widget-title {
-    cursor: pointer;
-
-    .Widget-collapse {
-      .IconButton;
-
-      --IconButton-name: 'keyboard_arrow_up' !important;
-
-      margin: 0 calc(0px - var(--gap-s));
-      transition: transform var(--time-xs);
-    }
-  }
-
-  &.is-error > .Widget-title {
-    color: var(--color-red6);
-
-    .Widget-expand {
-      &::after {
-        .Icon;
-
-        content: 'error';
-        margin-left: var(--gap-s);
-      }
-    }
-  }
-
-  &.is-collapsed {
-    height: calc(var(--gap-m) * 2 + var(--lineHeight-m));
-    overflow: hidden;
-
-    .Widget-title {
-      position: static;
-    }
-
-    .Widget-collapse {
-      transform: rotate(180deg);
-    }
-
-    > div,
-    > table {
-      display: none;
-    }
-  }
-}

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

@@ -1,153 +0,0 @@
-.Workflow-ui {
-  .Icon.is-s;
-  .Text.is-s;
-
-  background: var(--color-gray1);
-  margin-top: var(--gap-s);
-  min-height: 360px;
-  position: relative;
-
-  // Reserve space to the right for the remove button.
-  input[type] {
-    background: var(--color-white);
-    display: block;
-    padding-left: var(--gap-s);
-    padding-right: calc(var(--gap-s) + var(--Icon-size));
-
-    &.Workflow-stateName {
-      padding-left: calc(var(--Text-height) + var(--gap-xs) * 2);
-      padding-right: calc(var(--Icon-size) + var(--gap-xs) * 3);
-    }
-  }
-}
-
-// Every box is absolutely positioned via JS.
-.Workflow-state,
-.Workflow-transition {
-  box-shadow: var(--shadow-2);
-  position: absolute;
-}
-
-// State box is movable.
-.Workflow-state {
-  background: var(--color-gray2);
-  cursor: move;
-  padding: var(--gap-m);
-
-  &.is-intermediate {
-    height: calc(
-      var(--gap-m) * 2 + var(--gap-s) * 3 + var(--Text-height) +
-        var(--Icon-size)
-    );
-    width: calc(200px + var(--gap-m) * 2);
-  }
-
-  .sp-replacer {
-    padding: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  .sp-dd {
-    display: none;
-  }
-
-  .sp-preview-inner {
-    left: var(--gap-xs);
-    top: var(--gap-s);
-  }
-
-  .sp-preview {
-    overflow: inherit;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  // ...except initial and final states.
-  &[data-id='initial'],
-  &[data-id='final'] {
-    cursor: default;
-  }
-
-  // Initial state at top left.
-  &[data-id='initial'] {
-    left: var(--gap-l);
-    top: calc(var(--gap-l) * 2 + var(--Text-height));
-
-    .Workflow-addTransition {
-      display: block;
-    }
-  }
-
-  // Final state at bottom right.
-  &[data-id='final'] {
-    bottom: var(--gap-l);
-    right: var(--gap-l);
-  }
-
-  .ComboInput {
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-}
-
-// Remove button is overlaid on top of the input.
-.Workflow-removeState,
-.Workflow-removeTransition {
-  .IconButton;
-  .IconButton.is-red;
-
-  --IconButton-name: 'remove_circle';
-
-  position: absolute;
-
-  &:hover,
-  &:focus {
-    --IconButton-name: 'remove';
-  }
-}
-
-.Workflow-removeState {
-  right: var(--gap-m);
-  top: calc(var(--gap-m) + var(--Text-height) / 2 - var(--Icon-size) / 2);
-}
-
-.Workflow-removeTransition {
-  right: 0;
-  top: calc(50% - var(--Icon-size) / 2 - var(--gap-s));
-}
-
-// Add state and transition link.
-.Workflow-addState,
-.Workflow-addTransition {
-  &::before {
-    .Icon;
-
-    content: 'add_circle';
-    margin-right: var(--gap-xs);
-  }
-}
-
-.Workflow-addState {
-  display: inline-block;
-  padding: var(--gap-l) 0 0 var(--gap-l);
-}
-
-.Workflow-addTransition {
-  display: inline-block;
-  padding-top: var(--gap-s);
-}
-
-@media (@mq-xl) {
-  .Workflow-state.is-intermediate {
-    width: calc(222px + var(--gap-m) * 2);
-  }
-}