WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

feat(ui): own responsive marketing layout APIs
Quality / quality (windows-latest) (push) Waiting to run
Details
Quality / quality (ubuntu-latest) (push) Failing after 10m42s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-24 19:44:26 +05:30
parent 3b402b4e36
commit f9e285b182
15 changed files with 589 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/AnnouncementBar.wrn
+21
View File
@@ -16,6 +16,15 @@ badge: string = ""
dismissLabel: string = "Dismiss announcement"
sticky: boolean = false
compact: boolean = false
flush: boolean = false
mobileCompact: boolean = false
mobileMessageLines: number = 2
hideBadgeOnMobile: boolean = false
hideDescriptionOnMobile: boolean = false
mobileActionSize: string = "default"
gutter: string = "md"
contentGutter: string = "md"
flushMobile: boolean = false
size: string = "default"
width: string = "default"
color: string = "primary"
@@ -36,6 +45,7 @@ badge: string = ""
data-color='{color}'
data-variant='{variant}'
data-compact='{compact}'
data-flush='{flush ? "true" : "false"}' data-mobile-compact='{mobileCompact ? "true" : "false"}' data-mobile-message-lines='{mobileMessageLines}' data-hide-badge-mobile='{hideBadgeOnMobile ? "true" : "false"}' data-hide-description-mobile='{hideDescriptionOnMobile ? "true" : "false"}' data-mobile-action-size='{mobileActionSize}' data-gutter='{gutter}' data-content-gutter='{contentGutter}' data-flush-mobile='{flushMobile ? "true" : "false"}'
data-sticky='{sticky}'
data-show='{!dismissed}'
aria-hidden='{dismissed ? "true" : "false"}'
@@ -163,6 +173,8 @@ badge: string = ""
margin-inline: auto;
}
.wrn-announcement[data-flush="true"] .wrn-announcement__surface { border-radius: 0; box-shadow: none; }
.wrn-announcement[data-width="wide"] .wrn-announcement__surface {
width: min(calc(100% - 2rem), 90rem);
}
@@ -573,6 +585,15 @@ badge: string = ""
}
@media (max-width: 639px) {
.wrn-announcement[data-mobile-compact="true"] .wrn-announcement__inner,
.wrn-announcement[data-compact="true"] .wrn-announcement__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; }
.wrn-announcement[data-hide-badge-mobile="true"] .wrn-announcement__badge,
.wrn-announcement[data-mobile-compact="true"] .wrn-announcement__badge { display: none; }
.wrn-announcement[data-hide-description-mobile="true"] .wrn-announcement__description,
.wrn-announcement[data-mobile-compact="true"] .wrn-announcement__description { display: none; }
.wrn-announcement[data-mobile-message-lines="2"] .wrn-announcement__message { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wrn-announcement[data-mobile-action-size="sm"] .wrn-announcement__action { min-height: 2.25rem; padding-inline: 0.7rem; }
.wrn-announcement[data-flush-mobile="false"] .wrn-announcement__inner { padding-inline: 1rem; }
.wrn-announcement__surface,
.wrn-announcement[data-width="wide"] .wrn-announcement__surface {
width: calc(100% - 1rem);