yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More improvements on style of draw widget.

Browse source
This commit is contained in:
Yaro Kasear 2025-12-31 13:45:06 -06:00
parent 3864f27cc6
commit 86d24ccb43
4 changed files with 54 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

87
inventory/static/css/components/draw.css
View file

@ -3,13 +3,55 @@
}
.grid-widget {
container-type: inline-size;
min-width: 375px;
}
.grid-widget [data-toolbar].toolbar {
display: grid !important;
grid-template-rows: auto auto;
align-content: start;
gap: .5rem;
overflow: visible;
}
.grid-widget [data-toolbar] .toolbar-row {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
gap: .5rem;
min-width: 0;
min-height: 0;
position: relative;
isolation: isolate;
flex-wrap: nowrap;
}
.grid-widget [data-toolbar] .toolbar-row--primary,
.grid-widget [data-toolbar] .toolbar-row--secondary {
overflow-x: auto;
overflow-y: hidden;
}
.grid-widget [data-toolbar] .toolbar-row--secondary {
opacity: .95;
}
/* WIDE: 1 row */
@container (min-width: 725px){
.grid-widget [data-toolbar].toolbar{
display: flex !important;
flex-wrap: nowrap;
align-items: center;
gap: .5rem;
overflow-x: auto;
overflow-y: hidden;
}
.grid-widget [data-toolbar] .toolbar-row{
display: contents;
}
.grid-widget [data-toolbar] .toolbar-row--primary,
.grid-widget [data-toolbar] .toolbar-row--secondary{
overflow: visible;
}
}
.grid-widget .grid-wrap {
@ -54,45 +96,12 @@
inset: 0;
}
.grid-widget [data-toolbar] {
flex: 0 0 auto;
width: min(100%, var(--grid-maxw, 100%));
box-sizing: border-box;
margin: 0 auto;
max-width: 100%;
position: relative;
z-index: 10;
overflow: visible;
}
.grid-widget [data-dot] {
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
}
.grid-widget .toolbar {
display: grid;
gap: .5rem;
}
.grid-widget .toolbar-row {
display: flex;
align-items: center;
gap: .5rem;
min-width: 0;
flex-wrap: nowrap;
}
.toolbar-row--primary {
overflow-x: auto;
}
.toolbar-row--secondary {
overflow-x: auto;
opacity: .95;
}
.grid-widget .toolbar-range {
width: 120px;
margin: 0;
@ -211,4 +220,4 @@
.grid-widget [data-toolbar] {
max-width: var(--grid-maxw, 100%);
width: 100%;
}
}