fix(ui): collapse empty navbar topbar and add CTA spacing
This commit is contained in:
@@ -8,6 +8,7 @@ component CTASection {
|
||||
size: string = "default"
|
||||
color: string = "primary"
|
||||
variant: string = "solid"
|
||||
spacing: string = "none"
|
||||
primaryLabel: string = "Get started"
|
||||
primaryHref: string = "#"
|
||||
primaryIcon: string = ""
|
||||
@@ -35,6 +36,7 @@ component CTASection {
|
||||
data-size='{size}'
|
||||
data-color='{color}'
|
||||
data-variant='{variant}'
|
||||
data-spacing='{spacing}'
|
||||
data-max-width='{maxWidth}'
|
||||
data-full-bleed='{fullBleed ? "true" : "false"}'
|
||||
data-visual-position='{visualPosition}'
|
||||
@@ -186,6 +188,18 @@ component CTASection {
|
||||
--cta-contrast: var(--wrn-color-secondary-contrast);
|
||||
}
|
||||
|
||||
.wrn-cta-section[data-spacing="sm"] {
|
||||
padding-block: 2rem;
|
||||
}
|
||||
|
||||
.wrn-cta-section[data-spacing="md"] {
|
||||
padding-block: 3rem;
|
||||
}
|
||||
|
||||
.wrn-cta-section[data-spacing="lg"] {
|
||||
padding-block: 4rem;
|
||||
}
|
||||
|
||||
.wrn-cta-section[data-color="info"] {
|
||||
--cta-accent: var(--wrn-color-info);
|
||||
--cta-accent-hover: var(--wrn-color-info-hover);
|
||||
@@ -223,6 +237,20 @@ component CTASection {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wrn-cta-section[data-spacing="sm"] {
|
||||
padding-block: 1.5rem;
|
||||
}
|
||||
|
||||
.wrn-cta-section[data-spacing="md"] {
|
||||
padding-block: 2rem;
|
||||
}
|
||||
|
||||
.wrn-cta-section[data-spacing="lg"] {
|
||||
padding-block: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.wrn-cta-section[data-max-width="compact"] .wrn-cta-section__outer {
|
||||
width: min(calc(100% - 2rem), 64rem);
|
||||
}
|
||||
|
||||
@@ -170,12 +170,11 @@ size: string = "default"
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.wrn-navbar__topbar:empty,
|
||||
.wrn-navbar__topbar:not(:has(*)) {
|
||||
.wrn-navbar__topbar:not(:has(> *)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wrn-navbar__topbar:not(:empty) {
|
||||
.wrn-navbar__topbar:has(> *) {
|
||||
display: flex;
|
||||
min-height: 2.25rem;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user