localize legacy UI component styles
This commit is contained in:
@@ -506,11 +506,12 @@ whichever behaviour was chosen.
|
||||
every page. Only **42 of 108** components had a local `style {}` block.
|
||||
|
||||
**Result so far.** The maintained library now has **102 of 102** components
|
||||
with local styles. After removing the unused `.wire-switch` family, built
|
||||
`ui.css` is **76,348 bytes / 12,531 gzipped**, but
|
||||
it still contains a parallel legacy component layer, including `.wire-next`,
|
||||
`.wire-btn`, `.wire-dropdown`, and related families. Local-style coverage alone
|
||||
does not complete this item; global component selectors must reach zero.
|
||||
with local styles. Built `ui.css` is **54,016 bytes / 9,338 gzipped** after
|
||||
removing the unused `.wire-switch`, `.wire-alert`, and `.wire-card` families and
|
||||
localizing the live `.wire-btn`, `.wire-dropdown`, ButtonGroup, alert-variant,
|
||||
card-overlay, and related rules. The remaining `.wire-next` field and component
|
||||
rules still form a parallel legacy layer. Local-style coverage alone does not
|
||||
complete this item; global component selectors must reach zero.
|
||||
|
||||
**Change.** Done in groups with the visual contract regenerated after each
|
||||
migration.
|
||||
@@ -519,8 +520,8 @@ migration.
|
||||
|
||||
```bash
|
||||
ls packages/ui/components/*.wrn | wc -l # 102
|
||||
grep -lE '^[[:space:]]*style[[:space:]]*\{' packages/ui/components/*.wrn | wc -l # 102
|
||||
bun run build && gzip -c examples/basic-app/dist/ui.css | wc -c # 12531
|
||||
grep -lE '^\s*style\s*\{' packages/ui/components/*.wrn | wc -l # 102
|
||||
bun run build && gzip -c examples/basic-app/dist/ui.css | wc -c # 9338
|
||||
```
|
||||
|
||||
Add a ratchet test asserting the gzipped size only ever decreases, so this
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"releaseLine": "0.8",
|
||||
"artifacts": {
|
||||
"packages/ui/components/Accordion.wrn": "98e6897d7dee2045fbc66e23d8a0b5051114d43f1c75234a2a6c5165132eb706",
|
||||
"packages/ui/components/AdvancedSelect.wrn": "af4254f1882458ce0631bd82e56cd09e540113c0636db2d98756ae730c1b535b",
|
||||
"packages/ui/components/AdvancedSelect.wrn": "f8c7ff1c1727ce0e3e132536cdaefe71779936e9303694f763e78699f3ec827a",
|
||||
"packages/ui/components/AnnouncementBar.wrn": "903bfd9421a7350c923ace3315cedc5763fe3e6b7b54b660a0f26281d46a8754",
|
||||
"packages/ui/components/AuthForm.wrn": "a0f34c233c5d52e2dd11429dacab98e7cd77bec8ae60652aff48f7dab8506893",
|
||||
"packages/ui/components/AuthSplitLayout.wrn": "42736850c94f2df0bdc5c733530731fb5df0abd1aedfc6962f8f5774c18f3428",
|
||||
@@ -11,14 +11,14 @@
|
||||
"packages/ui/components/BackToTop.wrn": "b12c56ec8b7aabad68cbdc47f4b3237e2c21a61398f0aa51f9add6229b7357cd",
|
||||
"packages/ui/components/Blockquote.wrn": "3e0845286c631151847d19980631c2636d37bc4bd2e95c6b045a9f51fe01fdc5",
|
||||
"packages/ui/components/Breadcrumb.wrn": "5ab85d273ce72e4d5b87907975bb33f0249a34f2f87f01dc0812e827f775eed9",
|
||||
"packages/ui/components/ButtonGroup.wrn": "1685e6ec6e58a5f1ff8aa05c704ba033438af34c04f603b1851677dccde9c66a",
|
||||
"packages/ui/components/ButtonGroup.wrn": "fd1db987cedcf956e0d279a620eedbf2dcc88b7b7eb25f029d556fd5e363b273",
|
||||
"packages/ui/components/CTASection.wrn": "2d2241d4f1018cfd2f8ea1ddd5fa8c8fcb8d1bbb2d4e4498cb9f39ff47a3801c",
|
||||
"packages/ui/components/Card.wrn": "659fbc12e446e87043d6bf62f51efbc05b451bdfc7210ede041f68a991dadf30",
|
||||
"packages/ui/components/Carousel.wrn": "e599710161b4c4fd67a0bb45b5621a82b000362951e7a9e9153d55c8a8cc1dfd",
|
||||
"packages/ui/components/Card.wrn": "c7e48fba8a0062a46b54dd4ce0ea4fbae8b3a05c416db30992db46d82819882a",
|
||||
"packages/ui/components/Carousel.wrn": "549fc881e453cc8f74de69cd4716042a4306ead33de99fd19c3e7abe5d79e1f9",
|
||||
"packages/ui/components/Chart.wrn": "d2cedd0e02818d0908708c2d07a495c629fad13fa021a2e035d5023dc5c367de",
|
||||
"packages/ui/components/ChatBubble.wrn": "ddc0e63a055d59535002eeba5b3527c51fb0989d62bffba2f53dceedfeb771dc",
|
||||
"packages/ui/components/ChatBubble.wrn": "7b323b35005aaba91b39e6cfaf819f49932428173223c4809374f14cf8e1d3fc",
|
||||
"packages/ui/components/Clipboard.wrn": "03fcfb9786008fd7fb0a7719c3279711253afc5bbb9b0262b805dd553c44da8a",
|
||||
"packages/ui/components/Collapse.wrn": "5205eefaf96d9a4c143779ce9f6329537b1c807eff47dbcf62fcc9bcdefaef06",
|
||||
"packages/ui/components/Collapse.wrn": "9a4e6c9cec95342479eeef4df842dc283f8a3fd93eb6ad871b5992fb98f11656",
|
||||
"packages/ui/components/ColorPicker.wrn": "af0f962555b581df75a6dffb3056d394708c29d93ad18afa86e31707b505a807",
|
||||
"packages/ui/components/Columns.wrn": "e01496aa53025444cc51671efcce40d6d24d86775b2cbb1ee0def1862bb6315d",
|
||||
"packages/ui/components/Combobox.wrn": "b6ae8cf667ed98f3fc4dc141bde797daf7e3daacf7df6c9a7c25a3a143432f62",
|
||||
@@ -27,9 +27,9 @@
|
||||
"packages/ui/components/ContextMenu.wrn": "33fb0f60268b12411d66e3031dc0557cb231149e7a8d83340b4b453a6e37cb09",
|
||||
"packages/ui/components/CustomScrollbar.wrn": "fedb2ab06cc2cf9499c130590945ca6971a3edfb60407b6658ef7756e4be9823",
|
||||
"packages/ui/components/DataMap.wrn": "7d0384d89126d947a6c2d640c93ab047aecca7931569d11b54d82dbb6639ff0e",
|
||||
"packages/ui/components/DataTable.wrn": "68ad07f111e4fa5f2fc3547acc9558fa21720f8b27ac3b91494eb456dc796edc",
|
||||
"packages/ui/components/DataTable.wrn": "dc4453df72181311658b1227fabc4f147e0097ecbfe122ff695142642819534e",
|
||||
"packages/ui/components/DatePicker.wrn": "a9edc2faf30a0e998e964e9290ee6bd9512787aa5dc19f360bcce029796d7e1c",
|
||||
"packages/ui/components/DeviceFrame.wrn": "1151090854901710971808f42dd2f1dcbd102e6afef63a5afecd01d4b3f0797d",
|
||||
"packages/ui/components/DeviceFrame.wrn": "805aeed1abd321649c31dcf5c9e4e3465e16303a837645924437c75985befc26",
|
||||
"packages/ui/components/Divider.wrn": "f5cc449611022b3d3eedf982ae48f6b1a289db7855cc9b6ea0248dcda807ffb3",
|
||||
"packages/ui/components/DragAndDrop.wrn": "d97a7598dd659ecf72b8649af0b23902dc14d80c19df53dc63ecc5c7b69b8952",
|
||||
"packages/ui/components/Drawer.wrn": "e6e2778e515361a3475439ab91b6efec3895efab2a4dfdcfb535713f656cc7ed",
|
||||
@@ -38,7 +38,7 @@
|
||||
"packages/ui/components/FeatureGrid.wrn": "9e3c0440d08c6982861d3e732eeb20f1023413a58243844dfb9d7033bac13d2b",
|
||||
"packages/ui/components/FeatureIconCard.wrn": "620f66a36ca5c8ad8f2ea09e94dc4471e4146189c42149e9d31db58501281639",
|
||||
"packages/ui/components/FileInput.wrn": "c235385a70eb7cb985083597570474c0cb70463c03cab651e452199b2c9abf25",
|
||||
"packages/ui/components/FileUploadProgress.wrn": "7498eb70c6f79cf4334a3a973280d9667040a85479453afba428ae7c5225fd8c",
|
||||
"packages/ui/components/FileUploadProgress.wrn": "1abdb7a1a181abc6b9b62a0bd45066236f7e1d8fa5139e7fb478b08997f000d9",
|
||||
"packages/ui/components/Footer.wrn": "956a504682760c4e5f4d26091830c4fc0f8d0c12f7cdf7e69c94539685c67763",
|
||||
"packages/ui/components/Grid.wrn": "d089d8657298b4d33993ba4bf7b581f816c65db513d8e48cf1fdd18da19e05a8",
|
||||
"packages/ui/components/Hero.wrn": "e4e39dcd59c273192c7e4136f6583279e20b0956bcba4cfbc3f6e01a1fade152",
|
||||
@@ -63,7 +63,7 @@
|
||||
"packages/ui/components/Navbar.wrn": "7989d25819312014c0a0855370b80b925d53ff735d682fdb61e9677a9dacb7f3",
|
||||
"packages/ui/components/PageHeader.wrn": "59264dfb26a132fd3eb265c4374f9fcae781f30dd94a087c57e6e8256717cf14",
|
||||
"packages/ui/components/Pagination.wrn": "9ceb74745b159150b015bbbb1974c68e14a7d4b92bd03491cb23b8855aa07983",
|
||||
"packages/ui/components/PinInput.wrn": "8245f8afadae85efc2cff9d629d9f0a6785fdbc80ea656ca6fc4daf4031c40d5",
|
||||
"packages/ui/components/PinInput.wrn": "6909e196bb1060aeec4877594a180da3ff1dad694671756fcdb0f58f548a63d3",
|
||||
"packages/ui/components/Popover.wrn": "f2996f00fad3e35fba2d48e70af17f592854eb73b9e8c6a83526aa78c4e41293",
|
||||
"packages/ui/components/PortalDashboard.wrn": "0ca5228b0793572270d9cbac1eb5e5e5a77a3886a3a4a7ce7126d5e7b467fd4e",
|
||||
"packages/ui/components/PreferenceSwitcher.wrn": "61d01f507b3f6b4bab55d2642beb9fee5edf0662997b44443142b43c828ea239",
|
||||
@@ -85,15 +85,15 @@
|
||||
"packages/ui/components/TimePicker.wrn": "b3f24767448cb04ddd56e06540b52e5cc32ea21ed4acd2a5eb4f7e46f8617aba",
|
||||
"packages/ui/components/Timeline.wrn": "686a37ebc62732842846d004491336970db94945bca942f226097d863e159d1c",
|
||||
"packages/ui/components/Toaster.wrn": "288b2b370f65bf823e8d2a6f8c8cf66972332b8174303d33ebe8546d5e1d52c4",
|
||||
"packages/ui/components/ToggleCount.wrn": "ee706b191fcfc01dd7bde0ddba1940af400ed2d01b639016134699963b1000ab",
|
||||
"packages/ui/components/ToggleCount.wrn": "c4365eb10cc9993d8b6b212268341904dda27718360113826a925a617e279479",
|
||||
"packages/ui/components/TogglePassword.wrn": "c644436c3435b8a9b39c6b7a9f75671b76ca74f273952ce5c032ca169b0470e5",
|
||||
"packages/ui/components/TreeView.wrn": "c354fce9c5e81fed6eec4089dfd2a7f6bb84eb189c94efc88e00251efdc12c0b",
|
||||
"packages/ui/components/Typography.wrn": "1b4d1b91dee0ff522d27c566becc3bc49bd9ec979ae6334e6a15fca5d88eccac",
|
||||
"packages/ui/components/WysiwygEditor.wrn": "e4d341f7f49b53301d790bcebe7f3788fea4ea4b72ba8bf0a422e006ceeb54eb",
|
||||
"packages/ui/components/alert.wrn": "2eee24aeaa345fce462439c9286dce737716218c783c3a136e55483b8d925ffd",
|
||||
"packages/ui/components/alert.wrn": "74ef969d629f68a83a9cb8a42bb4924411f048bfa9e7b451b9243bd451ac8323",
|
||||
"packages/ui/components/avatar.wrn": "3e2fc145949f6141246ad0b274403b9149ccc28b6a8e80285b396345097c818a",
|
||||
"packages/ui/components/badge.wrn": "61fbc7a9cab484287025b214e181dab7662280a766e64c1af80248ab7dbea121",
|
||||
"packages/ui/components/button.wrn": "f11220a1359ab3d4f33ea4ba3e36dc7e330d38a4b44ed1bd95aa498a435117a1",
|
||||
"packages/ui/components/button.wrn": "a42df46d19c8375ceed059f593b555f77414042bbaf777afcf16d276e133db15",
|
||||
"packages/ui/components/checkbox.wrn": "e59a56e6acfe3756da8c2b827fee938fa4158250ae587a62936b3df0b988f28c",
|
||||
"packages/ui/components/input.wrn": "b75df32f470f16e4ee858368264a60bac582b3525eca1c0910250ee3a0a56b76",
|
||||
"packages/ui/components/progress.wrn": "61b01ba575d35691e3dfebfcb03ccd1c6b79f1df1c0d41857ec3b01944081a5d",
|
||||
@@ -104,6 +104,6 @@
|
||||
"packages/ui/components/switch.wrn": "205591decf50f1f7d190d8da6a3d969e0fd17ec5300c968fb005608da6a6e596",
|
||||
"packages/ui/components/textarea.wrn": "00b48d4dbbd5aedfe51e8e932d124b3e222383360c738ac3b15fbbf478481ff7",
|
||||
"packages/ui/components/tooltip.wrn": "40028dfbb17f6725c76c2e091af9c30ea4db6aa4dea919d38f53874ea70315d1",
|
||||
"packages/ui/ui.css": "2cdf2ab533f0d2ad5dc9576be701408a6388b985ebac5c34e61d71a9de521a94"
|
||||
"packages/ui/ui.css": "b37e9434e74478cc4d7f3ccb7bee8e2f629827edc09dadbe29e6c299d6913a36"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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