atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: added <ScrollStack /> component

Browse Source
This commit is contained in:
Utkarsh-Singhal-26
2025-07-22 08:49:39 +05:30
parent cc3273a848
commit 05714a6feb
7 changed files with 651 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/css/category.css
View File

@@ -566,3 +566,90 @@ div:has(> .props-table) {
order: 2;
}
}
.scroll-stack-card-demo {
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: 900;
color: #fff;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 1rem;
white-space: nowrap;
text-align: center;
}
.scroll-stack-card-demo .stack-img-container {
width: 100%;
height: 100%;
min-height: 150px;
border-radius: 1.5rem;
border: 10px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(4rem, 8vw, 8rem);
}
.scroll-stack-demo-container .scroll-stack-inner {
padding: 20vh 2rem 50rem;
}
.ssc-demo-1 {
background-color: #5227ff;
}
.ssc-demo-2 {
background-color: #f01e9c;
}
.ssc-demo-3 {
background-color: #5227ff;
}
.ssc-demo-4 {
background-color: #f01e9c;
}
.ssc-demo-5 {
background-color: #5227ff;
text-align: center;
justify-content: center;
align-items: center;
}
@media only screen and (min-width: 1240px) {
.scroll-stack-card-demo {
flex-direction: row;
gap: 2rem;
text-align: left;
}
.scroll-stack-demo-container .scroll-stack-inner {
padding: 20vh 5rem 50rem;
}
.scroll-stack-card-demo .stack-img-container {
width: 50%;
min-height: auto;
}
.scroll-stack-card-demo h3 {
margin-bottom: 1em;
}
}
@media only screen and (max-width: 480px) {
.scroll-stack-card-demo {
font-size: 1rem;
padding: 0.2rem;
gap: 0.5rem;
}
.scroll-stack-card-demo .stack-img-container {
border-width: 5px;
border-radius: 1rem;
min-height: 120px;
font-size: 3rem;
}
}