mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
94d14e3900
[web] Fix spacing between sections, columns, and rows on gallery redesign GitOrigin-RevId: 3c787baa7300c0f39705f71f8821f8da69a837a5
376 lines
6.3 KiB
SCSS
376 lines
6.3 KiB
SCSS
.gallery.gallery-tagged {
|
|
.gallery-title {
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
|
|
.gallery-summary {
|
|
text-align: left;
|
|
max-width: 828px;
|
|
}
|
|
}
|
|
|
|
.gallery {
|
|
margin-top: var(--spacing-10);
|
|
|
|
.gallery-tagged-container-spacing {
|
|
padding: 0 var(--spacing-09);
|
|
}
|
|
|
|
.gallery-tagged-tags-container-spacing {
|
|
padding: 0 var(--spacing-09);
|
|
margin-bottom: var(--spacing-16);
|
|
|
|
h2 {
|
|
margin-bottom: var(--spacing-09);
|
|
}
|
|
}
|
|
|
|
.filters {
|
|
float: right;
|
|
margin-bottom: var(--spacing-11);
|
|
display: flex;
|
|
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 {
|
|
@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: var(--spacing-09);
|
|
}
|
|
|
|
.top-picks-banner {
|
|
padding: 0;
|
|
margin: 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 {
|
|
width: 100%;
|
|
margin: 0 0 var(--spacing-08) 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
.thumbnail {
|
|
@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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-04);
|
|
}
|
|
|
|
.gallery-abstract {
|
|
word-break: break-word;
|
|
hyphens: auto;
|
|
|
|
a {
|
|
hyphens: none;
|
|
}
|
|
}
|
|
|
|
.field-title {
|
|
color: var(--neutral-70);
|
|
font-weight: 600;
|
|
|
|
@include heading-xs;
|
|
}
|
|
|
|
.field-description {
|
|
@include heading-xs;
|
|
}
|
|
|
|
.section-tags {
|
|
display: flex;
|
|
gap: var(--spacing-04);
|
|
}
|
|
|
|
.cta-links {
|
|
margin: var(--spacing-09) 0;
|
|
|
|
.col-md-12 {
|
|
display: inline-flex;
|
|
gap: var(--spacing-04);
|
|
padding: unset;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
padding: 0 var(--spacing-05);
|
|
gap: var(--spacing-05);
|
|
max-height: 60px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.tag-badge {
|
|
max-width: 200px;
|
|
}
|
|
|
|
.tag-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
|
|
@include body-sm;
|
|
}
|
|
|
|
.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-right-section {
|
|
margin-top: var(--spacing-11);
|
|
}
|
|
|
|
.section-tags {
|
|
margin-top: var(--spacing-04);
|
|
}
|
|
}
|
|
}
|