ASCII text
1
x-hbox {
2
display: flex;
3
flex-direction: row;
4
gap: var(--gap-box);
5
}
6
x-vbox {
8
display: flex;
9
flex-direction: column;
10
gap: var(--gap-box);
11
}
12
x-hbox.homogenous > *, x-hbox.homogenous > * {
14
flex: 1;
15
}
16
x-hbox.wrap, x-vbox.wrap {
18
flex-wrap: wrap;
19
}
20
x-rows {
22
display: grid;
23
grid-template-columns: repeat(auto-fill, minmax(var(--preferred-width), 1fr));
24
gap: var(--gap-box);
25
}
26
x-buttonbox {
28
display: flex;
29
flex-flow: row wrap;
30
gap: var(--gap-buttonbox);
31
}
32
x-buttonbox.buttonbox-right {
34
justify-content: flex-end;
35
}
36
x-buttonbox :is(button, .button, input[type="button"], input[type="submit"]) {
38
margin: 0;
39
}
40
:is(x-hbox, x-vbox, x-buttonbox, x-rows).nopad {
42
gap: 0;
43
}
44
x-frame {
46
max-width: var(--width, 100%);
47
width: min(var(--width), 100%);
48
min-height: var(--height, 100%);
49
max-height: var(--height, 100%);
50
height: min(var(--height), 100%);
51
padding: var(--padding, 0);
52
margin: var(--margin, 0 auto);
53
display: block;
54
}
55