Skip to content

Commit

Permalink
refactor v2-resource gallery
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lakshmishri
Lakshmishri committed Nov 28, 2023
1 parent c11b790 commit b262344
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 277 deletions.
299 changes: 106 additions & 193 deletions blocks/v2-resources-gallery/v2-resources-gallery.css
View file
Original file line number Diff line number Diff line change
@@ -1,178 +1,150 @@
.v2-resources-gallery {
margin-top: 64px;
margin-bottom: 64px;
display: flex;
gap: 40px;
flex-flow: column;
}

.v2-resources-gallery__row {
.v2-resources-gallery__heading-wrapper {
margin-bottom: 0;
display: flex;
flex-flow: column;
flex-wrap: wrap;
gap: 8px;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}

.v2-resources-gallery__row.hidden {
.v2-resources-gallery__button {
display: flex;
font-size: var(--f-button-font-size);
background: none;
outline: none;
align-self: flex-start;
}

.v2-resources-gallery__button .icon-minus {
display: none;
}

.v2-resources-gallery__heading {
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
overflow-x: initial;
.v2-resources-gallery__button[aria-expanded="true"] .icon-minus {
display: block;
}

.v2-resources-gallery__item {
flex: none;
scroll-snap-align: center;
width: 100%;
max-width: 255px;
.v2-resources-gallery__button[aria-expanded="true"] .icon-plus {
display: none;
}

.v2-resources-gallery img {
border-radius: 8px;
.v2-resources-gallery__heading {
font: var(--f-heading-5-font-size) / var(--f-heading-5-line-height) var(--ff-volvo-novum-medium);
letter-spacing: 0.25px;
margin-bottom: 0;
}

.v2-resources-gallery__heading .v2-resources-gallery__item {
margin-right: 100%;
.v2-resources-gallery__video-list {
display: grid;
list-style-type: none;
grid-gap: 8px;
grid-template-columns: repeat(6, calc(100% - 100px));
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-snap-align: start;
}

.v2-resources-gallery .v2-resources-gallery__item h3 {
.v2-resources-gallery__video-list-item {
flex: none;
scroll-snap-align: start;
display: flex;
flex-direction: column;
}

.v2-resources-gallery__video-title {
font: var(--f-body-2-font-size) / var(--f-body-2-line-height) var(--ff-volvo-novum);
letter-spacing: var(--f-body-2-letter-spacing);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 365px;
margin-bottom: 8px;
}

.v2-resources-gallery .v2-resources-gallery__item h3 + p {
.v2-resources-gallery__video-list p {
font: var(--f-body-font-size) / var(--f-body-line-height) var(--ff-volvo-novum);
letter-spacing: var(--f-body-letter-spacing);
color: var(--c-grey-4);
}

.section--black-background .v2-resources-gallery__item--has-documents .button-container + p {
color: var(--c-grey-2);
}

.section--black-background .v2-resources-gallery .v2-resources-gallery__item h3 + p {
color: var(--c-grey-2);
}

.v2-resources-gallery__heading .v2-resources-gallery__item > * {
font-size: var(--f-heading-5-font-size);
letter-spacing: var(--f-heading-4-letter-spacing);
text-transform: capitalize;
margin-bottom: 8px;
}

.v2-resources-gallery .v2-resources-gallery__row--has-video:has(+ .v2-resources-gallery__rows-wrapper),
.v2-resources-gallery .v2-resources-gallery__row--has-video:has(+ .v2-resources-gallery__row--has-video.hidden) {
margin-bottom: 40px;
}

.v2-resources-gallery__toggle-resources {
font-size: var(--f-button-font-size);
background: none;
border: none;
outline: none;
text-transform: uppercase;
margin-right: auto;
margin-left: 16px;
}

.v2-resources-gallery__toggle-resources-icon {
background: var(--c-main-black);
height: 18px;
position: relative;
width: 1px;
border-radius: .5px;
margin-left: 10px;
transition: background-color .2s ease;
margin-right: 5px;
}

.v2-resources-gallery__toggle-resources-icon::after {
background: var(--c-main-black);
content: "";
height: 1px;
left: -8.5px;
position: absolute;
top: 8.5px;
width: 18px;
border-radius: .5px;
}

.section--black-background .v2-resources-gallery__toggle-resources-icon,
.section--black-background .v2-resources-gallery__toggle-resources-icon::after {
background: var(--c-white);
color: var(--text-subtle);
margin: 0;
}

.v2-resources-gallery__toggle-resources-icon:has(+ button[aria-expanded="true"]) {
background-color: var(--c-white);
.v2-resources-gallery__video-list .v2-resources-gallery__video-image {
margin: 0 0 16px;
}

.section--black-background .v2-resources-gallery__toggle-resources-icon:has(+ button[aria-expanded="true"]) {
background-color: var(--c-black);
.v2-resources-gallery__video-image img {
border-radius: 8px;
aspect-ratio: 255/143;
object-fit: cover;
width: 100%;
height: 100%;
}


.v2-resources-gallery__row--has-documents {
width: calc(50% - 32px);
overflow-x: hidden;
scroll-snap-type: unset;
flex-grow: 1;
.v2-resources-gallery__document-list {
list-style-type: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 40px 32px;
}

.v2-resources-gallery__rows-wrapper {
.v2-resources-gallery__document-list-item {
display: flex;
flex-wrap: wrap;
gap: 40px 32px;
}

.v2-resources-gallery__item--has-documents .button {
padding-left: 32px;
flex-flow: column;
gap: 8px;
}

.v2-resources-gallery__item--has-documents .button-container {
margin: 0;
.v2-resources-gallery__document-list a.button.tertiary,
.v2-resources-gallery__document-list p {
font: var(--f-body-font-size) / var(--f-body-line-height) var(--ff-volvo-novum);
letter-spacing: 0.5px;
}

.v2-resources-gallery__item--has-documents .button-container a.tertiary {
font: var(--f-body-font-size) / var(--f-body-line-height) var(--ff-volvo-novum);
letter-spacing: var(--f-body-letter-spacing);
.v2-resources-gallery__document-list a.button.tertiary {
color: var(--c-cta-blue-default);
text-decoration: underline;
text-underline-offset: 4px;
text-transform: capitalize;
align-self: flex-start;
display: flex;
gap: 8px;
}

.section--black-background .v2-resources-gallery__item--has-documents .button-container a.tertiary {
color: var(--c-cta-blue-default);
}

.v2-resources-gallery__item--has-documents .button-container a.button.tertiary:hover {
.v2-resources-gallery__heading-wrapper button.v2-resources-gallery__button.tertiary:hover,
.v2-resources-gallery__document-list .v2-resources-gallery__document-list-item a.button.tertiary:hover {
background-color: transparent;
}

.v2-resources-gallery__heading .v2-resources-gallery__toggle-resources.tertiary {
margin-left: 8px;
outline: none;
}

.v2-resources-gallery__heading button.v2-resources-gallery__toggle-resources.tertiary:hover {
background-color: transparent;
.v2-resources-gallery__heading-wrapper button.v2-resources-gallery__button.tertiary:hover {
text-decoration: none;
margin-left: 8px;
outline: none;
}

/* stylelint-disable-next-line no-descending-specificity */
.v2-resources-gallery__item--has-documents .button-container + p {
padding-left: 32px;
.v2-resources-gallery__document-list p {
margin: 0;
color: var(--c-grey-4);
color: var(--text-subtle);
padding-left: 32px;
}

.v2-resources-gallery__document-list-item--hide,
.v2-resources-gallery__video-list-item--hide {
display: none;
}

.v2-resources-gallery__list--expand .v2-resources-gallery__video-list {
grid-template-columns: repeat(1, 1fr);
grid-auto-flow: row;
grid-row-gap: 40px;
}

.v2-resources-gallery__list--expand .v2-resources-gallery__document-list-item--hide,
.v2-resources-gallery__list--expand .v2-resources-gallery__video-list-item--hide {
display: flex;
}

/* Hide scrollbar for Chrome, Safari and Opera */
Expand All @@ -187,94 +159,35 @@ html {
}

@media (min-width: 744px) {
.v2-resources-gallery__row {
display: flex;
gap: 16px;
}

.v2-resources-gallery__rows-wrapper {
gap: 48px 80px;
}

.v2-resources-gallery__item {
width: 33.33%;
max-width: unset;
}

.v2-resources-gallery__rows-wrapper .v2-resources-gallery__item--has-documents {
width: 100%;
}

.v2-resources-gallery__row--has-documents {
width: calc(33.33% - 32px);
}

.v2-resources-gallery__heading .v2-resources-gallery__item {
margin-right: auto;
.v2-resources-gallery__heading-wrapper {
flex-flow: row;
gap: 40px;
align-items: center;
}

.v2-resources-gallery__heading {
flex-wrap: initial;
justify-content: flex-end;
flex: 1;
}

.v2-resources-gallery__toggle-resources {
margin-right: unset;
margin-left: 0;
min-width: 100px;
.v2-resources-gallery__video-list {
grid-template-columns: repeat(6, calc(100% / 2.80));
}

.v2-resources-gallery__toggle-resources-icon {
right: -32px;
.v2-resources-gallery__document-list {
grid-template-columns: repeat(3, 1fr);
grid-column-gap: inherit;
}

.v2-resources-gallery__heading .v2-resources-gallery__toggle-resources.tertiary {
margin-right: 0;
text-indent: 20px;
min-width: 110px;
}

.v2-resources-gallery__rows-wrapper .v2-resources-gallery__row--has-documents {
width: calc(33.33% - 80px);
flex-grow: 1;
}

.v2-resources-gallery__rows-wrapper .v2-resources-gallery__row--has-documents:last-child {
flex-grow: unset;
width: calc(33.33% - 48px);
}

.v2-resources-gallery__rows-wrapper .v2-resources-gallery__row--has-documents:has( + .v2-resources-gallery__row--has-documents:last-child) {
flex-grow: unset;
width: calc(33.33% - 52px);
.v2-resources-gallery__list--expand .v2-resources-gallery__video-list {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1200px) {
.v2-resources-gallery__row {
gap: 80px;
max-width: unset;
width: 100%;
overflow: hidden;
}

.v2-resources-gallery__item {
max-width: unset;
width: calc(33.33% - 80px);
flex-grow: 1;
}

.v2-resources-gallery__toggle-resources-icon {
right: -96px;
}

.v2-resources-gallery__rows-wrapper .v2-resources-gallery__item--has-documents {
display: flex;
align-items: center;
}

.v2-resources-gallery__item--has-documents .button-container + p {
padding-left: 8px;
.v2-resources-gallery__video-list {
grid-template-columns: repeat(3, 1fr);
overflow-x: unset;
grid-auto-flow: row;
}
}

Loading

0 comments on commit b262344

Please sign in to comment.