diff --git a/themes/bootprint3/scss/bootprint.scss b/themes/bootprint3/scss/bootprint.scss index 205bdeb815a6ca1a0fee7af287eae0779d36085e..d223f762334e23546f33c9fa97ad515e69de3e0e 100644 --- a/themes/bootprint3/scss/bootprint.scss +++ b/themes/bootprint3/scss/bootprint.scss @@ -1,112 +1,28 @@ @import "variables", "bootstrap"; @import "icons"; @import "search"; +@import "forms"; -$brand-primary: #619144; // a11y overrides $brand-primary in sass +$brand-primary: #619144; /* a11y overrides $brand-primary in sass */ $active-orange: #E70 !default; /* --- Bootstrap MODS ---*/ +@import "common"; + body { background: $brand-primary; font-size: 13px } -.container { - background: #FFF; - padding: 0; -} -.main .container { padding: 0 4px 18px; } - -a, -.btn-link { - color: #06C; - &:hover { color: #09F; } -} -.alert { padding: 8px; } -.btn { padding: 3px 5px 2px; } -.btn.btn-default { - background: $gray-lighter; - background-image: linear-gradient(#FFF, $nav-tabs-border-color); - border: 1px solid $gray; - color: $gray-darker; - text-shadow: 0 1px 0 #FFF; -} -.btn:not(.btn-default) { font-weight:bold; } -.btn-danger, -.btn-danger:hover { border-color:darken($brand-danger, 12%); } -.btn-info, -.btn-info:hover { border-color:darken($brand-info, 12%); } -.btn-primary, -.btn-primary:hover { border-color:darken($brand-primary, 12%); } -.btn-success, -.btn-success:hover { border-color:darken($brand-success, 12%); } -.btn-warning, -.btn-warning:hover { border-color:darken($brand-warning, 12%); } #commentList .comment:nth-child(even) { background: $gray-lighter; } #dateVisColorSettings { stroke: $brand-primary; } -#hierarchyRecord { background: #FFF; } -h2 { margin: 0 8px 8px; } -input[type=radio], -input[type=checkbox] { - margin: 2px auto 0; - padding: 0 2px; -} -.nav > li > a { padding: 5px 10px; } -.nav-pills { - display: table; - margin: 0 auto; -} -.navbar { min-height: 1px; } -.navbar-form { - margin-top: 5px; - margin-bottom: 5px; -} -.pagination { - display: table; - margin: 18px auto; -} -.pagination > li > a, -.pagination > li > span { padding: 4px 12px 3px; } -.pagination > .active > a, -.pagination > .active > a:focus, -.pagination > .active > a:hover, -.pagination > .active > span, -.pagination > .active > span:focus, -.pagination > .active > span:hover { - background: $brand-primary; - border-color: $brand-primary; -} -.panel-heading { padding: 0; } -.panel-heading a { - cursor: pointer; - display: inline-block; - padding: 6px; - width: 100%; -} -.row:not(.top-row) { - padding: 6px 4px; - margin: 0 -4px; -} -.row > p { padding: 0 1em; } -.sub-breadcrumb { padding: 0 5px; } -.tab-content { - padding: 6px 8px; - border: 1px solid $gray-lighter; - border-top: 0; -} +#hierarchyRecord { background: #fff; } +.cart-controls .checkbox { line-height: 2rem; } -@media (max-width: 767px) { - body { padding: 6px; } - header { margin-top: 0; } - .label { font-size: 85%; } -} +/* --- Layout --- */ +.main .container { padding-top: 1rem; } @media (min-width: 768px) { - .badge { - font-size: 85%; - margin-top: 1px; - } - .label { padding-top: .3em; } - .modal-dialog { width: 650px; } + .main .sidebar { padding: 0; } } /* --- Header --- */ @@ -115,10 +31,7 @@ header .fa.fa-bars { font-size: 21px; } header .navbar { border-radius: 5px 5px 0 0; padding: 0 10px; - &.search { - border-radius: 0; - padding-bottom: 4px; - } + &.search { border-radius: 0; } .navbar-brand { height: 65px; width: 170px; @@ -149,21 +62,12 @@ header .searchbox .tab-content .navbar-text { margin: 5px 10px 5px 0; } margin-bottom: 2px } } -header .breadcrumb { - border: 1px solid $gray-lighter; - border-radius: 0; - border-width: 1px 0; - font-size: 12px; - margin-bottom: 2px; - padding: 7px 20px 5px -} /* --- Footer --- */ -footer { margin-bottom: 36px; } -footer .container { +footer { + margin-bottom: 2rem; border-radius: 0 0 5px 5px; border-top: 1px solid $nav-tabs-border-color; - padding-top: 18px; } footer hr { display: none; } footer p { margin: 0; } @@ -223,50 +127,6 @@ ul.random.image li img { margin: 0 auto; } margin: 5px 10px 5px 0; } -/* --- Record --- */ -.tagList button { - margin-top: 0; - padding-top: 0; - padding-bottom: 4px; - font-size: 95%; - vertical-align: initial; -} -.tagList button .fa-close { margin-top: 3px; } - -/* --- Search --- */ -.bulkActionButtons { margin-bottom: 6px; } -.result { - padding: 1rem; - margin-left: -1.1rem; - &:nth-child(even) { background-color: $gray-lighter; } - &.embedded .getFull.expanded { - margin-top: -6px; - padding-top: .5rem; - padding-bottom: .5rem; - } -} -.result > p {padding:0 1em;} -.result .label { - display: inline-block; - margin-bottom: 4px; -} -.result .long-view .tab-content {background: #FFF;} -.result .media { margin: 0; } -.result .row { padding: 0; } -.result .savedLists { - margin: 0 0 4px; - padding: 4px 0 4px 6px; -} -.result .savedLists ul { padding-left: 18px; } -.search-controls label { text-align: left; } -@media (max-width: 767px) { - .result .search-controls .form-inline { text-align: left; } - .search-controls { - margin: 4px -4px; - padding: 4px 0; - } -} - /* --- Sidebar --- */ .sidebar { .list-group { margin-bottom: 5px; } diff --git a/themes/bootprint3/scss/common.scss b/themes/bootprint3/scss/common.scss new file mode 100644 index 0000000000000000000000000000000000000000..e7fb03d1e648c27ed5b11e87fde69a5aea31f75e --- /dev/null +++ b/themes/bootprint3/scss/common.scss @@ -0,0 +1,108 @@ +a, +.btn-link { + color: #06C; + &:hover { color: #09F; } +} +.alert { padding: 8px; } +.breadcrumbs .container { + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} +.breadcrumb { + margin-top: .25rem; + margin-bottom: .25rem; + padding-left: 0; + font-size: 12px; +} +.btn { padding: 3px 5px 2px; } +.btn.btn-default { + background: $gray-lighter; + background-image: linear-gradient(#fff, $nav-tabs-border-color); + border: 1px solid $gray; + color: $gray-darker; + text-shadow: 0 1px 0 #fff; +} +.btn:not(.btn-default) { font-weight:bold; } +.btn-danger, +.btn-danger:hover { border-color:darken($brand-danger, 12%); } +.btn-info, +.btn-info:hover { border-color:darken($brand-info, 12%); } +.btn-primary, +.btn-primary:hover { border-color:darken($brand-primary, 12%); } +.btn-success, +.btn-success:hover { border-color:darken($brand-success, 12%); } +.btn-warning, +.btn-warning:hover { border-color:darken($brand-warning, 12%); } +.container { + padding: 0; + background: #fff; +} + +h2 { margin: 8px 0; } + +.container { + padding-left: 1rem; + padding-right: 1rem; + background: #fff; +} + +input[type=radio], +input[type=checkbox] { + margin: 2px auto 0; + padding: 0 2px; +} +.nav > li > a { padding: 5px 10px; } +.nav-pills { + display: table; + margin: 0 auto; +} +.navbar { min-height: 1px; } +.navbar-form { + margin-top: .5rem; + margin-bottom: .5rem; +} +.pagination { + display: table; + margin: 18px auto; +} +.pagination > li > a, +.pagination > li > span { padding: 4px 12px 3px; } +.pagination > .active > a, +.pagination > .active > a:focus, +.pagination > .active > a:hover, +.pagination > .active > span, +.pagination > .active > span:focus, +.pagination > .active > span:hover { + background: $brand-primary; + border-color: $brand-primary; +} +.panel-heading { padding: 0; } +.panel-heading a { + cursor: pointer; + display: inline-block; + padding: 6px; + width: 100%; +} +.row:not(.top-row) { + padding: 6px 4px; + margin: 0 -4px; +} +.row > p { padding: 0 1em; } +.sub-breadcrumb { padding: 0 5px; } +.tab-content { + padding: 6px 8px; + border: 1px solid $gray-lighter; + border-top: 0; +} + +@media (max-width: 767px) { + .label { font-size: 85%; } +} +@media (min-width: 768px) { + .badge { + font-size: 85%; + margin-top: 1px; + } + .label { padding-top: .3em; } + .modal-dialog { width: 650px; } +} diff --git a/themes/bootprint3/scss/forms.scss b/themes/bootprint3/scss/forms.scss new file mode 100644 index 0000000000000000000000000000000000000000..6d26bd5465987004d50b1a75f73ae66f3b2ef487 --- /dev/null +++ b/themes/bootprint3/scss/forms.scss @@ -0,0 +1,19 @@ +legend { margin: 0; } + +@media (min-width: 768px) { + .form-fix-database, + .form-oai-home, + .form-search-reserves { + .control-label { + width: 200px; + padding-left: 1rem; + padding-right: 1rem; + text-align: right; + } + .form-control { + display: inline-table; + width: 300px; + } + .form-group > .btn:first-child { margin-left: 200px; } + } +} diff --git a/themes/bootprint3/scss/search.scss b/themes/bootprint3/scss/search.scss index 76bc7d30b1bfb09301256ea19879373cd3ba8549..6b11e7e684ea141a4c8c3760750cdf77cd31fb5b 100644 --- a/themes/bootprint3/scss/search.scss +++ b/themes/bootprint3/scss/search.scss @@ -3,14 +3,12 @@ margin: 1em auto; width: 90%; } -#advSearchForm .search { margin: 0; } .group .match { margin-top: .5em; } /* --- Search form --- */ .searchForm_lookfor, .searchForm_type { border-color: $brand-primary; } .searchForm { - margin: 6px 8px 8px; padding: 0; .clear-btn, @@ -49,3 +47,108 @@ z-index: 5; } } + +.bulkActionButtons { padding-bottom: 1rem; } +.top-facets .facet a { vertical-align: middle; } +.result { + padding: 1rem; + margin-left: -1rem; // Bring result to the edge of the container + &:nth-child(even) { background-color: $gray-lighter; } + &.embedded .getFull.expanded { + margin-top: -6px; + padding-top: .5rem; + padding-bottom: .5rem; + } +} +.result > p { padding:0 1em; } +.result .long-view .tab-content { background: #fff; } +.result .media { margin: 0; } +.result .row { padding: 0; } +.result .savedLists { + margin: 0 0 4px; + padding: 4px 0 4px 6px; +} +.result .savedLists ul { padding-left: 18px; } +.search-controls label { + margin: 0; + vertical-align: middle; +} +.search-stats { color: $gray; } + +/* --- Advanced --- */ +legend { + margin-top: 2rem; + margin-bottom: 0; +} + +.grid-result { padding-top: 1rem; } +.grid-checkbox { + text-align: right; + cursor: pointer; +} +.grid-body { + text-align: center; + + .status { + margin-top: .5rem; + margin-bottom: .5rem; + } +} + +.template-dir-eds.template-name-advanced h2, +.template-dir-search.template-name-advanced h2 { margin-top: 3px; } + +/* --- Combined --- */ +.combined-column { + padding-left: 1rem; + padding-right: 1rem; + + .result { + margin-right: -1rem; + padding-right: .5rem; + } +} +.template-dir-combined.template-name-results { + &.offcanvas { + margin-left: .5rem; + margin-right: .5rem; + } + .main .container { + width: 100%; + padding-left: 0; + padding-right: 0; + } + + header, + .breadcrumbs, + .main, + footer { background-color: #fff; } + + header { border-radius: 5px 5px 0 0; } + footer { + width: 100%; + padding: 1rem; + border-radius: 0 0 5px 5px; + + .footer-container, + .poweredby { @extend .container; } + } + + .breadcrumbs { + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + } + .breadcrumbs .container { border: 0; } + + .bulkActionButtons { padding-left: 1rem; } + +} +@media (min-width: 768px) { + .template-dir-combined.template-name-results { + &, + &.offcanvas { // overcoming specificity + margin-left: 1rem; + margin-right: 1rem; + } + } +} diff --git a/themes/bootstrap3/scss/bootstrap.scss b/themes/bootstrap3/scss/bootstrap.scss index 8a40c8ee0c8294b05be908f5c4cccc9db537b941..97ab99f01f9488292c4c3b93ea72aa70164e7c83 100644 --- a/themes/bootstrap3/scss/bootstrap.scss +++ b/themes/bootstrap3/scss/bootstrap.scss @@ -4,7 +4,7 @@ $fa-font-path: "../../bootstrap3/css/fonts"; @import "vendor/bootstrap-accessibility/bootstrap-accessibility"; @import "vendor/a11y"; -$fa-font-path: "../../../../../../themes/bootstrap3/css/fonts" !default; +@import "components/variables"; @import "components/advanced-search"; @import "components/alphabrowse"; @@ -20,34 +20,47 @@ $fa-font-path: "../../../../../../themes/bootstrap3/css/fonts" !default; @import "components/similar-carousel"; @import "components/sliders"; -a { cursor: pointer; } -.alert.alert-info a {text-decoration: underline;} -.btn.disabled { - &:active, - &:focus, - &:hover {color: #000;} -} -header .dropdown form { display: none; } -.list-unstyled {margin: 0;} -.highlight,mark { +/** + * Notes + * = As of 4.0, code styles aren't enforced, but + * preferred styles are outlined here: http://codeguide.co/#css + * = The preferred method for writing code is to put generic and mobile styles first + * and surround desktop styling with media min-width queries. + * = Bootstrap 3 breakpoints: <768px, >=768px, >=992px, >=1200px + * xs, sm, md, lg + * = Breakpoint of <=530px also used to target phones specifically + */ + +html { font-size: 14px; } // Root font size from Bootstrap, allows consistent use of rem units +a, +label { cursor: pointer; } +.alert.alert-info a { text-decoration: underline; } + +// Improve contrast +.btn.disabled:active, +.btn.disabled:focus, +.btn.disabled:hover { color: #000; } +.list-unstyled { margin: 0; } +.icon-bar { background-color: #888; } + +// Normalize highlighting +.highlight, +mark { background: lighten(#FF0, 20%); padding: .1em .2em; } -.icon-bar {background-color: #888;} -img {max-width: 100%;} -.nav .btn-bookbag-toggle { float: left; } -.nav .btn-bookbag-toggle a { - display: block; - padding: $nav-link-padding; - text-decoration: none; - &:hover, - &:focus { - @include outline(1px); - text-decoration: none; - background-color: $nav-link-hover-bg; - } + +// Normalize +img { max-width: 100%; } + +// Bootstrap overrides +.breadcrumb { + margin-top: .5rem; + margin-bottom: .5rem; } -.popover {width: 250px;} +.label { display: inline-block; } +.popover { width: 250px; } +.resulthead { @include clearfix(); } .sub-breadcrumb { padding: 5px 10px; white-space: nowrap; @@ -59,8 +72,10 @@ img {max-width: 100%;} content: "#{$breadcrumb-separator}\00a0"; } } -.tab-content {padding: 4px;} +.tab-content { padding: 4px; } +h2 { font-size: 20px; } +h3 { font-size: 16px; } @media (min-width: 768px) { h2 { font-size: 23px; @@ -71,23 +86,39 @@ img {max-width: 100%;} font-weight: normal; } .form-control { max-width: 400px; } + #modal .form-control { max-width: none; } } -@media (max-width: 767px) { - h2 { font-size: 20px; } - h3 { font-size: 16px; } + +/* ------ Layout ------ */ +footer { + @extend .container; + padding: 1rem; } -@media (max-width: 530px) { - .label { - display: inline-block; - max-width: 60%; - overflow: hidden; - text-overflow: ellipsis; +@media (min-width: 768px) { + .footer-container { + display: flex; + width: 100%; + } + .footer-column { flex: 0 1 100%; } + + // Main content and sidebar widths and float + .mainbody { width: 75%; } + .sidebar { width: 25%; } + .mainbody.left, + .sidebar.left { + float: left; + padding-right: 1rem; + } + .mainbody.right, + .sidebar.right { + float: right; + padding-left: 1rem; } } -/* --- Form Errors --- */ +/* ------ Form Errors ------ */ .has-error {margin-bottom: 0;} -.sms-error {@extend .has-error;} +.sms-error { @extend .has-error; } .help-block.with-errors { margin: 0; padding-top: $padding-base-vertical; @@ -95,27 +126,91 @@ img {max-width: 100%;} &:empty {padding: 0;} } -/* --- Badges - blend the links in --- */ -.badge a {color: #fff;} +/* ------ Admin ------ */ +.form-admin-maintenance .form-control { + display: inline-block; + width: 100px; +} -/* --- Browse --- */ -.browse.list-group .list-group-item { +/* ------ Badges - blend the links in ------ */ +.badge a { color: #fff; } + +/* ------ Browse ------ */ +// Layout +@media (min-width: 768px) { + .browse-container { display: flex; } + .browse-list { + flex-basis: 25%; + padding-left: .5rem; + padding-right: .5rem; + } +} +// List item styling +.browse-item { + position: relative; + display: block; + padding: .5rem 1rem; + border: 1px solid $list-group-border; + border-bottom: 0; word-wrap: break-word; - &.view-record { - padding: 2px 4px; - font-size: 85%; - text-align: right; - border-top: 0; +} +.browse-item.active { + background-color: $brand-primary; + color: #fff; + + .badge { + background-color: #fff; + color: $gray-darker; + } +} +.browse-item:hover { background-color: $nav-link-hover-bg; } +.browse-item:last-child { border-bottom: 1px solid $list-group-border; } + +.browse-item.with-badge { + padding-right: 3rem; // Prevent text from overlapping badge + .badge { + position: absolute; + top: .5rem; + right: .25rem; } } +.browse-item.view-record { + padding: 2px 4px; + font-size: 85%; + text-align: right; + border-top: 0; +} -/* --- Cart --- */ +/* ------ Cart ------ */ .cart-controls .checkbox { - line-height: 2.5em; - padding-right: 1em; + line-height: 2.5rem; + padding-right: 1rem; +} +.nav .btn-bookbag-toggle { float: left; } +.nav .btn-bookbag-toggle a { + display: block; + padding: $nav-link-padding; + text-decoration: none; + &:hover, + &:focus { + @include outline(1px); + text-decoration: none; + background-color: $nav-link-hover-bg; + } } -/* --- Devtools --- */ +/* ------ Collections ------ */ +// Layout +@media (min-width: 768px) { + .collection-hierarchytree { display: flex; } + .collection-hierarchytree .tree-panel, + #tree-preview { + flex-basis: 50%; + padding: 1rem; + } +} + +/* ------ Devtools ------ */ .translation-output { width: 100%; max-width: none; @@ -124,21 +219,66 @@ img {max-width: 100%;} white-space: pre; } -/* --- PubDateVis --- */ +/* ------ Facets ------ */ +.date-fields { + display: flex; + + .date-from { padding-right: .25rem; } + .date-to { padding-left: .25rem; } +} +.top-facets { + margin-left: -.5rem; + margin-right: -.5rem; +} +.top-facets .facet, +.top-facets .narrow-toggle, +.top-facets > strong { + display: inline-block; + padding: .25rem .5rem; + white-space: nowrap; +} +.top-facets .narrow-toggle { text-decoration: underline; } +@media (min-width: 768px) { + .author-facets { display: flex; } + .author-list { flex: 0 1 100%; } +} + +/* ------ MyResearch ------ */ +.form-login .btn-link ~ .btn-link { padding-left: 0; } // Login link spacing +.myresearch-menu a { + display: block; + padding: 10px 15px; + &:hover, + &:focus { background-color: $nav-link-hover-bg; } + + .badge { float: right; } +} +.myresearch-menu a.active { + background-color: $brand-primary; + color: #fff; + + .badge { + background-color: #fff; + color: $gray-darker; + } +} +.list-edit-container { @include clearfix(); } + +/* ------ PubDateVis ------ */ #dateVisColorSettings { background-color: #fff; // background of box - fill: rgb(234,234,234); // fillColor + fill: #eee; // fillColor outline-color: #c38835; // selection color stroke: $brand-primary; // color } -/* --- Table wrapping to prevent horizontal overflow --- */ +/* ------ Table wrapping to prevent horizontal overflow ------ */ .table { table-layout: fixed; word-wrap: break-word; } -/* --- Visualization View --- */ +/* ------ Visualization View ------ */ .node { position: absolute; box-sizing: content-box; @@ -146,10 +286,10 @@ img {max-width: 100%;} overflow: hidden; font: 10px sans-serif; line-height: 12px; - border: 1px solid white; + border: 1px solid #fff; } .node div {margin-top: 0px;} -.toplevel {border: 2px solid black;} +.toplevel {border: 2px solid #000;} .node .label { position: absolute; bottom: 0; @@ -164,9 +304,7 @@ img {max-width: 100%;} .notalabel {color: #000;} #viz-instructions {padding-top: 600px;} -span[class^="services-"], span[class*=" services-"] span::before { - content: ", "; -} -span[class^="services-"], span[class*=" services-"] span:first-of-type::before { - content: ""; -} +span[class^="services-"], +span[class*=" services-"] span::before { content: ", "; } +span[class^="services-"], +span[class*=" services-"] span:first-of-type::before { content: ""; } diff --git a/themes/bootstrap3/scss/components/advanced-search.scss b/themes/bootstrap3/scss/components/advanced-search.scss index 1f65e9da23ab43456797e9dc4b8dae226bea9376..91739800f9e888cbbb8215decabd2b350fb4e6b0 100644 --- a/themes/bootstrap3/scss/components/advanced-search.scss +++ b/themes/bootstrap3/scss/components/advanced-search.scss @@ -1,51 +1,184 @@ -.group { +// Group of multiple searches +.adv-group { + @include clearfix(); position: relative; - background: $gray-lighter; + margin-bottom: .5rem; + padding: 1rem; + border: 1px solid $panel-default-border; border-radius: $border-radius-base; - border: 1px solid darken($gray-lighter, 15%); - margin-top: 0; - margin-bottom: .5em !important; + + & ~ & { margin-top: 1rem; } // Spacing between groups + .add_search_link { display: inline-block; margin-top: 4px; } - & .group-close { - @extend .close; +} +.add_search_link, +.adv-group-close { + display: inline-block; + padding-top: .25rem; + padding-bottom: .25rem; +} +.adv-group-close { color: $state-danger-text; } +.adv-search, +.adv-search .input-group { width: 100%; } +.adv-search { + @include clearfix(); + margin-bottom: 1.5rem; +} + +.adv-term-input { margin-bottom: .5rem; } +.adv-term-type { + float: left; + max-width: 80%; +} +.adv-term-remove { + @extend .close; // borrow the X from bootstrap close + float: left; + width: 20%; + height: 30px; + line-height: 1.7; + text-align: center; + opacity: .4; +} +.adv-submit { @include clearfix(); } +.adv-submit .clear-btn { float: right; } + +@media (min-width: 768px) { + .adv-group-terms { + float: left; + width: 75%; + padding-right: 1rem; + } + .adv-group-match { + float: right; + width: 25%; + } + .adv-group-close { position: absolute; - top: .3em; - right: .5em; - opacity: .4; - z-index: 2; - } - .search { - margin-bottom: 2px; - .close {opacity: .8;} - } - @media (min-width: 768px) { - padding: 10px 10px 10px 25px; - [class^=col-] {padding-left: 0;} - } - @media (max-width: 767px) { - .search .middle { - float: left; - width: 90%; + bottom: 1rem; + left: 75%; + } + .adv-search { + margin-bottom: 0; + + .adv-term-input, + .adv-term-type { float: left; } + .adv-term-input { + width: 60%; + margin-right: 2%; } - & .group-close { - top: .5em; - right: 1em; - opacity: .6; + .adv-term-type { max-width: 30%; } + .adv-term-remove { width: 8%; } + } +} + +#groupPlaceHolder { + display: block; + padding: 1rem; +} + +/* --- Fieldsets --- */ +@media (min-width: 768px) { + fieldset, + .fieldset { + float: left; + width: 33%; + padding-right: 1rem; + padding-bottom: 1rem; + } + .solr-facets, + .summon-facets { + float: none; + width: auto; + margin-top: 1rem; + } + .summon-facets .facet-fieldset { + float: left; + width: 50%; + padding-right: 1rem; + } +} + +/* --- EDS --- */ +.adv-term-input, +.adv-term-op { margin-bottom: .25rem; } +.adv-search:first-of-type .adv-term-op { display: none; } +@media (min-width: 768px) { + .eds-adv .adv-term-op { + float: left; + width: 16%; + margin-right: 1%; + + body.rtl & { + float: right; + margin-left: 0; + margin-right: 1%; } } - @media (max-width: 991px) { - .form-control {max-width: none;} + .eds-adv .adv-search:first-of-type .adv-term-input { margin-left: 17%; } + .eds-adv .adv-term-input { + width: 39%; + margin-right: 0; + } + .eds-adv .help-block { + float: left; + width: 6%; + text-align: center; } } -#groupPlaceHolder { - display:block; - padding:6px; + +/* --- Primo --- */ +.primo-adv-search .search { margin-bottom: .5rem; } +.primo-adv-search .search-container { width: 100%; } +.primo-adv-label { + line-height: $input-height-base; + padding-right: 1rem; +} +@media (min-width: 768px) { + .primo.adv-group, + .primo-adv-search .search { + display: flex; + + select { + flex-shrink: 2; + margin-right: .5rem; + } + .primo-adv-input { flex-grow: 1; } + } + .primo-adv-label { flex-shrink: 0; } } -.template-dir-eds.template-name-advanced { - legend {margin-bottom: 0;} - .no-js .group:nth-child(n+3) {display: none;} - .search .close a {margin-left: -2em;} + +/* --- Solr --- */ +@media (min-width: 768px) { + .solr-facet-container { + display: flex; + flex-wrap: wrap; + } + .solr-adv-facet { flex: 1 25%; } } + +/* -- Right to left --- */ +body.rtl { + fieldset, + .fieldset, + .adv-search .adv-term-input, + .adv-search .adv-term-type, + .eds-adv .help-block, + .summon-facets .facet-fieldset { float: right; } + .adv-submit .clear-btn, + .adv-group-match { float: left; } + .adv-search .adv-term-input { + margin-left: 2%; + margin-right: 0; + } + .date-from { + padding-left: .25rem; + padding-right: 0; + } + .date-to { + padding-left: 0; + padding-right: .25rem; + } +} \ No newline at end of file diff --git a/themes/bootstrap3/scss/components/alphabrowse.scss b/themes/bootstrap3/scss/components/alphabrowse.scss index 672066778870d7928f5ea6468c5bd4f1a173314e..d1f28f7cd7dda1525c36621639dbc87dc88cb09f 100644 --- a/themes/bootstrap3/scss/components/alphabrowse.scss +++ b/themes/bootstrap3/scss/components/alphabrowse.scss @@ -1,15 +1,15 @@ .alphabrowse { border-collapse: separate; - .lcc {width: 20%;} + .lcc { width: 20%; } .titles { width: 10%; text-align: center; } /* highlighting the row makes ff bugs; operate on its children */ tr.browse-match td { - border-top: .2em solid $brand-primary; - border-bottom: .2em solid $brand-primary; - &:first-child {border-left: .2em solid $brand-primary;} - &:last-child {border-right: .2em solid $brand-primary;} + border-top: .2rem solid $brand-primary; + border-bottom: .2rem solid $brand-primary; + &:first-child { border-left: .2em solid $brand-primary; } + &:last-child { border-right: .2em solid $brand-primary; } } } diff --git a/themes/bootstrap3/scss/components/autocomplete.scss b/themes/bootstrap3/scss/components/autocomplete.scss index d1113540a12f7619a3c97e90a35313c915ddf45a..4d72a36ed4f8ea1d37a9e7fef895ba6db69a066c 100644 --- a/themes/bootstrap3/scss/components/autocomplete.scss +++ b/themes/bootstrap3/scss/components/autocomplete.scss @@ -1,13 +1,14 @@ /* https://github.com/vufind-org/autocomplete.js 1.0b */ $autocomplete-item-bg : #fff !default; $autocomplete-active-bg : $brand-primary !default; -$autocomplete-hover-bg : lighten($brand-primary, 60%) !default; +$autocomplete-hover-bg : lighten($brand-primary, 40%) !default; $autocomplete-border : lightgray !default; $autocomplete-secondary : darkgray !default; // item description .autocomplete-results { position: absolute; display: table; + max-width: 500px; /* CUSTOMIZED */ margin: 0; margin-top: 2px; padding: 0; @@ -16,7 +17,7 @@ $autocomplete-secondary : darkgray !default; // item description overflow: hidden; z-index: 50; - .item { + .ac-item { display: block; margin: 0; padding: .5rem; @@ -28,7 +29,7 @@ $autocomplete-secondary : darkgray !default; // item description &.loading { background-color: $autocomplete-item-bg; } &.selected { background-color: $autocomplete-active-bg; - color: if(lightness($autocomplete-active-bg) > 50, black, white); + color: contrast($autocomplete-active-bg); } small { diff --git a/themes/bootstrap3/scss/components/icons.scss b/themes/bootstrap3/scss/components/icons.scss index db2076a72f7799f35aa592e99a3c3b05eb2fe191..ed654a6ed50f84aae44d12426c570c701cda0035 100644 --- a/themes/bootstrap3/scss/components/icons.scss +++ b/themes/bootstrap3/scss/components/icons.scss @@ -1,8 +1,12 @@ +/** + * Assign catalog formats to Font Awesome icons + */ + // Alias .fa-printer:before {content: "\f02f";} // .fa-print // Search Icons -.fa-grid:before {content: "\f00a";} // .fa-th -.fa-visual:before {content: "\f008";} // .fa-film +.fa-grid:before {content: "\f00a";} // .fa-th +.fa-visual:before {content: "\f008";} // .fa-film // Type Icons .fa-x:before {content: "\f0f6";} // .fa-file-text-o .fa-atlas:before {content: "\f14e";} // .fa-compass diff --git a/themes/bootstrap3/scss/components/js-tree.scss b/themes/bootstrap3/scss/components/js-tree.scss index a53839e3155fa14aefc6848824204d447a83b684..1e81d6bcd866fb4d342661d3e94366c419878c13 100644 --- a/themes/bootstrap3/scss/components/js-tree.scss +++ b/themes/bootstrap3/scss/components/js-tree.scss @@ -12,9 +12,9 @@ text-decoration: inherit; speak: none; } - .jstree-open > .jstree-ocl:before {content: "\f0d7";} - .jstree-closed > .jstree-ocl:before {content: "\f0da";} - .jstree-leaf > .jstree-ocl:before {content: " ";} + .jstree-open > .jstree-ocl:before {content: "\f0d7";} // .fa-caret-down + .jstree-closed > .jstree-ocl:before {content: "\f0da";} // .fa-caret-right + .jstree-leaf > .jstree-ocl:before {content: " ";} .jstree-icon { width: 16px; color: #000; @@ -37,7 +37,7 @@ } .jstree-search a { font-style: italic; - color: #8b0000 ; + color: #8b0000; font-weight: bold; } } @@ -88,11 +88,9 @@ } } li.jstree-facet, -li.jstree-node { - list-style: none; -} -li.jstree-facet .badge {cursor: text;} -li.jstree-facet ul {padding-left: 20px;} +li.jstree-node { list-style: none; } +li.jstree-facet .badge { cursor: text; } +li.jstree-facet ul { padding-left: 20px; } .list-group.facet .jstree-node.list-group-item { padding-left: 19px; } .list-group.facet .jstree-icon::before { margin-left: -12px; } diff --git a/themes/bootstrap3/scss/components/lightbox.scss b/themes/bootstrap3/scss/components/lightbox.scss index e793dc0b3120e5a88790d11008ff95ab9c1c740e..9361fab53c8332b260db43ea81f248ccf5d7c0a8 100644 --- a/themes/bootstrap3/scss/components/lightbox.scss +++ b/themes/bootstrap3/scss/components/lightbox.scss @@ -1,8 +1,5 @@ -.lightbox-only { display: none; } -#modal .lightbox-only { display: initial; } - -#modal {background-color: rgba(0,0,0,.2);} -#modal .modal-content > .close { +#modal { background-color: rgba(0,0,0,.2); } +#modal .modal-content > .close { // Fancy side X button position: absolute; right: -50px; top: 0; @@ -10,15 +7,27 @@ font-size: 32pt; color: #fff; opacity: .7; + body.rtl & { + left: -50px; + right: auto; + } } -#modal .modal-content > .close:hover {opacity: 1;} +#modal .modal-content > .close:hover { opacity: 1; } #modal .modal-body h1, #modal .modal-body h2 { margin-top: 0.3rem; margin-bottom: 1.3rem; } -#modal .cart-controls .btn {margin-bottom: 4px;} -#modal .cart-controls .checkbox {padding-bottom: 1em;} -#modal .cart-controls ~ hr {margin-top: 0;} +#modal .cart-controls .btn { margin-bottom: 4px; } +#modal .cart-controls .checkbox { padding-bottom: 1rem; } +#modal .cart-controls ~ hr { margin-top: 0; } .lightbox-scroll { overflow-y: auto; } + +// Loading spinner +.modal-loading { float: right; } +body.rtl .modal-loading { float: left; } + +// Utility classes +.lightbox-only { display: none; } +#modal .lightbox-only { display: initial; } \ No newline at end of file diff --git a/themes/bootstrap3/scss/components/offcanvas.scss b/themes/bootstrap3/scss/components/offcanvas.scss index ff0e1fad279f2abd89ad0d3bf766d84d8a72c3c2..559279c66884e6b48cc80c4dc94cf98650a83abd 100644 --- a/themes/bootstrap3/scss/components/offcanvas.scss +++ b/themes/bootstrap3/scss/components/offcanvas.scss @@ -1,8 +1,8 @@ -$offcanvas-offset: 75vw !default; -$offcanvas-padding: 30px !default; +$offcanvas-offset: 75vw !default; // Width of open menu +$offcanvas-padding: 30px !default; // Body offset when offcanvas active, also width of toggle .offcanvas-overlay, -.offcanvas-toggle {display: none;} +.offcanvas-toggle { display: none; } @media screen and (max-width: 767px) { body.offcanvas { @@ -15,41 +15,41 @@ $offcanvas-padding: 30px !default; padding-left: 0; padding-right: 0; overflow-y: auto; - h4 {padding-left: $padding-base-horizontal;} - .checkbox {margin-left: 20px + $padding-base-horizontal;} + h4 { padding-left: $padding-base-horizontal; } + .checkbox { margin-left: 20px + $padding-base-horizontal; } .list-group, .list-group-item { border-left: 0; border-right: 0; border-radius: 0 !important; } } - &.active {overflow-y: hidden;} + &.active { overflow-y: hidden; } &.offcanvas-left { padding-left: $offcanvas-padding - $grid-gutter-width/2; - & .main {background: #FFF;} + & .main { background: #FFF; } &.active { margin-left: $offcanvas-offset; margin-right: -$offcanvas-offset; - .sidebar {left: 0;} - .offcanvas-overlay {right: -$offcanvas-offset;} - .offcanvas-toggle {left: $offcanvas-offset;} + .sidebar { left: 0; } + .offcanvas-overlay { right: -$offcanvas-offset; } + .offcanvas-toggle { left: $offcanvas-offset; } } - .sidebar {left: -$offcanvas-offset;} - .offcanvas-overlay {right: -100%;} + .sidebar { left: -$offcanvas-offset; } + .offcanvas-overlay { right: -100%; } .offcanvas-toggle { left: 0; } } &.offcanvas-right { padding-right: $offcanvas-padding - $grid-gutter-width/2; - & .main > .container {background: #FFF;} + & .main > .container { background: #FFF; } &.active { margin-left: -$offcanvas-offset; margin-right: $offcanvas-offset; - .sidebar {right: 0;} - .offcanvas-overlay {left: -$offcanvas-offset;} - .offcanvas-toggle {right: $offcanvas-offset;} + .sidebar { right: 0; } + .offcanvas-overlay { left: -$offcanvas-offset; } + .offcanvas-toggle { right: $offcanvas-offset; } } - .sidebar {right: -$offcanvas-offset;} - .offcanvas-overlay {left: -100%;} + .sidebar { right: -$offcanvas-offset; } + .offcanvas-overlay { left: -100%; } .offcanvas-toggle { right: 0; } } .offcanvas-overlay { @@ -69,14 +69,14 @@ $offcanvas-padding: 30px !default; height: 100%; border-left: 1px solid $gray-lighter; border-right: 1px solid $gray-lighter; - line-height: 90vh; + line-height: 90vh; // Center vertically text-align: center; background-color: #fff; z-index: 5; } .offcanvas-overlay, .offcanvas-toggle, - .offcanvas-toggle * {cursor: pointer;} + .offcanvas-toggle * { cursor: pointer; } &,.sidebar, .offcanvas-overlay, .offcanvas-toggle { diff --git a/themes/bootstrap3/scss/components/record.scss b/themes/bootstrap3/scss/components/record.scss index f6952443d5b42cf3ac960b7bc67725e720b0bef4..e747317cc748fb6ad6eb0bb577b7829990b09b85 100644 --- a/themes/bootstrap3/scss/components/record.scss +++ b/themes/bootstrap3/scss/components/record.scss @@ -1,35 +1,103 @@ -.citation .pace-car { - th, - td { - border: 0; - padding: 0; +.record .media-body h3 { margin-top: 0; } // Align title with top of image +.recordcover { max-height: 300px; } // Keep the image from getting out of control +@media (max-width: 767px) { + .record .media-left, + .record .media-right { display: block; } + .record .media-body { // Add a gap between the thumbnail and the info + display: block; + width: auto; + margin-top: 1rem; } } -.citation th {text-align: right;} -.item-notes ul { padding-left: 2rem; } -.recordcover {max-height: 300px;} +// Comma-separate formatting +.result .record .format::after, +.record .format:last-child::after { content: ""; } +.record .format::after { content: ", "; } +.record-previews { margin-top: .5rem; } + +/* ------ Nav ------ */ +.record-nav.nav { margin-bottom: 1rem; } +.record-nav > li, +.btn-bookbag-toggle { width: 100%; } +.record-nav > li > a { padding: .5rem; } +.record-nav > li > a, +.btn-bookbag-toggle { text-align: center; } +@media(min-width: 768px) { + .record-nav > li, + .btn-bookbag-toggle { width: auto; } + .record-nav > li > a { padding: $nav-link-padding; } + .record-nav > li > a, + .btn-bookbag-toggle { text-align: left; } +} + +/* ------ Comments ------ */ +.comment-label, +.comment-name { font-style: italic; } +.comment { margin-bottom: 1rem; } +.comment-name .delete { color: $state-danger-text; } +@media (min-width: 768px) { + .comment-form, + .comment { + display: flex; + margin-bottom: 0; + } + .comment-label, + .comment-name { + min-width: 25%; + font-style: unset; + } + .comment-form .text-form { width: 100%; } + .comment-form > label { flex: 0 0 auto; } + .comment-form textarea { + display: block; + width: 100%; + } +} + +/* ------ Tags ------ */ +.tagList button { + margin-top: 0; + padding-top: 0; + padding-bottom: 4px; + font-size: 95%; + vertical-align: initial; +} +.tagList button .fa-close { margin-top: 3px; } .tagList { .tag { display: inline-block; margin: 0 1px 1px; border-radius: 4px; + // Use bootstrap mixin to make tags look like buttons + @include button-size($padding-base-vertical, $padding-base-vertical, $font-size-base, $line-height-base, $border-radius-base); &.selected { background-color: $btn-primary-bg; - a {color: #fff;} + a { color: #fff; } .badge { color: $gray-darker; background-color: #fff; - &:hover {color: #a94442;} + &:hover { color: #a94442; } } } - @include button-size($padding-base-vertical, $padding-base-vertical, $font-size-base, $line-height-base, $border-radius-base); - .badge .fa {width: 12px;} + .badge .fa { width: 12px; } + } + button { border: 0; } + .tag-form { display: inline; } +} +.tagList.loggedin .tag:not(.selected) .badge:hover { background-color: $brand-success; } + + +.citation .pace-car { + th, + td { + border: 0; + padding: 0; } - button {border: 0;} - .tag-form {display: inline;} } -.tagList.loggedin .tag:not(.selected) .badge:hover {background-color: $brand-success;} +.citation th { text-align: right; } + +.item-notes ul { padding-left: 2rem; } .subject-line:hover { color: #999; } .subject-line:hover a { color: $link-hover-color; } @@ -38,15 +106,9 @@ text-decoration: none; } -.record .format::after { content: ", "; } -.result .record .format::after, -.record .format:last-child::after { content: ""; } - .marc-row-LEADER, .marc-row-006, .marc-row-007, .marc-row-008 { white-space: pre-wrap; } - -.comment-form textarea.form-control { display: block; } diff --git a/themes/bootstrap3/scss/components/search.scss b/themes/bootstrap3/scss/components/search.scss index 8f1d2d5542cf1835e10fb4047ac61bda2f6f2f30..d6d098dedceffe9a701effea8175d03a69c216fd 100644 --- a/themes/bootstrap3/scss/components/search.scss +++ b/themes/bootstrap3/scss/components/search.scss @@ -1,13 +1,31 @@ -$thumbnail-width-small: 60px !default; +// Thumbnail sizes for media items: search results, list entries, record views +$thumbnail-width-small: 60px !default; $thumbnail-width-medium: 100px !default; -$thumbnail-width-large: 160px !default; +$thumbnail-width-large: 160px !default; +// Hide these on mobile @media (max-width: 767px) { .bulkActionButtons, #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; @@ -15,111 +33,178 @@ $thumbnail-width-large: 160px !default; header .container.navbar { margin-bottom: 0; } -.bulkActionButtons label {display: inline-block;} -.bulkActionButtons label input {margin-top: 2px;} -.grid { @media (max-width: 767px) {min-height: 250px;} } +.search-sort { display: flex; } +.search-sort label { + line-height: $input-height-base; + padding-right: .5rem; +} +.search-stats { + display: block; + padding-top: 1rem; + padding-bottom: 1rem; +} + +@media (min-width: 768px) { + .search-header { display: flex; } + .search-stats { flex-grow: 1; } + .search-controls { text-align: right; } +} + +.bulk-checkbox, +.bulkActionButtons label { display: inline-block; } +.bulkActionButtons label input { margin-top: 2px; } +.bulkActionButtons { @include clearfix(); } +@media (max-width: 767px) { + .grid { min-height: 250px; } +} .result { - padding-top: 1.5rem; - .checkbox { - float: left; - padding-right: .5rem; + 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; } - .media, - .media-body { overflow: visible; } - .media-body .row { - margin-left: 0; - margin-right: 0; + + .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 { - margin-top: 0; - margin-bottom: 1rem; - @include clearfix(); + flex: 1; + margin: 0; } .media-left, .media-right { - padding: 0; text-align: center; - a { - display: inline-block; - text-align: center; - } img { max-width: 100%; max-height: 300px; } - &.small > a, - &.small > img, - &.medium > a, - &.medium > img, - &.large > a, - &.large > img { width: $thumbnail-width-small; } - @media (min-width: 768px) { - &.small > a, - &.small > img { width: $thumbnail-width-small; } - &.medium > a, - &.medium > img { width: $thumbnail-width-medium; } - &.large > a, - &.large > img { width: $thumbnail-width-large; } + &.small img, + &.medium img, + &.large img { + display: inline-block; + width: $thumbnail-width-small; + max-width: none; } } - .title {font-weight: bold;} - .list-tab-content.record .img-col { display: none; } - .list-tab-content.record .info-col { width: 100%; } @media (min-width: 768px) { - .media-left { padding-left: 10px; } - .media-right { padding-right: 10px; } - } - @media (max-width: 767px) { - border-bottom: 1px solid $btn-default-border; - .media-left, - .media-right { - max-width: 25%; + .media-left, + .media-right { + max-width: 25%; + padding-right: 10px; + padding-left: 10px; + + a { + display: inline-block; + max-width: 100%; + text-align: center; + white-space: nowrap; + text-decoration: underline; } - a { - max-width: 100%; - text-decoration: underline; - } - img { max-width: 100%; } - } - @media (max-width: 530px) { - .media-left { padding-right: 0; } - } - .btn-bookbag-toggle { - form { display: inline; } - .fa { - color: $text-color; - /* .fa-fw */ - width: 1.28571429em; - text-align: center; + &.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; } - .format { - @extend .label; - @extend .label-info; +.btn-bookbag-toggle form { display: inline; } +.btn-bookbag-toggle .fa { margin-right: .3rem; } +.result .btn-bookbag-toggle .fa { + color: $text-color; + /* .fa-fw */ + width: 1.28571429em; + text-align: center; +} +@media (min-width: 768px) { + .result-body { + float: left; + width: 75%; + } + .result-links { + float: left; + width: 25%; + padding: 0; } } - +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: 1.5rem; - padding-right: 30px; + margin-left: -.5rem; + padding-left: .5rem; border-left: 1px solid transparent; } .getFull.expanded { @extend .list-group-item; margin-top: -11px; - margin-left: .75rem; - padding-left: .75rem; + padding-left: .5rem; border-top-left-radius: $border-radius-base; border-top-right-radius: $border-radius-base; &::before { content: '\25BC'; position: absolute; - right: 15px; + right: 1rem; color: $gray; } } @@ -130,7 +215,7 @@ header .container.navbar { margin-bottom: 0; } background: #fff; } .long-view { - margin-left: .75rem; + margin-left: -.5rem; padding: .5rem; border: 1px solid $list-group-border; background-color: #fff; @@ -143,27 +228,72 @@ header .container.navbar { margin-bottom: 0; } .list-tab-content { padding: 1rem; } } -.search-controls .alert {margin-bottom: 0;} -.searchtools a {padding: 0 .5em;} -.title-in-heading { - font-size: inherit; - font-style: italic; +/* ------ GRID VIEW ------ */ +.search-grid::after { + display: table; + clear: both; + content: ''; } +.grid-result { + display: flex; + float: left; + width: 50%; -.wikipedia img { margin-right: 1rem; } + .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; } +} -.geoItem { - font-size: .9em; - margin: 0px 0px 10px; +.searchtools a { + padding: 0 .5rem; + white-space: nowrap; } -@media (max-width: 767px) { - .top-row { - padding-left: $grid-gutter-width; - padding-right: $grid-gutter-width; +/* ------ 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; } } - .top-row > span { - padding: 0; - white-space: nowrap; + .combined-column { + flex: 0 1 100%; + padding-left: 1rem; } -} \ No newline at end of file + .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; +} diff --git a/themes/bootstrap3/scss/components/sidebar.scss b/themes/bootstrap3/scss/components/sidebar.scss index 73ba5087b2e0ae3156962346b5425eea30f971c7..e5be15a7cd3d7faa8bbbd3709e4335e4310be5ad 100644 --- a/themes/bootstrap3/scss/components/sidebar.scss +++ b/themes/bootstrap3/scss/components/sidebar.scss @@ -1,41 +1,93 @@ -/* Sidebar rounded corners */ -.narrow-toggle { text-align: center; } -.sidebar { - label:not(.list-group-item) {margin-left: 20px;} - .list-group.facet .list-group-item.title { - cursor: pointer; - &.collapsed { - border-radius: $border-radius-base; - &:after {content: '\25BC';} +.facet-group { + display: block; + margin-bottom: 1rem; + + .facet, + .title { + display: block; + padding: 8px 15px; + line-height: 1.5rem; + + .badge, + .status { float: right; } + .badge { + max-height: 19px; + line-height: 1.1rem; } - &:after { + } + .facet { border-bottom: 1px solid $list-group-border; } + .title { + padding-right: 8px; + border: 1px solid $list-group-border; + font-weight: bold; + } + + [data-toggle="collapse"] { + cursor: pointer; + + &::after { content: '\25B2'; float: right; + + body.rtl & { float: left; } } } - .collapse,.collapsing { - .list-group-item { - border-top-left-radius: 0px; - border-top-right-radius: 0px; - &[id^=more] { - border-bottom-left-radius: $border-radius-base; - border-bottom-right-radius: $border-radius-base; - } - } + .collapsed::after {content: '\25BC';} + + .collapse, + .collapsing { + border-left: 1px solid $list-group-border; + border-right: 1px solid $list-group-border; + } + + .facetOR .text { + display: inline-block; + padding-left: 0.5rem; + text-indent: -0.5rem; } - #side-collapse-publishDate .list-group-item { - border-bottom-left-radius: $border-radius-base; - border-bottom-right-radius: $border-radius-base; + + .excludable { + display: flex; + flex-direction: row-reverse; + padding-right: 0; + + .badge { flex-shrink: 0; } + .text { flex-grow: 1; } + .exclude { + flex-basis: 2rem; + flex-shrink: 0; + text-align: center; + } + + body.rtl & { + padding-left: 0; + padding-right: 15px; + } } } -label.list-group-item { - margin-top: 0; - padding-left: 35px; - font-weight: normal; - border-radius: 0; + +.checkbox-filter { + display: block; + padding-bottom: 1rem; + font-weight: bold; + color: $text-color; +} + +.active-filters .facet, +.facet-group .active { + background-color: $brand-primary; + color: #fff; + + a { color: #fff; } +} +.active-filters .facet { padding-right: .65rem; } +.facet-group .active .badge { + background-color: #fff; + color: $brand-primary; } -.list-group-item.title {font-weight: bold;} -.sidebar .facet a {text-decoration: none;} + +.narrow-toggle { text-align: center; } + .sidebar .format { @extend .label; @extend .label-info; diff --git a/themes/bootstrap3/scss/components/similar-carousel.scss b/themes/bootstrap3/scss/components/similar-carousel.scss index 1493f611a9ab36a4a9659966000e0afc2a830a30..04ee93d79760a83974a1bc67fe98569e1b659680 100644 --- a/themes/bootstrap3/scss/components/similar-carousel.scss +++ b/themes/bootstrap3/scss/components/similar-carousel.scss @@ -5,8 +5,18 @@ width: 8px; height: 8px; margin: 2px; - background-color: rgba(255,255,255,.3); - border-color: $gray-darker; + margin-bottom: 4px; + background-color: #fff; + border: 1px solid $gray-darker; + box-shadow: none; + transition-duration: .4s; + transition-property: width, height, margin; + + &.active { + width: 16px; + height: 16px; + margin-bottom: 0; + } } } .hover-overlay { @@ -33,5 +43,11 @@ } &:hover .content {display: block;} } + .item { + padding: 0 4em; + &.prev, + &.active, + &.next { display: flex; } + } + .carousel-item { flex-basis: 25%; } } -#similar-items-carousel .item {padding: 0 4em;} diff --git a/themes/bootstrap3/scss/components/variables.scss b/themes/bootstrap3/scss/components/variables.scss new file mode 100644 index 0000000000000000000000000000000000000000..6562456e358ea4bc3d96ad46427cc6a7aa4e9ac3 --- /dev/null +++ b/themes/bootstrap3/scss/components/variables.scss @@ -0,0 +1,52 @@ +// Make sure Font Awesome icons are loaded properly +$fa-font-path: "../../../../../../themes/bootstrap3/css/fonts" !default; + +/** + * The following are useful Bootstrap variables that are used throughout the code, + * with comments and their defaults. See /themes/bootstrap3/less/vendor/bootstrap/variables.less for more. + */ + +// $padding-base-vertical: 6px !default; // Buttons, tabs, and other padding +// $padding-base-horizontal: 12px !default; + +// $navbar-height: 50px !default; + +// $border-radius-base: 4px !default; + +/* ------ COLORS ------ */ + +// $gray-base: #000 !default; +// $gray-darker: lighten($gray-base, 13.5%) !default; // #222 +// $gray-dark: lighten($gray-base, 20.0%) !default; // #333 +// $gray: lighten($gray-base, 33.5%) !default; // #555 +// $gray-light: lighten($gray-base, 46.7%) !default; // #777 +// $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee +// +// $brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 (primary buttons, links, and active elements) +// $brand-success: #5cb85c !default; +// $brand-info: #5bc0de !default; +// $brand-warning: #f0ad4e !default; +// $brand-danger: #d9534f !default; + +// $list-group-border: #ddd !default; // Borders on menus and sidebars + +// $text-color: $gray-dark !default; +// $link-color: $brand-primary !default; +// $link-hover-color: darken($link-color, 15%) !default; + +// Define colors for form feedback states and, by default, alerts. +// $state-success-text: #3c763d !default; +// $state-success-bg: #dff0d8 !default; +// $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; +// +// $state-info-text: #31708f !default; +// $state-info-bg: #d9edf7 !default; +// $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; +// +// $state-warning-text: #8a6d3b !default; +// $state-warning-bg: #fcf8e3 !default; +// $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; +// +// $state-danger-text: #a94442 !default; +// $state-danger-bg: #f2dede !default; +// $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;