steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00
Code Activity

Imrpove form rendering

Browse source
This commit is contained in:
Steffo 2023-02-17 05:05:34 +01:00
parent c1c170cada
commit 09f486112f
Signed by: steffo
GPG key ID: 2A24051445686895
4 changed files with 50 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
examples/index.html
View file

@ -1698,6 +1698,45 @@
<p>
Now, please enter some information about yourself:
</p>
<div class="form-flex-choice">
<span>Interests</span>
<div>
<label>
<input type="checkbox" name="interests"> Living
</label>
<label>
<input type="checkbox" name="interests"> Sleeping
</label>
<label>
<input type="checkbox" name="interests"> Not dying
</label>
<label>
<input type="checkbox" name="interests"> Conspiracy theories
</label>
<label>
<input type="checkbox" name="interests"> Witchcraft
</label>
<label>
<input type="checkbox" name="interests"> Weird shenanigans
</label>
</div>
<span></span>
</div>
<div class="form-flex-choice">
<span>Riches</span>
<div>
<label>
<input type="radio" name="riches"> None
</label>
<label>
<input type="radio" name="riches"> Few
</label>
<label>
<input type="radio" name="riches"> Many
</label>
</div>
<span></span>
</div>
<label>
<span>Lazyness 0%</span>
<input type="range">

12
src/rulesets/base.less
View file

@ -783,18 +783,20 @@
justify-content: stretch;
> @{element-paragraph} {
> @{form-flex-content} {
margin: 0.5em 0;
}
> @{element-label} {
> @{form-flex-choice} {
display: flex;
gap: 1ex;
min-height: 1.675em; // Not sure why this specific number, but it looks good...
> @{all}:first-child, > @{all}:last-child {
margin: auto 0;
flex-basis: 15%;
flex-grow: 0;
flex-shrink: 0;
.use-font-group(label);
.map-hsl-group(current; primary);
@ -803,9 +805,10 @@
> @{all} {
flex-grow: 1;
display: flex;
justify-content: start;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
gap: 4px;
gap: 1ex;
}
> @{all}:first-child {
@ -817,7 +820,6 @@
text-align: left;
display: block;
}
}
}

5
src/selectorsets/module.less
View file

@ -96,9 +96,8 @@
@input-button: ~".input-button";
@form-flex: ~'.form-flex';
@element-label: ~'.element-label';
@element-span: ~'.element-span';
@element-paragraph: ~'.element-paragraph';
@form-flex-content: ~'.form-flex-content';
@form-flex-choice: ~'.form-flex-choice';
@text-anchor: ~".text-anchor";
@text-idiomatic: ~".text-idiomatic";

5
src/selectorsets/root.less
View file

@ -96,9 +96,8 @@
@input-button: ~'input[type="button"], button';
@form-flex: ~'.form-flex';
@element-label: ~'label';
@element-span: ~'span';
@element-paragraph: ~'p';
@form-flex-content: ~':is(.form-flex-content, p)';
@form-flex-choice: ~':is(.form-flex-choice, label)';
@text-anchor: ~"a";
@text-idiomatic: ~"i";