RC-90 | Add support for bar-input controls in item sheets

This commit is contained in:
Oliver-Akins 2025-01-12 00:19:39 -07:00
parent 8d92040230
commit 5c78523791
12 changed files with 140 additions and 13 deletions

View file

@ -0,0 +1,47 @@
.ripcrypt > .window-content .pill-bar {
display: flex;
flex-direction: row;
width: var(--pill-width, 100px);
border: 2px solid var(--pill-border);
border-radius: var(--pill-border-radius, 999px);
background: var(--pill-background);
align-items: center;
gap: 8px;
> input {
color: var(--pill-input-text);
background: var(--pill-input-background);
border-radius: var(--pill-border-radius, 999px);
flex-shrink: 1;
flex-grow: 1;
min-width: 50px;
max-width: unset;
width: initial;
flex-basis: 50px;
text-align: center;
&:disabled {
color: var(--pill-input-disabled-text);
background: var(--pill-input-disabled-background);
}
}
> :first-child {
order: 1;
}
> :last-child {
order: 3;
}
&::after {
display: block;
content: "";
order: 1;
position: relative;
width: 2px;
height: 75%;
transform: rotate(30deg);
background: var(--pill-divider, var(--pill-border));
z-index: 1;
}
}

View file

@ -2,8 +2,8 @@
--input-background: var(--string-tags-input-background);
display: grid;
grid-template-columns: 1fr min-content;
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-template-columns: minmax(0, 1fr) min-content;
grid-template-rows: repeat(2, min-content);
border: var(--string-tags-border);