refactor: migrate legacy wire namespace to wrn
This commit is contained in:
@@ -36,33 +36,33 @@ component BackToTop {
|
||||
data-show-label='{showLabel ? "true" : "false"}'
|
||||
data-progress='{showProgress ? "true" : "false"}'
|
||||
data-show='{alwaysVisible || visible}'
|
||||
class='wire-back-to-top {class}'
|
||||
style='--wire-back-to-top-progress: {progress}%;'
|
||||
class='wrn-back-to-top {class}'
|
||||
style='--wrn-back-to-top-progress: {progress}%;'
|
||||
@window:scroll='visible = window.scrollY >= threshold; progress = Math.min(100, Math.max(0, Math.round((window.scrollY / Math.max(1, document.documentElement.scrollHeight - window.innerHeight)) * 100)))'
|
||||
@click='window.scrollTo({ top: 0, behavior: behavior })'
|
||||
>
|
||||
{#if showProgress}
|
||||
<span class="wire-back-to-top__progress" aria-hidden="true"></span>
|
||||
<span class="wrn-back-to-top__progress" aria-hidden="true"></span>
|
||||
{/if}
|
||||
|
||||
<span class="wire-back-to-top__surface">
|
||||
<span class='wire-back-to-top__icon {icon}' aria-hidden="true"></span>
|
||||
<span class="wrn-back-to-top__surface">
|
||||
<span class='wrn-back-to-top__icon {icon}' aria-hidden="true"></span>
|
||||
|
||||
{#if showLabel}
|
||||
<span class="wire-back-to-top__label">{label}</span>
|
||||
<span class="wrn-back-to-top__label">{label}</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class="wire-back-to-top__sr">{label}</span>
|
||||
<span class="wrn-back-to-top__sr">{label}</span>
|
||||
</button>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-back-to-top {
|
||||
--back-accent: var(--wire-color-primary);
|
||||
--back-accent-hover: var(--wire-color-primary-hover);
|
||||
--back-accent-soft: var(--wire-color-primary-soft);
|
||||
--back-contrast: var(--wire-color-primary-contrast);
|
||||
.wrn-back-to-top {
|
||||
--back-accent: var(--wrn-color-primary);
|
||||
--back-accent-hover: var(--wrn-color-primary-hover);
|
||||
--back-accent-soft: var(--wrn-color-primary-soft);
|
||||
--back-contrast: var(--wrn-color-primary-contrast);
|
||||
|
||||
position: fixed;
|
||||
z-index: 70;
|
||||
@@ -84,98 +84,98 @@ component BackToTop {
|
||||
filter 180ms ease;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-color="secondary"] {
|
||||
--back-accent: var(--wire-color-secondary);
|
||||
--back-accent-hover: var(--wire-color-secondary-hover);
|
||||
--back-accent-soft: var(--wire-color-secondary-soft);
|
||||
--back-contrast: var(--wire-color-secondary-contrast);
|
||||
.wrn-back-to-top[data-color="secondary"] {
|
||||
--back-accent: var(--wrn-color-secondary);
|
||||
--back-accent-hover: var(--wrn-color-secondary-hover);
|
||||
--back-accent-soft: var(--wrn-color-secondary-soft);
|
||||
--back-contrast: var(--wrn-color-secondary-contrast);
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-color="info"] {
|
||||
--back-accent: var(--wire-color-info);
|
||||
--back-accent-hover: var(--wire-color-info-hover);
|
||||
--back-accent-soft: var(--wire-color-info-soft);
|
||||
--back-contrast: var(--wire-color-info-contrast);
|
||||
.wrn-back-to-top[data-color="info"] {
|
||||
--back-accent: var(--wrn-color-info);
|
||||
--back-accent-hover: var(--wrn-color-info-hover);
|
||||
--back-accent-soft: var(--wrn-color-info-soft);
|
||||
--back-contrast: var(--wrn-color-info-contrast);
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-color="success"] {
|
||||
--back-accent: var(--wire-color-success);
|
||||
--back-accent-hover: var(--wire-color-success-hover);
|
||||
--back-accent-soft: var(--wire-color-success-soft);
|
||||
--back-contrast: var(--wire-color-success-contrast);
|
||||
.wrn-back-to-top[data-color="success"] {
|
||||
--back-accent: var(--wrn-color-success);
|
||||
--back-accent-hover: var(--wrn-color-success-hover);
|
||||
--back-accent-soft: var(--wrn-color-success-soft);
|
||||
--back-contrast: var(--wrn-color-success-contrast);
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-color="warning"] {
|
||||
--back-accent: var(--wire-color-warning);
|
||||
--back-accent-hover: var(--wire-color-warning-hover);
|
||||
--back-accent-soft: var(--wire-color-warning-soft);
|
||||
--back-contrast: var(--wire-color-warning-contrast);
|
||||
.wrn-back-to-top[data-color="warning"] {
|
||||
--back-accent: var(--wrn-color-warning);
|
||||
--back-accent-hover: var(--wrn-color-warning-hover);
|
||||
--back-accent-soft: var(--wrn-color-warning-soft);
|
||||
--back-contrast: var(--wrn-color-warning-contrast);
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-color="danger"] {
|
||||
--back-accent: var(--wire-color-danger);
|
||||
--back-accent-hover: var(--wire-color-danger-hover);
|
||||
--back-accent-soft: var(--wire-color-danger-soft);
|
||||
--back-contrast: var(--wire-color-danger-contrast);
|
||||
.wrn-back-to-top[data-color="danger"] {
|
||||
--back-accent: var(--wrn-color-danger);
|
||||
--back-accent-hover: var(--wrn-color-danger-hover);
|
||||
--back-accent-soft: var(--wrn-color-danger-soft);
|
||||
--back-contrast: var(--wrn-color-danger-contrast);
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-position="right"] {
|
||||
.wrn-back-to-top[data-position="right"] {
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-position="left"] {
|
||||
.wrn-back-to-top[data-position="left"] {
|
||||
left: 1.5rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-position="center"] {
|
||||
.wrn-back-to-top[data-position="center"] {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-position="center"]:hover {
|
||||
.wrn-back-to-top[data-position="center"]:hover {
|
||||
transform: translateX(-50%) translateY(-3px);
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-offset="sm"] {
|
||||
.wrn-back-to-top[data-offset="sm"] {
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-offset="md"] {
|
||||
.wrn-back-to-top[data-offset="md"] {
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-offset="lg"] {
|
||||
.wrn-back-to-top[data-offset="lg"] {
|
||||
bottom: 2rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-offset="xl"] {
|
||||
.wrn-back-to-top[data-offset="xl"] {
|
||||
bottom: 3rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-size="sm"] {
|
||||
.wrn-back-to-top[data-size="sm"] {
|
||||
min-width: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-size="lg"] {
|
||||
.wrn-back-to-top[data-size="lg"] {
|
||||
min-width: 3.5rem;
|
||||
min-height: 3.5rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-show-label="true"] {
|
||||
.wrn-back-to-top[data-show-label="true"] {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-back-to-top:hover {
|
||||
.wrn-back-to-top:hover {
|
||||
transform: translateY(-3px);
|
||||
filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--back-accent) 24%, transparent));
|
||||
}
|
||||
|
||||
.wire-back-to-top:active {
|
||||
.wrn-back-to-top:active {
|
||||
transform: translateY(-1px) scale(0.98);
|
||||
}
|
||||
|
||||
.wire-back-to-top__surface {
|
||||
.wrn-back-to-top__surface {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
@@ -201,43 +201,43 @@ component BackToTop {
|
||||
color 160ms ease;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-size="sm"] .wire-back-to-top__surface {
|
||||
.wrn-back-to-top[data-size="sm"] .wrn-back-to-top__surface {
|
||||
min-width: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.58rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-size="lg"] .wire-back-to-top__surface {
|
||||
.wrn-back-to-top[data-size="lg"] .wrn-back-to-top__surface {
|
||||
min-width: 3.5rem;
|
||||
min-height: 3.5rem;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-show-label="true"] .wire-back-to-top__surface {
|
||||
.wrn-back-to-top[data-show-label="true"] .wrn-back-to-top__surface {
|
||||
min-width: 0;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-variant="outline"] .wire-back-to-top__surface {
|
||||
.wrn-back-to-top[data-variant="outline"] .wrn-back-to-top__surface {
|
||||
color: var(--back-accent);
|
||||
background: color-mix(in srgb, var(--wire-color-surface-raised) 88%, transparent);
|
||||
border-color: color-mix(in srgb, var(--back-accent) 46%, var(--wire-color-border));
|
||||
background: color-mix(in srgb, var(--wrn-color-surface-raised) 88%, transparent);
|
||||
border-color: color-mix(in srgb, var(--back-accent) 46%, var(--wrn-color-border));
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-variant="soft"] .wire-back-to-top__surface {
|
||||
.wrn-back-to-top[data-variant="soft"] .wrn-back-to-top__surface {
|
||||
color: var(--back-accent);
|
||||
background: color-mix(in srgb, var(--back-accent-soft) 88%, var(--wire-color-surface-raised));
|
||||
border-color: color-mix(in srgb, var(--back-accent) 22%, var(--wire-color-border));
|
||||
background: color-mix(in srgb, var(--back-accent-soft) 88%, var(--wrn-color-surface-raised));
|
||||
border-color: color-mix(in srgb, var(--back-accent) 22%, var(--wrn-color-border));
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-variant="ghost"] .wire-back-to-top__surface {
|
||||
.wrn-back-to-top[data-variant="ghost"] .wrn-back-to-top__surface {
|
||||
color: var(--back-accent);
|
||||
background: color-mix(in srgb, var(--wire-color-surface-raised) 68%, transparent);
|
||||
background: color-mix(in srgb, var(--wrn-color-surface-raised) 68%, transparent);
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-variant="minimal"] .wire-back-to-top__surface {
|
||||
.wrn-back-to-top[data-variant="minimal"] .wrn-back-to-top__surface {
|
||||
color: var(--back-accent);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
@@ -245,52 +245,52 @@ component BackToTop {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-shape="rounded"] {
|
||||
.wrn-back-to-top[data-shape="rounded"] {
|
||||
border-radius: 0.9rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-shape="pill"] {
|
||||
.wrn-back-to-top[data-shape="pill"] {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.wire-back-to-top__progress {
|
||||
.wrn-back-to-top__progress {
|
||||
position: absolute;
|
||||
inset: -0.22rem;
|
||||
z-index: 1;
|
||||
border-radius: inherit;
|
||||
background: conic-gradient(
|
||||
var(--back-accent) var(--wire-back-to-top-progress),
|
||||
color-mix(in srgb, var(--wire-color-border) 72%, transparent) var(--wire-back-to-top-progress)
|
||||
var(--back-accent) var(--wrn-back-to-top-progress),
|
||||
color-mix(in srgb, var(--wrn-color-border) 72%, transparent) var(--wrn-back-to-top-progress)
|
||||
);
|
||||
mask: radial-gradient(farthest-side, transparent calc(100% - 0.18rem), #000 calc(100% - 0.17rem));
|
||||
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.18rem), #000 calc(100% - 0.17rem));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wire-back-to-top__icon {
|
||||
.wrn-back-to-top__icon {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-size="sm"] .wire-back-to-top__icon {
|
||||
.wrn-back-to-top[data-size="sm"] .wrn-back-to-top__icon {
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-size="lg"] .wire-back-to-top__icon {
|
||||
.wrn-back-to-top[data-size="lg"] .wrn-back-to-top__icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top__label {
|
||||
.wrn-back-to-top__label {
|
||||
white-space: nowrap;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wire-back-to-top__sr {
|
||||
.wrn-back-to-top__sr {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
@@ -302,34 +302,34 @@ component BackToTop {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wire-back-to-top:focus-visible {
|
||||
outline: 2px solid var(--wire-color-focus);
|
||||
.wrn-back-to-top:focus-visible {
|
||||
outline: 2px solid var(--wrn-color-focus);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.wire-back-to-top[data-position="right"] {
|
||||
.wrn-back-to-top[data-position="right"] {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-position="left"] {
|
||||
.wrn-back-to-top[data-position="left"] {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.wire-back-to-top[data-offset="lg"],
|
||||
.wire-back-to-top[data-offset="xl"] {
|
||||
.wrn-back-to-top[data-offset="lg"],
|
||||
.wrn-back-to-top[data-offset="xl"] {
|
||||
bottom: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-back-to-top,
|
||||
.wire-back-to-top__surface {
|
||||
.wrn-back-to-top,
|
||||
.wrn-back-to-top__surface {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.wire-back-to-top:hover,
|
||||
.wire-back-to-top[data-position="center"]:hover {
|
||||
.wrn-back-to-top:hover,
|
||||
.wrn-back-to-top[data-position="center"]:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user