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

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

@@ -1,296 +0,0 @@
-.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

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