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

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

@@ -1,669 +0,0 @@
-.CIG {
-  --CIG-padding: var(--gap-l);
-
-  display: flex;
-  flex-wrap: wrap;
-  padding: var(--CIG-padding);
-  padding-top: 0;
-  position: relative;
-
-  &.is-empty {
-    display: none;
-  }
-
-  // Prevent collapsing margins when CIG-title is the first child.
-  &::before {
-    content: '';
-    display: block;
-    height: 1px;
-    margin-bottom: -1px;
-    width: 100%;
-  }
-
-  > * {
-    width: 100%;
-  }
-}
-
-.CIG {
-  > .Message,
-  > .TabBar {
-    margin-left: calc(0px - var(--CIG-padding));
-    margin-right: calc(0px - var(--CIG-padding));
-    width: calc(100% + (var(--CIG-padding) * 2));
-  }
-}
-
-.CIG-title {
-  background: var(--color-gray1);
-  cursor: pointer;
-  line-height: calc(var(--gap-s) * 2 + var(--Icon-size));
-  margin: var(--gap-xl) calc(var(--gap-l) - var(--CIG-padding)) 0
-    calc(var(--gap-l) - var(--CIG-padding));
-  padding: 0 calc(var(--CIG-padding) - var(--gap-l)) 0 var(--gap-s);
-  position: relative;
-  width: calc(100% + (var(--CIG-padding) - var(--gap-l)) * 2);
-
-  &:empty {
-    display: none;
-  }
-
-  &:hover,
-  &:focus {
-    .CIG-titleToggle {
-      .IconButton.is-focus;
-    }
-  }
-}
-
-.CIG-title.is-expanded-cluster {
-  cursor: unset;
-}
-
-.CIG-label {
-  .Text.is-s;
-
-  align-items: center;
-  color: var(--color-gray7);
-  display: flex;
-  font-weight: bold;
-  height: var(--Text-height);
-  order: -2;
-  position: relative;
-}
-
-.CIG-requiredLabel {
-  color: var(--color-gray5);
-  font-size: var(--fontSize-xs);
-  font-weight: normal;
-  padding-left: var(--gap-xs);
-}
-
-// Adjusts spacing between RCIG-list, view switcher and label when "Items Type" dropdown is missing
-.CIG-label + .CIG-large .RCIG.is-previewable > {
-  .repeatablePreviewControls {
-    top: calc(var(--Text-height) - var(--gap-xl));
-  }
-
-  .RCIG-expandAll {
-    top: calc(0px - var(--gap-s) * 2 - var(--Icon-size) + var(--Text-height));
-  }
-
-  .repeatablePreviewControls + .RCIG-list {
-    margin-top: calc(var(--Text-height) + var(--gap-s));
-  }
-}
-
-.CIG-help {
-  .Icon.is-s;
-  .IconButton;
-
-  --IconButton-name: 'build';
-
-  margin-left: var(--gap-xs);
-  order: 1;
-  visibility: hidden;
-}
-
-.CIG-guide {
-  .Icon.is-s;
-  .IconButton;
-
-  --IconButton-name: 'help';
-
-  margin-left: var(--gap-xs);
-  order: 1;
-  visibility: hidden;
-}
-
-.CIG-pending {
-  .Text.is-s;
-
-  color: var(--color-yellow6);
-  margin-top: var(--gap-s);
-}
-
-.CIG-updated {
-  .Text.is-s;
-
-  color: var(--color-gray5);
-  margin-top: var(--gap-s);
-}
-
-.CIG > .CIG-note {
-  margin: 0 calc(0px - var(--CIG-padding));
-  order: -1;
-  width: calc(var(--CIG-padding) * 2 + 100%);
-}
-
-.CIG-noteItem .Message {
-  .Text.is-m;
-
-  color: var(--color-black);
-}
-
-.CIG-row > .CIG-note {
-  .Text.is-s;
-
-  color: var(--color-gray7);
-}
-
-.CIG-row > .CIG-note,
-.CIG-noteItem {
-  margin-top: var(--gap-s);
-}
-
-// adds spacing to the right of CIG-note if ExpandAll button is present on RCIG
-.CIG-row.is-expandable > .CIG-note {
-  margin-right: calc(var(--gap-s) * 2 + var(--Icon-size) + var(--gap-m));
-}
-
-.CIG-note:first-child .CIG-noteItem:has(> .Message:only-child) {
-  margin-top: 0;
-}
-
-.CIG-small,
-.CIG-large {
-  margin-top: var(--gap-s);
-}
-
-.CIG-small[data-rte-container='true'] {
-  .ContentEditDrawer-widget-carousel-list-item {
-    display: none;
-  }
-
-  .drawerDropOverlay {
-    padding: 0;
-    z-index: 2000000;
-
-    &::before {
-      --offset: calc(0px - var(--gap-m));
-
-      background: rgb(var(--rgb-dominant3) / 70%);
-      border: 4px dotted var(--color-dominant5);
-      border-radius: var(--gap-s);
-      bottom: var(--offset);
-      content: '';
-      left: var(--offset);
-      position: absolute;
-      right: var(--offset);
-      top: var(--offset);
-    }
-  }
-}
-
-.CIG-row {
-  display: flex;
-  flex-direction: column;
-  min-width: 200px;
-  padding-top: var(--gap-xl);
-  position: relative;
-
-  &::after {
-    background: var(--color-dominant5);
-    bottom: 0;
-    content: '';
-    left: calc(0px - var(--gap-l));
-    opacity: 0;
-    position: absolute;
-    top: var(--gap-xl);
-    transform: scaleX(0);
-    transform-origin: left;
-    transition-duration: var(--time-xs);
-    transition-property: background-color, transform;
-    transition-timing-function: var(--ease-out);
-    width: var(--gap-m);
-  }
-}
-
-.is-inHiddenCluster {
-  display: none;
-}
-
-// WordCount
-.CIG-wordCount {
-  bottom: calc(0px - var(--gap-s) * 3);
-  color: var(--color-gray5);
-  display: block;
-  font-size: var(--fontSize-s);
-  line-height: var(--lineHeight-s);
-  opacity: 0;
-  position: absolute;
-  right: 0;
-}
-
-// Narrow row modifiers.
-.CIG-row {
-  &.is-minimal,
-  &.is-half,
-  &.is-third,
-  &.is-quarter {
-    margin-right: var(--CIG-padding);
-  }
-
-  &.is-half,
-  &.is-third,
-  &.is-quarter {
-    flex-grow: 1;
-  }
-
-  &.is-minimal {
-    min-width: 0;
-    width: auto;
-  }
-
-  &.is-half {
-    width: calc(50% - var(--CIG-padding));
-  }
-
-  &.is-third {
-    width: calc(100% / 3 - var(--CIG-padding));
-  }
-
-  &.is-quarter {
-    width: calc(25% - var(--CIG-padding));
-  }
-}
-
-// Query field support.
-.CIG-row.is-query {
-  &.is-disabled {
-    .QueryField-toggle {
-      display: none;
-    }
-  }
-}
-
-// Red marker when the row contains errors.
-.CIG-row.is-error {
-  &::after {
-    background: var(--color-red6);
-    opacity: 1;
-    transform: none;
-  }
-}
-
-// Blue marker when the row is focused.
-.CIG-row {
-  &:hover,
-  &:focus-within {
-    > .CIG-label {
-      > .CIG-help,
-      .CIG-guide,
-      .CIG-comments {
-        visibility: visible;
-      }
-    }
-  }
-
-  &:focus-within,
-  &.is-openHelpPopup {
-    &::after {
-      opacity: 1;
-      transform: none;
-    }
-
-    > .CIG-label {
-      color: var(--color-dominant5);
-    }
-
-    > .CIG-large > .CIG-wordCount,
-    > .CIG-small > .CIG-wordCount,
-    > .CIG-wordCount {
-      opacity: 1;
-    }
-  }
-}
-
-.CIG-row.is-openHelpPopup {
-  > .CIG-label > .CIG-help {
-    .IconButton.is-focus;
-
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-.CIG-row.is-openGuidePopup {
-  > .CIG-label > .CIG-guide {
-    .IconButton.is-focus;
-
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-// Gray marker when the row data has been overlaid.
-.CIG-row.is-overlaid:not(:focus-within),
-.CIG-row.is-updated {
-  &::after {
-    background: var(--color-gray5);
-    opacity: 1;
-    transform: none;
-  }
-}
-
-// Gray/yellow marker when the row is pending change.
-.CIG-row.is-pending {
-  &::after {
-    background-image: linear-gradient(
-      -45deg,
-      var(--color-gray5),
-      var(--color-gray5) 25%,
-      var(--color-yellow3) 25%,
-      var(--color-yellow3) 50%,
-      var(--color-gray5) 50%,
-      var(--color-gray5) 75%,
-      var(--color-yellow3) 75%
-    );
-    background-size: var(--gap-l) var(--gap-l);
-    opacity: 1;
-    transform: none;
-  }
-}
-
-// Yellow marker when the row has changed.
-.CIG-row.state-changed:not(:focus-within) {
-  &::after {
-    background: var(--color-yellow3);
-    opacity: 1;
-    transform: none;
-  }
-
-  > .CIG-label {
-    color: var(--color-yellow5);
-  }
-}
-
-// Boolean field checkboxes should look like toggles.
-.CIG-row[data-type='boolean'] > .CIG-small > .Checkbox {
-  .Checkbox.is-toggle;
-}
-
-// Small shadows on embedded forms.
-.CIG-row[data-type$='record'],
-.CIG-row[data-type$='period'],
-.CIG-row[data-type$='duration'],
-.CIG-row[data-type$='date'],
-.CIG-row[data-type$='instant'],
-.CIG-row[data-type$='zonedDateTime'],
-.CIG-row[data-type$='offsetDateTime'],
-.CIG-row[data-type$='offsetTime'],
-.CIG-row[data-type$='localDateTime'],
-.CIG-row[data-type$='localDate'],
-.CIG-row[data-type$='localTime'] {
-  > .CIG-large {
-    > .toggleable-form > .CIG,
-    > .CIG {
-      box-shadow: var(--shadow-1);
-    }
-  }
-}
-
-.CIG.TC.is-query {
-  --CIG-padding: 0;
-
-  .QueryField input[type] {
-    display: none;
-  }
-}
-
-// Remove all gaps around CIG inside unlabeled row by itself.
-.CIG-row[data-type='record'] > .CIG-large,
-.CIG-row[data-type='list/record'] > .CIG-large,
-.CIG-row[data-type='set/record'] > .CIG-large {
-  > .toggleable-form > .CIG,
-  > .CIG {
-    > div.CIG-row.is-unlabeled:only-of-type {
-      // Hides the CIG shadow by layering a white shadow over top.
-      &::before {
-        bottom: 0;
-        box-shadow: 0 0 0 var(--gap-s) var(--color-white);
-        content: '';
-        left: 0;
-        pointer-events: none;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-    }
-  }
-
-  > .toggleable-form > .CIG,
-  > .CIG {
-    > div.CIG-row.is-unlabeled:only-of-type {
-      margin-bottom: calc(0px - var(--CIG-padding));
-      margin-left: calc(0px - var(--CIG-padding));
-      margin-right: calc(0px - var(--CIG-padding));
-      padding: 0;
-      width: calc(100% + var(--CIG-padding) * 2);
-
-      > .CIG-label {
-        display: none;
-      }
-
-      > .CIG-small,
-      > .CIG-large {
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-// Make certain types of rows not editable.
-.ContentEdit.is-locked,
-.CIG.is-readOnly,
-.CIG-row.is-readOnly,
-.CIG-row.is-pending,
-.CIG-row.is-updated,
-.StandardForm.is-locked {
-  --Input-borderColor: transparent;
-
-  input[type],
-  input[data-preview]:not([data-preview='']) + .ContentSelector-search,
-  input[data-previewable='true']:not([data-preview]) + .ContentSelector-search,
-  input[data-previewable='true'][data-preview=''] + .ContentSelector-search,
-  select,
-  textarea,
-  .locationMap,
-  .regionMap,
-  .CIG-label,
-  .CodeMirror,
-  .ComboInput,
-  .DateTimeInput,
-  .ProseMirrorContainer,
-  .RichTextEditor {
-    opacity: 0.7;
-    pointer-events: none;
-  }
-
-  input[data-previewable='false']:not([data-preview]) + .ContentSelector-search,
-  input[data-previewable='false'][data-preview=''] + .ContentSelector-search,
-  input[data-previewable='true']:not([data-preview])
-    + .ContentSelector-search::after,
-  input[data-previewable='true'][data-preview='']
-    + .ContentSelector-search::after,
-  input[data-preview]:not([data-preview='']) + .ContentSelector-search::before,
-  input[data-preview]:not([data-preview='']) + .ContentSelector-search::after,
-  .fileSelector > .ComboInput > .ComboInput-icon,
-  .leaflet-control:not(.leaflet-control-zoom),
-  .CIG-help,
-  .CIG-guide,
-  .ComboInput-icon::after,
-  .Dropdown-container,
-  .ContentSelector-clear,
-  .ImageEditor-open,
-  .MultiSortable-buttonToggle,
-  .ProseMirrorToolbar,
-  .RCIG-controls,
-  .RCIG-remove,
-  .RCIG-swap,
-  .RCS-remove,
-  .RCS-controls,
-  .Repeatable-controls,
-  .RichTextEditor-toolbar,
-  .RTI-add,
-  .EIG-controls {
-    display: none !important;
-  }
-
-  .MultiSortable:hover {
-    cursor: unset;
-  }
-
-  .RCIG-item.MultiSortable > .RCIG-title:hover {
-    cursor: pointer;
-  }
-
-  .RTI-remove {
-    display: none;
-  }
-
-  .is-collapsed {
-    width: 100%;
-  }
-
-  .readOnlyDisplay {
-    color: var(--color-gray6);
-    margin: var(--gap-s);
-  }
-}
-
-// Equalize the ComboInput widths so that they look aligned.
-.CIG .ComboInput {
-  min-width: 25%;
-  width: auto;
-}
-
-// Messages inside CIG-row should be padded and smaller.
-.CIG-row > .Message {
-  margin-top: var(--gap-s);
-  padding: 0;
-  padding-left: calc(var(--Icon-size) + var(--gap-s));
-
-  > .Message-icon::before {
-    left: 0;
-    top: 0;
-  }
-
-  &.is-error {
-    background-color: transparent;
-    color: var(--color-red6);
-
-    .Link.is-red;
-  }
-}
-
-.CIG-row:only-child.is-unlabeled > .Message.is-error {
-  margin-left: calc(var(--CIG-padding) + var(--gap-s));
-}
-
-// Add more horizontal gap on larger viewports.
-@media (@mq-m) {
-  .CIG {
-    --CIG-padding: var(--gap-xl);
-  }
-
-  .CIG-row::after {
-    left: calc(0px - (var(--gap-xl) + var(--gap-m)) / 2);
-  }
-
-  .CIG-title {
-    padding: 0 calc(var(--CIG-padding) - var(--gap-l));
-  }
-}
-
-.CIG-search {
-  .IconButton.no-Fill;
-  .Link.is-black;
-
-  --IconButton-name: 'search';
-
-  margin-right: var(--gap-l);
-}
-
-// DateOnly Field
-.CIG-row[data-type$='year'],
-.CIG-row[data-type$='yearMonth'],
-.CIG-row[data-type$='monthDay'] > .CIG-small {
-  input,
-  .ComboInput {
-    width: 100px;
-  }
-
-  .ComboInput:last-of-type {
-    margin-left: var(--gap-s);
-  }
-
-  .DateOnly-year {
-    vertical-align: bottom;
-  }
-
-  .DateOnly-month {
-    & + .ComboInput {
-      &,
-      .ComboInput-filter {
-        min-width: 150px;
-        width: 150px;
-      }
-    }
-  }
-
-  .DateOnly-day {
-    & + .ComboInput {
-      &,
-      .ComboInput-filter {
-        min-width: 120px;
-        width: 120px;
-      }
-    }
-  }
-}
-
-// hide focus state within date fields
-.CIG-row[data-type$='duration'],
-.CIG-row[data-type$='period'],
-.CIG-row[data-type$='date'],
-.CIG-row[data-type$='instant'],
-.CIG-row[data-type$='zonedDateTime'],
-.CIG-row[data-type$='offsetDateTime'],
-.CIG-row[data-type$='offsetTime'],
-.CIG-row[data-type$='localDateTime'],
-.CIG-row[data-type$='localDate'],
-.CIG-row[data-type$='localTime'] {
-  .CIG-row:focus-within::after {
-    opacity: 0;
-  }
-}
-
-// Duration, Period
-.CIG-row[data-type$='duration'],
-.CIG-row[data-type$='period'] {
-  > .CIG-large .CIG > .CIG-row {
-    margin-right: var(--gap-s);
-    min-width: 100px;
-    width: 100px;
-  }
-}
-
-// Date, DateString
-.CIG-row[data-type$='date'],
-.CIG-row[data-type$='instant'],
-.CIG-row[data-type$='zonedDateTime'],
-.CIG-row[data-type$='offsetDateTime'],
-.CIG-row[data-type$='offsetTime'],
-.CIG-row[data-type$='localDateTime'],
-.CIG-row[data-type$='localDate'],
-.CIG-row[data-type$='localTime'] {
-  > .CIG-large .CIG > .CIG-row {
-    > .CIG-small,
-    > .CIG-note {
-      margin-top: 0;
-    }
-  }
-}
-
-.RteSettings-customKeyboardConfig .CIG-small,
-.RteSettings-customKeyboardConfig textarea {
-  letter-spacing: 1.2rem;
-}

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

@@ -1,39 +0,0 @@
-.ContentReporting-runLink {
-  position: absolute;
-  right: calc(var(--gap-l) * 3);
-  top: var(--gap-m);
-  z-index: 1000;
-}
-
-.Widget.ContentReporting-status {
-  display: flex;
-  flex-wrap: wrap;
-
-  > form {
-    padding-bottom: var(--gap-m);
-    padding-right: var(--gap-m);
-  }
-}
-
-.Widget-reports {
-  td.downloadLink a {
-    .IconButton;
-
-    --IconButton-name: 'file_download';
-  }
-
-  .LinkTable {
-    td {
-      padding: 0;
-      vertical-align: middle;
-
-      &.downloadLink {
-        text-align: center;
-      }
-    }
-
-    th.downloadData {
-      text-align: center;
-    }
-  }
-}