WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

localize legacy UI component styles

Browse Source
This commit is contained in:
Clintchiz
2026-08-09 21:07:10 +05:30
parent 3f5ec8696f
commit 6859b5c4ff
17 changed files with 512 additions and 866 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/ButtonGroup.wrn
+114 -1
View File
@@ -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);
}
}
}
}