@brightspot/ui 3.0.1 → 5.0.1

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

@@ -0,0 +1,115 @@
+.SearchWidgetAdvanced form {
+  display: contents;
+}
+
+.SearchWidgetAdvanced li > btu-input input[type='text'] {
+  width: auto;
+}
+
+.SearchWidgetAdvanced li > * {
+  margin-left: var(--gap-l);
+}
+
+.SearchWidgetAdvanced .icon-action-remove {
+  .IconButton;
+  .IconButton.is-red;
+
+  --IconButton-name: 'close';
+
+  order: 2;
+}
+
+.SearchWidgetAdvanced .icon-action-add {
+  margin-left: var(--gap-l);
+  order: 1;
+  position: initial;
+}
+
+.SearchWidgetAdvanced-scrollpane {
+  margin-bottom: var(--gap-l);
+  width: 100%;
+}
+
+// Contextual Widget styles:
+
+.SearchWidgetAdvanced .ComboInput {
+  order: 0;
+  width: auto;
+}
+
+.SearchWidgetAdvanced-scrollpane > ul > li:not(.ComboInput-option) {
+  .icon-action-add {
+    // Display a vertical line to visually connect items.
+    &::before {
+      border-top: solid 1px var(--color-gray3);
+      content: '';
+      height: calc(100% - var(--gap-m));
+      left: ~'calc(0px - (var(--gap-l) + 1px))';
+      position: absolute;
+      top: calc(var(--gap-l) - (var(--gap-l) - var(--lineHeight-s)));
+      width: calc(var(--gap-l) / 2);
+      z-index: 2;
+    }
+  }
+}
+
+.SearchWidgetAdvanced li {
+  & > {
+    .ComboInput {
+      margin-left: 0;
+    }
+    // All ComboInputs except the first one get a margin between them.
+    .ComboInput ~ .ComboInput {
+      margin-left: 20px;
+    }
+  }
+
+  & > .RCS {
+    margin-left: 0;
+    order: 3;
+    width: 100%;
+  }
+
+  & > .RCS .ComboInput {
+    min-width: 70%;
+  }
+}
+
+.SearchWidgetAdvanced ul:not(.ComboInput-list, .RCS-list) {
+  border-left: solid 1px var(--color-gray3);
+  display: flex;
+  flex-basis: 100%;
+  flex-wrap: wrap;
+  margin-left: ~'calc(var(--gap-s) / 2)';
+  margin-top: ~'calc((var(--gap-l) / 2) / 2)';
+  order: 3;
+  padding-left: var(--gap-l);
+}
+
+.SearchWidgetAdvanced li:not(.ComboInput-option, .RCS-item) {
+  align-items: center;
+  display: flex;
+  flex-basis: 100%;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  &:first-child {
+    margin-top: calc(var(--gap-m) / 2);
+  }
+
+  &:last-child {
+    // Hide the dangling vertical line used to connect items
+    // since the bottom item connects with a horizontal line.
+    &::before {
+      border-top: solid 1px var(--color-gray3);
+      box-shadow: inset 1px 0 white;
+      content: '';
+      height: calc(100% - var(--gap-m));
+      left: ~'calc(0px - (var(--gap-l) + 1px))';
+      position: absolute;
+      top: ~'calc((var(--lineHeight-m) + (2 * var(--gap-s))) / 2)';
+      width: calc(var(--gap-l) / 2);
+      z-index: 2;
+    }
+  }
+}

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

@@ -0,0 +1,95 @@
+.SharePreview {
+  display: grid;
+  grid-template:
+    'title' auto
+    'content' 1fr ~'/'
+    1fr;
+  height: 100vh;
+  width: 100vw;
+
+  --SharedPreview-Height: 56px;
+
+  .SharePreview-content {
+    grid-area: content;
+  }
+
+  .PreviewFrame {
+    height: 100%;
+  }
+
+  .PreviewFrame-typeDisplay {
+    height: 100%;
+    position: relative;
+    width: 100%;
+
+    > iframe {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+}
+
+.SharePreview-title {
+  align-items: center;
+  background: var(--color-dominant7);
+  color: var(--color-white);
+  display: flex;
+  grid-area: title;
+  height: var(--SharedPreview-Height);
+  padding: var(--gap-s) var(--gap-l);
+}
+
+.SharePreview-info {
+  flex-grow: 1;
+  max-width: 95vw;
+  overflow: hidden;
+  padding: calc(var(--Text-height) - var(--gap-s)) 0;
+  white-space: nowrap;
+
+  a {
+    color: var(--color-white);
+  }
+}
+
+.SharePreviewExpiration {
+  align-items: center;
+  background: linear-gradient(
+    to right,
+    rgb(255 255 255 / 0%),
+    var(--color-dominant7) var(--gap-xl)
+  );
+  color: var(--color-white);
+  display: flex;
+  height: var(--SharedPreview-Height);
+  padding: 0 var(--gap-l) 0 calc(var(--gap-xl) + var(--gap-l));
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  span {
+    margin-right: var(--gap-m);
+  }
+
+  .DateTimeInput {
+    &.is-empty {
+      color: var(--color-gray3);
+    }
+
+    &::after {
+      color: var(--color-white);
+    }
+  }
+
+  .Message {
+    margin-right: var(--gap-m);
+    padding-bottom: var(--gap-s);
+    padding-top: var(--gap-s);
+
+    &::before {
+      top: calc(var(--gap-m) - var(--gap-s));
+    }
+  }
+}

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

@@ -0,0 +1,242 @@
+@keyframes AddAnimation {
+  0% {
+    background: var(--color-white);
+  }
+
+  65% {
+    background: var(--color-yellow2);
+  }
+
+  100% {
+    background: var(--color-white);
+  }
+}
+
+@keyframes RevealAllowedContainer {
+  from {
+    opacity: 0;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1.025);
+  }
+}
+
+.Sortable-item.is-added {
+  animation-duration: 1000ms;
+  animation-fill-mode: forwards;
+  animation-name: AddAnimation;
+  animation-timing-function: ease-in-out;
+}
+
+.Sortable-drag.Sortable-selected,
+.Sortable-drag.Sortable-chosen {
+  --drag-count: 1;
+
+  align-items: center;
+  background: var(--color-blue5);
+  border-top: none !important;
+  box-shadow: var(--shadow-3);
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  opacity: 0.9;
+  user-select: none;
+
+  &::before {
+    .Text.is-s;
+
+    background: none;
+    box-shadow: none;
+    color: var(--color-white);
+    content: 'Move ' counter(count) ' item' attr(item-suffix);
+    counter-reset: count var(--drag-count);
+    display: flex;
+    font-weight: bold;
+    line-height: unset;
+    margin: 0;
+    opacity: 1;
+    padding: 0;
+    position: relative;
+  }
+
+  * > {
+    display: none !important;
+  }
+}
+
+.Sortable-selected {
+  background-color: var(--color-blue2);
+  border: 2px solid var(--color-blue5);
+  opacity: 0.9;
+}
+
+.Sortable-ghost {
+  background: var(--color-blue5);
+}
+
+.Sortable-ghost > div:first-child {
+  color: var(--color-white);
+}
+
+.Sortable-allowedContainer {
+  &::before {
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    animation-name: RevealAllowedContainer;
+    animation-timing-function: ease-in-out;
+    background: rgb(178 215 248 / 40%);
+    border: 2px dotted rgb(196 227 255 / 80%);
+    border-radius: 5px;
+    bottom: calc(-1 * var(--gap-l));
+    content: '';
+    left: calc(-1 * var(--gap-l));
+    margin-top: calc(-1 * var(--gap-s));
+    mix-blend-mode: multiply;
+    pointer-events: none;
+    position: absolute;
+    right: calc(-1 * var(--gap-l));
+    top: 0;
+    z-index: 0;
+  }
+}
+
+.CIG-small .Sortable-allowedContainer::before {
+  top: var(--gap-xl);
+}
+
+.CIG-large .Sortable-allowedContainer::before {
+  top: 0;
+}
+
+/* Multi-Sortable Styles */
+
+.MultiSortable,
+.MultiSortable.is-collapsed {
+  flex-wrap: wrap;
+  position: relative;
+
+  /* RCIGs do not get this cursor because they use handles and the whole thing isn't draggable */
+  &:hover:not(.RCIG-item) {
+    cursor: move;
+  }
+}
+
+.MultiSortable-buttonToggle {
+  .Icon.is-s;
+  .IconButton;
+
+  --IconButton-name: 'low_priority';
+}
+
+.Sortable-item.is-focused .MultiSortable-buttonToggle {
+  display: none;
+}
+
+/* Styling for ContentEditDrawer items when hovered over a list */
+.Sortable.RCS-list,
+.Sortable.RCIG-list,
+.Sortable.CIG-row {
+  &:not([class*='ContentEditDrawer-widget-carousel-list']) {
+    .ContentEditDrawer-widget-carousel-list-item.Sortable-ghost {
+      .ContentEditDrawer-widget-carousel-list-item-selectButton {
+        display: none;
+      }
+
+      .ContentEditDrawer-widget-carousel-list-item-type {
+        display: none;
+      }
+
+      &.RCS-item {
+        &::before {
+          display: none;
+        }
+
+        .ContentEditDrawer-widget-carousel-list-item-title {
+          padding: var(--gap-m);
+
+          &::before {
+            display: none;
+          }
+        }
+      }
+
+      &.has-image {
+        background-color: transparent;
+        border: 0;
+
+        .ContentEditDrawer-widget-carousel-list-item-image {
+          height: 10em;
+        }
+      }
+
+      .ContentEditDrawer-widget-carousel-list-item-title {
+        background-color: var(--color-blue5);
+      }
+
+      .ContentSummary-info {
+        display: none;
+      }
+    }
+
+    .ContentEditDrawer-widget-carousel-list-item {
+      &.is-gridItem {
+        .ContentSelector-clear {
+          display: none;
+        }
+
+        .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%;
+            }
+          }
+        }
+      }
+    }
+
+    .ContentEditDrawer-widget-carousel-list-item {
+      &.is-listItem {
+        .ContentSelector-clear {
+          display: none;
+        }
+
+        .ContentSelector-search {
+          > figure > img {
+            max-height: 10em;
+          }
+        }
+
+        .inputContainer-bulkUpload {
+          display: none;
+        }
+      }
+
+      &.is-listItem.is-collapsed {
+        .ContentSelector-edit,
+        .ContentSelector-clear {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &[data-type='record'] {
+    &:not([class*='ContentEditDrawer-widget-carousel-list']) {
+      &:not([data-field='items']) {
+        .ContentEditDrawer-widget-carousel-list-item.Sortable-ghost {
+          display: none;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+.StandardForm {
+  &.is-locked .ActionBar {
+    display: none;
+  }
+
+  &.is-locked .ContentLockMessage-status {
+    bottom: 0;
+    left: 0;
+    position: sticky;
+    z-index: 100;
+  }
+}

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

@@ -0,0 +1,131 @@
+.StyleEmbeddedContent {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--Page-headerBottom) - var(--Popup-gap) * 2);
+  margin: calc(0px - var(--gap-l));
+  position: relative;
+
+  .StyleEmbeddedContent-heading {
+    .Text.is-s;
+
+    font-weight: bold;
+    margin: var(--gap-l) 0;
+    padding-top: var(--gap-s);
+  }
+}
+
+.StyleEmbeddedContent-content {
+  overflow: auto;
+  width: 100%;
+}
+
+.StyleEmbeddedContent-nav {
+  background: var(--color-white);
+  border-right: 1px solid var(--color-gray2);
+  padding: var(--gap-l);
+  width: 100%;
+
+  .StyleEmbeddedContent-search {
+    .SearchInput;
+
+    input {
+      margin-bottom: var(--gap-m);
+    }
+  }
+
+  li {
+    border-top: 1px solid var(--color-gray3);
+    color: var(--color-dominant6);
+    cursor: pointer;
+    position: relative;
+
+    > a {
+      display: block;
+      padding: var(--gap-m) 0;
+      width: 100%;
+    }
+
+    &:hover,
+    &.is-selected {
+      color: var(--Link-hoverColor);
+
+      &::after {
+        bottom: 0;
+        content: '';
+        left: calc(0px - var(--gap-l));
+        position: absolute;
+        top: 0;
+        width: var(--gap-m);
+      }
+    }
+
+    &:hover::after {
+      background: var(--Link-hoverColor);
+    }
+
+    &.is-selected::after {
+      background: var(--color-dominant6);
+    }
+
+    &:first-child {
+      border-color: transparent;
+    }
+  }
+}
+
+.StyleEmbeddedContent-main {
+  padding: 0 var(--gap-l) calc(var(--gap-l) * 6) var(--gap-l);
+  width: 100%;
+
+  .LinkTable.StyleEmbeddedContent-items {
+    display: block;
+    margin: 0;
+
+    > li {
+      width: 100%;
+    }
+  }
+
+  .StyleEmbeddedContent-items {
+    display: flex;
+    flex-wrap: wrap;
+    margin: calc(0px - var(--gap-l) / 2);
+
+    > li {
+      padding: calc(var(--gap-l) / 2);
+      width: 50%;
+    }
+  }
+
+  .StyleEmbeddedContent-warning {
+    display: none;
+    margin-top: var(--gap-l);
+  }
+}
+
+.Widget-title {
+  flex-shrink: 0;
+}
+
+@media (@mq-m) {
+  .StyleEmbeddedContent-nav {
+    height: 100%;
+    max-width: 250px;
+    overflow-y: scroll;
+    width: 35%;
+  }
+
+  .StyleEmbeddedContent-content {
+    display: flex;
+    height: 100%;
+  }
+
+  .StyleEmbeddedContent-main {
+    height: 100%;
+    overflow-y: scroll;
+  }
+}
+
+.Widget[name='AddEmbeddedContent'] {
+  height: 100%;
+}

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

@@ -0,0 +1,121 @@
+@import (reference) url('./Dropdown.less');
+
+.Suggestions {
+  font-size: var(--fontSize-s);
+  margin-bottom: calc(var(--Widget-padding) * -1);
+
+  &-refresh {
+    display: flex;
+    margin-top: calc(var(--Widget-padding) * -1);
+    padding: var(--gap-m) 0;
+
+    > button {
+      color: var(--color-black);
+      text-align: left;
+      width: 100%;
+
+      &::before {
+        .Icon;
+
+        border-radius: 50%;
+        content: 'refresh';
+        float: right;
+      }
+
+      &:hover:not(.is-refreshing) {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+
+      &.is-refreshing {
+        opacity: 0.5;
+
+        &::before {
+          animation: spin var(--time-xl) infinite ease-in-out;
+        }
+      }
+    }
+  }
+
+  &-list {
+    border-top: 1px solid var(--color-gray3);
+
+    > .Widget-title {
+      background: var(--color-white);
+      display: block;
+      font-size: var(--fontSize-s);
+      padding: var(--gap-m) 0;
+      z-index: 0;
+
+      .Widget-controls {
+        margin: 0 calc(0px - var(--gap-m));
+        z-index: 0;
+      }
+    }
+
+    &-add {
+      column-gap: var(--gap-s);
+      display: flex;
+      flex-wrap: wrap;
+      margin: calc(0px - var(--Widget-padding))
+        calc(0px - var(--Widget-padding)) 0 calc(0px - var(--Widget-padding));
+      row-gap: var(--gap-s);
+
+      li {
+        column-gap: var(--gap-s);
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: var(--gap-s);
+
+        .Suggestion-add {
+          background-color: var(--color-gray2);
+          color: var(--color-black);
+          cursor: pointer;
+          padding: 0 var(--gap-s);
+
+          &.is-added {
+            color: var(--color-gray5);
+            pointer-events: none;
+          }
+
+          &:hover {
+            background-color: var(--color-blue2);
+          }
+        }
+      }
+    }
+
+    &-create {
+      display: flex;
+      flex-direction: column;
+      margin: calc(0px - var(--Widget-padding))
+        calc(0px - var(--Widget-padding)) 0 calc(0px - var(--Widget-padding));
+
+      &-item {
+        &:not(:first-child) {
+          border-top: 1px solid var(--color-gray3);
+        }
+
+        &-keyword {
+          .Suggestion-create {
+            &:not(:first-child) {
+              border-top: 1px solid var(--color-gray3);
+            }
+
+            font-size: var(--fontSize-m);
+            padding: var(--gap-m) 0;
+
+            a {
+              color: var(--Link-color);
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .message-error {
+    margin-bottom: var(--gap-l);
+  }
+}