@brightspot/ui 3.0.1 → 5.0.0

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

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

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