search.scss

// Thumbnail sizes for media items: search results, list entries, record views
$thumbnail-width-small:   60px;
$thumbnail-width-medium: 100px;
$thumbnail-width-large:  160px;

// Hide these on mobile
@media (max-width: 767px) {
  #datevispublishDatexWrapper,
  .result .checkbox { display: none; }
}

.searchHomeContent { @include clearfix(); }
.home-facet-list {
  padding-left: 0;
  padding-right: 1rem;
  list-style: none;
}
@media (min-width: 768px) {
  .search-home-facets,
  .home-facet-container { display: flex; }
  .home-facet {
    flex: 1 1 100%;
    flex-basis: auto;
  }
  .home-facet-list { flex: 0 1 100%; }
}

.searchForm {
  margin: 0;
  padding: 0;
}

header .container.navbar { margin-bottom: 0; }

.search-sort, .search-result-limit { display: flex; }
.search-sort label, .search-result-limit label {
  line-height: $input-height-base;
  padding-right: .5rem;
}
.search-stats {
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .search-header { display: flex; }
  .search-stats { flex-grow: 1; }
  .search-controls { text-align: right; }
}

.record-nav,
.bulkActionButtons {
  @include clearfix();
  margin: 1rem 0;
  padding: 0;
}
.bulk-checkbox,
.bulkActionButtons label { display: inline-block; }
.bulkActionButtons label input { margin-top: 2px; }

.action-toolbar {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.action-toolbar li {
  display: inline-block;
}

@media (max-width: 767px) {
  .grid { min-height: 250px; }
}
.result {
  display: flex;
  padding-top: 1rem;

  .record-checkbox,
  .record-number { display: none; }

  .title { font-weight: bold; }
  .list-tab-content.record .img-col { display: none; }
  .list-tab-content.record .info-col { width: 100%; }
  .format {
    @extend .label;
    @extend .label-info;
  }

  .checkbox-select-item { float: left; }

  @media (max-width: 767px) {
    a {
      max-width: 100%;
      text-decoration: underline;
    }
  }
  @media (min-width: 768px) {
    .record-checkbox {
      display: block;
      flex: 0;
      cursor: pointer;
    }
    .record-number {
      display: block;
      flex: 0 2rem;
      text-align: center;
    }
  }
}
.record,
.result {
  .media {
    flex: 1;
    margin: 0;
    padding-right: 10px;
    padding-left: 10px;
  }
  .media-left,
  .media-right {
    text-align: center;
    img {
      max-width: 100%;
      max-height: 300px;
    }
    &.small img,
    &.medium img,
    &.large img {
      display: inline-block;
      width: $thumbnail-width-small;
      max-width: none;
    }
  }
  .media-left { margin-right: 10px; }
  .media-right { margin-left: 10px; }

  @media (min-width: 768px) {
    .media-left,
    .media-right {
      max-width: 25%;

      a {
        display: inline-block;
        max-width: 100%;
        text-align: center;
        white-space: nowrap;
        text-decoration: underline;
      }

      &.small img,
      &.medium img,
      &.large img {
        width: auto;
        max-width: 100%;
      }
      &.small  > a,
      &.small  > img { width: $thumbnail-width-small; }
      &.medium > a,
      &.medium > img { width: $thumbnail-width-medium; }
      &.large  > a,
      &.large  > img { width: $thumbnail-width-large; }
    }
  }
}
.record .media-left,
.record .media-right {
  &.small img,
  &.medium img,
  &.large img { width: auto; }
}
.result-body {
  padding: 0;
  padding-bottom: .25rem;
}
.result-links .alert { margin: 0; }
.result-formats { margin-bottom: .5rem; }

.btn-bookbag-toggle form { display: inline; }
.cart-link-icon.fa { margin-right: .3rem; }
.result .cart-link-icon {
  color: $text-color;
  /* .fa-fw */
  width: 1.28571429em;
  text-align: center;
}
.savedLists {
  @extend .alert;
  @extend .alert-info;
  display: none;
}

@media (min-width: 768px) {
  .result-body {
    float: left;
    width: 75%;
  }
  .result-links {
    float: left;
    width: 25%;
    padding: 0;
  }
  .savedLists.loaded { display: block; }
}
body.rtl {
  .result .btn-bookbag-toggle .fa {
    margin-left: .3rem;
    margin-right: 0;
  }
  @media (min-width: 768px) {
    .result-body,
    .result-links { float: right; }
  }
}
/* ------ EMBEDDED RESULTS STYLE ------ */
.result.embedded {
  .getFull {
    display: block;
    margin-left: -.5rem;
    padding-left: .5rem;
    border-left: 1px solid transparent;
  }
  .getFull.expanded {
    @extend .list-group-item;
    margin-top: -11px;
    padding-left: .5rem;
    border-top-left-radius: $border-radius-base;
    border-top-right-radius: $border-radius-base;
    &::before {
      content: '\25BC';
      position: absolute;
      right: 1rem;
      color: $gray;
    }
  }
  .loading {
    @extend .list-group-item;
    margin-left: .75rem;
    padding: 1rem;
    background: #fff;
  }
  .long-view {
    margin-left: -.5rem;
    padding: .5rem;
    border: 1px solid $list-group-border;
    background-color: #fff;
    border-bottom-left-radius: $border-radius-base;
    border-bottom-right-radius: $border-radius-base;
  }
  .long-view .tab-content { padding: 0; }
  .list-tabs { margin-bottom: 0; }
  .list-tab-toggle { cursor: pointer; }
  .list-tab-content { padding: 1rem; }
}

/* ------ GRID VIEW ------ */
.search-grid::after {
  display: table;
  clear: both;
  content: '';
}
.grid-result {
  display: flex;
  float: left;
  width: 50%;

  .grid-body { flex: 1; }
  .grid-checkbox {
    flex: 0 0 30px;
    min-width: 0;
  }
  .title { font-weight: bold; }
  .label,
  .format {
    display: inline-block;
    white-space: normal;
  }
}
.grid-large-break,
.grid-small-break { clear: both; }
@media (min-width: 992px) {
  .grid-result{ width: 25%; }
  .grid-small-break { display: none; }
}

.searchtools a {
  padding: 0 .5rem;
  white-space: nowrap;
}

/* ------ COMBINED ------ */
// No sidebar in combined:
.template-dir-combined.template-name-results.offcanvas {
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .combined-search-container {
    display: flex;

    .result { margin-left: 0; }
    .result-body {
      float: none;
      width: auto;
    }
    .result-links { display: none; }
  }
  .combined-column {
    flex: 0 1 100%;
    padding-left: 1rem;
  }
  .combined-column:last-child { padding-right: 1rem; }
}

.wikipedia img { margin-right: 1rem; }
.geoItem {
    font-size: .9em;
    margin: 0px 0px 10px;
}
.title-in-heading {
  font-size: inherit;
  font-style: italic;
}

/* ------ TOP FACETS ------ */
.top-title {
  display: inline-block;
  padding-top: .5rem;
  padding-left: .5rem;
  font-weight: bold;
  color: #000;
}
.top-title .fa {
  width: 1rem;
  text-align: center;
}
@media (min-width: 768px) {
  .top-title { padding-top: 0; }
  .top-title .fa { display: none; }
  .top-facets .collapse {
    display: block;
    height: auto !important;
  }
}

/* ------ CURRENT FILTERS ------ */
.active-filters {
  clear: both;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  .retain-filters {
    float: right;
  }
  .checkbox {
    flex: 1;
    white-space: nowrap;
  }
  .filters-toggle {
    flex: 1;
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    &::after {
      content: '\25B2';
    }
    &.collapsed::after {
      content: '\25BC';
    }
    @media (min-width: $screen-sm-min) {
      float: left;
    }
  }
  .filters {
    flex: 10 1 auto;
    padding: 5px 0 5px 10px;
    .collapse {
      display: none;
      .in {
        display: inline-block;
      }
    }

    .checkbox label {
      display: inline-block;
      padding: 10px 0px;
      @media (max-width: $screen-sm-min) {
        float: right;
        padding: 0px;
      }
    }
    .filters-term {
      font-size: 0.8em
    }
    .filter-value {
      padding: 2px 8px;
      margin: 5px;
      font-weight: 600;
      color: #fff;
      background: $list-group-active-bg;
      white-space: nowrap;
      display: inline-block;
    }
    .checkbox {
      display: inline;
      padding-left: 0;
      padding-right: 0;
      @media (min-width: $screen-sm-min) {
        padding-right: 20px;
      }
    }
    .title-value-pair {
      display: inline-block;
    }
  }
}

.toolbar-btn,
.record-nav .cart-add,
.record-nav .cart-remove,
.reset-filters-btn {
  display: inline-block;
  margin-bottom: 4px;
  padding: .5rem 1rem;
  border: 0;
  color: #555;
  background-color: rgba(0,0,0,.05);
  border-radius: 4px;

  &:hover {
    background-color: rgba(0,0,0,.1);
  }
}
.toolbar-btn:hover,
.record-nav .cart-add:hover,
.record-nav .cart-remove:hover,
.reset-filters-btn:hover {
  color: #555;
  text-decoration: none;
}
.search-filter-remove {
  margin: 4px 1px 4px 4px;
  font-weight: normal;
  color: #fff;
}
.active-filters .search-filter-remove:hover {
  color: red;
}
.search-filter-remove::after {
  content: "\f2d3"; /* fa-window-close */
  font-family: "FontAwesome";
}
.search-filter-dropdown {
  display: inline-block;
  .btn {
    color: #fff;
    background: $list-group-active-bg;
    vertical-align: baseline;
  }
  .btn::after {
    content: "\f107";
    font-family: "FontAwesome";
  }

  .dropdown-menu {
    .filters-term {
      display: block;
      text-align: center;
    }
    .filter-value {
      display: flex;

      .text {
        flex-grow: 1;
        margin-right: 0.5em;
      }
      a {
        flex-shrink: 0;
        margin: 0;
      }
    }
  }
}

.search-schedule-header {
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
}

.search-history-table {
  @extend .table;
  @extend .table-striped;
}
table.search-history-table {
  table-layout: auto;

  tbody > tr > td { vertical-align: middle; }
}

/* Break early to prevent table overflow */
@media (max-width: 991px) {
  .template-dir-search.template-name-history {
    .mainbody,
    .sidebar {
      float: none;
      width: auto;
      padding: 0;
    }
  }
}