Skip to content

Commit

Permalink
Merge pull request #80 from adobecom/grid-marquee
Browse files Browse the repository at this point in the history 
[Migration][Grid-Marquee] Ported over a new block
  • Loading branch information
@vhargrave
vhargrave authored Oct 30, 2024
2 parents 1cb7d93 + 4f8bab8 commit a6e8f07
Show file tree
Hide file tree
Showing 17 changed files with 969 additions and 0 deletions.
383 changes: 383 additions & 0 deletions express/blocks/grid-marquee/grid-marquee.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,383 @@
.grid-marquee {
--m-img-w: 152px;
--m-img-h: 103px;
--t-img-w: 183px;
--t-img-h: 152px;
--d-img-w: 256px;
--d-img-h: 199px;
max-width: initial;
text-align: center;
}

.grid-marquee .express-logo {
width: initial;
height: 30px;
padding: 1rem 0 1rem;
}

.grid-marquee h1 {
font-size: var(--heading-font-size-m);
padding-bottom: 8px;
}

.grid-marquee strong,
.grid-marquee a,
.grid-marquee button {
font-family: var(--body-font-family);
}

.grid-marquee .headline {
padding-bottom: 24px;
max-width: 340px;
}

.grid-marquee .headline p {
margin: 0;
font-size: 1rem;
}

.grid-marquee .headline .ctas {
display: none;
}

.grid-marquee .headline a:not(.primaryCTA) {
background-color: black;
border-color: black;
}

.grid-marquee .background {
width: 100%
}

.grid-marquee .background img {
position: absolute;
top: 50%;
object-fit: fill;
width: 250%;
transform: translate(-50%, -35%);
max-height: 600px;
max-width: 1200px;
}

.grid-marquee .foreground {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}

.grid-marquee .cards-container {
position: relative;
display: grid;
grid-template-columns: repeat(2, max-content);
grid-template-rows: auto;
gap: 8px;
justify-content: center;
justify-items: center;
margin: auto;
}

.grid-marquee .card {
width: 170px;
padding: 8px;
border-radius: 8px;
border: 1px solid #fff;
background: linear-gradient(170.96deg, rgba(255, 255, 255, 0.6) 18.95%, rgba(255, 255, 255, 0.2) 99.73%);
text-align: left;
display: flex;
color: initial;
}

.grid-marquee .face {
display: flex;
flex-direction: column;
gap: 8px;
}

.grid-marquee .face p {
margin: 0;
line-height: 20.8px;
}

.grid-marquee .face strong {
font-size: 1rem;
font-weight: 700;
padding: 0 4px;
display: inline-block;
}

.grid-marquee .face img {
border-radius: 8px;
width: var(--m-img-w);
height: var(--m-img-h);
object-fit: cover;
object-position: center;
}

.grid-marquee .drawer {
z-index: 3;
display: flex;
flex-direction: column;
gap: 8px;
border-radius: 16px 16px 0 0;
padding-top: 16px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
max-height: calc(75vh);
overflow: hidden;
box-sizing: border-box;
background-color: #fff;
transition: transform .4s ease, visibility .4s;
box-shadow: 0px -62px 80px 0px #0000002B;
}

.grid-marquee .drawer .content {
overflow: auto;
scrollbar-width: thin;
}

.grid-marquee .drawer[aria-hidden='true'] {
transform: translateY(100%);
visibility: hidden;
pointer-events: none;
}

.grid-marquee .drawer .title-row {
padding-top: 6px;
padding-bottom: 8px;
padding: 6px 16px 0;
font-size: 1.125rem;
display: flex;
align-items: center;
justify-content: space-between;
}

.grid-marquee .drawer .title-row strong {
font-weight: 700;
}

.grid-marquee .drawer .video-container {
border-top: 1px solid #0000001A;
display: flex;
justify-content: center;
padding: 16px;
}

.grid-marquee .drawer video {
max-height: 30vh;
border-radius: 8px;
}

.grid-marquee .panel {
display: flex;
flex-direction: column;
}

.grid-marquee .drawer .panel p {
margin: 0;
}

.grid-marquee .panel .drawer-cta {
margin: 0;
padding: 16px;
border-top: 1px solid #0000001A;
display: flex;
align-items: center;
gap: 16px;
}

.grid-marquee .drawer .icon {
width: 22px;
height: 22px;
}

.grid-marquee .drawer button[aria-label='close'] .icon {
width: 12px;
height: 12px;
}

.grid-marquee .drawer [aria-label='close'] {
background: initial;
border: initial;
}

.grid-marquee .drawer [role='tablist'] {
padding: 0 0 8px 16px;
}

.grid-marquee .drawer [role='tab'] {
background-color: initial;
border: initial;
border-radius: 16px;
padding: 8px 12px;
font-size: var(--body-font-size-s);
color: #292929;
cursor: pointer;
}
.grid-marquee .drawer [role='tab'][aria-selected='true'] {
background-color: #e1e1e1;
font-weight: 700;
cursor: initial;
}


.grid-marquee .drawer [role='tabpanel'][aria-hidden='true'] {
display: none;
}

.grid-marquee .drawer a {
background-color: initial;
color: initial;
font-weight: initial;
font-size: 1rem;
border: initial;
padding: initial;
text-align: left;
margin: initial;
}

.grid-marquee .ratings {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
padding-top: 40px;
gap: 12px 48px;
min-height: 39px;
}

.grid-marquee .ratings-container {
display: flex;
align-items: center;
gap: 4px;
}

.grid-marquee .ratings img {
height: 35px;
padding-left: 12px;
margin: 0;
}

@media screen and (min-width: 900px) {
.grid-marquee .headline {
max-width: 820px;
}
.grid-marquee .headline h1 {
font-size: var(--heading-font-size-m);
}
.grid-marquee .headline .ctas {
display: flex;
padding-top: 16px;
justify-content: center;
gap: 8px;
}

.grid-marquee .headline a.button {
margin: 0;
}

.grid-marquee .cards-container {
grid-template-columns: repeat(auto-fit, minmax(199px, 1fr));
width: 820px;
gap: 8px;
}

.grid-marquee .card {
width: 199px;
border-radius: 16px;
}

.grid-marquee .face img {
width: var(--t-img-w);
height: var(--t-img-h);
}
}

@media screen and (min-width: 1200px) {
.grid-marquee .express-logo {
padding-top: 40px;
}
.grid-marquee .background img {
max-width: 1800px;
}
.grid-marquee .headline {
max-width: 1200px;
padding-bottom: 40px;
}
.grid-marquee .headline h1 {
font-size: var(--heading-font-size-xl);
}
.grid-marquee .headline .ctas {
padding-top: 24px;
}
.grid-marquee .headline a.button {
border-width: 1px;
padding: 12px 24px 13px 24px;
font-size: var(--body-font-size-l);
border-radius: 50px;
line-height: 23.4px;
}
.grid-marquee .cards-container {
width: 1200px;
gap: 16px;
}
.grid-marquee .card {
width: 288px;
padding: 16px;
position: relative;
}

.grid-marquee .face img {
width: var(--d-img-w);
height: var(--d-img-h);
}

.grid-marquee .face {
gap: 12px;
}

.grid-marquee .drawer {
visibility: visible;
opacity: 1;
transition: opacity .4s ease, visibility .4s;
border-radius: 12px;
padding-bottom: 16px;
position: absolute;
width: 100%;
top: 0;
bottom: initial;
box-shadow: 0px 0px 12px 0px #00000029;
}

.grid-marquee .drawer[aria-hidden='true'] {
opacity: 0;
visibility: hidden;
transform: initial;
}

.grid-marquee .drawer .title-row {
display: none;
}

.grid-marquee .drawer .video-container {
border-top: 0;
padding: 0 16px 12px 16px;
}

.grid-marquee .drawer video {
width: var(--d-img-w);
height: var(--d-img-h);
}

.grid-marquee .drawer div[role='tablist'] {
padding-bottom: 16px;
}

.grid-marquee .drawer .panel a {
border-top: none;
padding: 6px 16px;
font-size: var(--body-font-size-l);
}
}
Loading

0 comments on commit a6e8f07

Please sign in to comment.