@brightspot/ui 3.0.0 → 3.0.1-cms-ui-migration.1

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

@@ -0,0 +1,731 @@
+.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;
+      }
+    }
+  }
+}