diff --git a/services/web/frontend/stylesheets/app/templates-v2.less b/services/web/frontend/stylesheets/app/templates-v2.less new file mode 100644 index 0000000000..67edecb323 --- /dev/null +++ b/services/web/frontend/stylesheets/app/templates-v2.less @@ -0,0 +1,189 @@ +// some still used by portals + +.gallery-item-title { + * { + vertical-align: middle; + } + margin-top: @line-height-computed; // match h1 header margin-top + margin-bottom: @margin-xl; + h1 { + display: inline; + margin: 0; + } +} +.gallery-official { + margin-left: @margin-sm; + &:extend(.label); + &:extend(.label-info); + cursor: default; + font-size: 14px; + padding: 3px 8px; +} + +.field-title { + font-weight: bold; +} + +.filters { + float: right; + margin-bottom: @margin-lg; + + @media (max-width: @screen-md-min) { + float: none; + } +} + +.cta-links { + .cta-link.btn { + margin: 0 @margin-sm @margin-sm 0; + } +} + +.popular-tags { + .gallery-thumbnail { + margin: 0 0 1em 0 !important; + } +} + +.tag-link { + margin: 0 @margin-xs @margin-sm 0; + max-width: 100%; + white-space: inherit; +} + +.gallery-abstract { + word-break: break-word; + hyphens: auto; + a { + hyphens: none; + } +} + +.gallery-thumbnail { + display: inline-block; + margin: 0 0 2em; + width: 100%; + + .thumbnail { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 0 0 @margin-sm 0; + padding: 0px; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + width: 100%; + + h3 { + color: @link-color-alt; + margin: 10px 0px 10px 20px; + } + + &.thumbnail-tag { + height: 100px; + } + } + + .caption { + // Override Server Pro template styles + background: none; + border: none; + text-align: center; + } + + .caption__description { + font-style: italic; + padding: 0 0 5px 0; + .text-overflow(); + } + + .gallery-list-item-title { + display: flex; + align-items: center; + justify-content: center; + * { + flex-basis: content; + cursor: inherit; + } + } + + .caption__title { + text-align: center; + .text-overflow(); + } + + a { + &:hover { + text-decoration: none; // disable underlining label + .caption__title { + text-decoration: underline; + } + } + } +} + +.gallery-large-pdf-preview { + border: solid 1px @gray-lightest; + margin-top: @margin-lg; + img { + max-width: 100%; + } +} + +@top-picks-banner-extra-width: 50px; +.top-picks-banner { + padding: 0px; + width: 100%; + margin-left: auto; + margin-right: auto; + + @media (min-width: (@screen-lg-min + @top-picks-banner-extra-width)) { + width: @container-lg + @top-picks-banner-extra-width; + } + + @media (max-width: (@screen-lg-min + @top-picks-banner-extra-width - 1)) { + border-radius: 0; + } +} + +.gallery-top-pick-badge { + margin-left: @margin-sm; + &:extend(.label); + &:extend(.label-primary); + cursor: default; + font-size: 14px; + padding: 3px 8px; +} + +/* Media Queries */ +@media (max-width: @screen-xs-max) { + .gallery-container { + column-count: 2; + column-gap: 2em; + } +} +@media (min-width: @screen-sm-min) { + .gallery-container { + &.use-column { + column-count: 3; + column-gap: 3em; + } + &.use-percent { + margin: 0 -1.5em; + .gallery-thumbnail { + width: 33.3333333%; + padding: 0 1.5em; + } + } + } +} +@media (min-width: @screen-md-min) { + .gallery-large-pdf-preview { + margin-top: 0; + } +} + +.section-tags { + margin-bottom: @margin-xl; + margin-top: @margin-md; +} diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index 855f0b7026..696da82176 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/services/web/frontend/stylesheets/main-style.less @@ -124,6 +124,7 @@ @import 'app/grammarly'; @import 'app/front-chat-widget.less'; @import 'app/ol-chat.less'; +@import 'app/templates-v2.less'; @import 'app/login-register.less'; @import 'app/review-features-page.less'; @import 'app/institution-hub.less';