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

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

@@ -0,0 +1,296 @@
+.RCS {
+  --RCS-markerSize: calc(var(--gap-s) * 2 + var(--Text-height));
+
+  counter-reset: RCS-item;
+
+  &.is-addToTop {
+    display: flex;
+    flex-direction: column;
+
+    .RCS-controls {
+      order: -1;
+    }
+
+    .RCS-list:not(:empty) {
+      margin-bottom: 0;
+      margin-top: var(--gap-s);
+    }
+  }
+
+  .ContentSelector-select + .ComboInput {
+    max-width: calc(
+      (100% - var(--gap-s) * 6 - var(--Icon-size) * 3) - var(--RCS-markerSize) -
+        var(--gap-s)
+    );
+  }
+
+  .action-upload {
+    .IconButton.no-Fill;
+    .Link.is-black;
+
+    --IconButton-name: 'publish';
+
+    + .RCS-controls {
+      display: inline-block;
+      margin-left: var(--gap-l);
+
+      .RCS-add {
+        display: inline !important;
+        height: auto;
+        line-height: var(--RCS-markerSize);
+        width: auto;
+      }
+    }
+  }
+}
+
+.RCS-item {
+  counter-increment: RCS-item;
+  margin: 0 0 var(--gap-s) 0;
+
+  &::before {
+    align-items: center;
+    background: var(--color-gray2);
+    border-radius: var(--RCS-markerSize);
+    content: counter(RCS-item);
+    display: inline-flex;
+    height: var(--RCS-markerSize);
+    justify-content: center;
+    margin-right: var(--gap-s);
+    vertical-align: middle;
+    width: var(--RCS-markerSize);
+  }
+
+  input[data-preview] {
+    ~ .RCS-remove,
+    ~ .MultiSortable-buttonToggle {
+      position: relative;
+    }
+  }
+}
+
+.RCS-item.Sortable-chosen,
+.RCS-item.Sortable-selected {
+  &::before {
+    background: var(--color-blue2);
+    color: var(--color-black);
+  }
+
+  > input[type],
+  > btu-input input[type] {
+    border-bottom: none;
+  }
+
+  &.Sortable-ghost {
+    &::before {
+      background: var(--color-blue5);
+      color: var(--color-white);
+    }
+
+    > a.ContentSelector-edit,
+    > a.ContentSelector-search,
+    > a.ContentSelector-search::after,
+    .ComboInput-selected {
+      color: var(--color-white);
+    }
+  }
+}
+
+.RCS-remove {
+  .Icon.is-s;
+  .IconButton;
+  .IconButton.is-red;
+
+  --IconButton-name: 'remove';
+}
+
+.RCS-add {
+  .IconButton.no-Fill;
+  .Link;
+  .Link.is-black;
+
+  --IconButton-name: 'add';
+
+  display: inline-block !important;
+}
+
+.RCS-item.is-removing {
+  color: var(--color-red6);
+
+  &::before {
+    background: var(--color-red1);
+    border-radius: 0;
+    margin-right: 0;
+    padding-right: var(--gap-s);
+    text-decoration: line-through;
+    width: calc(var(--RCS-markerSize) + var(--gap-s));
+  }
+
+  .ComboInput {
+    --Input-borderColor: var(--color-red1);
+
+    background: var(--color-red1);
+    pointer-events: none;
+    text-decoration: line-through;
+
+    .ComboInput-icon::after {
+      display: none;
+    }
+  }
+
+  .ContentSelector-search {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  .RCS-remove {
+    --IconButton-name: 'add';
+    --Link-color: var(--color-black);
+    --Link-hoverColor: var(--color-blue5);
+
+    &:focus::after {
+      transform: scale(0);
+    }
+  }
+}
+
+.RCS.is-grid {
+  > ol {
+    display: flex;
+    flex-wrap: wrap;
+
+    &:not(:empty) {
+      margin: calc(0px - var(--gap-s));
+    }
+
+    > .RCS-item {
+      flex: none;
+      padding: var(--gap-s);
+      position: relative;
+      width: 200px;
+
+      &::before {
+        border-radius: 50%;
+        left: var(--gap-s);
+        position: absolute;
+        top: var(--gap-s);
+        z-index: 1;
+      }
+
+      &.Sortable-selected .ContentSelector-search figcaption {
+        background: unset;
+      }
+
+      .ContentSelector-search {
+        border: 0;
+        margin: 0;
+        max-width: none;
+        overflow: unset;
+        padding-right: unset;
+        padding-top: calc(var(--Icon-size) + var(--gap-s) * 3);
+        width: calc(100% - var(--Icon-size) - var(--gap-s) * 2 - var(--gap-xs));
+
+        .is-boxedInput & {
+          padding: calc(var(--Icon-size) + var(--gap-s) * 3) 0
+            calc(var(--gap-s) - 1px) 0;
+        }
+
+        &::before,
+        &::after {
+          margin-top: calc(var(--Icon-size) + var(--gap-s) * 3);
+          z-index: 1;
+        }
+
+        &::before {
+          background: var(--color-white);
+          border-bottom-left-radius: unset;
+          content: '';
+          height: calc(var(--gap-s) * 2 + var(--Icon-size));
+          position: absolute;
+          right: 0;
+          top: 0;
+          transition: all var(--time-s) var(--ease-out);
+          width: calc(var(--gap-s) * 2 + var(--Icon-size));
+        }
+
+        &:hover::before {
+          background: var(--color-dominant2);
+          border-radius: 50%;
+          right: 0;
+          top: 0;
+        }
+
+        &::after {
+          right: var(--gap-s);
+          top: var(--gap-s);
+        }
+
+        &:focus {
+          background: unset;
+        }
+
+        figure {
+          padding-bottom: calc(var(--Text-height) * 2 + var(--gap-xs));
+          position: relative;
+          width: 100%;
+
+          img {
+            background-color: var(--color-white);
+            box-shadow: var(--shadow-1);
+            height: 150px;
+            object-fit: contain;
+            width: 100%;
+          }
+
+          figcaption {
+            background: var(--color-white);
+            bottom: 0;
+            -webkit-box-orient: vertical;
+            color: unset;
+            display: -webkit-box;
+            font-style: unset;
+            height: calc(var(--Text-height) * 2);
+            left: 0;
+            overflow: hidden;
+            position: absolute;
+            right: 0;
+            white-space: nowrap;
+          }
+        }
+
+        .RCS-caption {
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          height: calc(var(--Text-height) * 2 + var(--gap-xs));
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          padding-top: var(--gap-xs);
+          white-space: pre-wrap;
+        }
+
+        .RCS-placeholderCard {
+          background: var(--color-white);
+          box-shadow: var(--shadow-1);
+          height: 150px;
+        }
+      }
+
+      .ContentSelector-search + .ContentSelector-edit {
+        margin-left: var(--gap-xs);
+        position: absolute;
+        top: calc(var(--RCS-markerSize) + var(--gap-s) * 2);
+      }
+
+      .MultiSortable-buttonToggle {
+        position: absolute;
+        right: calc(var(--gap-s) * 3 + var(--gap-xs) + var(--Icon-size));
+      }
+
+      .RCS-remove {
+        position: absolute;
+        right: var(--gap-s);
+        top: unset;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,156 @@
+.RTI {
+  --RTI-markerSize: calc(var(--gap-s) * 2 + var(--Text-height));
+
+  margin-top: 0;
+}
+
+.RTI-list > li,
+.RTI-add {
+  display: flex;
+  flex: 2 1;
+  margin-top: var(--gap-s);
+  position: relative;
+
+  > btu-input {
+    flex: 2 1;
+    width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
+  }
+}
+
+// Add the numbers to the left on OLs.
+ol.RTI-list {
+  counter-reset: RTI-list;
+
+  > li,
+  + .RTI-add {
+    padding-left: calc(var(--RTI-markerSize) + var(--gap-s));
+
+    &::before {
+      align-items: center;
+      background: var(--color-gray2);
+      border-radius: 50%;
+      content: '';
+      display: inline-flex;
+      height: var(--RTI-markerSize);
+      justify-content: center;
+      left: 0;
+      margin-right: var(--gap-s);
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      width: var(--RTI-markerSize);
+    }
+  }
+
+  > li {
+    counter-increment: RTI-list;
+
+    &::before {
+      content: counter(RTI-list);
+      transition: transform var(--time-s) var(--ease-out);
+    }
+
+    &.Sortable-selected {
+      input[type='text'] {
+        pointer-events: none;
+      }
+
+      &::before {
+        background: var(--color-blue2);
+      }
+    }
+
+    &.Sortable-ghost.Sortable-item {
+      color: var(--color-white);
+
+      &::before {
+        background: var(--color-blue5);
+        color: var(--color-white);
+      }
+    }
+  }
+}
+
+ol.RTI-list > li.Sortable-chosen::before {
+  color: var(--color-blue6);
+  transform: translateZ(0) scale3d(0.85, 0.85, 1);
+}
+
+ol.RTI-list > li.Sortable-chosen > btu-input input[type] {
+  border-bottom: none;
+}
+
+// Add and remove buttons.
+.RTI-list > li > .RTI-remove,
+.RTI-add > :is(span, a) {
+  .IconButton;
+
+  top: calc(var(--gap-xs) * -1);
+  user-select: none;
+}
+
+.RTI-list > li > .RTI-remove {
+  .IconButton.is-red;
+  .Link;
+
+  --IconButton-name: 'remove';
+}
+
+ol.RTI-list + .RTI-add::before {
+  background: transparent;
+  border: dashed 2px var(--color-gray2);
+}
+
+.RTI-add > :is(span, a) {
+  --IconButton-name: 'add';
+}
+
+// Tint removing items red.
+.RTI-list > li.is-removing {
+  &::before {
+    background: var(--color-red1);
+    color: var(--color-red6);
+  }
+
+  > btu-input input[type='text'] {
+    background: var(--color-red1);
+    color: var(--color-red6);
+    text-decoration: line-through;
+  }
+
+  > .RTI-remove {
+    .Link.is-blue;
+
+    --IconButton-name: 'add';
+  }
+}
+
+.RTI-handle {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+
+// Make the input area smaller on larger screens.
+@media (@mq-m) {
+  .RTI-list > li,
+  .RTI-add {
+    width: 75%;
+  }
+}
+
+@media (@mq-l) {
+  .RTI-list > li > .RTI-remove,
+  .RTI-add > :is(span, a) {
+    top: 0;
+  }
+}
+
+@media (@mq-xl) {
+  .RTI-list > li,
+  .RTI-add {
+    width: 50%;
+  }
+}