refactor: migrate legacy wire namespace to wrn
This commit is contained in:
@@ -53,11 +53,11 @@ component MetricGrid {
|
||||
data-variant='{variant}'
|
||||
data-max-width='{maxWidth}'
|
||||
data-auto-fit='{minItemWidth ? "true" : "false"}'
|
||||
class='wire-metric-grid {class}'
|
||||
style='display:block;width:100%;min-width:0;--wire-metric-columns:{columns};--wire-metric-tablet-columns:{tabletColumns};--wire-metric-mobile-columns:{mobileColumns};--wire-metric-min-item-width:{minItemWidth || "18rem"};'
|
||||
class='wrn-metric-grid {class}'
|
||||
style='display:block;width:100%;min-width:0;--wrn-metric-columns:{columns};--wrn-metric-tablet-columns:{tabletColumns};--wrn-metric-mobile-columns:{mobileColumns};--wrn-metric-min-item-width:{minItemWidth || "18rem"};'
|
||||
>
|
||||
<div class="wire-metric-grid__frame">
|
||||
<div class="wire-metric-grid__surface">
|
||||
<div class="wrn-metric-grid__frame">
|
||||
<div class="wrn-metric-grid__surface">
|
||||
{#each items as item, itemIndex}
|
||||
<MetricCard
|
||||
label='{item.label || item.title || "Metric"}'
|
||||
@@ -87,7 +87,7 @@ component MetricGrid {
|
||||
variant='{dividers ? "minimal" : (item.variant || variant)}'
|
||||
hover='{item.hover || (dividers ? "none" : "lift")}'
|
||||
align='{item.align || "left"}'
|
||||
class="wire-metric-grid__card"
|
||||
class="wrn-metric-grid__card"
|
||||
@select='forwardSelect(item, itemIndex, event)'
|
||||
@action='forwardAction(item, itemIndex, event)'
|
||||
/>
|
||||
@@ -100,134 +100,134 @@ component MetricGrid {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-metric-grid__frame {
|
||||
.wrn-metric-grid__frame {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-max-width="compact"] .wire-metric-grid__frame {
|
||||
.wrn-metric-grid[data-max-width="compact"] .wrn-metric-grid__frame {
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-max-width="lg"] .wire-metric-grid__frame {
|
||||
.wrn-metric-grid[data-max-width="lg"] .wrn-metric-grid__frame {
|
||||
max-width: 72rem;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-max-width="xl"] .wire-metric-grid__frame {
|
||||
.wrn-metric-grid[data-max-width="xl"] .wrn-metric-grid__frame {
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-max-width="wide"] .wire-metric-grid__frame,
|
||||
.wire-metric-grid[data-max-width="2xl"] .wire-metric-grid__frame {
|
||||
.wrn-metric-grid[data-max-width="wide"] .wrn-metric-grid__frame,
|
||||
.wrn-metric-grid[data-max-width="2xl"] .wrn-metric-grid__frame {
|
||||
max-width: 90rem;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-max-width="full"] .wire-metric-grid__frame {
|
||||
.wrn-metric-grid[data-max-width="full"] .wrn-metric-grid__frame {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.wire-metric-grid__surface {
|
||||
.wrn-metric-grid__surface {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--wire-metric-mobile-columns), minmax(0, 1fr));
|
||||
grid-template-columns: repeat(var(--wrn-metric-mobile-columns), minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-auto-fit="true"] .wire-metric-grid__surface {
|
||||
.wrn-metric-grid[data-auto-fit="true"] .wrn-metric-grid__surface {
|
||||
grid-template-columns: repeat(
|
||||
auto-fit,
|
||||
minmax(min(100%, var(--wire-metric-min-item-width)), 1fr)
|
||||
minmax(min(100%, var(--wrn-metric-min-item-width)), 1fr)
|
||||
);
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-gap="none"] .wire-metric-grid__surface {
|
||||
.wrn-metric-grid[data-gap="none"] .wrn-metric-grid__surface {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-gap="sm"] .wire-metric-grid__surface {
|
||||
.wrn-metric-grid[data-gap="sm"] .wrn-metric-grid__surface {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-gap="lg"] .wire-metric-grid__surface {
|
||||
.wrn-metric-grid[data-gap="lg"] .wrn-metric-grid__surface {
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-gap="xl"] .wire-metric-grid__surface {
|
||||
.wrn-metric-grid[data-gap="xl"] .wrn-metric-grid__surface {
|
||||
gap: 2.25rem;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-equal-height="true"] .wire-metric-grid__surface > * {
|
||||
.wrn-metric-grid[data-equal-height="true"] .wrn-metric-grid__surface > * {
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-variant="panel"] .wire-metric-grid__surface,
|
||||
.wire-metric-grid[data-variant="soft"] .wire-metric-grid__surface,
|
||||
.wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface {
|
||||
.wrn-metric-grid[data-variant="panel"] .wrn-metric-grid__surface,
|
||||
.wrn-metric-grid[data-variant="soft"] .wrn-metric-grid__surface,
|
||||
.wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface {
|
||||
overflow: hidden;
|
||||
padding: 0.75rem;
|
||||
background: var(--wire-color-surface-raised);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
background: var(--wrn-color-surface-raised);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 1.4rem;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-variant="soft"] .wire-metric-grid__surface {
|
||||
.wrn-metric-grid[data-variant="soft"] .wrn-metric-grid__surface {
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--wire-color-primary) 8%, transparent),
|
||||
color-mix(in srgb, var(--wrn-color-primary) 8%, transparent),
|
||||
transparent 62%
|
||||
),
|
||||
var(--wire-color-surface-raised);
|
||||
var(--wrn-color-surface-raised);
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface {
|
||||
.wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface {
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-dividers="true"] .wire-metric-grid__card {
|
||||
.wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__card {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.wire-metric-grid[data-auto-fit="false"] .wire-metric-grid__surface {
|
||||
grid-template-columns: repeat(var(--wire-metric-tablet-columns), minmax(0, 1fr));
|
||||
.wrn-metric-grid[data-auto-fit="false"] .wrn-metric-grid__surface {
|
||||
grid-template-columns: repeat(var(--wrn-metric-tablet-columns), minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.wire-metric-grid[data-auto-fit="false"] .wire-metric-grid__surface {
|
||||
grid-template-columns: repeat(var(--wire-metric-columns), minmax(0, 1fr));
|
||||
.wrn-metric-grid[data-auto-fit="false"] .wrn-metric-grid__surface {
|
||||
grid-template-columns: repeat(var(--wrn-metric-columns), minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > * + * {
|
||||
border-top: 1px solid var(--wire-color-border);
|
||||
.wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > * + * {
|
||||
border-top: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) and (max-width: 1023px) {
|
||||
.wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > * {
|
||||
border-top: 1px solid var(--wire-color-border);
|
||||
.wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > * {
|
||||
border-top: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > *:nth-child(-n + 2) {
|
||||
.wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > *:nth-child(-n + 2) {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > *:nth-child(2n) {
|
||||
border-left: 1px solid var(--wire-color-border);
|
||||
.wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > *:nth-child(2n) {
|
||||
border-left: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > * + * {
|
||||
border-left: 1px solid var(--wire-color-border);
|
||||
.wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > * + * {
|
||||
border-left: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user