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

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

@@ -1,479 +0,0 @@
-@import (reference) url('./Dropdown.less');
-
-.SearchResult {
-  display: grid;
-  height: 100%;
-  position: relative;
-}
-
-.SearchResult-items {
-  margin-top: calc(var(--gap-m) * 2 + var(--lineHeight-s) + 1px);
-  overflow: auto;
-  padding: var(--gap-l);
-}
-
-.SearchResult-selectionReset {
-  .Dropdown-item;
-  .Link.is-red;
-
-  font-weight: normal;
-
-  &::before {
-    .Icon;
-    .Icon.is-s;
-
-    content: 'cancel';
-    margin-right: var(--gap-xs);
-  }
-}
-
-.SearchResult-actions {
-  .SearchResult-selection {
-    display: none;
-    margin: var(--gap-m) 0 var(--gap-l);
-    .Text.is-s();
-  }
-
-  .SearchResult-selectionCount {
-    display: inline-block;
-    font-weight: normal;
-    margin-right: calc(var(--gap-m) + var(--gap-xs));
-  }
-
-  // Creates space between an active collection and other search actions
-  & > .SearchResult-selectionCount {
-    margin-bottom: var(--gap-l);
-  }
-
-  & > .SearchResult-action {
-    margin: var(--gap-s) 0;
-  }
-}
-
-.SearchResult-view {
-  height: 100%;
-}
-
-.SearchResult-items-query {
-  margin-right: 0;
-}
-
-.SearchResult-views {
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: 10;
-
-  > ul {
-    .TabBar;
-
-    > li {
-      .TabBar-item;
-
-      padding: 0;
-
-      > a {
-        display: inline-block;
-        padding: calc(var(--gap-m) - 1px) var(--gap-l) calc(var(--gap-m) + 1px)
-          var(--gap-l);
-      }
-    }
-  }
-
-  .SearchResult & {
-    position: absolute;
-  }
-}
-
-.SearchResult-pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: var(--gap-l);
-  padding: var(--gap-xs) var(--gap-l);
-
-  ul.pagination {
-    flex-wrap: wrap;
-    min-height: var(--fontSize-xxl);
-
-    > li:first-child {
-      margin-right: var(--gap-l);
-    }
-
-    li.next {
-      margin-left: var(--gap-s);
-    }
-
-    li.previous {
-      margin-right: var(--gap-s);
-    }
-
-    li.SearchResult-pages {
-      margin-left: 0;
-    }
-  }
-}
-
-.SearchResult-pages {
-  display: none;
-}
-
-.SearchResult-page {
-  border-radius: calc(var(--Text-height) / 2);
-  color: var(--color-gray6);
-  display: inline-block;
-  min-width: var(--Text-height);
-  padding: 0 var(--gap-xs);
-  text-align: center;
-
-  &.is-active {
-    background-color: var(--color-gray3);
-    color: var(--color-dominant7);
-    text-decoration: none;
-  }
-
-  &:hover {
-    color: var(--color-dominant7);
-    text-decoration: none;
-  }
-}
-
-.SearchResult-items .queryRestrictions,
-.SearchResult-fields,
-.SearchResult-sorts,
-.SearchResult-imageHeightInput,
-.SearchWidget:not(.AssignmentDeskDashboard) .SearchResult-limit {
-  display: inline-block;
-  margin-right: var(--gap-l);
-  vertical-align: middle;
-}
-
-.SearchResult-sorts,
-.SearchResult-limit {
-  .ComboInput::before {
-    border-bottom-width: 0;
-  }
-}
-
-.SearchResult-list {
-  clear: both;
-  margin-top: var(--gap-l);
-
-  &.is-processing {
-    opacity: 0.3;
-    pointer-events: none;
-  }
-}
-
-.searchResult-print {
-  padding: var(--gap-l);
-
-  > h1 {
-    padding-bottom: var(--gap-m);
-  }
-}
-
-.SearchResult-images figure {
-  display: inline-flex;
-  height: 10vh;
-  position: relative;
-
-  > .Checkbox {
-    color: var(--color-white);
-    left: var(--gap-xs);
-    position: absolute;
-    top: var(--gap-xs);
-    z-index: 10;
-
-    ~ a {
-      background: linear-gradient(
-        160deg,
-        var(--color-black),
-        transparent calc(var(--Icon-size) * 2),
-        transparent
-      );
-      bottom: 0;
-      display: block;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-
-  a {
-    display: contents;
-  }
-
-  img {
-    flex: auto;
-    object-fit: cover;
-
-    &:not([src]) {
-      max-width: 30vw;
-    }
-  }
-
-  figcaption {
-    background: linear-gradient(
-      to top,
-      var(--color-black),
-      var(--color-black) 25%,
-      transparent
-    );
-    bottom: 0;
-    color: var(--color-white);
-    left: 0;
-    overflow: hidden;
-    padding: var(--gap-s) calc(var(--Icon-size) + var(--gap-xs) * 2)
-      var(--gap-s) var(--gap-xs);
-    position: absolute;
-    right: 0;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .ContentSummary-info {
-    .Icon.is-s;
-
-    bottom: 0;
-    color: var(--color-white);
-    margin: 0;
-    position: absolute;
-    right: 0;
-  }
-}
-
-.SearchResult-images {
-  .loop(@height) when (@height >= 0) {
-    .loop(@height - 1);
-
-    &[data-height='@{height}'] figure {
-      height: (@height * 0.25vh + 5vh);
-    }
-  }
-
-  .loop(100);
-}
-
-.SearchResult-imageHeightInput {
-  align-items: center;
-  display: inline-flex;
-  vertical-align: middle;
-  width: 150px;
-
-  &::before,
-  &::after {
-    .Icon;
-
-    color: var(--color-gray5);
-    top: 0;
-  }
-
-  &::before {
-    content: 'zoom_out';
-  }
-
-  input[type] {
-    margin: 0 var(--gap-xs);
-  }
-
-  &::after {
-    content: 'zoom_in';
-  }
-}
-
-.SearchResult-list > .SearchResult-images {
-  display: flex;
-  flex-wrap: wrap;
-  margin: calc(0px - var(--gap-s) / 2);
-
-  figure {
-    flex: auto;
-    margin: calc(var(--gap-s) / 2);
-  }
-
-  &::after {
-    content: '';
-    flex: 10000;
-  }
-}
-
-.SearchResult-mixed > .SearchResult-images {
-  overflow: auto;
-  white-space: nowrap;
-
-  figure:not(:last-child) {
-    margin-right: var(--gap-s);
-  }
-
-  + .LinkTable {
-    margin-top: var(--gap-l);
-  }
-}
-
-.SearchResult-items > .SearchResult-images {
-  figure:not(:last-child) {
-    margin-right: var(--gap-s);
-  }
-}
-
-.SearchResult-actions-wrapper {
-  float: right;
-  white-space: nowrap;
-
-  .SearchResult-actions-toggle {
-    .IconButton;
-
-    background: transparent;
-    border: 0;
-    padding: 0;
-
-    --IconButton-name: 'more_horiz';
-
-    &[aria-expanded='true'] {
-      .IconButton.is-focus;
-
-      --IconButton-name: 'close';
-    }
-  }
-
-  .SearchResult-actions-body {
-    .SearchResult-action {
-      margin: 0 calc(-1 * var(--gap-l));
-    }
-
-    .SearchResult-action-link {
-      .Dropdown-item;
-
-      &[href*='/searchAdvancedFull'] {
-        display: none;
-      }
-    }
-
-    li > h2 {
-      .ComboInput-heading;
-
-      background: transparent;
-      font-weight: unset;
-      line-height: var(--lineHeight-m);
-      margin: 0 calc(-1 * var(--gap-l));
-    }
-  }
-
-  .SearchResult-actions-toggle + .frame {
-    .Dropdown;
-
-    overflow: auto;
-    padding: var(--gap-s) var(--gap-l);
-  }
-
-  .SearchResult-actions-toggle[aria-expanded='true'] + .frame {
-    .Dropdown.is-open;
-
-    & .SearchResult-selection {
-      display: block;
-    }
-
-    &:not(:hover) {
-      .SearchResult-selectionReset {
-        &:focus {
-          --Link-color: var(--color-red5);
-
-          background: transparent;
-        }
-      }
-    }
-  }
-}
-
-.SearchResult-fullscreen {
-  .IconButton;
-
-  --IconButton-name: 'fullscreen';
-}
-
-.SearchResult-summaryField:not(:first-child)::before {
-  background: var(--color-gray6);
-  border-radius: 50%;
-  content: '';
-  display: inline-block;
-  height: 2px;
-  margin: var(--gap-xs);
-  width: 2px;
-}
-
-.SearchResult-summaryField {
-  color: var(--color-gray5);
-  display: inline;
-  font-size: var(--fontSize-s);
-}
-
-.SearchResult-summaryDescription {
-  color: var(--color-gray5);
-  font-size: var(--fontSize-s);
-}
-
-.SearchResult-summaryContainer {
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-@media (@mq-m) {
-  .SearchResult-images figure {
-    img {
-      &:not([src]) {
-        max-width: 17vw;
-      }
-    }
-  }
-
-  .SearchWidget.is-global .SearchResult-pagination {
-    right: calc(var(--gap-l) + var(--Icon-size));
-  }
-}
-
-@media (@mq-l) {
-  .SearchResult-pages {
-    display: inline-block;
-
-    > ol {
-      display: flex;
-    }
-  }
-}
-
-@media screen and (min-width: 1500px) {
-  .SearchResult-pagination {
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 10;
-  }
-}
-
-/* Loader overlay for search results (covers the page, dimmed background, centered spinner) */
-.searchResult-loader-overlay {
-  align-items: center;
-  background: rgb(255 255 255 / 30%);
-  display: flex;
-  height: 100vh;
-  justify-content: center;
-  left: 0;
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  width: 100vw;
-}
-
-.searchResult-loader-spinner::before {
-  .Icon;
-
-  --Icon-size: calc(var(--fontSize-xxl) * 1.5);
-
-  animation: spin 1s linear infinite;
-  content: 'autorenew';
-  display: inline-block;
-}