overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
Jessica Lawshe c27dc70c80 Merge pull request #21516 from overleaf/jel-template-labels
[web] Use grid layout for template details

GitOrigin-RevId: 1f15dfcd9bc04bec5bd7e0b6a7b1230966def997
2024-11-06 09:05:29 +00:00

430 lines
7.3 KiB
SCSS

.gallery.gallery-tagged {
.gallery-title {
display: block;
text-align: left;
}
.gallery-summary {
text-align: left;
max-width: 828px;
}
.gallery-filters {
@include media-breakpoint-down(lg) {
margin-top: var(--spacing-06);
}
}
h2 {
margin-top: 0;
}
}
.gallery {
margin-top: var(--spacing-10);
.gallery-tagged-tags-container-spacing {
padding: 0 var(--spacing-09);
margin-bottom: var(--spacing-16);
h2 {
margin-bottom: var(--spacing-09);
}
}
.gallery-filters {
float: right;
margin-bottom: var(--spacing-11);
display: flex;
flex-wrap: wrap;
gap: var(--spacing-04);
@include media-breakpoint-down(lg) {
float: none;
}
a {
text-decoration: none;
&:visited {
color: var(--green-50);
}
&:hover {
color: var(--green-60);
}
&.active {
font-weight: 600;
text-decoration: underline;
}
}
}
.gallery-header {
margin-bottom: var(--spacing-09);
@include media-breakpoint-up(lg) {
max-width: $templates-search-max-width;
display: flex;
flex-direction: column;
align-items: center;
margin-left: auto;
margin-right: auto;
}
}
.gallery-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-06);
text-align: center;
}
.gallery-summary {
@include body-lg;
text-align: center;
margin-bottom: 0;
}
.tagged-header-container {
margin-bottom: var(--spacing-16);
}
.top-picks-banner {
padding: 0;
margin: 0 auto var(--spacing-16) auto;
h2 {
@include heading-xl;
}
.doc-rows-container {
margin-top: var(--spacing-09);
}
}
.recent-templates-container {
padding: 0 var(--spacing-09);
margin-bottom: var(--spacing-16);
h2 {
margin-bottom: var(--spacing-09);
@include heading-xl;
}
}
.no-articles-matching {
color: var(--neutral-90);
font-weight: 600;
@include heading-lg;
}
.template-summary {
margin-top: var(--spacing-02);
margin-bottom: var(--spacing-09);
@include body-lg;
}
@mixin line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.popular-tags-list,
.gallery-container {
--bs-gutter-x: var(--spacing-09);
row-gap: var(--spacing-11);
}
.gallery-container {
align-items: baseline;
}
.gallery-thumbnail {
a {
@extend .link-black-text;
display: inline-block;
width: 100%;
.thumbnail,
.thumbnail-tag {
position: relative;
&::before {
content: '';
background: var(--neutral-90);
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.15s ease-in-out;
}
}
.thumbnail-tag {
&::before {
border-radius: var(--border-radius-medium);
}
}
.thumbnail {
&::before {
border-radius: var(--border-radius-base);
}
}
&:hover {
.thumbnail,
.thumbnail-tag {
&::before {
transition: opacity 0.15s ease-in-out;
opacity: 0.08;
}
}
}
}
.thumbnail,
.thumbnail-tag {
margin: 0 0 var(--spacing-08) 0;
img {
width: 100%;
display: inline-block;
}
}
.thumbnail {
img {
@include shadow-lg;
border-radius: var(--border-radius-base);
}
}
.caption {
// Override Server Pro template styles
background: none;
border: none;
margin-top: var(--spacing-04);
}
.caption-description {
color: var(--neutral-70);
margin-bottom: 0;
@include line-clamp;
}
.author-name {
margin-top: var(--spacing-04);
color: var(--neutral-70);
font-weight: 600;
}
.gallery-list-item-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-04);
.badge-container {
display: inline-block;
text-wrap: nowrap;
.badge:not(:first-child) {
margin-left: var(--spacing-04);
}
}
* {
flex-basis: content;
cursor: inherit;
}
}
.caption-title {
color: var(--neutral-90);
font-weight: 600;
@include heading-md;
@include line-clamp;
}
}
.related-tags-top-spacing {
margin-top: var(--spacing-16);
}
.gallery-tagged-template-tags-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-05);
.badge-content {
padding-left: var(--spacing-02);
padding-right: var(--spacing-02);
}
}
.pagination {
margin-top: var(--spacing-13);
}
.popular-tags {
margin-top: 0;
margin-bottom: var(--spacing-16);
a {
width: 100%;
}
}
.popular-tags,
.recent-docs,
.featured-docs {
h2 {
margin-bottom: var(--spacing-09);
}
}
.recent-docs + .featured-docs {
margin-top: var(--spacing-16);
}
.gallery-item-title {
display: inline-flex;
gap: var(--spacing-06);
h1 {
margin: unset;
}
.gallery-item-title-badge-container {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-04);
.badge-content {
font-size: var(--font-size-02);
line-height: var(--line-height-02);
}
}
}
.template-details-container {
@include heading-xs;
gap: var(--spacing-04) var(--spacing-11);
display: grid;
grid-template-columns: auto auto;
.template-detail {
display: contents;
&.tags > div {
margin-top: var(--spacing-06);
}
}
}
.gallery-abstract {
word-break: break-word;
hyphens: auto;
a {
hyphens: none;
}
p:last-child {
margin-bottom: 0;
}
}
.cta-links-container {
margin-top: var(--spacing-09);
margin-bottom: var(--spacing-09);
.cta-links {
display: inline-flex;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--spacing-06);
.btn {
margin: 0; // gap will handle spacing
}
}
}
.gallery-large-pdf-preview {
img {
width: 100%;
}
@include shadow-md;
}
.related-tags-header {
margin-top: var(--spacing-16);
}
.related-tags {
margin-top: var(--spacing-09);
max-height: 61px;
overflow: hidden;
&.all-tags {
max-height: none;
// min-height prevents elements below the tags from moving upwards
// when Show More is clicked
min-height: 102px;
}
.badge-link {
max-width: 200px;
}
}
.show-more-tags {
margin-top: var(--spacing-06);
}
@include media-breakpoint-up(lg) {
.template-item-left-section {
padding-right: var(--spacing-10);
}
.template-item-right-section {
padding-left: var(--spacing-10);
}
}
@include media-breakpoint-down(md) {
.template-item-left-section {
.badge-link-list {
margin-top: var(--spacing-04);
}
}
.template-item-right-section {
margin-top: var(--spacing-11);
}
}
}