@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

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

@@ -0,0 +1,268 @@
+.ContentSelector-search,
+.ContentSelector-edit,
+.ContentSelector-clear {
+  .Icon.is-s;
+
+  text-decoration: none;
+  vertical-align: top;
+}
+
+[data-dashboard-widget-url*='brightspot.community.tool.widget.CommunityModerationWidget']
+  .ContentSelector-search {
+  display: none; // Hides the extra content selector UI in this context (an additional username).
+}
+
+.ContentSelector-search > figure > img {
+  max-height: 30vh;
+}
+
+.ContentSelector-edit,
+.ContentSelector-clear {
+  .IconButton;
+
+  &:not(.is-visible) {
+    display: none;
+  }
+}
+
+.ContentSelector-edit {
+  --IconButton-name: 'edit';
+}
+
+input[data-read-only='true'] ~ .ContentSelector-edit {
+  --IconButton-name: 'remove_red_eye';
+}
+
+.ContentSelector-clear {
+  .IconButton.is-red;
+
+  --IconButton-name: 'clear';
+}
+
+// Text only.
+:is(btu-input, input[data-previewable='false']) + .ContentSelector-search {
+  .IconButton;
+
+  --IconButton-name: 'search';
+}
+
+// Image preview available.
+input[data-previewable='true']:not([data-preview]) + .ContentSelector-search,
+input[data-previewable='true'][data-preview=''] + .ContentSelector-search,
+[data-image-editor='true'] > .ContentSelector-search {
+  .TextInput;
+
+  color: var(--color-black);
+  display: inline-block;
+  overflow: hidden;
+  padding-right: calc(var(--gap-s) * 2 + var(--Icon-size));
+  position: relative;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 50%;
+
+  &::after {
+    .Icon;
+
+    content: 'search';
+    position: absolute;
+    right: var(--gap-s);
+    top: var(--gap-s);
+  }
+
+  &:hover {
+    text-decoration: none;
+
+    &::after {
+      color: var(--Input-focusColor);
+    }
+  }
+}
+
+:not([data-image-editor]),
+.RCIG-item.is-gridItem [data-image-editor] {
+  > input[data-previewable='true'][data-preview]:not([data-preview=''])
+    + .ContentSelector-search {
+    color: var(--color-black);
+    display: inline-block;
+    margin-right: var(--gap-s);
+    max-width: calc(100% - var(--gap-s) * 5 - var(--Icon-size) * 2);
+    position: relative;
+
+    &::before {
+      background: var(--color-white);
+      border-bottom-left-radius: 100%;
+      content: '';
+      height: calc((var(--Icon-size) + var(--gap-xs)) * 1.41421356237);
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: all var(--time-s) var(--ease-out);
+      width: calc((var(--Icon-size) + var(--gap-xs)) * 1.41421356237);
+    }
+
+    .ContentSelector-placeholder {
+      aspect-ratio: ~'2 / 1';
+      background: var(--color-gray1);
+      display: block;
+      max-width: 100%;
+      padding: var(--gap-s);
+      width: 300px;
+    }
+
+    &::after {
+      .Icon;
+
+      content: 'search';
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    &:hover {
+      text-decoration: none;
+
+      &::before {
+        background: var(--color-dominant2);
+        border-radius: 50%;
+        height: calc(var(--gap-s) * 2 + var(--Icon-size));
+        right: calc(0px - var(--gap-s));
+        top: calc(0px - var(--gap-s));
+        width: calc(var(--gap-s) * 2 + var(--Icon-size));
+      }
+
+      &::after {
+        color: var(--Link-hoverColor);
+      }
+    }
+
+    ~ .ContentSelector-clear,
+    ~ .ContentSelector-edit,
+    ~ .ContentSummary-info,
+    ~ .MultiSortable-buttonToggle,
+    ~ .RCS-remove {
+      position: relative;
+      top: calc(0px - var(--gap-s));
+    }
+  }
+}
+
+.ContentSelector-edit.is-disabled ~ .RCS-remove {
+  top: 0;
+}
+
+// Disabled.
+.ContentSelector-edit.is-disabled,
+.ContentSelector-search.is-disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+// Removing.
+.ComboInput.is-removing {
+  --Input-borderColor: var(--color-red1);
+
+  background: var(--color-red1);
+  color: var(--color-red6) !important;
+  pointer-events: none;
+  text-decoration: line-through;
+
+  .ComboInput-icon::after {
+    display: none;
+  }
+}
+
+// Removing - text only.
+input[data-previewable='false'] + .ContentSelector-search.is-removing {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+// Removing - image preview available.
+input[data-previewable='true'] + .ContentSelector-search.is-removing {
+  --Input-borderColor: var(--color-red1);
+
+  opacity: 0.3;
+  pointer-events: none;
+
+  figcaption {
+    color: var(--color-red6) !important;
+    text-decoration: line-through;
+  }
+}
+
+.ContentSelector-clear.is-removing {
+  .Link.is-blue;
+
+  --IconButton-name: 'undo';
+}
+
+.ContentSelector-select ~ .RCS-remove {
+  top: 0;
+}
+
+.ContentSelector-placeholder {
+  color: var(--Input-placeholderColor);
+  font-style: italic;
+  padding-right: 2px;
+}
+
+.Dropdown-button {
+  .IconButton;
+
+  --IconButton-name: 'more_horiz';
+
+  &.is-active {
+    .IconButton.is-focus;
+
+    --IconButton-name: 'close';
+  }
+}
+
+.Dropdown-container {
+  display: inline-block;
+
+  .Dropdown {
+    min-width: 120px;
+  }
+
+  a.ContentSelector-clear:hover,
+  a.removeButton:hover {
+    background-color: transparent;
+  }
+
+  .RCIG-swap,
+  .copyButton,
+  .removeButton,
+  .ContentSelector-clear,
+  .ContentSelector-edit {
+    --Link-color: var(--color-black);
+    --Link-hoverColor: var(--color-black);
+
+    &:focus::after {
+      opacity: 0;
+    }
+  }
+}
+
+.RCIG-item,
+.EIG-item {
+  > btu-dropdown {
+    position: absolute;
+    right: var(--gap-xl);
+    top: var(--gap-xs);
+  }
+}
+
+.RCIG-item.Sortable-item.toggleVisible {
+  > btu-dropdown {
+    right: calc(var(--gap-m) * 4 + var(--Icon-size));
+  }
+}
+
+input[data-preview]:not([data-preview='']) {
+  ~ btu-dropdown {
+    margin-top: -11px;
+  }
+}

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

@@ -0,0 +1,238 @@
+.ContentSummary-popup {
+  .Popup-close {
+    left: calc(
+      var(--Tether-rl) + var(--Tether-rw) - var(--gap-l) - var(--Icon-size)
+    );
+  }
+
+  &.is-preview {
+    .ContentSummary {
+      display: grid;
+      grid-template:
+        'header' auto
+        'content' auto
+        'preview' 40vh
+        / 100%;
+    }
+  }
+
+  .ContentSummary-edit,
+  .ContentSummary-share {
+    font-weight: 400;
+    margin-right: var(--gap-l);
+  }
+}
+
+.ContentSummary {
+  height: auto;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  width: auto;
+
+  &-row {
+    margin-bottom: var(--gap-m);
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+
+  &-subtitle {
+    .Text.is-s;
+
+    color: var(--color-gray7);
+    font-weight: bold;
+    margin-bottom: var(--gap-s);
+    position: relative;
+
+    span {
+      color: var(--color-gray5);
+      margin-left: var(--gap-s);
+
+      &::before {
+        content: '(';
+      }
+
+      &::after {
+        content: ')';
+      }
+    }
+  }
+
+  &-description {
+    .Text.is-s;
+
+    margin-bottom: var(--gap-l);
+    overflow-x: scroll;
+    position: relative;
+  }
+
+  &-richText {
+    .Diff-field;
+
+    display: inline-block;
+    word-break: break-word;
+
+    a {
+      color: var(--Link-color);
+    }
+
+    img {
+      height: auto;
+      max-width: 100%;
+    }
+
+    ol,
+    ul {
+      margin-left: 0;
+    }
+
+    .cms-textAlign-right {
+      text-align: right;
+    }
+
+    .cms-textAlign-center {
+      text-align: center;
+    }
+
+    .cms-textAlign-left {
+      text-align: left;
+    }
+  }
+
+  & > .Widget-title {
+    display: flex;
+    flex-wrap: wrap;
+    grid-area: header;
+
+    & > span {
+      margin-right: var(--gap-xl);
+    }
+  }
+}
+
+.ContentSummary.is-open {
+  .Dropdown.is-open;
+
+  padding: 0;
+
+  &.error-summary {
+    min-width: fit-content;
+  }
+}
+
+.ContentSummary-content {
+  grid-area: content;
+  max-height: 70vh;
+  overflow: scroll;
+  padding: var(--gap-l);
+}
+
+.ContentSummary-title {
+  margin-bottom: var(--gap-l);
+
+  a {
+    color: var(--Link-color);
+    text-decoration: var(--Link-hoverDecoration, underline);
+  }
+}
+
+.ContentSummary-titleInfo {
+  color: var(--color-gray5);
+
+  span {
+    .Text.is-s;
+
+    &:first-child {
+      margin-right: var(--gap-s);
+    }
+  }
+}
+
+.ContentSummary-info {
+  .IconButton;
+
+  --IconButton-name: 'info';
+
+  margin: calc(0px - var(--gap-m) + var(--gap-xs)) 0 calc(0px - var(--gap-s)) 0;
+  opacity: 0;
+}
+
+.ContentSummary-link {
+  position: relative;
+}
+
+.ContentSummary-info:focus {
+  opacity: 1;
+}
+
+.RCS-item,
+.RCIG-item,
+.Sortable-item,
+.LinkTable-main:focus-within,
+.LinkTable-main:hover,
+.LinkList-main:focus-within,
+.LinkList-main:hover,
+.ContentSummary-content:hover,
+.ContentSummary-link:hover {
+  .ContentSummary-info {
+    opacity: 1;
+  }
+}
+
+a.is-active + .ContentSummary-info {
+  opacity: 1;
+}
+
+.ContentSummary-preview {
+  border-top: 1px solid var(--color-gray2);
+  grid-area: preview;
+
+  iframe {
+    height: 100%;
+    position: relative;
+    width: 100%;
+    z-index: 11;
+  }
+
+  .PreviewFrame-typeControlsContainer {
+    display: none;
+  }
+}
+
+@media (@mq-s) {
+  .ContentSummary-popup {
+    &.is-preview {
+      .ContentSummary {
+        grid-template:
+          'header header' auto
+          'content preview' 70vh
+          / 50% 50%;
+      }
+    }
+  }
+
+  .ContentSummary {
+    overflow: hidden;
+  }
+
+  .ContentSummary-preview {
+    border-left: 1px solid var(--color-gray2);
+    border-top: none;
+
+    &::before {
+      .Icon;
+
+      animation: spin var(--time-xl) infinite ease-in-out;
+      color: var(--color-black);
+      content: 'autorenew';
+      height: var(--Icon-size-l);
+      left: 72%;
+      margin-right: var(--gap-m);
+      position: absolute;
+      top: 50%;
+      width: var(--Icon-size-l);
+      z-index: 10;
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+.ContentTools {
+  .TC-panel {
+    > form {
+      padding-left: calc(var(--gap-s) * 2);
+    }
+  }
+
+  .Message.is-success {
+    margin-bottom: var(--gap-l);
+  }
+
+  .CIG-row[data-type='boolean'] > .CIG-small > input[type='checkbox'] {
+    --Icon-size: var(--iconSize-l);
+  }
+
+  .CIG-title {
+    line-height: inherit;
+  }
+
+  .ActionBar {
+    border-top: 0;
+    position: static;
+
+    > button {
+      font-size: var(--fontSize-s);
+      line-height: var(--lineHeight-s);
+    }
+  }
+
+  .ActionBar:not(.is-top) > .Button:not(.Link):first-child {
+    .Button;
+  }
+
+  .TC-panel,
+  .TC-panel > form,
+  .TC-panel > form > .fixedScrollable {
+    padding-bottom: 0;
+    padding-left: var(--gap-l);
+
+    > .CIG {
+      padding: 0 var(--gap-l);
+
+      .CIG-row {
+        padding-top: var(--gap-l);
+      }
+    }
+
+    > .CIG-row {
+      padding-top: 0;
+    }
+
+    .TC-panel-heading {
+      .Text.is-s;
+
+      background: var(--color-gray1);
+      font-weight: bold;
+      margin: calc(var(--gap-s) * 2) 0 var(--gap-l) 0;
+      padding: calc(var(--gap-s) + 2px) calc(var(--gap-s) * 2);
+    }
+  }
+}
+
+.ContentTools-meta {
+  font-size: var(--fontSize-s);
+  margin-bottom: calc(var(--gap-s) * 2 + var(--gap-l));
+  margin-left: calc(var(--gap-l));
+
+  span {
+    border-bottom: 1px solid var(--color-gray2);
+    display: block;
+    padding: calc(var(--gap-s) * 2) 0;
+  }
+}

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

@@ -0,0 +1,24 @@
+.is-ectHidden {
+  display: none;
+}
+
+.ContentType {
+  > .Message {
+    margin: var(--gap-l) 0 0 0;
+  }
+
+  > h2 {
+    margin-top: calc(var(--gap-l) * 2.5);
+  }
+
+  > .Message > h2 {
+    display: inline;
+    padding-right: var(--gap-m);
+  }
+}
+
+.ContentTypeIcon::before {
+  .Icon();
+
+  content: attr(data-icon);
+}

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

@@ -0,0 +1,20 @@
+@import (reference) './IconButton.less';
+
+btu-copy-to-clipboard {
+  button {
+    .IconButton;
+
+    --IconButton-name: 'assignment';
+
+    border: 0;
+    padding: 0;
+  }
+
+  &:state(btu-copy-to-clipboard-copied) {
+    button {
+      color: var(--color-green5);
+
+      --IconButton-name: 'done';
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+.DashboardRow {
+  display: flex;
+  flex-wrap: wrap;
+  padding: calc(var(--gap-l) / 2) 0;
+
+  + .DashboardRow {
+    margin-top: calc(0px - var(--gap-l));
+  }
+}
+
+.DashboardRow-column {
+  flex-grow: 1;
+  min-width: calc(320px - var(--gap-l));
+}
+
+.DashboardRow-cell {
+  padding: calc(var(--gap-l) / 2) 0;
+}
+
+@media (@mq-s) {
+  .DashboardRow {
+    padding: calc(var(--gap-l) / 2);
+  }
+
+  .DashboardRow-cell {
+    padding: calc(var(--gap-l) / 2);
+  }
+}
+
+@media (@mq-m) {
+  .DashboardRow-column.is-search-widget {
+    min-width: calc(768px - var(--gap-l));
+  }
+}
+
+@media (@mq-l) {
+  .DashboardRow-column.is-search-widget {
+    min-width: calc(992px - var(--gap-l));
+  }
+}