// 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; } } }