@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/SearchWidget.less

@@ -0,0 +1,697 @@
+@import (reference) url('./Dropdown.less');
+
+.SearchWidget {
+  background: var(--color-white);
+  display: grid;
+  grid-template:
+    'title' auto
+    'controls' auto
+    'history' auto
+    'result' 1fr
+    'create' auto ~'/'
+    1fr;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+
+  &.Widget {
+    --Widget-padding: 0px;
+
+    padding: 0;
+  }
+}
+
+.SearchWidget-title {
+  .Widget-title;
+
+  grid-area: title;
+  height: calc(var(--gap-m) * 2 + var(--Text-height));
+  margin: 0;
+  padding-right: calc(var(--gap-l) * 2 + var(--Icon-size));
+}
+
+.SearchWidget-history {
+  grid-area: history;
+}
+
+.SearchWidget-controls {
+  grid-area: controls;
+
+  a.SearchWidget-actionsToggle {
+    .IconButton;
+
+    --IconButton-name: 'settings';
+
+    align-items: center;
+    left: 0;
+    margin-top: calc(0px - var(--gap-m));
+    top: calc(var(--gap-m) - var(--gap-s));
+  }
+}
+
+.SearchWidget-recent,
+.SearchWidget-saved,
+.SearchWidget-controls,
+.SearchWidget-create {
+  .Icon.is-s;
+  .Text.is-s;
+
+  background: var(--color-gray1);
+
+  h2 {
+    font-size: var(--fontSize-s);
+    margin: 0 calc(0px - var(--gap-l));
+    padding: var(--gap-m) var(--gap-l);
+
+    &:first-child:not(.miscHeading) {
+      margin-top: calc(0px - var(--gap-m));
+    }
+  }
+
+  .globalHeading,
+  .miscHeading,
+  .typeSpecificHeading {
+    display: inline-block;
+  }
+
+  .globalHeading {
+    margin-bottom: 0;
+  }
+}
+
+.SearchWidget-moreFilters,
+.SearchWidget-recent,
+.SearchWidget-saved,
+.SearchWidget-controls {
+  padding: var(--gap-m) var(--gap-l) 0 var(--gap-l);
+
+  > h2:not(.typeSpecificHeading, .globalHeading, .miscHeading) {
+    background: var(--color-gray1);
+    cursor: pointer;
+    position: relative;
+
+    &::before {
+      background: var(--color-black);
+      border-radius: calc(var(--gap-s) + var(--Icon-size) / 2);
+      content: '';
+      height: calc(var(--gap-s) * 2 + var(--Icon-size));
+      opacity: 0;
+      position: absolute;
+      right: calc(var(--gap-l) - var(--gap-s));
+      top: calc(50% - var(--Icon-size) / 2 - var(--gap-s));
+      transform: scale(0);
+      transition:
+        opacity var(--time-xs) var(--ease-in),
+        transform var(--time-s) var(--ease-out);
+      width: calc(var(--gap-s) * 2 + var(--Icon-size));
+    }
+
+    &:focus,
+    &:hover {
+      &::after {
+        color: var(--Link-hoverColor);
+      }
+
+      &::before {
+        opacity: 0.08;
+        transform: none;
+      }
+    }
+
+    &:focus-visible {
+      z-index: 1;
+    }
+  }
+
+  &:not(.is-collapsed) {
+    padding-bottom: var(--gap-l);
+
+    > h2:not(.typeSpecificHeading, .globalHeading, .miscHeading) {
+      margin-bottom: var(--gap-m);
+
+      &::after {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  .Message {
+    margin: 0;
+  }
+}
+
+.SearchWidget-recent
+  > h2:not(.typeSpecificHeading, .globalHeading, .miscHeading),
+.SearchWidget-saved
+  > h2:not(.typeSpecificHeading, .globalHeading, .miscHeading),
+.SearchWidget-create > h2 {
+  background: var(--color-gray2);
+}
+
+.SearchWidget-moreFilters {
+  background: transparent;
+  display: block;
+  font-size: inherit;
+  padding: var(--gap-m) 0 0 0;
+
+  h2:not(.typeSpecificHeading, .globalHeading, .miscHeading) {
+    background: transparent;
+    border: 0;
+    font-weight: normal;
+    text-transform: inherit;
+  }
+
+  &.is-collapsed {
+    overflow: visible;
+
+    > .Widget-title {
+      position: relative;
+    }
+  }
+
+  &:not(.is-collapsed) {
+    padding-bottom: 0;
+  }
+}
+
+.SearchWidget-controls {
+  padding-top: calc(
+    var(--gap-m) + var(--gap-s) * 2 + var(--Text-height) + var(--gap-l)
+  );
+  position: relative;
+
+  .ComboInput {
+    width: 100%;
+  }
+
+  .searchFiltersLocal {
+    padding-top: var(--gap-m);
+  }
+}
+
+.SearchWidget-create {
+  grid-area: create;
+  padding: var(--gap-m) var(--gap-l) var(--gap-l) var(--gap-l);
+
+  form {
+    display: flex;
+
+    .ComboInput {
+      flex: auto;
+      margin-right: var(--gap-s);
+    }
+  }
+}
+
+.SearchWidget-query {
+  left: var(--gap-l);
+  position: absolute;
+  right: var(--gap-l);
+  top: var(--gap-m);
+  width: auto;
+}
+
+.SearchWidget-type,
+.SearchWidget-filter {
+  display: none;
+}
+
+.SearchWidget-reset {
+  .Link.is-red;
+  .Text.is-s;
+
+  align-items: center;
+  background: none;
+  border: 0;
+  display: inline-block;
+  line-height: var(--lineHeight-m);
+  padding: 0;
+  position: absolute;
+  right: var(--gap-l);
+  top: calc(
+    var(--gap-m) + var(--gap-s) * 2 + var(--Text-height) + var(--gap-l)
+  );
+
+  &:focus {
+    color: var(--Link-hoverColor);
+  }
+
+  &::before {
+    .Icon;
+    .Icon.is-m;
+
+    content: 'refresh';
+    top: calc((var(--Text-height) - var(--iconSize-m)) / 2);
+  }
+}
+
+.SearchWidget-filter {
+  margin-top: var(--gap-s);
+  position: relative;
+
+  .DashboardWidget-filters & {
+    align-items: center;
+    margin-top: 0;
+  }
+
+  .ContentSelector-select + .ComboInput {
+    max-width: 100%;
+  }
+
+  > .Checkbox {
+    display: none;
+  }
+
+  label {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+.SearchWidget-filter.SearchWidget-hiddenInput {
+  margin-top: 0;
+}
+
+.SearchWidget-filterItem {
+  order: 1;
+  width: 100%;
+
+  input[data-previewable='false'] + .ContentSelector-search,
+  .ContentSelector-clear {
+    margin-top: calc(0px - var(--gap-s) - var(--Icon-size) / 2);
+    position: absolute;
+    right: 0;
+    top: 50%;
+  }
+
+  input[data-previewable='true'] {
+    &:not([data-preview]),
+    &[data-preview=''] {
+      + .ContentSelector-search {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.SearchWidget-filter.is-multiple {
+  position: relative;
+
+  &::before {
+    border-color: var(--Input-borderColor);
+    border-style: solid;
+    border-width: 0 0 1px 1px;
+    bottom: calc(var(--gap-s) + var(--Text-height) / 2 - 1px);
+    content: '';
+    left: 0;
+    position: absolute;
+    top: calc(var(--gap-s) * 4 + var(--Text-height));
+    width: var(--gap-s);
+  }
+
+  .SearchWidget-filterItem {
+    position: relative;
+
+    &:not(:last-of-type) {
+      margin-left: calc(var(--gap-s) * 2);
+      margin-top: var(--gap-s);
+      order: 2;
+      width: calc(100% - var(--gap-s) * 2);
+
+      .ComboInput {
+        cursor: default;
+        width: calc(100% - var(--gap-s) * 2 - var(--Icon-size));
+      }
+
+      .ComboInput:hover::before {
+        border-color: var(--Input-borderColor);
+      }
+
+      .ComboInput:focus::before {
+        border-bottom-width: 1px;
+        border-color: var(--Input-focusColor);
+      }
+
+      .ComboInput-icon::after {
+        display: none;
+      }
+
+      input[data-previewable='false'] + .ContentSelector-search {
+        display: none;
+      }
+
+      input[data-previewable='true'] {
+        &:not([data-preview]),
+        &[data-preview=''] {
+          + .ContentSelector-search {
+            width: calc(100% - var(--gap-s) * 2 - var(--Icon-size));
+          }
+        }
+      }
+
+      input[data-previewable='true'][data-preview]:not([data-preview=''])
+        + .ContentSelector-search {
+        margin-top: var(--gap-s);
+        max-width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
+        padding-top: var(--gap-s);
+
+        &::before {
+          background: var(--color-gray1);
+        }
+
+        & + .ContentSelector-edit + .ContentSelector-clear,
+        & + .ContentSelector-clear {
+          margin-top: 0;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+
+        &:hover {
+          &::before {
+            background: var(--color-dominant2);
+          }
+        }
+      }
+
+      .ContentSelector-clear {
+        right: 0;
+      }
+    }
+  }
+
+  &.is-missing .SearchWidget-filterItem:not(:last-of-type) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.SearchWidget-filter.is-advanced {
+  position: relative;
+
+  a {
+    .IconButton;
+
+    --IconButton-name: 'edit';
+
+    position: absolute;
+    right: 0;
+    top: calc(50% - var(--Icon-size) / 2 - var(--gap-s));
+  }
+}
+
+.SearchWidget-filter.is-date {
+  display: block;
+
+  .SearchWidget-dateRanges {
+    padding-left: var(--gap-m);
+    width: 100%;
+
+    .DateTimeInput {
+      margin-top: var(--gap-s);
+      width: 100%;
+    }
+  }
+}
+
+.SearchWidget-filter.is-record {
+  .ComboInput {
+    max-width: none;
+    width: calc(100% - var(--gap-s) * 2 - var(--Icon-size));
+  }
+}
+
+.toolEntityDropdown-container {
+  margin-left: var(--gap-s);
+}
+
+.SearchWidget-controls:not(.is-collapsed) {
+  .SearchWidget-type {
+    display: block;
+  }
+
+  .SearchWidget-filter {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+}
+
+.SearchWidget-result {
+  grid-area: result;
+  position: relative;
+
+  .Popup-content & {
+    > div:first-child {
+      height: 100%;
+    }
+  }
+
+  &.loading::after {
+    .Icon;
+    .Icon.is-xl;
+
+    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);
+    visibility: visible;
+    z-index: 1;
+  }
+}
+
+.expand() {
+  border-bottom: 0;
+  padding-bottom: var(--gap-l);
+
+  > h2 {
+    cursor: auto;
+    margin-bottom: var(--gap-m);
+
+    &::after {
+      display: none;
+    }
+  }
+
+  > *:not(h2) {
+    display: block;
+  }
+}
+
+.Popup .SearchWidget:not(.is-global) {
+  .SearchWidget-result h2 {
+    margin-left: var(--gap-l);
+
+    + .SearchResult-table.LinkTable {
+      margin: 0 var(--gap-l);
+      width: calc(100% - 2 * var(--gap-l));
+    }
+  }
+}
+
+//global search widget
+.SearchWidget.is-global {
+  .SearchWidget-title {
+    display: none;
+  }
+
+  .SearchWidget-query {
+    padding-right: calc(var(--gap-l) + var(--Icon-size) + var(--gap-s));
+  }
+}
+
+// Search views without Saved Searches support
+.AssignmentDeskDashboard,
+.Popup.is-fromRight[data-popup-source-class~='ContentSelector-search'],
+.SearchWidget.DashboardWidget {
+  .SearchWidget-saved {
+    display: none;
+  }
+}
+
+@media (@mq-s) {
+  .SearchWidget.is-global {
+    .SearchWidget-query {
+      display: none;
+      padding-right: 0;
+    }
+
+    .SearchWidget-controls {
+      padding-top: var(--gap-m);
+    }
+
+    .SearchWidget-reset {
+      right: calc(var(--gap-l) * 2 + var(--Icon-size));
+      top: var(--gap-m);
+    }
+  }
+}
+
+@media (@mq-m) {
+  .SearchWidget {
+    --SearchWidget-leftWidth: 250px;
+
+    display: grid;
+    grid-template:
+      'title title' auto
+      'controls result' 1fr
+      'history result' auto
+      'create result' auto ~'/'
+      var(--SearchWidget-leftWidth) 1fr;
+    overflow: visible;
+  }
+
+  .SearchWidget-controls {
+    .expand();
+
+    overflow: auto;
+  }
+
+  .SearchWidget-type {
+    display: block;
+  }
+
+  .SearchWidget-filter {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .SearchWidget-reset {
+    &::before {
+      top: calc((var(--Text-height) - var(--iconSize-s)) / 2);
+    }
+  }
+
+  .SearchWidget-result {
+    border-left: 1px solid var(--color-gray3);
+    overflow: hidden;
+  }
+
+  //Global search widget styling
+  .SearchWidget.is-global {
+    .SearchWidget-reset {
+      right: var(--gap-l);
+    }
+  }
+
+  .SearchWidget[name='searchAdvancedFull'] {
+    grid-template:
+      'title result' auto
+      'controls result' 1fr
+      'history result' auto
+      'create result' auto ~'/'
+      var(--SearchWidget-leftWidth) 1fr;
+  }
+}
+
+@media (@mq-l) {
+  .SearchWidget {
+    --SearchWidget-leftWidth: 250px;
+  }
+
+  .SearchWidget-reset {
+    line-height: var(--lineHeight-s);
+  }
+
+  .SearchWidget-result {
+    overflow: hidden;
+  }
+}
+
+@media (@mq-xl) {
+  .SearchWidget {
+    .SearchResult-views {
+      width: auto;
+    }
+  }
+}
+
+.SavedSearches {
+  &-links > a {
+    display: block;
+    margin-right: calc(var(--gap-s) * 2 + var(--Icon-size));
+    padding: var(--gap-m) 0;
+  }
+
+  &-more {
+    .IconButton;
+
+    --IconButton-name: 'more_horiz';
+
+    position: absolute;
+    right: 0;
+    top: calc(50% - var(--gap-s) - var(--Icon-size) / 2);
+
+    &::before {
+      font-weight: bold;
+    }
+
+    &.is-active {
+      .IconButton.is-focus;
+
+      --IconButton-name: 'clear';
+    }
+
+    &-dropdown {
+      .Dropdown;
+
+      &-copy {
+        cursor: pointer;
+
+        &:state(btu-copy-to-clipboard-copied) {
+          font-style: italic;
+          opacity: 0.5;
+          pointer-events: none;
+        }
+
+        & + textarea {
+          display: none;
+        }
+
+        button {
+          display: none;
+        }
+      }
+
+      &.is-open {
+        .Dropdown.is-open;
+      }
+
+      [role='menuitem'] {
+        .Dropdown-item;
+      }
+    }
+  }
+
+  &-pagination {
+    border-top: 1px solid var(--Input-borderColor);
+    padding: var(--gap-xs) 0 0;
+
+    .pagination {
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+}
+
+// Legacy.
+.searchForm,
+.searchControls {
+  display: contents;
+}
+
+.searchMissing {
+  display: none;
+}
+
+.savedSearches > ul > li {
+  position: relative;
+
+  &:not(:first-child) {
+    padding-top: var(--gap-xs);
+  }
+}