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

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

@@ -1,495 +0,0 @@
-@import (reference) url('./Dropdown.less');
-
-@dashedBoxDefault: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#CCC' stroke-width='3' stroke-dasharray='5 10' stroke-linecap='square'/%3e%3c/svg%3e");
-@dashedBoxHover: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#53719e' stroke-width='3' stroke-dasharray='5 10' stroke-linecap='square'/%3e%3c/svg%3e");
-@dashedBoxSelected: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#53719e' stroke-width='4' stroke-linecap='square'/%3e%3c/svg%3e");
-@dashedLineDefault: url("data:image/svg+xml,%3csvg width='100%25' height='3' viewbox='0 0 100 3' xmlns='http://www.w3.org/2000/svg'%3e%3cline stroke='#6e6f76' x1='0' y1='0' x2='100%25' y2='0' stroke-dasharray='7' stroke-width='3'/%3e%3c/svg%3e");
-@dashedLineHover: url("data:image/svg+xml,%3csvg width='100%25' height='3' viewbox='0 0 100 3' xmlns='http://www.w3.org/2000/svg'%3e%3cline stroke='black' x1='0' y1='0' x2='100%25' y2='0' stroke-dasharray='7' stroke-width='3'/%3e%3c/svg%3e");
-
-.Upscale() {
-  --scaleFactor: ~'calc(1 + (1 - var(--PreviewScale, 1)))';
-
-  transform: ~'translate(0px, 0px) scale(var(--scaleFactor)) !important';
-}
-
-body.overlay-hidden .Preview-overlay {
-  visibility: hidden;
-}
-
-.is-previewToEditDisabled .Preview-overlayFrame {
-  display: none;
-}
-
-.Preview-overlay {
-  background-image: @dashedBoxDefault;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  opacity: 0;
-  position: absolute;
-
-  &.is-visible,
-  &.is-selected,
-  &.is-hover {
-    opacity: 1;
-  }
-
-  &.is-removed {
-    pointer-events: none;
-    visibility: hidden;
-  }
-
-  &.is-loading {
-    background: rgb(0 0 0 / 25%);
-    pointer-events: none;
-
-    &::after {
-      &:extend(.Icon);
-
-      animation: spin var(--time-xl) infinite ease-in-out;
-      color: var(--color-white);
-      content: 'autorenew';
-      font-size: var(--iconSize-xl);
-      left: calc(50% - var(--Icon-size) / 2);
-      position: absolute;
-      top: calc(50% - var(--Icon-size) / 2);
-    }
-  }
-}
-
-.Preview-moveUp,
-.Preview-moveDown {
-  &:extend(.Icon);
-
-  font-size: var(--iconSize-xs);
-}
-
-.Preview-overlay.is-shared {
-  background: transparent;
-  outline: 4px dashed var(--color-blue4);
-}
-
-.Preview-overlay.is-locked {
-  background: var(--color-gray2);
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-div.Preview-overlayLabel {
-  .Text.is-m;
-
-  align-items: center;
-  background: white;
-  color: var(--color-gray4);
-  display: inline-flex;
-  flex-direction: row;
-  font-family: var(--fontFamily-sansSerif);
-  opacity: 0;
-  padding: 0.25em 0.5em;
-  position: absolute;
-  text-transform: capitalize;
-  transform: ~'translate(0px, 0px) scale(var(--PreviewScale))';
-  transform-origin: top left;
-  width: max-content;
-  z-index: 1;
-}
-
-html.should-upscale div.Preview-overlayLabel {
-  .Upscale();
-}
-
-.Preview-imageOverlay {
-  &:is(.is-visible, :hover, :focus-visible, :active) > .Preview-overlayTooltip {
-    opacity: 1;
-    transition-delay: 150ms;
-
-    --tooltip-y: -1px;
-  }
-}
-
-.Preview-overlayTooltip {
-  --tooltip-scale: ~'calc(1 + (1 - var(--PreviewScale, 1)))';
-  --tooltip-tail-size: calc(7px * var(--tooltip-scale));
-  --tooltip-tail-bottom: conic-gradient(
-      from -30deg at bottom,
-      #0000,
-      #000 1deg 60deg,
-      #0000 61deg
-    )
-    bottom / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
-  --tooltip-tail-top: conic-gradient(
-      from 150deg at top,
-      #0000,
-      #000 1deg 60deg,
-      #0000 61deg
-    )
-    top / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
-  --tooltip-bg: var(--color-white);
-  --tooltip-shape: var(--tooltip-tail-top);
-  --tooltip-y: calc(3px * var(--tooltip-scale));
-
-  background: var(--tooltip-bg);
-  display: grid;
-  filter: drop-shadow(0 3px 3px hsl(0deg 0% 0% / 23%))
-    drop-shadow(0 5px 5px hsl(0deg 0% 0% / 23%));
-  font-size: 1rem;
-  font-weight: normal;
-  gap: var(--gap-s);
-  inline-size: max-content;
-  inset-block-end: calc(100% + calc(0.75ch * var(--tooltip-scale)));
-  inset-inline-start: 0%;
-  line-height: initial;
-  margin: 0;
-  max-inline-size: 25ch;
-  min-width: fit-content;
-  opacity: 0;
-  padding: 0.75ch 1.5ch;
-  pointer-events: none;
-  position: absolute;
-  scale: var(--tooltip-scale);
-  text-align: start;
-  transform: translateX(calc(-1px * var(--tooltip-scale)))
-    translateY(var(--tooltip-y, 0));
-  transform-origin: left;
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease;
-  user-select: none;
-  will-change: filter;
-  z-index: 1;
-
-  &::after {
-    background: var(--tooltip-bg);
-    border-block-end: var(--tooltip-tail-size) solid transparent;
-    content: '';
-    inset: 0 0 0 calc(-100% + calc(var(--tooltip-tail-size) * 4)); /* move the tail to the right */
-    -webkit-mask: var(--tooltip-shape);
-    mask: var(--tooltip-shape);
-    position: absolute;
-    z-index: -1;
-  }
-
-  &:is([position='top']) {
-    --tooltip-shape: var(--tooltip-tail-bottom);
-
-    &::after {
-      border-block-end: var(--tooltip-tail-size) solid transparent;
-      inset-block-end: calc(var(--tooltip-tail-size) * -1);
-    }
-  }
-
-  &:is([position='bottom']) {
-    --tooltip-shape: var(--tooltip-tail-top);
-
-    inset-block-end: auto;
-    inset-block-start: calc(100% + var(--tooltip-tail-size));
-
-    &::after {
-      border-block-start: var(--tooltip-tail-size) solid transparent;
-      inset-block-start: calc(var(--tooltip-tail-size) * -1);
-    }
-  }
-
-  &.is-grid {
-    display: grid;
-    gap: 3px;
-    grid-template-columns: 1fr 1fr;
-    justify-items: end;
-    text-wrap: nowrap;
-
-    :nth-child(odd) {
-      justify-self: start;
-      text-transform: capitalize;
-    }
-
-    :nth-child(even) {
-      justify-self: end;
-    }
-
-    :nth-child(even):first-of-type {
-      color: var(--color-gray5);
-    }
-
-    :nth-child(odd):not(:first-child) {
-      color: var(--color-gray5);
-    }
-  }
-}
-
-.Preview-overlayTooltip b {
-  color: var(--color-dominant5);
-  font-weight: bold;
-}
-
-.Preview-overlay.is-hover:not(.is-locked),
-.Preview-overlay.is-selected:not(.is-locked),
-.Preview-overlay.is-menuOpen {
-  pointer-events: auto;
-
-  > .Preview-overlayLabel {
-    opacity: 1;
-    z-index: 2;
-  }
-}
-
-.Preview-overlay.is-hover:not(.is-locked) {
-  background-image: @dashedBoxHover;
-
-  > .Preview-overlayLabel {
-    color: var(--color-dominant5);
-  }
-}
-
-.Preview-overlay.is-selected:not(.is-locked) {
-  background-image: @dashedBoxSelected;
-}
-
-.Preview-overlay.is-selected:not(.is-locked) {
-  > .Preview-overlay-addButton {
-    opacity: 1;
-  }
-
-  > .Preview-overlayLabel {
-    background: var(--color-gray2);
-    color: var(--color-black);
-  }
-}
-
-.Preview-overlay-editButton {
-  .IconButton;
-
-  --IconButton-name: 'edit';
-
-  align-self: flex-end;
-  position: absolute;
-  right: calc(0px - var(--Icon-size) - var(--gap-l));
-  top: 0;
-  z-index: 2;
-}
-
-.Preview-overlay.is-hover.is-shared:not(.is-locked),
-.Preview-overlay.is-selected.is-shared:not(.is-locked) {
-  background: rgb(76 104 145 / 12%);
-  outline: 2px solid var(--color-blue6);
-}
-
-.Preview-overlay.is-empty {
-  align-items: center;
-  background-image: @dashedLineDefault;
-  background-position: center center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  display: none;
-  flex-direction: row;
-  justify-content: center;
-  left: var(--offsetH);
-  padding: calc(var(--gap-m) / 2) 100px;
-  width: calc(100% - calc(2 * var(--offsetH)));
-  z-index: 1;
-
-  --offsetH: 6px;
-
-  &.is-hover,
-  &.is-selected {
-    background-image: @dashedLineHover;
-  }
-
-  span.Preview-overlayLabel {
-    .Text.is-xl;
-
-    background: var(--color-white);
-    padding: 0 var(--gap-l);
-  }
-}
-
-.Preview-overlay.is-empty:hover {
-  color: var(--color-blue6);
-}
-
-.is-previewEditorEnabled .Preview-overlay.is-empty {
-  display: flex;
-}
-
-.Preview-overlay-addButton {
-  .IconButton.no-Fill;
-  .Link;
-
-  --Button-size: calc(var(--gap-l) * 2 + var(--Text-height));
-  --IconButton-name: 'add';
-  --Icon-size: var(--iconSize-l);
-
-  bottom: calc(0px - var(--Button-size) / 2);
-  font-size: var(--Icon-size);
-  left: calc(50% - var(--Button-size) / 2);
-  opacity: 0;
-  position: absolute;
-  z-index: 2;
-
-  &::before {
-    background: var(--color-dominant5);
-    color: white;
-  }
-}
-
-.ContentEdit-previewModal {
-  background: var(--color-black);
-  display: none;
-  height: 100%;
-  left: 0;
-  opacity: 0.5;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 2001;
-
-  &.is-visible {
-    display: block;
-  }
-}
-
-.Preview-fieldActions {
-  align-items: center;
-  display: flex;
-  margin-top: var(--gap-s);
-
-  > * {
-    margin-right: var(--gap-m);
-  }
-
-  > .is-cancel {
-    color: var(--color-red6);
-    cursor: pointer;
-  }
-}
-
-// Content form fields styling
-.is-previewEditing {
-  background: white;
-  box-shadow: var(--shadow-4);
-  max-height: calc(85% - var(--gap-xl));
-  padding: 0 var(--gap-xl);
-  position: fixed;
-  top: 15%;
-  z-index: 2002 !important;
-
-  &::after {
-    display: none;
-  }
-
-  > button.is-save {
-    margin-left: auto;
-    position: relative;
-    width: fit-content;
-  }
-
-  > .CIG-row {
-    padding-top: 0;
-
-    &::after {
-      top: calc(var(--gap-l) + var(--gap-xl));
-    }
-  }
-
-  > .RCIG-item,
-  > .EIG-item,
-  > .RCS-item {
-    border: none;
-    list-style: none;
-
-    &::before {
-      display: none;
-    }
-
-    > .CIG {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    > .removeButton,
-    > .RCIG-swap,
-    > .EIG-swap,
-    > .MultiSortable-buttonToggle,
-    > .ContentSelector-clear {
-      display: none;
-    }
-  }
-
-  > .RCS-item {
-    margin-top: var(--gap-xl);
-  }
-
-  .Preview-popupCancel {
-    .IconButton;
-
-    --IconButton-name: 'close';
-
-    position: fixed;
-    right: calc(30vw + var(--gap-l) - var(--gap-s));
-    top: calc(
-      15% + var(--gap-m) + var(--lineHeight-m) / 2 - var(--Icon-size) / 2 -
-        var(--gap-s)
-    );
-    z-index: 10;
-  }
-}
-
-.is-previewEditing {
-  > .CIG-row > .CIG-label,
-  > .RCIG-item > .repeatableLabel,
-  > .EIG-item > .repeatableLabel,
-  > .Preview-popupHeading {
-    .Text.is-m;
-
-    background: var(--color-gray2);
-    color: black !important;
-    height: auto;
-    margin: 0 calc(0px - var(--gap-xl));
-    padding: var(--gap-m) var(--gap-l);
-    position: sticky;
-    top: 0;
-    z-index: 10;
-
-    > .CIG-help,
-    .CIG-guide,
-    .CIG-comments {
-      display: none;
-    }
-  }
-
-  > .CIG-row > .CIG-label {
-    margin-bottom: var(--gap-l);
-  }
-
-  > .RCIG-item:not(.is-gridItem) > .RCIG-title,
-  > .EIG-item > .EIG-title {
-    &::before,
-    &:hover::before {
-      display: none;
-    }
-  }
-}
-
-.is-previewEditing > .ActionBar {
-  margin: 0 calc(0px - var(--gap-xl));
-  margin-top: var(--gap-l);
-}
-
-.EIG-item.is-previewEditing > .removeButton {
-  right: 0;
-}
-
-.EIG-item.is-previewEditing > .EIG-swap {
-  right: calc(var(--gap-s) * 3 + var(--Icon-size));
-}
-
-.is-preview-menu {
-  .is-previewEditing {
-    left: 25vw;
-    overflow: auto;
-    right: 30vw;
-  }
-}
-
-.Preview-overlayFrame {
-  color-scheme: light;
-}

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

@@ -1,66 +0,0 @@
-.ToolUserWorksInProgress,
-.ToolUserSharedPreviews {
-  .LinkTable {
-    padding-bottom: var(--gap-m);
-
-    li {
-      border-bottom: var(--borderWidth-thin) solid var(--color-gray3);
-      border-top: 0;
-      padding: var(--gap-m) 0;
-      position: relative;
-
-      a {
-        .Text.is-m;
-
-        padding: 0;
-      }
-
-      span {
-        .Text.is-s;
-
-        color: var(--color-gray5);
-      }
-
-      button[name='action-delete'],
-      button[name='deleteAction'] {
-        .IconButton;
-        .IconButton.is-red;
-
-        --IconButton-name: 'remove';
-
-        display: none;
-        position: absolute;
-        right: 0;
-        top: 24%;
-      }
-    }
-
-    li:hover > form > button[name='action-delete'],
-    li:hover > form > button[name='deleteAction'] {
-      display: block;
-    }
-  }
-}
-
-.ToolUserWorksInProgress-actions,
-.ToolUserSharedPreviews-actions {
-  text-align: right;
-
-  > button {
-    color: var(--color-red6);
-  }
-}
-
-.ProfileDropdown-user {
-  color: var(--color-black);
-}
-
-.ProfileDropdown-userEmail {
-  .Text.is-s;
-
-  color: var(--color-gray5);
-}
-
-.ProfileDropdown-items {
-  .LinkTable;
-}

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

@@ -1,147 +0,0 @@
-.QueryField-frame {
-  .QueryField-searchForm,
-  .QueryField-searchControls {
-    display: block;
-  }
-
-  .SearchWidget-controls {
-    width: 100%;
-  }
-
-  .SearchWidget-history,
-  .SearchWidget-reset {
-    display: none;
-  }
-
-  .SearchWidget-result {
-    display: flex;
-    flex-flow: row wrap;
-    height: min-content;
-    width: 100%;
-
-    & > h2 {
-      font-size: 100%;
-      margin-left: var(--gap-l);
-      margin-right: var(--gap-s);
-    }
-  }
-
-  .SearchResult-sorts {
-    flex-grow: 1;
-    margin-left: var(--gap-l);
-    margin-top: calc((var(--gap-l) - (var(--gap-s) + 1px)));
-
-    > form {
-      width: max-content;
-    }
-  }
-
-  .SearchResult-pagination {
-    margin-left: var(--gap-l);
-    margin-right: var(--gap-l);
-    margin-top: calc((var(--gap-l) - (var(--gap-s) + 1px)));
-    position: unset;
-    z-index: unset;
-  }
-
-  .SearchResult-items {
-    padding-top: var(--gap-l);
-    width: 100%;
-  }
-}
-
-.QueryField-queryString {
-  display: none;
-}
-
-.QueryField-toggle {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  .QueryField-label {
-    max-width: calc(100% - var(--Icon-size) - var(--gap-m) - 2 * var(--gap-s));
-  }
-
-  .QueryField-icon {
-    .IconButton;
-
-    --IconButton-name: 'edit';
-
-    margin-left: var(--gap-m);
-  }
-}
-
-.Popup[name='queryField'] {
-  .Popup-content {
-    display: flex;
-    flex-flow: column nowrap;
-
-    .ActionBar,
-    .SearchWidget-title {
-      flex-shrink: 0;
-    }
-
-    .SearchResult-pagination {
-      padding: 0;
-    }
-
-    .SearchWidget-form {
-      flex-grow: 1;
-      overflow: auto;
-    }
-
-    .SearchResult-items {
-      margin-top: 0;
-    }
-
-    .Taxonomy {
-      margin-top: 0;
-      width: 100%;
-
-      li {
-        padding-bottom: var(--gap-s);
-        padding-top: var(--gap-s);
-      }
-    }
-
-    .QueryField-queryString {
-      display: none !important;
-    }
-  }
-}
-
-@media (@mq-s) {
-  .Page-content.is-previewing ~ .QueryField-frame {
-    .QueryField-searchControls,
-    .QueryField-searchForm {
-      display: block;
-    }
-
-    .SearchWidget-controls {
-      width: 100%;
-    }
-  }
-}
-
-@media (@mq-l) {
-  .QueryField-frame {
-    .QueryField-searchControls,
-    .QueryField-searchForm {
-      display: flex;
-    }
-
-    .SearchWidget-controls {
-      width: 250px;
-    }
-
-    .SearchResult-sorts,
-    .SearchResult-pagination {
-      margin-top: calc((var(--gap-l) - (var(--gap-s) + 2px)));
-    }
-  }
-}

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

@@ -1,20 +0,0 @@
-:root {
-  --RPB-size: var(--gap-xl);
-}
-
-.RPB {
-  height: var(--RPB-size);
-  width: var(--RPB-size);
-}
-
-.RPB-bg {
-  fill: none;
-  stroke: var(--color-gray2);
-}
-
-.RPB-fg {
-  fill: none;
-  stroke: var(--color-dominant6);
-  transform: rotate(-90deg);
-  transform-origin: center;
-}