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

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

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

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

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

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

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

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