overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
Davinder Singh 11cb7dc24c Gallery redesign - Gallery item page redesign (#21034)
* adding .gallery at top level

* adding styling for heading and buttons

* removing padding under cta-links

* removing find more templates text

* adding field title styling

* adding .details-container for spacing between the content

* adding a colon after field-title

* moving tags styling into badge.scss file to make it more generic to use

* moving section tag one level below to use it as a flex containe for adding gap property

* adding field-description class

* fixing the image width

* adding some padding between the content

* renaming  a file to a more descriptive name

* adding .gallery-abstract class in the scss file

* adding colons in pug file

* adding previous-page-link and its container class

* moving paddings to larger screens only and adding a top margin for mobile screens]

* adding some spacing above tags on mobile view when heading and tags are vertically aligned

* adding styling to the badge and removing extra padding from h1 to match figma

* lint:fix

* swapping position of top-pick and official badges

* adding path and itemPlural

* removing unused top margin

GitOrigin-RevId: a5c9b731b69ecfe2b752015c410e10a0fec2c704
2024-10-24 08:05:21 +00:00

308 lines
5.2 KiB
SCSS

.gallery.gallery-tagged {
.gallery-title {
display: block;
text-align: left;
}
.gallery-summary {
text-align: left;
}
}
.gallery {
margin-top: var(--spacing-10);
.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);
max-width: 828px;
}
.top-picks-banner {
padding: 0;
margin: var(--spacing-16) auto;
h3 {
font-size: var(--font-size-08);
}
}
.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;
}
.gallery-container {
--bs-gutter-y: var(--spacing-09);
}
.gallery-thumbnail {
a {
@extend .link-black-text;
display: inline-block;
}
.thumbnail,
.thumbnail-tag {
width: 100%;
margin: 0 0 var(--spacing-08) 0;
}
.thumbnail {
background-color: var(--bg-light-secondary);
aspect-ratio: 1 / 1.414; // A4 Paper
object-fit: contain;
border-radius: var(--border-radius-base);
box-shadow: 0 var(--spacing-01) var(--spacing-02) rgb(0 0 0 / 10%);
}
.caption {
// Override Server Pro template styles
background: none;
border: none;
margin-top: var(--spacing-04);
}
.caption-description {
color: var(--neutral-70);
@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 {
.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;
}
}
.pagination {
margin-top: var(--spacing-13);
}
.popular-tags {
margin-top: var(--spacing-16);
margin-bottom: var(--spacing-16);
a {
width: 100%;
}
h2 {
margin-bottom: var(--spacing-09);
}
.popular-tags-list {
row-gap: var(--spacing-11);
}
}
.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;
}
@include media-breakpoint-down(lg) {
.gallery-container {
display: grid;
grid-template-columns: 50% 50%;
&.use-percent {
.gallery-thumbnail {
align-content: end;
width: 100%;
}
}
}
}
@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) {
.gallery-container {
grid-template-columns: 100%;
&.use-percent {
.gallery-thumbnail {
padding-left: unset;
padding-right: unset;
}
}
}
.template-item-right-section {
margin-top: var(--spacing-11);
}
.section-tags {
margin-top: var(--spacing-04);
}
}
}