crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-27 04:01:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: banner home

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-08-26 13:59:05 +07:00
parent d345020e6e
commit e1088bfb88
9 changed files with 93 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/common/Banner/Banner.module.scss
View File

@@ -2,31 +2,44 @@
.banner {
@apply bg-primary-light custom-border-radius-lg overflow-hidden;
border: 1px solid var(--primary);
@screen md {
border: 1px solid var(--primary);
}
&.large {
.inner {
@screen xl {
@apply bg-right-bottom;
background-size: unset;
}
}
}
.inner {
@apply bg-no-repeat;
background-size: 90%;
background-position: right -500% bottom 0%;
@screen md {
@apply bg-right-bottom;
background-size: unset;
}
.content {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0));
background-image: linear-gradient(
to right,
rgb(227, 242, 233, 0.9),
rgb(227, 242, 233, 0.5) 80%,
rgb(227, 242, 233, 0)
);
padding: 1.6rem;
max-width: 70%;
max-width: 37rem;
@screen md {
max-width: 50%;
max-width: 49.6rem;
padding: 4.8rem;
}
.top {
.heading {
@apply heading-1;
@apply heading-1 font-heading;
margin-bottom: 1.6rem;
}
.subHeading {
@apply sub-headline;
@screen md {
@apply caption;
}
}
}