mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
🚀 Add Launch Announcement Banner (#1662)
* adding decorative underline to utils.css * adding banner to base.njk * disabling sticky banner in layouts * adding logic to show/hide pageBanner * add changelog for `<wa-page>` fix in related Pro PR --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
This commit is contained in:
Brian Talbot
19
packages/webawesome/docs/_includes/_banner-wa-launch.njk
Normal file
19
packages/webawesome/docs/_includes/_banner-wa-launch.njk
Normal file
@@ -0,0 +1,19 @@
|
||||
{% raw %}
|
||||
{%- if not currentUser.hasPro -%}
|
||||
<div slot="banner" class="banner-wa-launch wa-dark">
|
||||
<div class="banner-content wa-split">
|
||||
<div class="wa-cluster wa-gap-s">
|
||||
<wa-icon name="badge-percent" class="banner-icon"></wa-icon>
|
||||
<p class="wa-body-s">
|
||||
<strong style="margin-inline-end: var(--wa-space-2xs)">Web Awesome is here!</strong>
|
||||
Celebrate with <span class="appearance-underlined variant-drawn">20% off</span> on a Web Awesome Pro plan… <span class="appearance-underlined variant-drawn">for life</span>!
|
||||
</p>
|
||||
</div>
|
||||
<wa-button appearance="outlined" variant="brand" size="small" href="/purchase" class="brand-font">
|
||||
<wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
|
||||
Get Pro + Save 20%
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{% endraw %}
|
||||
@@ -27,7 +27,11 @@
|
||||
</script>
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">
|
||||
{% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180 } %}
|
||||
{% if hasBanner == undefined %}
|
||||
{% set hasBanner = true %}
|
||||
{% endif %}
|
||||
|
||||
{% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %}
|
||||
{% set waPageAttributes = waPageAttributes or {} %}
|
||||
{% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
|
||||
<wa-page
|
||||
@@ -37,6 +41,13 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
>
|
||||
{% block pageBanner %}
|
||||
{% if hasBanner %}
|
||||
{#- WA Launch Banner -#}
|
||||
{% include "_banner-wa-launch.njk" ignore missing %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block pageHeader %}
|
||||
<header slot="header" class="wa-split">
|
||||
{# Nav toggle #}
|
||||
|
||||
@@ -27,6 +27,43 @@ body.theme-transitioning {
|
||||
transition: opacity 200ms ease-out;
|
||||
}
|
||||
|
||||
/* banner */
|
||||
wa-page > [slot='banner'] {
|
||||
padding: var(--wa-space-0);
|
||||
|
||||
.banner-content {
|
||||
/* match docs header padding-inline by default */
|
||||
padding-inline: var(--wa-space-xl);
|
||||
padding-block: var(--wa-space-m);
|
||||
}
|
||||
|
||||
&.banner-wa-launch {
|
||||
/* custom brand colors carrried over from theme-site for the banner */
|
||||
--wa-color-brand-95: #fef0ec;
|
||||
--wa-color-brand-90: #fce0d8;
|
||||
--wa-color-brand-80: #f8bcac;
|
||||
--wa-color-brand-70: #fa9378;
|
||||
--wa-color-brand-60: #f46a45;
|
||||
--wa-color-brand-50: #cb4b27;
|
||||
--wa-color-brand-40: #9d371a;
|
||||
--wa-color-brand-30: #7c2a13;
|
||||
--wa-color-brand-20: #5d1d0b;
|
||||
--wa-color-brand-10: #3b0f05;
|
||||
--wa-color-brand-05: #270802;
|
||||
--wa-color-brand: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on: var(--wa-color-brand-10);
|
||||
|
||||
.banner-icon {
|
||||
color: var(--wa-color-brand-fill-loud);
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
.appearance-underlined.variant-drawn {
|
||||
--underline-color: var(--wa-color-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
wa-page::part(header) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
|
||||
@@ -127,6 +127,28 @@
|
||||
|
||||
/* #region funsies + cosmetics */
|
||||
|
||||
/* decorative underline emphasis */
|
||||
.appearance-underlined.variant-drawn {
|
||||
--underline-color: currentColor;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
padding-bottom: 0.4em;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0.4em;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,12 Q50,8 100,12' stroke='black' stroke-width='4' fill='none'/%3E%3C/svg%3E");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% auto;
|
||||
mask-position: 0 100%;
|
||||
background-color: var(--underline-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* grid background */
|
||||
.background-grid {
|
||||
--grid-spacing: var(--wa-space-2xl);
|
||||
|
||||
@@ -41,6 +41,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `<wa-checkbox>` and `<wa-switch>` [issue:1472]
|
||||
- Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that caused the component to prematurely hide when certain child elements are used [pr:1636]
|
||||
- Fixed a bug in `<wa-popover>` and `<wa-tooltip>` that prevented dots and other valid ID characters from being used [issue:1648]
|
||||
- [Pro] Fixed a bug in `<wa-page>` that caused menu and aside content to reserve space for slots with `disable-sticky`
|
||||
- Fixed incorrect docs for the `wa-include-error` event which is dispatched by `<wa-include>` [issue:1663]
|
||||
- Fixed a bug in `<wa-card>` where slotted header and footer content wasn't properly aligned [pr:1435]
|
||||
- Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
|
||||
|
||||
Reference in New Issue
Block a user