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

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

@@ -1,922 +0,0 @@
-@import (reference) './IconButton.less';
-@import (reference) './Button.less';
-@import (reference) './Checkbox.less';
-@import (reference) './Dropdown.less';
-@import (reference) './Link.less';
-@import (reference) './Text.less';
-
-.cropper-drag-box,
-.cropper-center::before,
-.cropper-center::after,
-.cropper-face,
-.cropper-line,
-.cropper-point,
-.cropper-point.point-se::before {
-  background-color: var(--color-white);
-}
-
-.cropper-modal {
-  background-color: var(--color-black);
-  opacity: 0.5;
-}
-
-.cropper-view-box {
-  outline-color: var(--color-white);
-}
-
-.cropper-dashed {
-  border-color: var(--color-white);
-}
-
-.cropper-dashed,
-.cropper-center,
-.cropper-point {
-  opacity: 1;
-}
-
-@keyframes isAdded {
-  from {
-    background: var(--color-green4);
-  }
-
-  to {
-    background: var(--color-white);
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-.ImageEditor-open,
-.ImageEditor-editToggle {
-  .IconButton;
-
-  background: var(--color-white);
-  display: none;
-  position: absolute;
-  top: 0;
-
-  &::after {
-    border-radius: 0%;
-  }
-
-  button& {
-    background: var(--color-white);
-  }
-
-  .is-imageEditorLoaded & {
-    display: block;
-  }
-}
-
-.ImageEditor-open {
-  --IconButton-name: 'brush';
-
-  right: calc(var(--gap-s) * 2 + var(--Icon-size));
-
-  &.noEditor {
-    --IconButton-name: 'crop';
-  }
-
-  &:focus-visible {
-    z-index: 1;
-  }
-}
-
-.ImageEditor-editToggle {
-  --IconButton-name: 'more_horiz';
-
-  right: 0;
-
-  &.is-active {
-    --IconButton-name: 'close';
-
-    color: var(--Link-hoverColor);
-  }
-}
-
-.ImageEditor-editTools {
-  .Dropdown;
-
-  &.is-open {
-    .Dropdown.is-open;
-
-    [role='menuitem'] {
-      .Dropdown-item;
-      .Link.is-blue;
-    }
-  }
-}
-
-.is-imagePreview {
-  background: var(--color-gray1);
-  display: flex;
-  min-height: 204px;
-  min-width: 272px;
-  position: relative;
-  width: fit-content;
-}
-
-.ImageEditor-container {
-  margin-top: var(--gap-s);
-}
-
-.ImageEditor-preview {
-  cursor: pointer;
-  display: flex;
-  margin: auto;
-  position: relative;
-  width: fit-content;
-
-  img,
-  canvas {
-    background-color: var(--color-gray1);
-    background-image: linear-gradient(
-        45deg,
-        var(--color-gray3) 25%,
-        transparent 25%,
-        transparent 75%,
-        var(--color-gray3) 75%,
-        var(--color-gray3)
-      ),
-      linear-gradient(
-        -45deg,
-        var(--color-gray3) 25%,
-        transparent 25%,
-        transparent 75%,
-        var(--color-gray2) 75%,
-        var(--color-gray3)
-      );
-    background-size: 10px 10px;
-    display: block;
-    margin: auto;
-    max-height: 60vh;
-    max-width: 100%;
-  }
-
-  &.is-hidden {
-    img {
-      display: none;
-    }
-  }
-}
-
-.ImageEditor-preview-border {
-  border-color: rgb(0 0 0 / 50%);
-  border-style: solid;
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.ImageEditor-preview-loader {
-  display: none;
-  height: 0;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 0;
-  z-index: 1;
-
-  &::before {
-    background: rgb(255 255 255 / 70%);
-    bottom: -1px;
-    content: '';
-    left: -1px;
-    position: absolute;
-    right: -1px;
-    top: -1px;
-  }
-
-  &::after {
-    .Icon;
-
-    animation: spin var(--time-xl) infinite ease-in-out;
-    color: var(--color-black);
-    content: 'autorenew';
-    left: calc(50% - var(--Icon-size) / 2);
-    position: absolute;
-    top: calc(50% - var(--Icon-size) / 2);
-  }
-}
-
-.ImageEditor {
-  --ImageEditor-asideWidth: 428px;
-
-  background: var(--color-white);
-  bottom: 0;
-  display: block;
-  left: 0;
-  opacity: 0;
-  position: fixed;
-  right: 0;
-  top: var(--Page-headerBottom);
-  transform: scaleY(0);
-  transform-origin: bottom;
-  transition:
-    opacity var(--time-xs) var(--ease-in),
-    transform var(--time-s) var(--ease-out);
-  z-index: 1000;
-
-  .CIG & > .TabBar {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  > [data-tab] {
-    height: calc(100% - var(--gap-m) * 2 - var(--lineHeight-m));
-  }
-
-  .ActionBar {
-    bottom: 0;
-    justify-content: space-between;
-    padding: var(--gap-l) var(--gap-xl);
-    position: fixed;
-    width: var(--ImageEditor-asideWidth);
-  }
-}
-
-.ImageEditor-main {
-  align-items: center;
-  background-color: var(--color-gray2);
-  bottom: 0;
-  left: var(--ImageEditor-asideWidth);
-  min-width: 420px;
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  img {
-    display: block;
-    max-height: 100%;
-    max-width: 100%;
-  }
-}
-
-.ImageEditor-focus {
-  color: var(--color-gray6);
-  margin: var(--gap-l) 0;
-
-  button {
-    margin-bottom: var(--gap-m);
-    width: 100%;
-
-    --Icon-color: var(--color-dominant6);
-
-    &:hover,
-    &:focus {
-      color: var(--color-dominant6);
-    }
-
-    &.is-active {
-      border-color: var(--Link-hoverColor);
-      color: var(--Link-hoverColor);
-
-      --Icon-color: var(--Link-hoverColor);
-    }
-
-    &.is-disabled {
-      border-color: var(--color-gray3);
-      color: var(--color-gray3);
-      pointer-events: none;
-
-      --Icon-color: var(--color-gray3);
-    }
-
-    &::before {
-      background: repeating-radial-gradient(
-        var(--Icon-color),
-        var(--Icon-color) 3px,
-        var(--color-white) 3px,
-        var(--color-white) 6px
-      );
-      border-radius: 50%;
-      content: '';
-      height: 24px;
-      margin-right: var(--gap-s);
-      width: 24px;
-    }
-  }
-}
-
-.ImageEditor-focus-container,
-.ImageEditor-focus-modal,
-.ImageEditor-hotspot-container,
-.ImageEditor-editableArea {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  &.is-hidden {
-    display: none;
-  }
-}
-
-.ImageEditor-focus-modal {
-  background: var(--color-black);
-  opacity: 0.6;
-}
-
-.ImageEditor-focusLine-x {
-  border-top: 2px dashed var(--color-white);
-  left: 0;
-  opacity: 0.64;
-  position: absolute;
-  width: 100%;
-}
-
-.ImageEditor-focusLine-y {
-  border-left: 2px dashed var(--color-white);
-  height: 100%;
-  opacity: 0.64;
-  position: absolute;
-  top: 0;
-}
-
-.ImageEditor-focusableArea {
-  border: 1px solid var(--Link-hoverColor);
-
-  &:hover {
-    cursor: crosshair;
-  }
-}
-
-.ImageEditor-implicitMessage,
-.ImageEditor-focusMessage {
-  .Text.is-s;
-
-  background: var(--color-gray7);
-  bottom: var(--gap-s);
-  color: var(--color-white);
-  left: 50%;
-  max-width: 95%;
-  opacity: 1;
-  padding: var(--gap-xs);
-  position: absolute;
-  right: auto;
-  text-transform: lowercase;
-  transform: translateX(-50%);
-  width: fit-content;
-
-  &::first-letter {
-    text-transform: uppercase;
-  }
-}
-
-.ImageEditor-implicitMessage {
-  bottom: auto;
-  top: var(--gap-s);
-}
-
-.ImageEditor-title {
-  background: var(--color-gray1);
-  font-weight: bold;
-  padding: var(--gap-m) var(--gap-l);
-  width: var(--ImageEditor-asideWidth);
-}
-
-.ImageEditor-aside {
-  bottom: calc(var(--lineHeight-m) + var(--gap-s) * 2 + var(--gap-l) * 2);
-  left: 0;
-  margin-top: calc(var(--lineHeight-m) + var(--gap-m) * 2);
-  overflow: auto;
-  padding: 0 var(--gap-xl) var(--gap-l) var(--gap-xl);
-  position: absolute;
-  top: 0;
-  width: var(--ImageEditor-asideWidth);
-
-  .TC-unselected {
-    display: none;
-  }
-
-  .TabBar {
-    margin: 0 calc(var(--gap-xl) * -1);
-  }
-}
-
-.ImageEditor-hotspotableArea {
-  background: rgb(255 255 255 / 0%);
-  position: relative;
-}
-
-.ImageEditor-hotspotableArea.is-dragging
-  .ImageEditor-hotspot.is-draggable:not(.is-dragging) {
-  opacity: 0.3;
-}
-
-// Hide the Transient hotspot region option since it isn't used.
-.ImageEditor-hotspots {
-  .ComboInput-option[data-value^='Transient'] {
-    display: none;
-  }
-}
-
-.ImageEditor-hotspots .hotSpots {
-  max-width: calc(var(--ImageEditor-asideWidth) - 2 * var(--gap-l));
-}
-
-// Hide the hotspot item's x/y inputs since those values will come from dragging hotspot overlays.
-.ImageEditor-hotspots .CIG-row[data-name$='/cms.image.x'],
-.ImageEditor-hotspots .CIG-row[data-name$='/cms.image.y'] {
-  display: none;
-}
-
-.ImageEditor-hotspot {
-  --x: 0;
-  --y: 0;
-  --size: 36px;
-  --Icon-size: calc(var(--size) - var(--size) / 2);
-
-  align-items: center;
-  background: var(--color-white);
-  border-radius: 100%;
-  box-shadow:
-    0 0 0 2px var(--color-gray6),
-    0 2px 3px 1px rgb(123 123 123 / 80%);
-  color: var(--color-gray6);
-  display: flex;
-  height: var(--size);
-  justify-content: center;
-  opacity: 1;
-  position: absolute;
-  transition: opacity var(--time-l) ease;
-  width: var(--size);
-  z-index: var(--index);
-}
-
-.ImageEditor-hotspot.is-hidden {
-  opacity: 0;
-}
-
-.ImageEditor-hotspot.is-hovered {
-  background: var(--color-blue5);
-}
-
-.ImageEditor-hotspot.is-removing {
-  background: var(--color-red1);
-  box-shadow:
-    0 0 0 2px var(--color-red6),
-    0 2px 1px 1px rgb(123 123 123 / 80%);
-  opacity: 0.8;
-  pointer-events: none;
-}
-
-.ImageEditor-hotspot.is-added {
-  animation: 500ms forwards isAdded ease-in-out;
-}
-
-.ImageEditor-hotspot.is-dragging {
-  background: var(--color-green2);
-  border-color: transparent;
-  box-shadow:
-    0 0 0 2px var(--color-green4),
-    0 2px 1px 1px rgb(123 123 123 / 80%);
-  color: var(--color-black);
-  opacity: 0.75;
-}
-
-.ImageEditor-focus {
-  > h2 {
-    .Text.is-m;
-
-    margin-bottom: var(--gap-m);
-  }
-
-  .ImageEditor-image {
-    cursor: crosshair;
-  }
-
-  .ImageEditor-aside {
-    align-items: center;
-    display: flex;
-    font-style: italic;
-    justify-content: center;
-    text-align: center;
-  }
-}
-
-.ImageEditor-edit {
-  > h2 {
-    display: none;
-  }
-
-  > table {
-    display: none;
-  }
-
-  .CIG-label:has(input[type='range']) {
-    --Text-height: var(--lineHeight-m);
-
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    height: calc(2 * var(--Text-height));
-
-    input[type='range'] {
-      width: 100%;
-    }
-  }
-}
-
-.ImageEditor-editGroup {
-  input[type='checkbox'] {
-    .Checkbox;
-
-    color: var(--Link-color);
-    margin-right: var(--gap-s);
-
-    &::before {
-      border-radius: 50%;
-    }
-
-    &:checked::after {
-      content: 'circle';
-    }
-  }
-}
-
-.imageEditor-adjustment {
-  label {
-    display: block;
-  }
-
-  > ul > li > label {
-    align-items: center;
-    display: flex;
-  }
-}
-
-.imageEditor-adjustment-icons {
-  list-style-type: none;
-  margin-left: 0;
-
-  li {
-    display: inline;
-    margin-right: 0.5em;
-  }
-}
-
-.ImageEditor-sizes {
-  margin: 0 calc(0px - var(--gap-xl)) calc(0px - var(--gap-l))
-    calc(0px - var(--gap-xl));
-
-  > h2 {
-    .Text.is-m;
-
-    margin-bottom: var(--gap-m);
-  }
-
-  > table {
-    display: none;
-  }
-}
-
-.ImageEditor-groups {
-  background: rgb(var(--rgb-white) / 90%);
-  display: flex;
-  justify-content: space-between;
-  position: absolute;
-  top: 0;
-
-  > * {
-    flex-basis: 100%;
-  }
-
-  > span {
-    padding: var(--gap-s) 0;
-    vertical-align: middle;
-  }
-
-  .ComboInput {
-    padding-left: var(--gap-s);
-  }
-}
-
-.ImageEditor-sizeSelectors {
-  display: grid;
-  grid-gap: var(--gap-s);
-}
-
-.ImageEditor-size {
-  cursor: pointer;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: var(--gap-m) var(--gap-xl);
-  position: relative;
-
-  &::after {
-    bottom: 0;
-    content: '';
-    left: 0;
-    position: absolute;
-    top: 0;
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform var(--time-xs) var(--ease-out);
-    width: var(--gap-m);
-  }
-
-  &.imageEditor-sizeSelected {
-    .ImageEditor-sizePreview {
-      --Icon-size: 20px;
-      --Icon-margin: 5px;
-
-      &::before {
-        background: var(--Input-focusBackground);
-        content: '';
-        height: calc(var(--Icon-size) + calc(var(--Icon-margin) * 2));
-        position: absolute;
-        top: 0;
-        width: calc(var(--Icon-size) + calc(var(--Icon-margin) * 2));
-      }
-
-      &::after {
-        .Icon;
-
-        content: 'check';
-        left: var(--Icon-margin);
-        position: absolute;
-        top: var(--Icon-margin);
-      }
-
-      canvas {
-        box-shadow: var(--shadow-1);
-      }
-    }
-  }
-
-  &.ImageEditor-sizeModified {
-    background: var(--color-yellow1);
-
-    &::after {
-      background: var(--color-yellow3);
-      transform: none;
-    }
-
-    .ImageEditor-sizeDescription .is-inherit {
-      display: none;
-    }
-
-    .ImageEditor-sizeDescription .is-override {
-      display: block;
-    }
-  }
-}
-
-.ImageEditor-sizePreview {
-  order: 1;
-  width: 100%;
-
-  canvas,
-  img {
-    background-color: var(--color-gray1);
-    background-image: linear-gradient(
-        45deg,
-        var(--color-gray3) 25%,
-        transparent 25%,
-        transparent 75%,
-        var(--color-gray3) 75%,
-        var(--color-gray3)
-      ),
-      linear-gradient(
-        -45deg,
-        var(--color-gray3) 25%,
-        transparent 25%,
-        transparent 75%,
-        var(--color-gray2) 75%,
-        var(--color-gray3)
-      );
-    background-size: 10px 10px;
-    display: block;
-    max-height: 20vh;
-    max-width: 100%;
-  }
-}
-
-.ImageEditor-sizeContainer {
-  align-items: center;
-  display: flex;
-  flex-grow: 1;
-  margin-top: var(--gap-s);
-  order: 2;
-}
-
-.ImageEditor-sizeLabel {
-  align-items: center;
-  text-transform: capitalize;
-
-  br {
-    display: none;
-  }
-
-  > * {
-    &:not(:last-child)::after {
-      content: ', ';
-    }
-  }
-}
-
-.ImageEditor-sizeDescription {
-  .Text.is-s;
-
-  color: var(--color-gray6);
-  flex-basis: 100%;
-  order: 2;
-  text-transform: capitalize;
-
-  .is-inherit {
-    display: block;
-  }
-
-  .is-override {
-    display: none;
-  }
-}
-
-.ImageEditor-resetButton,
-.ImageEditor-renditionResetButton {
-  .Link;
-  .Link.is-red;
-  .Text.is-s;
-
-  align-items: center;
-  display: none;
-  margin: var(--gap-s) 0 0 0;
-  min-width: max-content;
-
-  &::before {
-    .Icon;
-    .Icon.is-s;
-
-    content: 'refresh';
-    margin-right: var(--gap-xs);
-  }
-}
-
-.ImageEditor-renditionResetButton.is-visible {
-  display: block;
-  line-height: var(--lineHeight-m);
-  margin: 0 0 0 var(--gap-l);
-
-  &::before {
-    top: 50%;
-  }
-}
-
-.ImageEditor-resetButton {
-  display: block;
-  margin: 0;
-}
-
-.is-imageEditorOpen {
-  .ImageEditor {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.is-imageEditorLoading {
-  .ImageEditor-preview-loader {
-    display: block;
-  }
-}
-
-.ImageEditor-focusMessage.is-hidden {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.is-imageEditorReady {
-  .ImageEditor-preview-loader {
-    display: none;
-
-    &::before,
-    &::after {
-      animation: none;
-      background: none;
-      content: '';
-    }
-  }
-}
-
-.ImageEditor-rotate-left,
-.ImageEditor-rotate-right,
-.ImageEditor-flip-h,
-.ImageEditor-flip-v {
-  .IconButton;
-
-  float: left;
-}
-
-.ImageEditor-rotate-left {
-  --IconButton-name: 'rotate_90_degrees_ccw';
-}
-
-.ImageEditor-rotate-right {
-  --IconButton-name: 'rotate_90_degrees_ccw';
-
-  transform: scaleX(-1);
-}
-
-.ImageEditor-flip-h {
-  --IconButton-name: 'flip';
-}
-
-.ImageEditor-flip-v {
-  --IconButton-name: 'flip';
-
-  transform: rotate(90deg);
-}
-
-.ImageEditor-focus-point {
-  background: repeating-radial-gradient(
-    var(--color-black),
-    var(--color-black) 3px,
-    var(--color-white) 3px,
-    var(--color-white) 6px
-  );
-  border-radius: 50%;
-  height: 24px;
-  margin-left: -12px;
-  margin-top: -12px;
-  position: absolute;
-  width: 24px;
-
-  &.is-hidden:not(.is-implicit) {
-    display: none;
-  }
-
-  &.is-implicit {
-    opacity: 0.4;
-  }
-}
-
-.ImageEditor-implicitMessage.is-hidden {
-  display: none;
-}
-
-// noUiSlider style overrides:
-
-.is-slideable.noUi-target {
-  border: none;
-  box-shadow: none;
-}
-
-.is-slideable {
-  --Thumb-diameter: 1.5em;
-  --Thumb-color: var(--color-dominant6);
-  --Thumb-hover-color: var(--Input-focusColor);
-  --Track-color: var(--color-gray3);
-  --Track-height: 4px;
-}
-
-.is-slideable.noUi-target {
-  background: none;
-  height: 20px;
-}
-
-.is-slideable.noUi-target::after {
-  background: var(--Track-color);
-  content: '';
-  height: var(--Track-height);
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
-}
-
-.is-slideable.noUi-horizontal .noUi-handle {
-  background: var(--Thumb-color);
-  border: none;
-  border-radius: 100%;
-  box-shadow: none;
-  height: var(--Thumb-diameter);
-  left: calc(-1 * var(--Thumb-diameter) / 2);
-  top: -2px;
-  width: var(--Thumb-diameter);
-
-  &::before,
-  &::after {
-    content: none;
-  }
-
-  &:hover {
-    background: var(--Thumb-hover-color);
-  }
-}
-
-html:not([dir='rtl']) .is-slideable.noUi-horizontal .noUi-handle {
-  right: calc(-1 * var(--Thumb-diameter) / 2);
-}