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

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

@@ -1,731 +0,0 @@
-.RCIG {
-  --RCIG-titleHeight: calc(var(--gap-m) * 2 + var(--Text-height));
-  --RCIG-addSize: calc(var(--gap-s) * 2 + var(--Text-height));
-
-  position: relative;
-}
-
-.RCIG-list {
-  counter-reset: RCIG-item;
-
-  &:not(:empty) {
-    > .RCIG-item:last-child:not(.is-gridItem, .Sortable-selected) {
-      border-bottom: 1px solid var(--color-gray3);
-    }
-
-    margin-bottom: var(--gap-s);
-  }
-
-  li:focus-within {
-    z-index: 1;
-
-    .RCIG-title:focus {
-      background: var(--color-gray2);
-    }
-  }
-}
-
-.RCIG-item {
-  background: var(--color-white);
-  border-color: var(--color-gray3);
-  border-style: solid;
-  border-width: 1px 1px 0;
-  counter-increment: RCIG-item;
-  position: relative;
-
-  &.Sortable-selected {
-    &:not(:first-child, .draggable-mirror),
-    &:not(.draggable-mirror) {
-      border-color: var(--color-blue5);
-    }
-  }
-
-  &::before {
-    bottom: 0;
-    box-shadow: var(--shadow-3);
-    content: '';
-    left: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: opacity var(--time-s) var(--ease-out);
-  }
-
-  &.is-collapsed,
-  &.is-removing {
-    height: var(--RCIG-titleHeight);
-    overflow: hidden;
-
-    &:not(:first-child, .draggable-mirror, .Sortable-selected) {
-      height: calc(var(--RCIG-titleHeight) + 1px);
-    }
-
-    &.Sortable-selected {
-      .RCIG-title {
-        height: calc(var(--RCIG-titleHeight) - 4px);
-        padding: calc(var(--gap-m) - 2px) 0;
-      }
-
-      .RCIG-swap,
-      .RCIG-remove,
-      .MultiSortable-buttonToggle {
-        top: calc(var(--gap-m) - var(--gap-s) - 2px);
-      }
-    }
-  }
-
-  &:not(.is-removing, [data-empty]) {
-    > .RCIG-title:hover::before,
-    > .RCIG-title:focus::before {
-      .Icon;
-
-      content: 'expand_less';
-      overflow: hidden;
-    }
-
-    &.is-collapsed,
-    &.is-gridItem {
-      > .RCIG-title:hover::before,
-      > .RCIG-title:focus::before {
-        content: 'expand_more';
-      }
-    }
-  }
-
-  &:not(.is-collapsed, .is-removing) {
-    &::before {
-      opacity: 1;
-    }
-  }
-
-  > .MultiSortable-buttonToggle {
-    position: absolute;
-    right: calc(var(--gap-xs) * 4.5 + var(--Icon-size));
-    top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2 - var(--gap-s));
-  }
-
-  &.is-loading::after {
-    .Icon;
-
-    animation: spin var(--time-xl) infinite ease-in-out;
-    background: var(--color-gray2);
-    color: var(--color-black);
-    content: 'autorenew';
-    left: calc((var(--RCIG-addSize) - var(--Icon-size)) / 2);
-    position: absolute;
-    top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2);
-  }
-}
-
-.RCIG-item.Sortable-ghost {
-  background: var(--color-white);
-}
-
-.RCIG-item.Sortable-ghost > .RCIG-title {
-  background: var(--color-blue5);
-  user-select: none;
-}
-
-.RCIG-item.MultiSortable > .RCIG-title {
-  &:hover {
-    background: var(--color-gray2);
-    cursor: move;
-  }
-
-  &.is-loading::after {
-    .Icon;
-
-    animation: spin var(--time-xl) infinite ease-in-out;
-    background: var(--color-gray2);
-    color: var(--color-black);
-    content: 'autorenew';
-    left: calc((var(--RCIG-addSize) - var(--Icon-size)) / 2);
-    position: absolute;
-    top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2);
-  }
-}
-
-.RCIG-item > .CIG > .CIG-row.is-unlabeled:only-of-type {
-  > .CIG-label {
-    display: none;
-  }
-
-  > .CIG-small,
-  > .CIG-large {
-    margin-top: 0;
-  }
-
-  > .CIG-large > .CIG {
-    margin: calc(0px - var(--CIG-padding));
-  }
-}
-
-.RCIG-title {
-  cursor: pointer;
-  height: var(--RCIG-titleHeight);
-  overflow: hidden;
-  padding: var(--gap-m) 0;
-  padding-right: calc(var(--Icon-size) * 3 + var(--gap-s) * 6 + var(--gap-l));
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &::before {
-    content: counter(RCIG-item);
-    display: inline-block;
-    margin-right: var(--gap-s);
-    text-align: center;
-    width: var(--RCIG-addSize);
-  }
-}
-
-.RCIG-item:not(.is-collapsed, .is-removing) > .RCIG-title {
-  background: var(--color-gray2);
-}
-
-.RCIG-previewField.is-error.state-changed::after,
-.RCIG-previewField.is-error.state-changed > .Message.is-error {
-  display: none;
-}
-
-.RCIG-remove {
-  .Icon.is-s;
-  .IconButton;
-  .IconButton.is-red;
-
-  --IconButton-name: 'remove';
-
-  position: absolute;
-  right: 0;
-  top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2 - var(--gap-s));
-}
-
-.RCIG-add,
-.RCIG-addSelect {
-  .IconButton.no-Fill;
-  .Link;
-  .Link.is-black;
-
-  --IconButton-name: 'add';
-
-  margin-right: var(--gap-l);
-}
-
-&:not('.Dropdown-item') > .RCIG-swap {
-  font-size: 0;
-  position: absolute;
-  right: calc(var(--gap-s) * 4 + var(--Icon-size) * 2);
-  top: calc((var(--RCIG-titleHeight) - var(--Icon-size)) / 2 - var(--gap-s));
-
-  .Sortable-ghost & {
-    color: var(--color-white);
-  }
-}
-
-.RCIG-addSelect {
-  --Link-hoverDecoration: none;
-
-  line-height: unset;
-}
-
-.RCIG-item.is-removing {
-  background: var(--color-red1);
-  box-shadow: none;
-  height: var(--RCIG-titleHeight);
-  overflow: hidden;
-
-  > .RCIG-title,
-  > .RCIG-title::before {
-    color: var(--color-red6);
-    pointer-events: none;
-    text-decoration: line-through;
-  }
-
-  > .RCIG-remove {
-    .Link.is-blue;
-
-    --IconButton-name: 'add';
-  }
-
-  .TabBar {
-    display: none;
-  }
-}
-
-.RCIG-item.is-error > .RCIG-title::before {
-  .Icon;
-
-  color: var(--color-red6);
-  content: 'error' !important;
-}
-
-.RCIG.is-addToTop {
-  display: flex;
-  flex-direction: column;
-
-  .RCIG-controls {
-    order: -1;
-  }
-
-  .RCIG-list:not(:empty) {
-    margin-bottom: 0;
-    margin-top: var(--gap-s);
-  }
-}
-
-.RCIG-preview {
-  display: none;
-}
-
-.RCIG-expandAll {
-  .Icon.is-s;
-  .IconButton;
-
-  --IconButton-name: 'unfold_more';
-
-  &.is-expanded {
-    --IconButton-name: 'unfold_less';
-  }
-
-  position: absolute;
-  right: 0;
-  top: calc(
-    0px - var(--gap-s) * 3 - (var(--Text-height) + var(--Icon-size)) / 2
-  );
-}
-
-.RCIG[data-rcig-size='0'] {
-  .RCIG-expandAll,
-  .RCIG-resetWeights {
-    display: none;
-  }
-
-  &.is-previewable .repeatablePreviewControls {
-    right: 0;
-  }
-}
-
-.RCIG.is-previewable {
-  > .repeatablePreviewControls {
-    position: absolute;
-    right: calc(var(--gap-s) * 3 + var(--Icon-size));
-    top: calc(0px - var(--gap-s) * 3 - var(--Text-height));
-  }
-
-  .action-upload {
-    .IconButton.no-Fill;
-    .Link;
-    .Link.is-black;
-
-    --IconButton-name: 'publish';
-
-    + .RCIG-controls {
-      display: inline-block;
-      margin-left: var(--gap-l);
-    }
-  }
-
-  .copyButton {
-    display: none;
-  }
-
-  &.is-gridView {
-    > .repeatablePreviewControls {
-      right: 0;
-    }
-
-    > .RCIG-expandAll {
-      display: none;
-    }
-
-    > .RCIG-list {
-      border: 0;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-
-      &:not(:empty) {
-        padding: 1px 0 0 1px;
-      }
-
-      > .RCIG-item {
-        --RCIG-itemHeight: 200px;
-
-        border-width: 1px;
-        box-shadow: none;
-        height: calc(var(--RCIG-itemHeight) + 1px);
-        margin: -1px 0 0 -1px;
-        position: relative;
-
-        &::before {
-          display: none;
-        }
-
-        > .RCIG-title {
-          background: transparent;
-          padding-right: calc(var(--Icon-size) * 2 + var(--gap-s) * 3);
-        }
-
-        > .MultiSortable-buttonToggle {
-          right: calc(var(--gap-s) * 2 + var(--Icon-size));
-        }
-
-        .CIG-row:not(.RCIG-previewField),
-        .TabBar {
-          display: none;
-        }
-
-        .CIG-row.RCIG-previewField {
-          left: 0;
-          padding: 0;
-          position: absolute;
-          top: calc(0px - var(--gap-s));
-
-          &::after {
-            display: none;
-          }
-
-          > .CIG-label {
-            display: none;
-          }
-
-          > .CIG-small {
-            > .ContentSelector-search {
-              max-width: none;
-              width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
-
-              > figure {
-                width: 100%;
-
-                > img {
-                  height: calc(
-                    var(--RCIG-itemHeight) - var(--RCIG-titleHeight)
-                  );
-                  object-fit: cover;
-                  width: 100%;
-                }
-
-                > figcaption {
-                  display: none;
-                }
-              }
-            }
-
-            input[data-previewable='true'] {
-              &:not([data-preview]),
-              &[data-preview=''] {
-                + .ContentSelector-search {
-                  background: var(--color-gray1);
-                  border-width: 0;
-                  height: calc(
-                    var(--RCIG-itemHeight) - var(--RCIG-titleHeight) - 1px
-                  );
-                  padding: var(--gap-s);
-                  width: calc(100% - var(--gap-s) * 2 - var(--Icon-size));
-
-                  + .ContentSelector-edit {
-                    vertical-align: top;
-                  }
-                }
-              }
-            }
-
-            > .ContentSelector-clear {
-              display: none;
-            }
-          }
-        }
-
-        > .RCIG-preview {
-          background: var(--color-gray1);
-          display: block;
-          height: calc(var(--RCIG-itemHeight) - var(--RCIG-titleHeight));
-          left: 0;
-          position: absolute;
-          top: var(--RCIG-titleHeight);
-          width: 100%;
-
-          > img {
-            height: 100%;
-            object-fit: cover;
-            width: 100%;
-
-            &:not([src]),
-            &[src=''] {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.RCIG.is-weighted {
-  --RCIG-weightLabelWidth: calc(var(--fontSize-m) * 3.5);
-
-  > .RCIG-list > li > .RCIG-title::before {
-    margin-right: calc(var(--RCIG-weightLabelWidth) + var(--gap-m));
-  }
-}
-
-.RCIG-resetWeights {
-  .Icon.is-s;
-  .IconButton;
-
-  --IconButton-name: 'view_column';
-
-  position: absolute;
-  right: calc(var(--gap-xs) * 4.5 + var(--Icon-size));
-  top: calc(
-    0px - var(--gap-s) * 3 - (var(--Text-height) + var(--Icon-size)) / 2
-  );
-}
-
-.RCIG-weightBar {
-  display: flex;
-  height: calc(var(--gap-s) * 2 + var(--Text-height));
-  margin-bottom: var(--gap-s);
-  overflow: hidden;
-  width: 100%;
-
-  &:empty {
-    display: none;
-  }
-}
-
-.RCIG-weightBarItem {
-  height: 100%;
-  position: relative;
-
-  &:not(:last-child) {
-    border-right: 1px solid var(--color-white);
-  }
-
-  &:first-child .RCIG-weightBarHandle {
-    display: none;
-  }
-}
-
-.RCIG-weightBarMarker {
-  background: var(--color-white);
-  border-radius: 50%;
-  height: var(--gap-xs);
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: var(--gap-xs);
-}
-
-.RCIG-weightBarHandle {
-  background: var(--color-white);
-  border-radius: 2px;
-  bottom: var(--gap-s);
-  cursor: col-resize;
-  height: var(--Text-height);
-  left: calc(0px - var(--gap-m) / 2 - 1px);
-  position: absolute;
-  top: var(--gap-s);
-  width: calc(var(--gap-m) + 1px);
-
-  &::after {
-    border-color: var(--color-black);
-    border-style: solid;
-    border-width: 0 1px;
-    bottom: var(--gap-xs);
-    content: '';
-    left: calc(var(--gap-m) / 2 - 2px);
-    position: absolute;
-    right: calc(var(--gap-m) / 2 - 2px);
-    top: var(--gap-xs);
-  }
-}
-
-.RCIG-weightLabel {
-  height: calc(var(--gap-xs) * 2 + var(--Text-height));
-  left: var(--RCIG-addSize);
-  pointer-events: none;
-  position: absolute;
-  top: calc(var(--gap-m) - var(--gap-xs));
-  width: var(--RCIG-weightLabelWidth);
-
-  &::after {
-    color: var(--color-white);
-    content: attr(data-weight-label);
-    left: 0;
-    line-height: calc(var(--gap-xs) * 2 + var(--Text-height));
-    padding: 0 var(--gap-s);
-    position: absolute;
-    text-align: right;
-    top: 0;
-    width: 100%;
-  }
-}
-
-.RCIG-weightColor {
-  border-radius: calc(var(--Text-height) / 8);
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-// Contextual image editor available
-.RCIG-item {
-  &.is-gridItem > .CIG > .RCIG-previewField,
-  &.is-collapsed > .CIG > .RCIG-previewField {
-    [data-image-editor='true'] .ImageEditor-container {
-      > * {
-        display: none;
-      }
-
-      > .ImageEditor-preview {
-        display: flex;
-      }
-    }
-  }
-
-  &.is-gridItem > .CIG > .RCIG-previewField [data-image-editor='true'] {
-    > input[data-previewable='true'][data-preview]:not([data-preview=''])
-      + .ContentSelector-search {
-      border: none;
-      overflow: visible;
-      padding: 0;
-      top: calc(0px - var(--gap-s));
-
-      &::before,
-      &::after {
-        z-index: 1;
-      }
-
-      > span {
-        visibility: hidden;
-      }
-    }
-
-    > .ImageEditor-container {
-      height: calc(var(--RCIG-itemHeight) - var(--RCIG-titleHeight));
-      left: 0;
-      min-height: 0;
-      min-width: 0;
-      position: absolute;
-      right: calc(var(--gap-s) + var(--Icon-size));
-      top: 0;
-      width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
-
-      canvas {
-        max-height: calc(var(--RCIG-itemHeight) - var(--RCIG-titleHeight));
-      }
-    }
-  }
-}
-
-// Legacy.
-.repeatableLabel-progress {
-  font-size: 10px;
-  position: absolute;
-  right: 50px;
-  text-transform: uppercase;
-  top: 2px;
-
-  [data-toggle-field-value] > & {
-    right: 105px;
-  }
-
-  .repeatableLabel-progressLabel {
-    display: block;
-    text-align: center;
-  }
-
-  .repeatableLabel-progressBar {
-    background: @color-border;
-    border-radius: 3px;
-    height: 6px;
-    width: 180px;
-
-    .repeatableLabel-progressFill {
-      background: @color-focus;
-      height: 100%;
-    }
-  }
-}
-
-.repeatableForm-alt {
-  > ol > li {
-    &[data-progress-field-value] > .repeatableLabel {
-      padding-right: 368px;
-    }
-
-    &[data-toggle-field-value='false'],
-    &.toBeRemoved {
-      > .repeatableLabel {
-        background: @color-heading;
-      }
-
-      .repeatableLabel-color::before {
-        background: @color-border;
-        border-radius: 10px;
-        content: '';
-        display: block;
-        height: 100%;
-        width: 100%;
-      }
-
-      .repeatableLabel-weightLabel::after {
-        content: '0%';
-        min-width: 18px;
-      }
-    }
-
-    &.toBeRemoved {
-      .repeatableLabel-weightLabel,
-      .repeatableLabel-toggleLabel,
-      .repeatableLabel-progress {
-        display: none;
-      }
-    }
-  }
-}
-
-.repeatableLabel-toggle {
-  display: none;
-  position: absolute;
-  right: 42px;
-  top: 12px;
-
-  + .repeatableLabel-toggleLabel {
-    background: @color-border;
-    border-radius: 10px;
-    cursor: pointer;
-    display: block;
-    height: 20px;
-    outline: 0;
-    padding: 2px;
-    position: absolute;
-    right: 45px;
-    top: 5px;
-    transition: all 0.4s ease;
-    user-select: none;
-    width: 35px;
-
-    &::after {
-      background: #fff;
-      border-radius: 50%;
-      content: '';
-      display: block;
-      height: 16px;
-      left: 0;
-      transition: all 0.2s ease;
-      width: 16px;
-    }
-  }
-
-  &:checked {
-    + .repeatableLabel-toggleLabel {
-      background: @color-publish;
-
-      &::after {
-        margin-left: 15px;
-      }
-    }
-  }
-}