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

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

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