localize legacy UI component styles
This commit is contained in:
@@ -458,6 +458,13 @@ component AdvancedSelect {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__select-search {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
@@ -112,12 +112,125 @@ items: unknown[] = []
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"] > .wire-action {
|
||||
display: flex;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) :is(.wire-btn) {
|
||||
height: 100%;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> :is(.wire-btn, .wire-action):not(:first-child) {
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-btn:not(:first-child):not(:last-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-action:not(:first-child):not(:last-child)
|
||||
> .wire-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-btn:first-child:not(:last-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-action:first-child:not(:last-child)
|
||||
> .wire-btn {
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-btn:last-child:not(:first-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-action:last-child:not(:first-child)
|
||||
> .wire-btn {
|
||||
border-start-start-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> :is(.wire-btn, .wire-action):not(:first-child) {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-btn:not(:first-child):not(:last-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-action:not(:first-child):not(:last-child)
|
||||
> .wire-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-btn:first-child:not(:last-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-action:first-child:not(:last-child)
|
||||
> .wire-btn {
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-btn:last-child:not(:first-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-action:last-child:not(:first-child)
|
||||
> .wire-btn {
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
.wire-next--button-group > :is(.wire-btn, .wire-action):focus-within,
|
||||
.wire-next--button-group > .wire-btn:focus-visible {
|
||||
z-index: 2;
|
||||
}
|
||||
.wire-next--button-group[data-selectable="true"] > .wire-btn[data-selected="true"] {
|
||||
z-index: 1;
|
||||
border-color: var(--wire-component-color);
|
||||
background: color-mix(in srgb, var(--wire-component-color) 16%, var(--wire-color-surface));
|
||||
color: var(--wire-component-color);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.wire-next--button-group[data-responsive="true"] {
|
||||
.wire-next--button-group[data-responsive="true"] > :is(.wire-btn, .wire-action) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"] > .wire-action > .wire-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> :is(.wire-btn, .wire-action) {
|
||||
margin-top: -1px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> :is(.wire-btn, .wire-action):first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn,
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> .wire-action
|
||||
> .wire-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:first-child,
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> .wire-action:first-child
|
||||
> .wire-btn {
|
||||
border-start-start-radius: var(--wire-radius-sm);
|
||||
border-start-end-radius: var(--wire-radius-sm);
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:last-child,
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> .wire-action:last-child
|
||||
> .wire-btn {
|
||||
border-end-start-radius: var(--wire-radius-sm);
|
||||
border-end-end-radius: var(--wire-radius-sm);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -311,6 +311,23 @@ component Card {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__card-media--overlay {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 18rem;
|
||||
}
|
||||
.wire-next__card-media--overlay > img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.wire-next__card-media--overlay {
|
||||
aspect-ratio: 4 / 3;
|
||||
min-height: 16rem;
|
||||
}
|
||||
}
|
||||
|
||||
.wire-next--card {
|
||||
--wire-card-color: var(--wire-component-color, var(--wire-color-primary));
|
||||
--wire-card-padding: 1.25rem;
|
||||
|
||||
@@ -469,7 +469,12 @@ component Carousel {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
|
||||
.wire-next__carousel-header h3,
|
||||
|
||||
@@ -149,6 +149,15 @@ component ChatBubble {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--chat-bubble.wire-next--size-sm {
|
||||
--wire-chat-padding: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.wire-next--chat-bubble.wire-next--size-lg {
|
||||
--wire-chat-padding: 1.25rem;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.wire-next--chat-bubble {
|
||||
--wire-chat-color: var(--wire-component-color, var(--wire-color-primary));
|
||||
--wire-chat-padding: 1rem;
|
||||
|
||||
@@ -97,6 +97,13 @@ size: string = "default"
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--collapse.wire-next--size-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.wire-next--collapse.wire-next--size-lg {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.wire-next--collapse {
|
||||
--wire-collapse-color: var(--wire-component-color, var(--wire-color-primary));
|
||||
display: grid;
|
||||
|
||||
@@ -1046,6 +1046,16 @@ component DataTable {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--data-map {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
|
||||
.wire-table {
|
||||
--table-accent: var(--wire-color-primary);
|
||||
display: flex;
|
||||
|
||||
@@ -33,6 +33,16 @@ component DeviceFrame {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--device-frame {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
|
||||
.wire-next--device-frame > header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -39,6 +39,18 @@ size: string = "default"
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wire-next--file-upload-progress progress {
|
||||
width: 100%;
|
||||
accent-color: var(--wire-color-primary);
|
||||
}
|
||||
|
||||
.wire-next--file-upload-progress {
|
||||
display: grid;
|
||||
width: min(100%, 36rem);
|
||||
|
||||
@@ -116,6 +116,11 @@ component PinInput {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input,
|
||||
.wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input {
|
||||
border-color: var(--wire-color-danger);
|
||||
}
|
||||
|
||||
.wire-next--pin-input {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
|
||||
@@ -282,6 +282,16 @@ component ToggleCount {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next__toggle-count-control--start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.wire-next__toggle-count-control--center {
|
||||
justify-content: center;
|
||||
}
|
||||
.wire-next__toggle-count-control--end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.wire-next--toggle-count {
|
||||
--wire-toggle-count-accent: var(--wire-component-color);
|
||||
display: grid;
|
||||
|
||||
@@ -145,6 +145,56 @@ component Alert {
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--alert-soft {
|
||||
border-color: color-mix(in srgb, var(--wire-alert-color) 45%, var(--wire-color-border));
|
||||
background: var(--wire-alert-soft);
|
||||
}
|
||||
.wire-next--alert-soft .wire-next__alert-title,
|
||||
.wire-next--alert-soft .wire-next__alert-icon,
|
||||
.wire-next--alert-soft .wire-next__alert-actions a {
|
||||
color: var(--wire-alert-color);
|
||||
}
|
||||
.wire-next--alert-solid {
|
||||
border-color: var(--wire-alert-color);
|
||||
background: var(--wire-alert-color);
|
||||
color: white;
|
||||
}
|
||||
.wire-next--alert.wire-next--alert-solid
|
||||
:is(
|
||||
.wire-next__alert-title,
|
||||
.wire-next__alert-body > p,
|
||||
.wire-next__alert-body li,
|
||||
.wire-next__alert-actions a,
|
||||
.wire-next__alert-icon
|
||||
) {
|
||||
color: currentColor;
|
||||
}
|
||||
.wire-next--alert-solid[data-color="light"] {
|
||||
color: #18181b;
|
||||
}
|
||||
.wire-next--alert-solid[data-color="warning"] {
|
||||
color: #18181b;
|
||||
}
|
||||
.wire-next--alert-bordered {
|
||||
border-color: var(--wire-alert-color);
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
.wire-next--alert-bordered .wire-next__alert-title,
|
||||
.wire-next--alert-bordered .wire-next__alert-icon,
|
||||
.wire-next--alert-bordered .wire-next__alert-actions a {
|
||||
color: var(--wire-alert-color);
|
||||
}
|
||||
.wire-next--alert-accent {
|
||||
border-color: color-mix(in srgb, var(--wire-alert-color) 35%, var(--wire-color-border));
|
||||
border-left: 4px solid var(--wire-alert-color);
|
||||
background: var(--wire-alert-soft);
|
||||
}
|
||||
.wire-next--alert-accent .wire-next__alert-title,
|
||||
.wire-next--alert-accent .wire-next__alert-icon,
|
||||
.wire-next--alert-accent .wire-next__alert-actions a {
|
||||
color: var(--wire-alert-color);
|
||||
}
|
||||
|
||||
.wire-next--alert {
|
||||
--wire-alert-color: var(--wire-component-color);
|
||||
--wire-alert-soft: color-mix(in srgb, var(--wire-alert-color) 16%, var(--wire-color-surface));
|
||||
|
||||
@@ -167,6 +167,227 @@ label: string = "Button"
|
||||
|
||||
style {
|
||||
/* --- Button --------------------------------------------------------------- */
|
||||
.wire-btn {
|
||||
position: relative;
|
||||
--wire-btn-color: var(--wire-color-primary);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--wire-radius-sm);
|
||||
padding: 0 0.75rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
min-height: 2rem;
|
||||
transition:
|
||||
color var(--wire-motion-base) var(--wire-ease-standard),
|
||||
border-color var(--wire-motion-base) var(--wire-ease-standard),
|
||||
background var(--wire-motion-base) var(--wire-ease-standard),
|
||||
box-shadow var(--wire-motion-base) var(--wire-ease-standard),
|
||||
transform var(--wire-motion-base) var(--wire-ease-emphasized);
|
||||
}
|
||||
.wire-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.wire-btn:focus-visible {
|
||||
outline: 2px solid var(--wire-color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.wire-btn--color-primary {
|
||||
--wire-btn-color: var(--wire-color-primary);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
}
|
||||
.wire-btn--color-secondary {
|
||||
--wire-btn-color: var(--wire-color-muted);
|
||||
--wire-btn-contrast: var(--wire-color-bg);
|
||||
}
|
||||
.wire-btn--color-success {
|
||||
--wire-btn-color: var(--wire-color-success);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
}
|
||||
.wire-btn--color-warning {
|
||||
--wire-btn-color: var(--wire-color-warning);
|
||||
--wire-btn-contrast: var(--wire-color-bg);
|
||||
}
|
||||
.wire-btn--color-danger {
|
||||
--wire-btn-color: var(--wire-color-danger);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
}
|
||||
.wire-btn--color-info {
|
||||
--wire-btn-color: var(--wire-color-info);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
}
|
||||
.wire-btn--variant-default,
|
||||
.wire-btn--variant-solid,
|
||||
.wire-btn--default,
|
||||
.wire-btn--solid,
|
||||
.wire-btn--primary {
|
||||
color: var(--wire-btn-contrast);
|
||||
background: var(--wire-btn-color);
|
||||
box-shadow:
|
||||
0 1px 2px color-mix(in srgb, black 20%, transparent),
|
||||
0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 72%, transparent);
|
||||
}
|
||||
.wire-btn--variant-default:hover,
|
||||
.wire-btn--variant-solid:hover,
|
||||
.wire-btn--default:hover,
|
||||
.wire-btn--solid:hover,
|
||||
.wire-btn--primary:hover {
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 84%, black);
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
0 0.35rem 0.9rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent),
|
||||
0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 82%, transparent);
|
||||
}
|
||||
.wire-btn--variant-outline,
|
||||
.wire-btn--outline {
|
||||
color: var(--wire-btn-color);
|
||||
background: transparent;
|
||||
border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
|
||||
}
|
||||
.wire-btn--variant-outline:hover,
|
||||
.wire-btn--outline:hover {
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
|
||||
border-color: var(--wire-btn-color);
|
||||
}
|
||||
.wire-btn--variant-destructive,
|
||||
.wire-btn--danger,
|
||||
.wire-btn--destructive {
|
||||
color: var(--wire-btn-color);
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 12%, transparent);
|
||||
border-color: color-mix(in srgb, var(--wire-btn-color) 28%, transparent);
|
||||
}
|
||||
.wire-btn--danger,
|
||||
.wire-btn--destructive {
|
||||
--wire-btn-color: var(--wire-color-danger);
|
||||
}
|
||||
.wire-btn--variant-destructive:hover,
|
||||
.wire-btn--danger:hover,
|
||||
.wire-btn--destructive:hover {
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
|
||||
}
|
||||
.wire-btn--variant-ghost,
|
||||
.wire-btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--wire-btn-color);
|
||||
}
|
||||
.wire-btn--variant-ghost:hover,
|
||||
.wire-btn--ghost:hover {
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
|
||||
}
|
||||
.wire-btn--variant-secondary,
|
||||
.wire-btn--secondary {
|
||||
color: var(--wire-color-text);
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 10%, var(--wire-color-surface));
|
||||
border-color: color-mix(in srgb, var(--wire-btn-color) 24%, var(--wire-color-border));
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
.wire-btn--variant-secondary:hover,
|
||||
.wire-btn--secondary:hover {
|
||||
color: var(--wire-btn-color);
|
||||
border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 15%, var(--wire-color-surface));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.wire-btn--variant-link,
|
||||
.wire-btn--link {
|
||||
min-height: auto;
|
||||
padding: 0;
|
||||
color: var(--wire-btn-color);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
text-underline-offset: 0.22em;
|
||||
}
|
||||
.wire-btn--variant-link:hover,
|
||||
.wire-btn--link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.wire-btn:disabled,
|
||||
.wire-btn[aria-busy="true"] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.58;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.wire-btn--size-xs,
|
||||
.wire-btn--xs {
|
||||
min-height: 1.5rem;
|
||||
padding-inline: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.wire-btn--size-sm,
|
||||
.wire-btn--sm {
|
||||
min-height: 2.125rem;
|
||||
padding-inline: 0.625rem;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.wire-btn--size-default,
|
||||
.wire-btn--md {
|
||||
min-height: 2.5rem;
|
||||
padding-inline: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.wire-btn--size-lg,
|
||||
.wire-btn--lg {
|
||||
min-height: 2.75rem;
|
||||
padding-inline: 0.875rem;
|
||||
font-size: 0.925rem;
|
||||
}
|
||||
.wire-btn--size-icon,
|
||||
.wire-btn--size-icon-xs,
|
||||
.wire-btn--size-icon-sm,
|
||||
.wire-btn--size-icon-lg,
|
||||
.wire-btn--icon,
|
||||
.wire-btn--icon-xs,
|
||||
.wire-btn--icon-sm,
|
||||
.wire-btn--icon-lg {
|
||||
flex: none;
|
||||
padding: 0;
|
||||
}
|
||||
.wire-btn--size-icon,
|
||||
.wire-btn--icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.wire-btn--size-icon-xs,
|
||||
.wire-btn--icon-xs {
|
||||
width: 1.5rem;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
.wire-btn--size-icon-sm,
|
||||
.wire-btn--icon-sm {
|
||||
width: 1.75rem;
|
||||
min-height: 1.75rem;
|
||||
}
|
||||
.wire-btn--size-icon-lg,
|
||||
.wire-btn--icon-lg {
|
||||
width: 2.25rem;
|
||||
min-height: 2.25rem;
|
||||
}
|
||||
.wire-btn__icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex: none;
|
||||
}
|
||||
.wire-btn__label {
|
||||
font-weight: 650;
|
||||
}
|
||||
.wire-btn:hover > .wire-btn__tooltip,
|
||||
.wire-btn:focus-visible > .wire-btn__tooltip {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.wire-action {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
||||
@@ -27,8 +27,16 @@ test("bundled UI assets are discoverable and readable", () => {
|
||||
});
|
||||
|
||||
test("global UI CSS stays below its migration ratchet", () => {
|
||||
expect(gzipSync(new TextEncoder().encode(uiCss())).length).toBeLessThanOrEqual(12_672);
|
||||
expect(uiCss()).not.toContain(".wire-switch");
|
||||
const css = uiCss();
|
||||
expect(gzipSync(new TextEncoder().encode(css)).length).toBeLessThanOrEqual(9_338);
|
||||
for (const localOrRemovedFamily of [
|
||||
".wire-switch",
|
||||
".wire-alert",
|
||||
".wire-card",
|
||||
".wire-dropdown",
|
||||
]) {
|
||||
expect(css).not.toContain(localOrRemovedFamily);
|
||||
}
|
||||
});
|
||||
|
||||
test("every bundled component carries local styles", () => {
|
||||
|
||||
+3
-842
@@ -151,226 +151,6 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.wire-btn {
|
||||
position: relative;
|
||||
--wire-btn-color: var(--wire-color-primary);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--wire-radius-sm);
|
||||
padding: 0 0.75rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
min-height: 2rem;
|
||||
transition:
|
||||
color var(--wire-motion-base) var(--wire-ease-standard),
|
||||
border-color var(--wire-motion-base) var(--wire-ease-standard),
|
||||
background var(--wire-motion-base) var(--wire-ease-standard),
|
||||
box-shadow var(--wire-motion-base) var(--wire-ease-standard),
|
||||
transform var(--wire-motion-base) var(--wire-ease-emphasized);
|
||||
}
|
||||
.wire-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.wire-btn:focus-visible {
|
||||
outline: 2px solid var(--wire-color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.wire-btn--color-primary {
|
||||
--wire-btn-color: var(--wire-color-primary);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
}
|
||||
.wire-btn--color-secondary {
|
||||
--wire-btn-color: var(--wire-color-muted);
|
||||
--wire-btn-contrast: var(--wire-color-bg);
|
||||
}
|
||||
.wire-btn--color-success {
|
||||
--wire-btn-color: var(--wire-color-success);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
}
|
||||
.wire-btn--color-warning {
|
||||
--wire-btn-color: var(--wire-color-warning);
|
||||
--wire-btn-contrast: var(--wire-color-bg);
|
||||
}
|
||||
.wire-btn--color-danger {
|
||||
--wire-btn-color: var(--wire-color-danger);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
}
|
||||
.wire-btn--color-info {
|
||||
--wire-btn-color: var(--wire-color-info);
|
||||
--wire-btn-contrast: var(--wire-color-primary-contrast);
|
||||
}
|
||||
.wire-btn--variant-default,
|
||||
.wire-btn--variant-solid,
|
||||
.wire-btn--default,
|
||||
.wire-btn--solid,
|
||||
.wire-btn--primary {
|
||||
color: var(--wire-btn-contrast);
|
||||
background: var(--wire-btn-color);
|
||||
box-shadow:
|
||||
0 1px 2px color-mix(in srgb, black 20%, transparent),
|
||||
0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 72%, transparent);
|
||||
}
|
||||
.wire-btn--variant-default:hover,
|
||||
.wire-btn--variant-solid:hover,
|
||||
.wire-btn--default:hover,
|
||||
.wire-btn--solid:hover,
|
||||
.wire-btn--primary:hover {
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 84%, black);
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
0 0.35rem 0.9rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent),
|
||||
0 0 0 1px color-mix(in srgb, var(--wire-btn-color) 82%, transparent);
|
||||
}
|
||||
.wire-btn--variant-outline,
|
||||
.wire-btn--outline {
|
||||
color: var(--wire-btn-color);
|
||||
background: transparent;
|
||||
border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
|
||||
}
|
||||
.wire-btn--variant-outline:hover,
|
||||
.wire-btn--outline:hover {
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
|
||||
border-color: var(--wire-btn-color);
|
||||
}
|
||||
.wire-btn--variant-destructive,
|
||||
.wire-btn--danger,
|
||||
.wire-btn--destructive {
|
||||
color: var(--wire-btn-color);
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 12%, transparent);
|
||||
border-color: color-mix(in srgb, var(--wire-btn-color) 28%, transparent);
|
||||
}
|
||||
.wire-btn--danger,
|
||||
.wire-btn--destructive {
|
||||
--wire-btn-color: var(--wire-color-danger);
|
||||
}
|
||||
.wire-btn--variant-destructive:hover,
|
||||
.wire-btn--danger:hover,
|
||||
.wire-btn--destructive:hover {
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
|
||||
}
|
||||
.wire-btn--variant-ghost,
|
||||
.wire-btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--wire-btn-color);
|
||||
}
|
||||
.wire-btn--variant-ghost:hover,
|
||||
.wire-btn--ghost:hover {
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 10%, transparent);
|
||||
}
|
||||
.wire-btn--variant-secondary,
|
||||
.wire-btn--secondary {
|
||||
color: var(--wire-color-text);
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 10%, var(--wire-color-surface));
|
||||
border-color: color-mix(in srgb, var(--wire-btn-color) 24%, var(--wire-color-border));
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
.wire-btn--variant-secondary:hover,
|
||||
.wire-btn--secondary:hover {
|
||||
color: var(--wire-btn-color);
|
||||
border-color: color-mix(in srgb, var(--wire-btn-color) 55%, var(--wire-color-border));
|
||||
background: color-mix(in srgb, var(--wire-btn-color) 15%, var(--wire-color-surface));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.wire-btn--variant-link,
|
||||
.wire-btn--link {
|
||||
min-height: auto;
|
||||
padding: 0;
|
||||
color: var(--wire-btn-color);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
text-underline-offset: 0.22em;
|
||||
}
|
||||
.wire-btn--variant-link:hover,
|
||||
.wire-btn--link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.wire-btn:disabled,
|
||||
.wire-btn[aria-busy="true"] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.58;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.wire-btn--size-xs,
|
||||
.wire-btn--xs {
|
||||
min-height: 1.5rem;
|
||||
padding-inline: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.wire-btn--size-sm,
|
||||
.wire-btn--sm {
|
||||
min-height: 2.125rem;
|
||||
padding-inline: 0.625rem;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.wire-btn--size-default,
|
||||
.wire-btn--md {
|
||||
min-height: 2.5rem;
|
||||
padding-inline: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.wire-btn--size-lg,
|
||||
.wire-btn--lg {
|
||||
min-height: 2.75rem;
|
||||
padding-inline: 0.875rem;
|
||||
font-size: 0.925rem;
|
||||
}
|
||||
.wire-btn--size-icon,
|
||||
.wire-btn--size-icon-xs,
|
||||
.wire-btn--size-icon-sm,
|
||||
.wire-btn--size-icon-lg,
|
||||
.wire-btn--icon,
|
||||
.wire-btn--icon-xs,
|
||||
.wire-btn--icon-sm,
|
||||
.wire-btn--icon-lg {
|
||||
flex: none;
|
||||
padding: 0;
|
||||
}
|
||||
.wire-btn--size-icon,
|
||||
.wire-btn--icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.wire-btn--size-icon-xs,
|
||||
.wire-btn--icon-xs {
|
||||
width: 1.5rem;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
.wire-btn--size-icon-sm,
|
||||
.wire-btn--icon-sm {
|
||||
width: 1.75rem;
|
||||
min-height: 1.75rem;
|
||||
}
|
||||
.wire-btn--size-icon-lg,
|
||||
.wire-btn--icon-lg {
|
||||
width: 2.25rem;
|
||||
min-height: 2.25rem;
|
||||
}
|
||||
.wire-btn__icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex: none;
|
||||
}
|
||||
.wire-btn__label {
|
||||
font-weight: 650;
|
||||
}
|
||||
.wire-btn:hover > .wire-btn__tooltip,
|
||||
.wire-btn:focus-visible > .wire-btn__tooltip {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
/* --- Inputs --------------------------------------------------------------- */
|
||||
.wire-input {
|
||||
width: 100%;
|
||||
@@ -438,120 +218,6 @@
|
||||
background: var(--wire-color-warning);
|
||||
color: var(--wire-color-primary-contrast);
|
||||
}
|
||||
/* --- Alert ---------------------------------------------------------------- */
|
||||
.wire-alert {
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-left-width: 4px;
|
||||
border-radius: var(--wire-radius-sm);
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
.wire-alert__title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
.wire-alert__title:empty {
|
||||
display: none;
|
||||
}
|
||||
.wire-alert__body {
|
||||
color: var(--wire-color-muted);
|
||||
}
|
||||
.wire-alert--info {
|
||||
border-left-color: var(--wire-color-info);
|
||||
}
|
||||
.wire-alert--success {
|
||||
border-left-color: var(--wire-color-success);
|
||||
}
|
||||
.wire-alert--danger {
|
||||
border-left-color: var(--wire-color-danger);
|
||||
}
|
||||
.wire-alert--warning {
|
||||
border-left-color: var(--wire-color-warning);
|
||||
}
|
||||
.wire-alert--brand {
|
||||
border-color: var(--wire-color-border);
|
||||
}
|
||||
.wire-alert--rich {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
min-height: 6.125rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-left-width: 1px;
|
||||
border-radius: 1rem;
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
.wire-alert--rich .wire-alert__icon {
|
||||
display: grid;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
place-items: center;
|
||||
border-radius: 0.75rem;
|
||||
color: var(--wire-color-primary);
|
||||
background: color-mix(in srgb, var(--wire-color-primary) 22%, transparent);
|
||||
}
|
||||
.wire-alert--rich .wire-alert__icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.wire-alert--rich .wire-alert__body {
|
||||
margin: 0.25rem 0 0;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.wire-alert__dismiss {
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wire-alert__dismiss:hover {
|
||||
background: color-mix(in srgb, currentColor 8%, transparent);
|
||||
}
|
||||
/* --- Card ----------------------------------------------------------------- */
|
||||
.wire-card {
|
||||
background: var(--wire-color-surface);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius);
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
color: var(--wire-color-text);
|
||||
transition:
|
||||
border-color var(--wire-motion-base),
|
||||
box-shadow var(--wire-motion-slow),
|
||||
transform var(--wire-motion-slow) var(--wire-ease-emphasized);
|
||||
}
|
||||
.wire-card--padding-none {
|
||||
padding: 0;
|
||||
}
|
||||
.wire-card--padding-sm {
|
||||
padding: 1rem;
|
||||
}
|
||||
.wire-card--padding-md {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.wire-card--padding-lg {
|
||||
padding: 2rem;
|
||||
}
|
||||
.wire-card--glass {
|
||||
background: color-mix(in srgb, var(--wire-color-surface) 78%, transparent);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.wire-card--elevated {
|
||||
box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--wire-color-text) 9%, transparent);
|
||||
}
|
||||
.wire-card--interactive:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border));
|
||||
box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--wire-color-text) 11%, transparent);
|
||||
}
|
||||
/* --- Avatar --------------------------------------------------------------- */
|
||||
.wire-avatar {
|
||||
width: 2.5rem;
|
||||
@@ -825,8 +491,7 @@
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.wire-input:disabled,
|
||||
.wire-btn:disabled {
|
||||
.wire-input:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.58;
|
||||
}
|
||||
@@ -1110,7 +775,7 @@
|
||||
[data-component] :where(input, select, textarea, .wire-input, .wire-select) {
|
||||
transition-duration: var(--wire-motion-fast);
|
||||
}
|
||||
[data-component] :where(.wire-card, .wire-panel, .wire-surface, .wire-catalog-card, article) {
|
||||
[data-component] :where(.wire-panel, .wire-surface, .wire-catalog-card, article) {
|
||||
transition-property: border-color, background-color, box-shadow, transform;
|
||||
transition-duration: var(--wire-motion-base);
|
||||
transition-timing-function: var(--wire-ease-emphasized);
|
||||
@@ -1129,7 +794,7 @@
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
[data-component] :where(.wire-card, .wire-catalog-card, article):has(a):hover {
|
||||
[data-component] :where(.wire-catalog-card, article):has(a):hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 0.12);
|
||||
}
|
||||
@@ -1140,334 +805,11 @@
|
||||
color: var(--wire-color-text);
|
||||
font-family: var(--wrn-font-sans, inherit);
|
||||
}
|
||||
.wire-next--rounded,
|
||||
.wire-next--image img {
|
||||
border-radius: var(--wire-radius-md);
|
||||
}
|
||||
.wire-next--container {
|
||||
width: min(100%, 72rem);
|
||||
margin-inline: auto;
|
||||
}
|
||||
.wire-next--columns,
|
||||
.wire-next--grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--wire-next-columns, 2), minmax(0, 1fr));
|
||||
}
|
||||
.wire-next--columns-1 {
|
||||
--wire-next-columns: 1;
|
||||
}
|
||||
.wire-next--columns-2 {
|
||||
--wire-next-columns: 2;
|
||||
}
|
||||
.wire-next--columns-3 {
|
||||
--wire-next-columns: 3;
|
||||
}
|
||||
.wire-next--columns-4 {
|
||||
--wire-next-columns: 4;
|
||||
}
|
||||
.wire-next--gap-sm {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.wire-next--gap-md {
|
||||
gap: 1rem;
|
||||
}
|
||||
.wire-next--gap-lg {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.wire-next--layout-splitter {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
}
|
||||
.wire-next--custom-scrollbar {
|
||||
max-height: 24rem;
|
||||
overflow: auto;
|
||||
scrollbar-color: var(--wire-color-primary) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.wire-next--link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
color: var(--wire-color-primary);
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
.wire-next--divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: var(--wire-color-muted);
|
||||
}
|
||||
.wire-next--divider::before,
|
||||
.wire-next--divider::after {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
background: var(--wire-color-border);
|
||||
content: "";
|
||||
}
|
||||
.wire-next--divider-vertical {
|
||||
width: 1px;
|
||||
min-height: 4rem;
|
||||
background: var(--wire-color-border);
|
||||
}
|
||||
.wire-next--kbd {
|
||||
display: inline-flex;
|
||||
min-width: 1.8rem;
|
||||
justify-content: center;
|
||||
padding: 0.25rem 0.45rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 0.4rem;
|
||||
background: var(--wire-color-surface-2);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"] > .wire-action {
|
||||
display: flex;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) :is(.wire-btn) {
|
||||
height: 100%;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> :is(.wire-btn, .wire-action):not(:first-child) {
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-btn:not(:first-child):not(:last-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-action:not(:first-child):not(:last-child)
|
||||
> .wire-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-btn:first-child:not(:last-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-action:first-child:not(:last-child)
|
||||
> .wire-btn {
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-btn:last-child:not(:first-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
|
||||
> .wire-action:last-child:not(:first-child)
|
||||
> .wire-btn {
|
||||
border-start-start-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> :is(.wire-btn, .wire-action):not(:first-child) {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-btn:not(:first-child):not(:last-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-action:not(:first-child):not(:last-child)
|
||||
> .wire-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-btn:first-child:not(:last-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-action:first-child:not(:last-child)
|
||||
> .wire-btn {
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-btn:last-child:not(:first-child),
|
||||
.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
|
||||
> .wire-action:last-child:not(:first-child)
|
||||
> .wire-btn {
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
.wire-next--button-group > :is(.wire-btn, .wire-action):focus-within,
|
||||
.wire-next--button-group > .wire-btn:focus-visible {
|
||||
z-index: 2;
|
||||
}
|
||||
.wire-next--button-group[data-selectable="true"] > .wire-btn[data-selected="true"] {
|
||||
z-index: 1;
|
||||
border-color: var(--wire-component-color);
|
||||
background: color-mix(in srgb, var(--wire-component-color) 16%, var(--wire-color-surface));
|
||||
color: var(--wire-component-color);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.wire-next--button-group[data-responsive="true"] > :is(.wire-btn, .wire-action) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"] > .wire-action > .wire-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> :is(.wire-btn, .wire-action) {
|
||||
margin-top: -1px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> :is(.wire-btn, .wire-action):first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn,
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> .wire-action
|
||||
> .wire-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:first-child,
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> .wire-action:first-child
|
||||
> .wire-btn {
|
||||
border-start-start-radius: var(--wire-radius-sm);
|
||||
border-start-end-radius: var(--wire-radius-sm);
|
||||
}
|
||||
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:last-child,
|
||||
.wire-next--button-group[data-responsive="true"][data-attached="true"]
|
||||
> .wire-action:last-child
|
||||
> .wire-btn {
|
||||
border-end-start-radius: var(--wire-radius-sm);
|
||||
border-end-end-radius: var(--wire-radius-sm);
|
||||
}
|
||||
}
|
||||
.wire-next--toast,
|
||||
.wire-next--device-frame,
|
||||
.wire-next--tree-view,
|
||||
.wire-next--timeline,
|
||||
.wire-next--carousel,
|
||||
.wire-next--list,
|
||||
.wire-next--list-group,
|
||||
.wire-next--legend-indicator,
|
||||
.wire-next--rating,
|
||||
.wire-next--styled-icon,
|
||||
.wire-next--confetti,
|
||||
.wire-next--data-map,
|
||||
.wire-next--chart,
|
||||
.wire-next--map,
|
||||
.wire-next--drag-and-drop,
|
||||
.wire-next--file-upload,
|
||||
.wire-next--toast-notifications,
|
||||
.wire-next--clipboard,
|
||||
.wire-next--copy-markup {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
}
|
||||
.wire-next--collapse.wire-next--size-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.wire-next--collapse.wire-next--size-lg {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
.wire-next--chat-bubble.wire-next--size-sm {
|
||||
--wire-chat-padding: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.wire-next--chat-bubble.wire-next--size-lg {
|
||||
--wire-chat-padding: 1.25rem;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
.wire-next__card-media--overlay {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 18rem;
|
||||
}
|
||||
.wire-next__card-media--overlay > img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.wire-next__card-media--overlay {
|
||||
aspect-ratio: 4 / 3;
|
||||
min-height: 16rem;
|
||||
}
|
||||
}
|
||||
.wire-next--alert-soft {
|
||||
border-color: color-mix(in srgb, var(--wire-alert-color) 45%, var(--wire-color-border));
|
||||
background: var(--wire-alert-soft);
|
||||
}
|
||||
.wire-next--alert-soft .wire-next__alert-title,
|
||||
.wire-next--alert-soft .wire-next__alert-icon,
|
||||
.wire-next--alert-soft .wire-next__alert-actions a {
|
||||
color: var(--wire-alert-color);
|
||||
}
|
||||
.wire-next--alert-solid {
|
||||
border-color: var(--wire-alert-color);
|
||||
background: var(--wire-alert-color);
|
||||
color: white;
|
||||
}
|
||||
.wire-next--alert.wire-next--alert-solid
|
||||
:is(
|
||||
.wire-next__alert-title,
|
||||
.wire-next__alert-body > p,
|
||||
.wire-next__alert-body li,
|
||||
.wire-next__alert-actions a,
|
||||
.wire-next__alert-icon
|
||||
) {
|
||||
color: currentColor;
|
||||
}
|
||||
.wire-next--alert-solid[data-color="light"] {
|
||||
color: #18181b;
|
||||
}
|
||||
.wire-next--alert-solid[data-color="warning"] {
|
||||
color: #18181b;
|
||||
}
|
||||
.wire-next--alert-bordered {
|
||||
border-color: var(--wire-alert-color);
|
||||
background: var(--wire-color-surface);
|
||||
}
|
||||
.wire-next--alert-bordered .wire-next__alert-title,
|
||||
.wire-next--alert-bordered .wire-next__alert-icon,
|
||||
.wire-next--alert-bordered .wire-next__alert-actions a {
|
||||
color: var(--wire-alert-color);
|
||||
}
|
||||
.wire-next--alert-accent {
|
||||
border-color: color-mix(in srgb, var(--wire-alert-color) 35%, var(--wire-color-border));
|
||||
border-left: 4px solid var(--wire-alert-color);
|
||||
background: var(--wire-alert-soft);
|
||||
}
|
||||
.wire-next--alert-accent .wire-next__alert-title,
|
||||
.wire-next--alert-accent .wire-next__alert-icon,
|
||||
.wire-next--alert-accent .wire-next__alert-actions a {
|
||||
color: var(--wire-alert-color);
|
||||
}
|
||||
.wire-next__toggle-count-control--start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.wire-next__toggle-count-control--center {
|
||||
justify-content: center;
|
||||
}
|
||||
.wire-next__toggle-count-control--end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.wire-next p {
|
||||
margin: 0;
|
||||
color: var(--wire-color-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.wire-next__items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.wire-next__items > span {
|
||||
padding: 0.3rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: var(--wire-color-surface-2);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@keyframes wire-badge-ping {
|
||||
75%,
|
||||
100% {
|
||||
@@ -1475,69 +817,6 @@
|
||||
transform: scale(1.45);
|
||||
}
|
||||
}
|
||||
.wire-next details {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
}
|
||||
.wire-next summary {
|
||||
padding: 0.75rem;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
.wire-next details > div {
|
||||
padding: 0 0.75rem 0.75rem;
|
||||
color: var(--wire-color-muted);
|
||||
}
|
||||
.wire-next__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
.wire-next progress {
|
||||
width: 100%;
|
||||
accent-color: var(--wire-color-primary);
|
||||
}
|
||||
.wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input,
|
||||
.wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input {
|
||||
border-color: var(--wire-color-danger);
|
||||
}
|
||||
.wire-next--navbar,
|
||||
.wire-next--mega-menu,
|
||||
.wire-next--nav,
|
||||
.wire-next--tabs,
|
||||
.wire-next--sidebar,
|
||||
.wire-next--scrollspy,
|
||||
.wire-next--breadcrumb,
|
||||
.wire-next--pagination,
|
||||
.wire-next--stepper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.wire-next--vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
.wire-next nav a,
|
||||
.wire-next--navbar a,
|
||||
.wire-next--mega-menu a,
|
||||
.wire-next--nav a,
|
||||
.wire-next--tabs a,
|
||||
.wire-next--sidebar a,
|
||||
.wire-next--scrollspy a,
|
||||
.wire-next--breadcrumb a,
|
||||
.wire-next--pagination a,
|
||||
.wire-next--stepper a {
|
||||
padding: 0.5rem 0.7rem;
|
||||
border-radius: 0.5rem;
|
||||
color: var(--wire-color-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.wire-next a[aria-current="page"] {
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
.wire-footer--columns-1 {
|
||||
--wire-footer-columns: 1;
|
||||
}
|
||||
@@ -1607,124 +886,6 @@
|
||||
font: inherit;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* Reusable dropdown and account menu */
|
||||
.wire-dropdown {
|
||||
position: relative;
|
||||
flex: none;
|
||||
}
|
||||
.wire-dropdown > summary {
|
||||
display: inline-flex;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.3rem 0.45rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.7rem;
|
||||
color: var(--wire-color-text);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
.wire-dropdown > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.wire-dropdown > summary:hover,
|
||||
.wire-dropdown[open] > summary {
|
||||
border-color: var(--wire-color-border);
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
.wire-dropdown__chevron {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
color: var(--wire-color-muted);
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
.wire-dropdown[open] .wire-dropdown__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.wire-dropdown__panel {
|
||||
position: absolute;
|
||||
z-index: 85;
|
||||
top: calc(100% + 0.5rem);
|
||||
right: 0;
|
||||
display: grid;
|
||||
width: max-content;
|
||||
min-width: 14rem;
|
||||
max-width: min(22rem, calc(100vw - 2rem));
|
||||
padding: 0.5rem;
|
||||
gap: 0.15rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 0.8rem;
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-lg);
|
||||
animation: wire-component-enter 170ms ease both;
|
||||
}
|
||||
.wire-dropdown--start .wire-dropdown__panel {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.wire-dropdown__panel hr {
|
||||
width: 100%;
|
||||
margin: 0.35rem 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--wire-color-border);
|
||||
}
|
||||
.wire-dropdown__heading {
|
||||
padding: 0.5rem 0.6rem 0.25rem;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.wire-dropdown__item {
|
||||
display: flex;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.55rem 0.6rem;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
border-radius: 0.55rem;
|
||||
color: inherit;
|
||||
font-size: 0.75rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.wire-dropdown__item:hover {
|
||||
background: var(--wire-color-surface-2);
|
||||
}
|
||||
.wire-dropdown__item > span:first-child:not(:last-child) {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex: none;
|
||||
color: var(--wire-color-muted);
|
||||
}
|
||||
.wire-dropdown__item > span:nth-child(2) {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.wire-dropdown__item strong {
|
||||
font-weight: 550;
|
||||
}
|
||||
.wire-dropdown__item small {
|
||||
margin-top: 0.1rem;
|
||||
color: var(--wire-color-muted);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.wire-dropdown__item--danger {
|
||||
color: var(--wire-color-danger);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.wire-dropdown__panel {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
width: auto;
|
||||
max-height: calc(100dvh - 2rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.wire-auth-form form > .wire-next--field,
|
||||
.wire-auth-form form > .wire-field {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user