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> <p>
Now, please enter some information about yourself: Now, please enter some information about yourself:
</p> </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> <label>
<span>Lazyness 0%</span> <span>Lazyness 0%</span>
<input type="range"> <input type="range">

12
src/rulesets/base.less
View file

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

5
src/selectorsets/module.less
View file

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

5
src/selectorsets/root.less
View file

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