Pre Release New Changes
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
component AnnouncementBar {
|
||||
props {
|
||||
@event dismiss = function
|
||||
|
||||
badge = ""
|
||||
badgeIcon = ""
|
||||
message = "Announcement"
|
||||
@@ -13,6 +15,7 @@ component AnnouncementBar {
|
||||
sticky = false
|
||||
compact = false
|
||||
size = "default"
|
||||
width = "default"
|
||||
color = "primary"
|
||||
variant = "soft"
|
||||
role = "status"
|
||||
@@ -24,108 +27,590 @@ component AnnouncementBar {
|
||||
|
||||
view {
|
||||
<aside
|
||||
{...attrs}
|
||||
data-ui-component="AnnouncementBar"
|
||||
data-size='{size}'
|
||||
data-width='{width}'
|
||||
data-color='{color}'
|
||||
data-variant='{variant}'
|
||||
data-compact='{compact}'
|
||||
data-sticky='{sticky}'
|
||||
data-show='{!dismissed}'
|
||||
aria-hidden='{dismissed ? "true" : "false"}'
|
||||
role='{role}'
|
||||
aria-live='{live}'
|
||||
data-show='!dismissed'
|
||||
class='z-40 w-full border-y border-[var(--wire-color-border)] {class}'
|
||||
class:sticky='sticky'
|
||||
class:top-0='sticky'
|
||||
class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
|
||||
class:border-[var(--wire-color-primary-muted)]='variant === "soft" && color === "primary"'
|
||||
class:bg-[var(--wire-color-info-soft)]='variant === "soft" && color === "info"'
|
||||
class:border-[var(--wire-color-info-muted)]='variant === "soft" && color === "info"'
|
||||
class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
|
||||
class:border-[var(--wire-color-success-muted)]='variant === "soft" && color === "success"'
|
||||
class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
|
||||
class:border-[var(--wire-color-warning-muted)]='variant === "soft" && color === "warning"'
|
||||
class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
|
||||
class:border-[var(--wire-color-danger-muted)]='variant === "soft" && color === "danger"'
|
||||
class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
|
||||
class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
|
||||
class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
|
||||
class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
|
||||
class:bg-[var(--wire-color-surface-raised)]='variant === "default"'
|
||||
class='wire-announcement {class}'
|
||||
>
|
||||
<Container columns="1" maxWidth="xl" size="default">
|
||||
<div
|
||||
class="flex flex-col gap-4 py-4 sm:flex-row sm:items-center sm:justify-between"
|
||||
class:py-2.5='compact'
|
||||
>
|
||||
<div class="flex min-w-0 items-start gap-3 sm:items-center">
|
||||
<div class="wire-announcement__surface">
|
||||
<span
|
||||
class="wire-announcement__accent"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
|
||||
<span
|
||||
class="wire-announcement__glow wire-announcement__glow--one"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
|
||||
<span
|
||||
class="wire-announcement__glow wire-announcement__glow--two"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
|
||||
<div class="wire-announcement__inner">
|
||||
<div class="wire-announcement__content">
|
||||
{#if icon}
|
||||
<span
|
||||
class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--wire-color-surface-raised)] text-[var(--wire-color-primary)] shadow-sm"
|
||||
class:size-8='compact'
|
||||
class:text-[var(--wire-color-danger)]='color === "danger"'
|
||||
class:text-[var(--wire-color-warning-text)]='color === "warning"'
|
||||
class:text-[var(--wire-color-success)]='color === "success"'
|
||||
class:text-[var(--wire-color-info)]='color === "info"'
|
||||
>
|
||||
<span class='{icon + " size-5"}' aria-hidden="true"></span>
|
||||
<span class="wire-announcement__icon">
|
||||
<span
|
||||
class='{icon}'
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<div class="min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="wire-announcement__copy">
|
||||
<div class="wire-announcement__headline">
|
||||
{#if badge}
|
||||
<Badge
|
||||
label='{badge}'
|
||||
icon='{badgeIcon}'
|
||||
size="sm"
|
||||
color='{color}'
|
||||
variant='{variant === "solid" ? "outline" : "solid"}'
|
||||
/>
|
||||
<span class="wire-announcement__badge">
|
||||
{#if badgeIcon}
|
||||
<span
|
||||
class='{badgeIcon}'
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{/if}
|
||||
|
||||
<span>{badge}</span>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<p
|
||||
class="font-semibold"
|
||||
class:text-sm='compact || size === "sm"'
|
||||
class:text-base='!compact && size !== "sm"'
|
||||
class:text-[var(--wire-color-text)]='variant !== "solid"'
|
||||
>
|
||||
<p class="wire-announcement__message">
|
||||
{message}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if description && !compact}
|
||||
<p
|
||||
class="mt-1 text-sm leading-6"
|
||||
class:text-[var(--wire-color-text-muted)]='variant !== "solid"'
|
||||
class:opacity-85='variant === "solid"'
|
||||
>
|
||||
<p class="wire-announcement__description">
|
||||
{description}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex shrink-0 items-center gap-2 sm:justify-end">
|
||||
{#if actionLabel}
|
||||
<TextLink
|
||||
label='{actionLabel}'
|
||||
href='{actionHref}'
|
||||
icon='{actionIcon}'
|
||||
iconPosition="start"
|
||||
showArrow="true"
|
||||
color='{variant === "solid" ? "neutral" : color}'
|
||||
variant='{variant === "solid" ? "button" : "default"}'
|
||||
/>
|
||||
{/if}
|
||||
{#if actionLabel || dismissible}
|
||||
<div class="wire-announcement__actions">
|
||||
{#if actionLabel}
|
||||
<a
|
||||
href='{actionHref || "#"}'
|
||||
class="wire-announcement__action"
|
||||
>
|
||||
<span>{actionLabel}</span>
|
||||
|
||||
{#if dismissible}
|
||||
<button
|
||||
type="button"
|
||||
aria-label='{dismissLabel}'
|
||||
class="inline-flex size-9 items-center justify-center rounded-lg text-[var(--wire-color-text-muted)] transition hover:bg-[var(--wire-color-surface-raised)] hover:text-[var(--wire-color-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)]"
|
||||
@click='dismissed = true; event.currentTarget.dispatchEvent(new CustomEvent("dismiss", { bubbles: true }))'
|
||||
>
|
||||
<span class="icon-[lucide--x] size-4" aria-hidden="true"></span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if actionIcon}
|
||||
<span
|
||||
class='{actionIcon}'
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{:else}
|
||||
<span
|
||||
class="icon-[lucide--arrow-right]"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if dismissible}
|
||||
<button
|
||||
type="button"
|
||||
aria-label='{dismissLabel}'
|
||||
title='{dismissLabel}'
|
||||
class="wire-announcement__dismiss"
|
||||
@click='dismissed = true; event.currentTarget.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, detail: { message: message } }))'
|
||||
>
|
||||
<span
|
||||
class="icon-[lucide--x]"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</aside>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-announcement {
|
||||
--announcement-accent: var(--wire-color-primary);
|
||||
--announcement-contrast: var(--wire-color-primary-contrast, #ffffff);
|
||||
--announcement-soft: var(--wire-color-primary-soft);
|
||||
--announcement-muted: var(--wire-color-primary-muted);
|
||||
|
||||
position: relative;
|
||||
z-index: 40;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
margin-inline: calc(50% - 50vw);
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-announcement__surface {
|
||||
width: min(calc(100% - 2rem), 72rem);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.wire-announcement[data-width="wide"] .wire-announcement__surface {
|
||||
width: min(calc(100% - 2rem), 90rem);
|
||||
}
|
||||
|
||||
.wire-announcement[data-width="full"] .wire-announcement__surface {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin-inline: 0;
|
||||
border-inline: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wire-announcement[data-sticky="true"] {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wire-announcement[data-color="secondary"] {
|
||||
--announcement-accent: var(--wire-color-secondary);
|
||||
--announcement-contrast: var(--wire-color-secondary-contrast, #ffffff);
|
||||
--announcement-soft: var(--wire-color-secondary-soft);
|
||||
--announcement-muted: var(--wire-color-secondary-muted);
|
||||
}
|
||||
|
||||
.wire-announcement[data-color="info"] {
|
||||
--announcement-accent: var(--wire-color-info);
|
||||
--announcement-contrast: var(--wire-color-info-contrast, #ffffff);
|
||||
--announcement-soft: var(--wire-color-info-soft);
|
||||
--announcement-muted: var(--wire-color-info-muted);
|
||||
}
|
||||
|
||||
.wire-announcement[data-color="success"] {
|
||||
--announcement-accent: var(--wire-color-success);
|
||||
--announcement-contrast: var(--wire-color-success-contrast, #ffffff);
|
||||
--announcement-soft: var(--wire-color-success-soft);
|
||||
--announcement-muted: var(--wire-color-success-muted);
|
||||
}
|
||||
|
||||
.wire-announcement[data-color="warning"] {
|
||||
--announcement-accent: var(--wire-color-warning);
|
||||
--announcement-contrast: var(--wire-color-warning-contrast, #111827);
|
||||
--announcement-soft: var(--wire-color-warning-soft);
|
||||
--announcement-muted: var(--wire-color-warning-muted);
|
||||
}
|
||||
|
||||
.wire-announcement[data-color="danger"] {
|
||||
--announcement-accent: var(--wire-color-danger);
|
||||
--announcement-contrast: var(--wire-color-danger-contrast, #ffffff);
|
||||
--announcement-soft: var(--wire-color-danger-soft);
|
||||
--announcement-muted: var(--wire-color-danger-muted);
|
||||
}
|
||||
|
||||
.wire-announcement__surface {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
background: var(--wire-color-surface-raised);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow:
|
||||
0 1px 2px rgb(0 0 0 / 0.04),
|
||||
0 12px 32px rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="soft"] .wire-announcement__surface {
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--announcement-soft) 86%, var(--wire-color-surface-raised)),
|
||||
var(--wire-color-surface-raised)
|
||||
);
|
||||
border-color: color-mix(in srgb, var(--announcement-accent) 28%, var(--wire-color-border));
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="outline"] .wire-announcement__surface {
|
||||
background: transparent;
|
||||
border-color: color-mix(in srgb, var(--announcement-accent) 46%, var(--wire-color-border));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="minimal"] .wire-announcement__surface {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] {
|
||||
color: var(--announcement-contrast);
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__surface {
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 8% 15%,
|
||||
color-mix(in srgb, var(--announcement-contrast) 14%, transparent),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--announcement-accent) 96%, white 4%),
|
||||
color-mix(in srgb, var(--announcement-accent) 76%, black 24%)
|
||||
);
|
||||
border-color: color-mix(in srgb, var(--announcement-contrast) 28%, transparent);
|
||||
box-shadow:
|
||||
0 1px 0 color-mix(in srgb, var(--announcement-contrast) 20%, transparent) inset,
|
||||
0 18px 46px color-mix(in srgb, var(--announcement-accent) 30%, transparent);
|
||||
}
|
||||
|
||||
.wire-announcement__accent {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset-block: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 0.25rem;
|
||||
background: var(--announcement-accent);
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__accent,
|
||||
.wire-announcement[data-variant="minimal"] .wire-announcement__accent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wire-announcement__glow {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
pointer-events: none;
|
||||
filter: blur(3rem);
|
||||
opacity: 0.28;
|
||||
}
|
||||
|
||||
.wire-announcement__glow--one {
|
||||
width: 16rem;
|
||||
height: 16rem;
|
||||
inset-block-start: -10rem;
|
||||
inset-inline-end: -4rem;
|
||||
background: var(--announcement-muted);
|
||||
}
|
||||
|
||||
.wire-announcement__glow--two {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
inset-block-end: -7rem;
|
||||
inset-inline-start: 28%;
|
||||
background: var(--announcement-soft);
|
||||
opacity: 0.18;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__glow {
|
||||
background: var(--announcement-contrast);
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="minimal"] .wire-announcement__glow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wire-announcement__inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
padding: 1rem 1.125rem;
|
||||
}
|
||||
|
||||
.wire-announcement[data-size="sm"] .wire-announcement__inner,
|
||||
.wire-announcement[data-compact="true"] .wire-announcement__inner {
|
||||
padding-block: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-announcement[data-size="lg"] .wire-announcement__inner {
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.wire-announcement__content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.875rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-announcement__icon {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
color: var(--announcement-accent);
|
||||
background: var(--announcement-soft);
|
||||
border: 1px solid color-mix(in srgb, var(--announcement-accent) 20%, transparent);
|
||||
border-radius: 0.875rem;
|
||||
box-shadow: 0 8px 20px color-mix(in srgb, var(--announcement-accent) 12%, transparent);
|
||||
}
|
||||
|
||||
.wire-announcement__icon > span {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
.wire-announcement[data-size="sm"] .wire-announcement__icon,
|
||||
.wire-announcement[data-compact="true"] .wire-announcement__icon {
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-announcement[data-size="lg"] .wire-announcement__icon {
|
||||
width: 3.15rem;
|
||||
height: 3.15rem;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__icon {
|
||||
color: var(--announcement-contrast);
|
||||
background: color-mix(in srgb, var(--announcement-contrast) 12%, transparent);
|
||||
border-color: color-mix(in srgb, var(--announcement-contrast) 22%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-announcement__copy {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
|
||||
.wire-announcement__headline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.55rem 0.8rem;
|
||||
}
|
||||
|
||||
.wire-announcement__badge {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
min-height: 1.6rem;
|
||||
padding: 0.25rem 0.65rem;
|
||||
color: var(--announcement-accent);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
background: var(--announcement-soft);
|
||||
border: 1px solid color-mix(in srgb, var(--announcement-accent) 22%, transparent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.wire-announcement__badge > span:first-child:not(:last-child) {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__badge {
|
||||
color: var(--announcement-contrast);
|
||||
background: color-mix(in srgb, var(--announcement-contrast) 13%, transparent);
|
||||
border-color: color-mix(in srgb, var(--announcement-contrast) 24%, transparent);
|
||||
}
|
||||
|
||||
.wire-announcement__message {
|
||||
margin: 0;
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wire-announcement[data-size="sm"] .wire-announcement__message,
|
||||
.wire-announcement[data-compact="true"] .wire-announcement__message {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.wire-announcement[data-size="lg"] .wire-announcement__message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__message {
|
||||
color: var(--announcement-contrast);
|
||||
}
|
||||
|
||||
.wire-announcement__description {
|
||||
max-width: 52rem;
|
||||
margin: 0.28rem 0 0;
|
||||
color: var(--wire-color-text-muted);
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.wire-announcement[data-size="lg"] .wire-announcement__description {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__description {
|
||||
color: color-mix(in srgb, var(--announcement-contrast) 76%, transparent);
|
||||
}
|
||||
|
||||
.wire-announcement__actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding-inline-start: 3.625rem;
|
||||
}
|
||||
|
||||
.wire-announcement__action,
|
||||
.wire-announcement__dismiss {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 2.5rem;
|
||||
color: var(--wire-color-text);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
background: var(--wire-color-surface-raised);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 5px 14px rgb(0 0 0 / 0.06);
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
border-color 160ms ease,
|
||||
background-color 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.wire-announcement__action {
|
||||
gap: 0.45rem;
|
||||
padding: 0.55rem 0.9rem;
|
||||
}
|
||||
|
||||
.wire-announcement__action > span:last-child {
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
.wire-announcement__dismiss {
|
||||
width: 2.5rem;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-announcement__dismiss > span {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.wire-announcement__action:hover,
|
||||
.wire-announcement__dismiss:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in srgb, var(--announcement-accent) 42%, var(--wire-color-border));
|
||||
box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.wire-announcement__action:hover > span:last-child {
|
||||
transform: translateX(0.16rem);
|
||||
}
|
||||
|
||||
.wire-announcement__action:focus-visible,
|
||||
.wire-announcement__dismiss:focus-visible {
|
||||
outline: 2px solid var(--wire-color-focus, var(--announcement-accent));
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__action {
|
||||
color: var(--announcement-accent);
|
||||
background: var(--announcement-contrast);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 8px 22px color-mix(in srgb, black 18%, transparent);
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__dismiss {
|
||||
color: var(--announcement-contrast);
|
||||
background: color-mix(in srgb, var(--announcement-contrast) 13%, transparent);
|
||||
border-color: color-mix(in srgb, var(--announcement-contrast) 24%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__action:hover {
|
||||
background: color-mix(in srgb, var(--announcement-contrast) 92%, transparent);
|
||||
}
|
||||
|
||||
.wire-announcement[data-variant="solid"] .wire-announcement__dismiss:hover {
|
||||
background: color-mix(in srgb, var(--announcement-contrast) 20%, transparent);
|
||||
border-color: color-mix(in srgb, var(--announcement-contrast) 34%, transparent);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.wire-announcement__inner {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.wire-announcement__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.wire-announcement__actions {
|
||||
justify-content: flex-end;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.wire-announcement__surface,
|
||||
.wire-announcement[data-width="wide"] .wire-announcement__surface {
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.wire-announcement[data-width="full"] .wire-announcement__surface {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wire-announcement__surface {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.wire-announcement__inner {
|
||||
padding-inline: 0.9rem;
|
||||
}
|
||||
|
||||
.wire-announcement__actions {
|
||||
width: 100%;
|
||||
padding-inline-start: 3.625rem;
|
||||
}
|
||||
|
||||
.wire-announcement__action {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-announcement__action,
|
||||
.wire-announcement__dismiss,
|
||||
.wire-announcement__action > span:last-child {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.wire-announcement__action:hover,
|
||||
.wire-announcement__dismiss:hover,
|
||||
.wire-announcement__action:hover > span:last-child {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user