@brightspot/ui 3.0.1 → 5.0.1

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

@@ -0,0 +1,52 @@
+.BackgroundTasks {
+  .Button {
+    &.is-red {
+      background: var(--color-red6);
+      border-color: var(--color-red6);
+      color: var(--color-white);
+      float: right;
+
+      &:hover,
+      &:focus {
+        background: var(--color-red7);
+        border-color: var(--color-red7);
+        color: var(--color-white);
+      }
+    }
+
+    &.is-taskaction {
+      margin-left: var(--gap-m);
+    }
+  }
+
+  .TaskDisplay {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    form {
+      display: flex;
+    }
+  }
+
+  .visibilityLabel {
+    &.is-green {
+      background: var(--color-green5);
+      border-color: var(--color-green5);
+      color: var(--color-white);
+    }
+
+    &.is-yellow {
+      background: var(--color-yellow3);
+      border-color: var(--color-yellow3);
+      color: var(--color-black);
+    }
+
+    &.is-red {
+      background: var(--color-red6);
+      border-color: var(--color-red6);
+      color: var(--color-white);
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+.Badge {
+  background: var(--color-gray6);
+  border-radius: calc(var(--Text-height) / 2);
+  color: var(--color-white);
+  display: inline-block;
+  margin-left: var(--gap-s);
+  min-width: var(--Text-height);
+  padding: 0 var(--gap-s);
+  text-align: center;
+}

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

@@ -0,0 +1,311 @@
+.SearchResult-dragContainer {
+  left: 0;
+  position: fixed;
+  top: 0;
+  z-index: var(--BoardContainer-zIndex, 10000);
+}
+
+.SearchResult-board {
+  height: 100%;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.SearchResult-board-column {
+  --BoardColumn-minWidth: 276px;
+  --BoardColumn-maxWidth: 400px;
+  --BoardColumn-calcWidth: clamp(
+    var(--BoardColumn-minWidth),
+    calc(100% / var(--columnCount)),
+    var(--BoardColumn-maxWidth)
+  );
+
+  border-right: 1px solid var(--color-gray3);
+  display: flex;
+  left: 0;
+  min-height: 100%;
+  position: absolute;
+  top: 0;
+  width: var(--BoardColumn-calcWidth);
+  z-index: 1;
+
+  &:nth-child(6n + 1) {
+    background-color: var(--color-purple1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-purple4);
+    }
+  }
+
+  &:nth-child(6n + 2) {
+    background-color: var(--color-blue1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-blue4);
+    }
+  }
+
+  &:nth-child(6n + 3) {
+    background-color: var(--color-green1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-green4);
+    }
+  }
+
+  &:nth-child(6n + 4) {
+    background-color: var(--color-yellow1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-yellow4);
+    }
+  }
+
+  &:nth-child(6n + 5) {
+    background-color: var(--color-orange1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-orange4);
+    }
+  }
+
+  &:nth-child(6n + 6) {
+    background-color: var(--color-red1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-red4);
+    }
+  }
+}
+
+.SearchResult-board-columnContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.BoardView-title {
+  align-items: center;
+  background-color: var(--color-white);
+  color: var(--color-black);
+  display: flex;
+  margin: 0;
+  min-height: var(--gap-xl);
+  overflow: hidden;
+  padding: 0 var(--gap-s);
+  position: relative;
+  text-indent: var(--gap-s);
+  text-transform: capitalize;
+
+  &::after {
+    content: '(' attr(data-count) ')';
+    font-weight: normal;
+  }
+}
+
+.BoardView-listContainer {
+  flex-grow: 1;
+  overflow-y: auto;
+  position: relative;
+}
+
+.BoardView-list {
+  border-bottom: var(--gap-s) solid transparent;
+  list-style-type: none;
+  margin: 0;
+  min-height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.BoardView-card {
+  background: var(--color-white);
+  box-shadow: var(--shadow-1);
+  list-style-type: none;
+  margin: 0 var(--gap-s) var(--gap-s) var(--gap-s);
+  min-width: calc(100% - var(--gap-s) * 2);
+  position: absolute;
+  z-index: 10;
+
+  .ContentSummary-content {
+    .ContentSummary-row {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: unset;
+
+      .ContentSummary-subtitle {
+        margin-bottom: unset;
+        margin-right: var(--gap-xs);
+      }
+
+      .ContentSummary-link {
+        flex: 1;
+      }
+
+      .ContentSummary-subtitle {
+        flex-basis: 100%;
+      }
+    }
+
+    .SearchResult-summary {
+      margin-bottom: var(--gap-l);
+    }
+
+    .Viewers {
+      float: right;
+    }
+  }
+}
+
+.BoardView-card.is-saving {
+  pointer-events: none;
+
+  .ContentSummary-content {
+    opacity: 0.4 !important;
+  }
+
+  &::after {
+    &:extend(.Icon);
+
+    animation: spin var(--time-xl) infinite ease-in-out;
+    content: 'sync';
+    left: calc(50% - var(--Icon-size) / 2);
+    position: absolute;
+    top: calc(50% - var(--Icon-size) / 2);
+  }
+}
+
+.BoardView-card .ContentSummary-content {
+  padding: var(--gap-m) var(--gap-m) var(--gap-l);
+}
+
+.BoardView-card.muuri-item-dragging .ContentSummary-content {
+  transform: rotateZ(0.5deg);
+  transition: transform 0.12s ease;
+}
+
+.BoardView-card.muuri-item-releasing {
+  z-index: 11;
+}
+
+.BoardView-card.muuri-item-dragging {
+  box-shadow: var(--shadow-2);
+  cursor: move;
+  z-index: 12;
+}
+
+.BoardView-card.muuri-item-hidden {
+  z-index: 8;
+}
+
+.BoardView-card.muuri-item-placeholder {
+  filter: blur(1px);
+  margin: 0;
+  opacity: 0.6;
+  z-index: 9;
+}
+
+// Overrides standard search styles, establishes grid layout
+.SearchResult-items.is-muuri {
+  display: grid;
+  grid-auto-rows: auto 1fr;
+  margin-top: unset;
+  padding: unset;
+
+  .SearchResult-views {
+    position: unset;
+  }
+
+  .SearchResult-view {
+    display: grid;
+    grid-template: 'fields fields fields' auto 'sorts sorts actions' auto 'board board board' 1fr ~'/' auto auto 1fr;
+  }
+
+  .SearchResult-actions-wrapper {
+    grid-area: actions;
+    justify-self: end;
+    padding: var(--gap-xs) var(--gap-l) var(--gap-xs) 0;
+  }
+
+  .SearchResult-sorts {
+    align-self: center;
+    grid-area: sorts;
+    padding-left: var(--gap-l);
+  }
+
+  .SearchResult-boardContainer {
+    background-color: var(--color-gray1);
+    border-top: 1px solid var(--color-gray3);
+    grid-area: board;
+    overflow-x: scroll;
+
+    .moreCards-button,
+    .moreColumns-button {
+      display: none;
+    }
+  }
+}
+
+.SearchResult-board-fields {
+  align-self: center;
+  display: flex;
+  grid-area: fields;
+  justify-self: start;
+  margin-right: var(--gap-l);
+  padding-left: var(--gap-l);
+  padding-top: var(--gap-s);
+
+  .ComboInput::before {
+    border-bottom-width: 0;
+  }
+
+  .SearchResult-fields {
+    padding-top: var(--gap-s);
+    white-space: nowrap;
+  }
+}
+
+@media (@mq-m) {
+  .SearchResult-items.is-muuri .SearchResult-view {
+    grid-template: 'fields sorts actions' auto 'board board board' 1fr ~'/' auto auto 1fr;
+
+    .SearchResult-board-fields {
+      padding-top: unset;
+    }
+
+    .SearchResult-sorts {
+      padding-left: unset;
+    }
+  }
+}
+
+.SearchResult-board-errors {
+  bottom: 0;
+  max-height: 50%;
+  max-width: 350px;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  z-index: 100;
+
+  li {
+    margin-bottom: var(--gap-m);
+  }
+}
+
+.SearchResult-board-errors-close {
+  .Text.is-l;
+
+  color: var(--color-white);
+  cursor: pointer;
+  height: var(--gap-l);
+  position: absolute;
+  right: var(--gap-s);
+  text-align: center;
+  top: var(--gap-s);
+  width: var(--gap-l);
+  z-index: 100;
+}

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

@@ -0,0 +1,17 @@
+.BulletedList {
+  list-style-type: disc;
+  padding-left: var(--gap-l);
+
+  > li {
+    &:not(:last-child) {
+      margin-bottom: var(--gap-xs);
+    }
+
+    &.is-selected {
+      background: var(--color-gray3);
+      list-style-type: none;
+      margin-left: calc(0px - var(--gap-l));
+      padding-left: var(--gap-l);
+    }
+  }
+}

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

@@ -0,0 +1,105 @@
+.Button {
+  align-items: center;
+  -webkit-appearance: none;
+  background: var(--color-white);
+  border: 1px solid var(--Link-color);
+  color: var(--Link-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--fontSize-s);
+  font-weight: bold;
+  justify-content: center;
+  padding: calc(var(--gap-s) - 1px) var(--gap-m);
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition-duration: var(--time-xs);
+  transition-property: background-color, border-color, color;
+  transition-timing-function: ease-in-out;
+  user-select: none;
+  vertical-align: middle;
+
+  .is-submitting &.is-clicked {
+    pointer-events: none;
+
+    &:not(.Link) {
+      &::before {
+        background: rgb(255 255 255 / 70%);
+        bottom: -1px;
+        content: '';
+        left: -1px;
+        position: absolute;
+        right: -1px;
+        top: -1px;
+      }
+
+      &::after {
+        .Icon;
+
+        animation: spin var(--time-xl) infinite ease-in-out;
+        color: var(--color-black);
+        content: 'autorenew';
+        left: calc(50% - var(--Icon-size) / 2);
+        position: absolute;
+        top: calc(50% - var(--Icon-size) / 2);
+      }
+    }
+  }
+}
+
+.Button.is-focused {
+  border-color: var(--Link-hoverColor);
+  color: var(--Link-hoverColor);
+  text-decoration: none;
+}
+
+.Button {
+  &:hover {
+    .Button.is-focused;
+  }
+}
+
+button,
+input[type='submit'] {
+  &:extend(.Button all);
+}
+
+.Button.is-dominant {
+  background: var(--Link-color);
+  border-color: var(--Link-color);
+  color: var(--color-white);
+
+  &:hover,
+  &:focus {
+    background: var(--Link-hoverColor);
+    border-color: var(--Link-hoverColor);
+    color: var(--color-white);
+  }
+}
+
+.Button.is-green {
+  background: var(--color-green5);
+  border-color: var(--color-green5);
+  color: var(--color-white);
+
+  &:hover,
+  &:focus {
+    background: var(--color-green6);
+    border-color: var(--color-green6);
+    color: var(--color-white);
+  }
+}
+
+.Button.is-yellow {
+  background: var(--color-yellow3);
+  border-color: var(--color-yellow3);
+  color: var(--color-black);
+
+  &:hover,
+  &:focus {
+    background: var(--color-yellow3);
+    border-color: var(--color-yellow5);
+    color: var(--color-black);
+  }
+}

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

@@ -0,0 +1,55 @@
+btu-cig-cluster {
+  .CIG-title {
+    padding: 0;
+  }
+
+  &:state(btu-error) {
+    .CIG-title {
+      color: var(--color-red6);
+
+      .CIG-titleText::after {
+        .Icon;
+
+        content: 'error';
+        margin-left: var(--gap-s);
+        vertical-align: middle;
+      }
+    }
+  }
+
+  button {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 var(--gap-m);
+    text-transform: none;
+    width: 100%;
+
+    .CIG-titleToggle {
+      .IconButton;
+
+      --IconButton-name: 'keyboard_arrow_up';
+
+      position: absolute;
+      right: calc(var(--CIG-padding) - var(--gap-l) - var(--gap-s));
+      top: calc(50% - var(--Icon-size) / 2 - var(--gap-s));
+      transform: rotate(180deg);
+      transition: transform var(--time-xs);
+    }
+
+    &:hover,
+    &:focus {
+      color: inherit;
+
+      .CIG-titleToggle {
+        .IconButton.is-focus;
+      }
+    }
+
+    &[aria-expanded='true'] > .CIG-titleToggle {
+      transform: none;
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+.Card {
+  background: var(--color-white);
+  box-shadow: var(--shadow-1);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  &:hover {
+    box-shadow: var(--shadow-2);
+  }
+}
+
+.Card-media {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+  img {
+    display: block;
+    height: auto;
+    width: 100%;
+  }
+
+  // Supply a max size because in some instances the image is not constrained by a wrapping element.
+  > img {
+    max-width: 120px;
+  }
+}
+
+.Card-media.is-missing {
+  margin: auto;
+  min-height: 75px;
+
+  &::before {
+    .Icon;
+
+    color: var(--color-gray3);
+    content: 'widgets';
+    display: flex;
+    font-size: var(--fontSize-xxl);
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.Card-title {
+  background: var(--color-gray2);
+  padding: var(--gap-m) var(--gap-l);
+}

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

@@ -0,0 +1,99 @@
+.Checkbox {
+  -webkit-appearance: none;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  height: var(--Icon-size) !important;
+  padding: 0;
+  position: relative;
+  vertical-align: middle;
+  width: var(--Icon-size) !important;
+
+  &:focus {
+    background: transparent;
+    padding: 0;
+  }
+
+  &::before {
+    border: 1px solid currentcolor;
+    border-radius: 2px;
+    bottom: 3px;
+    content: '';
+    left: 3px;
+    position: absolute;
+    right: 3px;
+    top: 3px;
+  }
+
+  &::after {
+    .Icon;
+
+    display: block;
+    top: 0;
+  }
+
+  &:checked::after {
+    content: 'check_box';
+  }
+
+  &:indeterminate::after {
+    content: 'indeterminate_check_box';
+  }
+}
+
+.Checkbox.is-toggle {
+  .Icon.is-l;
+
+  margin: calc(0px - var(--Icon-size) * 0.1) 0
+    calc(0px - var(--Icon-size) * 0.1) calc(0px - var(--Icon-size) * 0.1);
+
+  &::before {
+    background: var(--color-gray5);
+    border: 0;
+    border-radius: 50%;
+    bottom: auto;
+    height: var(--Icon-size);
+    left: calc(50% - var(--Icon-size) / 2);
+    opacity: 0;
+    right: auto;
+    top: calc(50% - var(--Icon-size) / 2);
+    transform: scale(0);
+    transition:
+      opacity var(--time-xs) var(--ease-in),
+      transform var(--time-s) var(--ease-out);
+    width: var(--Icon-size);
+  }
+
+  &::after {
+    color: var(--color-gray5);
+    content: 'toggle_off';
+  }
+
+  &:checked::after {
+    color: var(--Link-hoverColor);
+    content: 'toggle_on';
+  }
+
+  &:checked::before {
+    background: var(--Link-hoverColor);
+  }
+
+  &:focus,
+  &:hover {
+    &::before {
+      transform: none;
+    }
+  }
+
+  &:hover::before {
+    opacity: 0.08;
+  }
+
+  &:focus::before {
+    opacity: 0.16;
+  }
+}
+
+input[type='checkbox'] {
+  &:extend(.Checkbox all);
+}