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

🔧 Add checkboxes and radios (#20 and #21)

Browse source
This commit is contained in:
Steffo 2021-07-29 20:58:28 +02:00 committed by Stefano Pigozzi
parent f6f889d7c7
commit eb0a1afacb
12 changed files with 1024 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
index.html
View file

@ -381,22 +381,17 @@
<h3>
Inputs
</h3>
<p>
Bluelib allows for the easy creation of forms:
</p>
<form>
<label for="input-text">Text</label>
<input id="input-text" type="text" placeholder="All fields have a customizable placeholder" required/>
<label for="input-password">Password</label>
<input id="input-password" type="password" placeholder="Field type determines how input is displayed" required/>
<label for="input-email">Email</label>
<input id="input-email" type="email" placeholder="Fields where the input is invalid are colored red"/>
<label for="input-phone">Phone</label>
<input id="input-phone" type="tel" placeholder="Optional fields have italic text"/>
<label for="input-disabled">Fax</label>
<input id="input-disabled" type="text" placeholder="Disabled fields have a dashed underline" disabled required/>
<label for="input-select">Shirt size</label>
<select id="input-select">
<label for="input-fax">Fax</label>
<input id="input-fax" type="text" placeholder="Disabled fields have a dashed underline" disabled required/>
<label for="input-size">Shirt size</label>
<select id="input-size" required>
<optgroup label="Smaller">
<option>XXS</option>
<option>XS</option>
@ -409,8 +404,8 @@
<option>XXL</option>
</optgroup>
</select>
<label for="input-multiple">Colors</label>
<select id="input-multiple" multiple>
<label for="input-colors">Colors</label>
<select id="input-colors" multiple required>
<option>Red</option>
<option>Yellow</option>
<option>Green</option>
@ -421,8 +416,93 @@
</optgroup>
</select>
<div class="form-row">
<input id="input-reset" type="reset" value="Reset"/>
<input id="input-submit" type="submit" value="Submit"/>
<input id="input-reset-1" type="reset" value="Reset"/>
<input id="input-submit-1" type="submit" value="Submit"/>
</div>
</form>
</section>
<section>
<h3>
Groups
</h3>
<p>
Form inputs can be grouped together.
</p>
<form>
<label for="input-mood">Mood</label>
<div id="input-mood" class="form-group">
<label>
<input type="radio" name="input-mood" value="happy"/>
Happy
</label>
<label>
<input type="radio" name="input-mood" value="sad"/>
Sad
</label>
<label>
<input type="radio" name="input-mood" value="angry"/>
Angry
</label>
</div>
</form>
<p>
They automatically wrap if the inputs don't fit on a single line.
</p>
<form>
<label for="input-pets">Pets</label>
<div id="input-pets" class="form-group">
<label>
<input type="checkbox" name="input-pets" value="cats"/>
Cats
</label>
<label>
<input type="checkbox" name="input-pets" value="dogs"/>
Dogs
</label>
<label>
<input type="checkbox" name="input-pets" value="sneks"/>
Sneks
</label>
<label>
<input type="checkbox" name="input-pets" value="bunnies"/>
Bunnies
</label>
<label>
<input type="checkbox" name="input-pets" value="frogs"/>
Frogs
</label>
<label>
<input type="checkbox" name="input-pets" value="ants"/>
Ants
</label>
<label>
<input type="checkbox" name="input-pets" value="parrots"/>
Parrots
</label>
</div>
</form>
<p>
Labels can be made to fill the whole line, forcing a wrap.
</p>
<form>
<label for="input-roman">Fav. roman numeral</label>
<div id="input-roman" class="form-group">
<label class="form-group-row">
<input type="radio" name="input-roman" value="i" required/>
I (1)
</label>
<label class="form-group-row">
<input type="radio" name="input-roman" value="v" required/>
V (5)
</label>
<label class="form-group-row">
<input type="radio" name="input-roman" value="x" required/>
X (10)
</label>
<label class="form-group-row">
<input type="radio" name="input-roman" value="i" required/>
I (1)
</label>
</div>
</form>
</section>

116
src/rules/skeleton.less vendored
View file

@ -311,10 +311,14 @@
font-style: italic;
}
// If their contents fail validation, they should be recolored red
&:invalid:not(:placeholder-shown) {
.bluelib-color(@hex-red);
}
// Color the elements based on validation
// Temporarily disabled due to some browser quirks
// &:invalid {
// .bluelib-color(@hex-red);
// }
// &:valid {
// .bluelib-color(@hex-lime)
// }
// If the browser wants the focus to be more appearent, don't draw an ugly focus ring and let every element define a better way
&:focus-visible {
@ -427,6 +431,72 @@
}
}
@{input-checkbox}, @{input-radio} {
// Disable the default browser style
appearance: none;
// Make the element feel clickable
cursor: pointer;
// Set a fixed size
width: 24px;
height: 24px;
// Override the default border width
border-width: 2px;
// Prepare the element to display something inside
display: inline-flex;
justify-content: center;
align-items: center;
&::before {
// Force the creation of a pseudo-element inside
display: block;
content: "";
width: 14px;
height: 14px;
}
// If the element is checked, display it
&:checked::before {
background-color: @b9;
}
&:hover:checked::before {
background-color: @bB;
}
&:focus:checked::before {
background-color: @bD;
}
&:active:checked::before {
background-color: @bD;
}
}
// Checkbox buttons denote that multiple options can be selected
@{input-checkbox} {
// Checkboxes should be square
border-radius: 4px;
&::before {
border-radius: 2px;
}
}
// Radio buttons denote that only an option can be selected
@{input-radio} {
// Radios should be round
border-radius: 100%;
&::before {
border-radius: 100%;
}
}
/// ===== Forms =====
/// Forms are containers where interactable elements are contained.
/// Every interactable is split in two parts: a label on the left and the control on the right.
@ -456,8 +526,14 @@
// They should be right-aligned
justify-self: end;
text-align: right;
// Give the labels the accent color
.bluelib-color(@hex-accent);
// And make them slightly bold
font-weight: 500;
}
@{form-input} {
// Inputs are on the right column of the grid
grid-column: 2;
@ -466,6 +542,38 @@
width: 100%;
}
// Groups are similar to form-inputs, but may contain multiple inputs inside them
@{form-group} {
grid-column: 2;
display: flex;
gap: 8px 16px;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
width: 100%;
background-color: @b0;
padding: 6px;
border-radius: 4px;
@{form-group-label} {
display: flex;
gap: 6px;
justify-content: center;
align-items: center;
// Align text to the left
text-align: left;
}
@{form-group-row} {
flex-basis: 100%;
justify-content: start;
}
}
// An element filling a whole row of a form
// Useful for adding buttons or similar flow interruptions
@{form-row} {

78
src/targets/paper.module.css
View file

@ -347,11 +347,6 @@
.bluelib .input:optional::placeholder {
font-style: italic;
}
.bluelib .input:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
}
.bluelib .input:focus-visible {
outline: none;
}
@ -419,6 +414,52 @@
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.bluelib .input-checkbox,
.bluelib .input-radio {
appearance: none;
cursor: pointer;
width: 24px;
height: 24px;
border-width: 2px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.bluelib .input-checkbox::before,
.bluelib .input-radio::before {
display: block;
content: "";
width: 14px;
height: 14px;
}
.bluelib .input-checkbox:checked::before,
.bluelib .input-radio:checked::before {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.9);
}
.bluelib .input-checkbox:hover:checked::before,
.bluelib .input-radio:hover:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 10), calc(var(--bluelib-color-g) - 10), calc(var(--bluelib-color-b) - 10), 1);
}
.bluelib .input-checkbox:focus:checked::before,
.bluelib .input-radio:focus:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1);
}
.bluelib .input-checkbox:active:checked::before,
.bluelib .input-radio:active:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1);
}
.bluelib .input-checkbox {
border-radius: 4px;
}
.bluelib .input-checkbox::before {
border-radius: 2px;
}
.bluelib .input-radio {
border-radius: 100%;
}
.bluelib .input-radio::before {
border-radius: 100%;
}
.bluelib .form {
display: grid;
align-items: center;
@ -430,12 +471,39 @@
grid-column: 1;
justify-self: end;
text-align: right;
--bluelib-color-r: 24;
--bluelib-color-g: 24;
--bluelib-color-b: 24;
font-weight: 500;
}
.bluelib .form .form-input {
grid-column: 2;
justify-self: stretch;
width: 100%;
}
.bluelib .form .form-group {
grid-column: 2;
display: flex;
gap: 8px 16px;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
width: 100%;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
padding: 6px;
border-radius: 4px;
}
.bluelib .form .form-group .form-group-label {
display: flex;
gap: 6px;
justify-content: center;
align-items: center;
text-align: left;
}
.bluelib .form .form-group .form-group-row {
flex-basis: 100%;
justify-content: start;
}
.bluelib .form .form-row {
grid-column-start: 1;
grid-column-end: 3;

2
src/targets/paper.module.css.map
View file

File diff suppressed because one or more lines are too long

408
src/targets/paper.root.css
View file

@ -447,6 +447,14 @@ body input[type="reset"],
.bluelib input[type="reset"],
body .input-button,
.bluelib .input-button,
body input[type="checkbox"],
.bluelib input[type="checkbox"],
body .input-checkbox,
.bluelib .input-checkbox,
body input[type="radio"],
.bluelib input[type="radio"],
body .input-radio,
.bluelib .input-radio,
body .input,
.bluelib .input {
font: inherit;
@ -503,6 +511,14 @@ body input[type="reset"][disabled],
.bluelib input[type="reset"][disabled],
body .input-button[disabled],
.bluelib .input-button[disabled],
body input[type="checkbox"][disabled],
.bluelib input[type="checkbox"][disabled],
body .input-checkbox[disabled],
.bluelib .input-checkbox[disabled],
body input[type="radio"][disabled],
.bluelib input[type="radio"][disabled],
body .input-radio[disabled],
.bluelib .input-radio[disabled],
body .input[disabled],
.bluelib .input[disabled],
body .input-field .status-disabled,
@ -553,6 +569,14 @@ body input[type="reset"] .status-disabled,
.bluelib input[type="reset"] .status-disabled,
body .input-button .status-disabled,
.bluelib .input-button .status-disabled,
body input[type="checkbox"] .status-disabled,
.bluelib input[type="checkbox"] .status-disabled,
body .input-checkbox .status-disabled,
.bluelib .input-checkbox .status-disabled,
body input[type="radio"] .status-disabled,
.bluelib input[type="radio"] .status-disabled,
body .input-radio .status-disabled,
.bluelib .input-radio .status-disabled,
body .input .status-disabled,
.bluelib .input .status-disabled {
border-style: dashed;
@ -605,6 +629,14 @@ body input[type="reset"]::placeholder,
.bluelib input[type="reset"]::placeholder,
body .input-button::placeholder,
.bluelib .input-button::placeholder,
body input[type="checkbox"]::placeholder,
.bluelib input[type="checkbox"]::placeholder,
body .input-checkbox::placeholder,
.bluelib .input-checkbox::placeholder,
body input[type="radio"]::placeholder,
.bluelib input[type="radio"]::placeholder,
body .input-radio::placeholder,
.bluelib .input-radio::placeholder,
body .input::placeholder,
.bluelib .input::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
@ -658,6 +690,14 @@ body input[type="reset"]:hover,
.bluelib input[type="reset"]:hover,
body .input-button:hover,
.bluelib .input-button:hover,
body input[type="checkbox"]:hover,
.bluelib input[type="checkbox"]:hover,
body .input-checkbox:hover,
.bluelib .input-checkbox:hover,
body input[type="radio"]:hover,
.bluelib input[type="radio"]:hover,
body .input-radio:hover,
.bluelib .input-radio:hover,
body .input:hover,
.bluelib .input:hover {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
@ -712,6 +752,14 @@ body input[type="reset"]:hover::placeholder,
.bluelib input[type="reset"]:hover::placeholder,
body .input-button:hover::placeholder,
.bluelib .input-button:hover::placeholder,
body input[type="checkbox"]:hover::placeholder,
.bluelib input[type="checkbox"]:hover::placeholder,
body .input-checkbox:hover::placeholder,
.bluelib .input-checkbox:hover::placeholder,
body input[type="radio"]:hover::placeholder,
.bluelib input[type="radio"]:hover::placeholder,
body .input-radio:hover::placeholder,
.bluelib .input-radio:hover::placeholder,
body .input:hover::placeholder,
.bluelib .input:hover::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
@ -764,6 +812,14 @@ body input[type="reset"]:focus,
.bluelib input[type="reset"]:focus,
body .input-button:focus,
.bluelib .input-button:focus,
body input[type="checkbox"]:focus,
.bluelib input[type="checkbox"]:focus,
body .input-checkbox:focus,
.bluelib .input-checkbox:focus,
body input[type="radio"]:focus,
.bluelib input[type="radio"]:focus,
body .input-radio:focus,
.bluelib .input-radio:focus,
body .input:focus,
.bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
@ -818,6 +874,14 @@ body input[type="reset"]:focus::placeholder,
.bluelib input[type="reset"]:focus::placeholder,
body .input-button:focus::placeholder,
.bluelib .input-button:focus::placeholder,
body input[type="checkbox"]:focus::placeholder,
.bluelib input[type="checkbox"]:focus::placeholder,
body .input-checkbox:focus::placeholder,
.bluelib .input-checkbox:focus::placeholder,
body input[type="radio"]:focus::placeholder,
.bluelib input[type="radio"]:focus::placeholder,
body .input-radio:focus::placeholder,
.bluelib .input-radio:focus::placeholder,
body .input:focus::placeholder,
.bluelib .input:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
@ -870,6 +934,14 @@ body input[type="reset"][disabled]:hover,
.bluelib input[type="reset"][disabled]:hover,
body .input-button[disabled]:hover,
.bluelib .input-button[disabled]:hover,
body input[type="checkbox"][disabled]:hover,
.bluelib input[type="checkbox"][disabled]:hover,
body .input-checkbox[disabled]:hover,
.bluelib .input-checkbox[disabled]:hover,
body input[type="radio"][disabled]:hover,
.bluelib input[type="radio"][disabled]:hover,
body .input-radio[disabled]:hover,
.bluelib .input-radio[disabled]:hover,
body .input[disabled]:hover,
.bluelib .input[disabled]:hover,
body .input-field .status-disabled:hover,
@ -920,6 +992,14 @@ body input[type="reset"] .status-disabled:hover,
.bluelib input[type="reset"] .status-disabled:hover,
body .input-button .status-disabled:hover,
.bluelib .input-button .status-disabled:hover,
body input[type="checkbox"] .status-disabled:hover,
.bluelib input[type="checkbox"] .status-disabled:hover,
body .input-checkbox .status-disabled:hover,
.bluelib .input-checkbox .status-disabled:hover,
body input[type="radio"] .status-disabled:hover,
.bluelib input[type="radio"] .status-disabled:hover,
body .input-radio .status-disabled:hover,
.bluelib .input-radio .status-disabled:hover,
body .input .status-disabled:hover,
.bluelib .input .status-disabled:hover,
body .input-field[disabled]:focus,
@ -970,6 +1050,14 @@ body input[type="reset"][disabled]:focus,
.bluelib input[type="reset"][disabled]:focus,
body .input-button[disabled]:focus,
.bluelib .input-button[disabled]:focus,
body input[type="checkbox"][disabled]:focus,
.bluelib input[type="checkbox"][disabled]:focus,
body .input-checkbox[disabled]:focus,
.bluelib .input-checkbox[disabled]:focus,
body input[type="radio"][disabled]:focus,
.bluelib input[type="radio"][disabled]:focus,
body .input-radio[disabled]:focus,
.bluelib .input-radio[disabled]:focus,
body .input[disabled]:focus,
.bluelib .input[disabled]:focus,
body .input-field .status-disabled:focus,
@ -1020,6 +1108,14 @@ body input[type="reset"] .status-disabled:focus,
.bluelib input[type="reset"] .status-disabled:focus,
body .input-button .status-disabled:focus,
.bluelib .input-button .status-disabled:focus,
body input[type="checkbox"] .status-disabled:focus,
.bluelib input[type="checkbox"] .status-disabled:focus,
body .input-checkbox .status-disabled:focus,
.bluelib .input-checkbox .status-disabled:focus,
body input[type="radio"] .status-disabled:focus,
.bluelib input[type="radio"] .status-disabled:focus,
body .input-radio .status-disabled:focus,
.bluelib .input-radio .status-disabled:focus,
body .input .status-disabled:focus,
.bluelib .input .status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
@ -1074,6 +1170,14 @@ body input[type="reset"][disabled]:hover::placeholder,
.bluelib input[type="reset"][disabled]:hover::placeholder,
body .input-button[disabled]:hover::placeholder,
.bluelib .input-button[disabled]:hover::placeholder,
body input[type="checkbox"][disabled]:hover::placeholder,
.bluelib input[type="checkbox"][disabled]:hover::placeholder,
body .input-checkbox[disabled]:hover::placeholder,
.bluelib .input-checkbox[disabled]:hover::placeholder,
body input[type="radio"][disabled]:hover::placeholder,
.bluelib input[type="radio"][disabled]:hover::placeholder,
body .input-radio[disabled]:hover::placeholder,
.bluelib .input-radio[disabled]:hover::placeholder,
body .input[disabled]:hover::placeholder,
.bluelib .input[disabled]:hover::placeholder,
body .input-field .status-disabled:hover::placeholder,
@ -1124,6 +1228,14 @@ body input[type="reset"] .status-disabled:hover::placeholder,
.bluelib input[type="reset"] .status-disabled:hover::placeholder,
body .input-button .status-disabled:hover::placeholder,
.bluelib .input-button .status-disabled:hover::placeholder,
body input[type="checkbox"] .status-disabled:hover::placeholder,
.bluelib input[type="checkbox"] .status-disabled:hover::placeholder,
body .input-checkbox .status-disabled:hover::placeholder,
.bluelib .input-checkbox .status-disabled:hover::placeholder,
body input[type="radio"] .status-disabled:hover::placeholder,
.bluelib input[type="radio"] .status-disabled:hover::placeholder,
body .input-radio .status-disabled:hover::placeholder,
.bluelib .input-radio .status-disabled:hover::placeholder,
body .input .status-disabled:hover::placeholder,
.bluelib .input .status-disabled:hover::placeholder,
body .input-field[disabled]:focus::placeholder,
@ -1174,6 +1286,14 @@ body input[type="reset"][disabled]:focus::placeholder,
.bluelib input[type="reset"][disabled]:focus::placeholder,
body .input-button[disabled]:focus::placeholder,
.bluelib .input-button[disabled]:focus::placeholder,
body input[type="checkbox"][disabled]:focus::placeholder,
.bluelib input[type="checkbox"][disabled]:focus::placeholder,
body .input-checkbox[disabled]:focus::placeholder,
.bluelib .input-checkbox[disabled]:focus::placeholder,
body input[type="radio"][disabled]:focus::placeholder,
.bluelib input[type="radio"][disabled]:focus::placeholder,
body .input-radio[disabled]:focus::placeholder,
.bluelib .input-radio[disabled]:focus::placeholder,
body .input[disabled]:focus::placeholder,
.bluelib .input[disabled]:focus::placeholder,
body .input-field .status-disabled:focus::placeholder,
@ -1224,6 +1344,14 @@ body input[type="reset"] .status-disabled:focus::placeholder,
.bluelib input[type="reset"] .status-disabled:focus::placeholder,
body .input-button .status-disabled:focus::placeholder,
.bluelib .input-button .status-disabled:focus::placeholder,
body input[type="checkbox"] .status-disabled:focus::placeholder,
.bluelib input[type="checkbox"] .status-disabled:focus::placeholder,
body .input-checkbox .status-disabled:focus::placeholder,
.bluelib .input-checkbox .status-disabled:focus::placeholder,
body input[type="radio"] .status-disabled:focus::placeholder,
.bluelib input[type="radio"] .status-disabled:focus::placeholder,
body .input-radio .status-disabled:focus::placeholder,
.bluelib .input-radio .status-disabled:focus::placeholder,
body .input .status-disabled:focus::placeholder,
.bluelib .input .status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
@ -1276,6 +1404,14 @@ body input[type="reset"]:optional,
.bluelib input[type="reset"]:optional,
body .input-button:optional,
.bluelib .input-button:optional,
body input[type="checkbox"]:optional,
.bluelib input[type="checkbox"]:optional,
body .input-checkbox:optional,
.bluelib .input-checkbox:optional,
body input[type="radio"]:optional,
.bluelib input[type="radio"]:optional,
body .input-radio:optional,
.bluelib .input-radio:optional,
body .input:optional,
.bluelib .input:optional,
body .input-field:optional::placeholder,
@ -1326,64 +1462,18 @@ body input[type="reset"]:optional::placeholder,
.bluelib input[type="reset"]:optional::placeholder,
body .input-button:optional::placeholder,
.bluelib .input-button:optional::placeholder,
body input[type="checkbox"]:optional::placeholder,
.bluelib input[type="checkbox"]:optional::placeholder,
body .input-checkbox:optional::placeholder,
.bluelib .input-checkbox:optional::placeholder,
body input[type="radio"]:optional::placeholder,
.bluelib input[type="radio"]:optional::placeholder,
body .input-radio:optional::placeholder,
.bluelib .input-radio:optional::placeholder,
body .input:optional::placeholder,
.bluelib .input:optional::placeholder {
font-style: italic;
}
body .input-field:invalid:not(:placeholder-shown),
.bluelib .input-field:invalid:not(:placeholder-shown),
body input[type="color"]:invalid:not(:placeholder-shown),
.bluelib input[type="color"]:invalid:not(:placeholder-shown),
body input[type="date"]:invalid:not(:placeholder-shown),
.bluelib input[type="date"]:invalid:not(:placeholder-shown),
body input[type="datetime-local"]:invalid:not(:placeholder-shown),
.bluelib input[type="datetime-local"]:invalid:not(:placeholder-shown),
body input[type="email"]:invalid:not(:placeholder-shown),
.bluelib input[type="email"]:invalid:not(:placeholder-shown),
body input[type="file"]:invalid:not(:placeholder-shown),
.bluelib input[type="file"]:invalid:not(:placeholder-shown),
body input[type="image"]:invalid:not(:placeholder-shown),
.bluelib input[type="image"]:invalid:not(:placeholder-shown),
body input[type="month"]:invalid:not(:placeholder-shown),
.bluelib input[type="month"]:invalid:not(:placeholder-shown),
body input[type="number"]:invalid:not(:placeholder-shown),
.bluelib input[type="number"]:invalid:not(:placeholder-shown),
body input[type="password"]:invalid:not(:placeholder-shown),
.bluelib input[type="password"]:invalid:not(:placeholder-shown),
body input[type="search"]:invalid:not(:placeholder-shown),
.bluelib input[type="search"]:invalid:not(:placeholder-shown),
body input[type="tel"]:invalid:not(:placeholder-shown),
.bluelib input[type="tel"]:invalid:not(:placeholder-shown),
body input[type="text"]:invalid:not(:placeholder-shown),
.bluelib input[type="text"]:invalid:not(:placeholder-shown),
body input[type="time"]:invalid:not(:placeholder-shown),
.bluelib input[type="time"]:invalid:not(:placeholder-shown),
body input[type="url"]:invalid:not(:placeholder-shown),
.bluelib input[type="url"]:invalid:not(:placeholder-shown),
body input[type="week"]:invalid:not(:placeholder-shown),
.bluelib input[type="week"]:invalid:not(:placeholder-shown),
body select:not([multiple]):invalid:not(:placeholder-shown),
.bluelib select:not([multiple]):invalid:not(:placeholder-shown),
body .input-select:invalid:not(:placeholder-shown),
.bluelib .input-select:invalid:not(:placeholder-shown),
body select[multiple]:invalid:not(:placeholder-shown),
.bluelib select[multiple]:invalid:not(:placeholder-shown),
body .input-multiselect:invalid:not(:placeholder-shown),
.bluelib .input-multiselect:invalid:not(:placeholder-shown),
body button:invalid:not(:placeholder-shown),
.bluelib button:invalid:not(:placeholder-shown),
body input[type="submit"]:invalid:not(:placeholder-shown),
.bluelib input[type="submit"]:invalid:not(:placeholder-shown),
body input[type="reset"]:invalid:not(:placeholder-shown),
.bluelib input[type="reset"]:invalid:not(:placeholder-shown),
body .input-button:invalid:not(:placeholder-shown),
.bluelib .input-button:invalid:not(:placeholder-shown),
body .input:invalid:not(:placeholder-shown),
.bluelib .input:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
}
body .input-field:focus-visible,
.bluelib .input-field:focus-visible,
body input[type="color"]:focus-visible,
@ -1432,6 +1522,14 @@ body input[type="reset"]:focus-visible,
.bluelib input[type="reset"]:focus-visible,
body .input-button:focus-visible,
.bluelib .input-button:focus-visible,
body input[type="checkbox"]:focus-visible,
.bluelib input[type="checkbox"]:focus-visible,
body .input-checkbox:focus-visible,
.bluelib .input-checkbox:focus-visible,
body input[type="radio"]:focus-visible,
.bluelib input[type="radio"]:focus-visible,
body .input-radio:focus-visible,
.bluelib .input-radio:focus-visible,
body .input:focus-visible,
.bluelib .input:focus-visible {
outline: none;
@ -1674,6 +1772,100 @@ body .input-button .status-disabled:active,
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
body input[type="checkbox"],
.bluelib input[type="checkbox"],
body .input-checkbox,
.bluelib .input-checkbox,
body input[type="radio"],
.bluelib input[type="radio"],
body .input-radio,
.bluelib .input-radio {
appearance: none;
cursor: pointer;
width: 24px;
height: 24px;
border-width: 2px;
display: inline-flex;
justify-content: center;
align-items: center;
}
body input[type="checkbox"]::before,
.bluelib input[type="checkbox"]::before,
body .input-checkbox::before,
.bluelib .input-checkbox::before,
body input[type="radio"]::before,
.bluelib input[type="radio"]::before,
body .input-radio::before,
.bluelib .input-radio::before {
display: block;
content: "";
width: 14px;
height: 14px;
}
body input[type="checkbox"]:checked::before,
.bluelib input[type="checkbox"]:checked::before,
body .input-checkbox:checked::before,
.bluelib .input-checkbox:checked::before,
body input[type="radio"]:checked::before,
.bluelib input[type="radio"]:checked::before,
body .input-radio:checked::before,
.bluelib .input-radio:checked::before {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.9);
}
body input[type="checkbox"]:hover:checked::before,
.bluelib input[type="checkbox"]:hover:checked::before,
body .input-checkbox:hover:checked::before,
.bluelib .input-checkbox:hover:checked::before,
body input[type="radio"]:hover:checked::before,
.bluelib input[type="radio"]:hover:checked::before,
body .input-radio:hover:checked::before,
.bluelib .input-radio:hover:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 10), calc(var(--bluelib-color-g) - 10), calc(var(--bluelib-color-b) - 10), 1);
}
body input[type="checkbox"]:focus:checked::before,
.bluelib input[type="checkbox"]:focus:checked::before,
body .input-checkbox:focus:checked::before,
.bluelib .input-checkbox:focus:checked::before,
body input[type="radio"]:focus:checked::before,
.bluelib input[type="radio"]:focus:checked::before,
body .input-radio:focus:checked::before,
.bluelib .input-radio:focus:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1);
}
body input[type="checkbox"]:active:checked::before,
.bluelib input[type="checkbox"]:active:checked::before,
body .input-checkbox:active:checked::before,
.bluelib .input-checkbox:active:checked::before,
body input[type="radio"]:active:checked::before,
.bluelib input[type="radio"]:active:checked::before,
body .input-radio:active:checked::before,
.bluelib .input-radio:active:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1);
}
body input[type="checkbox"],
.bluelib input[type="checkbox"],
body .input-checkbox,
.bluelib .input-checkbox {
border-radius: 4px;
}
body input[type="checkbox"]::before,
.bluelib input[type="checkbox"]::before,
body .input-checkbox::before,
.bluelib .input-checkbox::before {
border-radius: 2px;
}
body input[type="radio"],
.bluelib input[type="radio"],
body .input-radio,
.bluelib .input-radio {
border-radius: 100%;
}
body input[type="radio"]::before,
.bluelib input[type="radio"]::before,
body .input-radio::before,
.bluelib .input-radio::before {
border-radius: 100%;
}
body form,
.bluelib form,
body .form,
@ -1684,10 +1876,10 @@ body .form,
column-gap: 8px;
grid-template-columns: minmax(auto, 1fr) 5fr;
}
body form label,
.bluelib form label,
body .form label,
.bluelib .form label,
body form > label,
.bluelib form > label,
body .form > label,
.bluelib .form > label,
body form .form-label,
.bluelib form .form-label,
body .form .form-label,
@ -1695,11 +1887,15 @@ body .form .form-label,
grid-column: 1;
justify-self: end;
text-align: right;
--bluelib-color-r: 24;
--bluelib-color-g: 24;
--bluelib-color-b: 24;
font-weight: 500;
}
body form .input-field,
.bluelib form .input-field,
body .form .input-field,
.bluelib .form .input-field,
body form > .input-field,
.bluelib form > .input-field,
body .form > .input-field,
.bluelib .form > .input-field,
body form input[type="color"],
.bluelib form input[type="color"],
body .form input[type="color"],
@ -1760,26 +1956,26 @@ body form input[type="week"],
.bluelib form input[type="week"],
body .form input[type="week"],
.bluelib .form input[type="week"],
body form select:not([multiple]),
.bluelib form select:not([multiple]),
body .form select:not([multiple]),
.bluelib .form select:not([multiple]),
body form > select:not([multiple]),
.bluelib form > select:not([multiple]),
body .form > select:not([multiple]),
.bluelib .form > select:not([multiple]),
body form .input-select,
.bluelib form .input-select,
body .form .input-select,
.bluelib .form .input-select,
body form select[multiple],
.bluelib form select[multiple],
body .form select[multiple],
.bluelib .form select[multiple],
body form > select[multiple],
.bluelib form > select[multiple],
body .form > select[multiple],
.bluelib .form > select[multiple],
body form .input-multiselect,
.bluelib form .input-multiselect,
body .form .input-multiselect,
.bluelib .form .input-multiselect,
body form button,
.bluelib form button,
body .form button,
.bluelib .form button,
body form > button,
.bluelib form > button,
body .form > button,
.bluelib .form > button,
body form input[type="submit"],
.bluelib form input[type="submit"],
body .form input[type="submit"],
@ -1792,10 +1988,26 @@ body form .input-button,
.bluelib form .input-button,
body .form .input-button,
.bluelib .form .input-button,
body form .input,
.bluelib form .input,
body .form .input,
.bluelib .form .input,
body form > input[type="checkbox"],
.bluelib form > input[type="checkbox"],
body .form > input[type="checkbox"],
.bluelib .form > input[type="checkbox"],
body form .input-checkbox,
.bluelib form .input-checkbox,
body .form .input-checkbox,
.bluelib .form .input-checkbox,
body form > input[type="radio"],
.bluelib form > input[type="radio"],
body .form > input[type="radio"],
.bluelib .form > input[type="radio"],
body form .input-radio,
.bluelib form .input-radio,
body .form .input-radio,
.bluelib .form .input-radio,
body form > .input,
.bluelib form > .input,
body .form > .input,
.bluelib .form > .input,
body form .form-input,
.bluelib form .form-input,
body .form .form-input,
@ -1804,10 +2016,42 @@ body .form .form-input,
justify-self: stretch;
width: 100%;
}
body form div,
.bluelib form div,
body .form div,
.bluelib .form div,
body form .form-group,
.bluelib form .form-group,
body .form .form-group,
.bluelib .form .form-group {
grid-column: 2;
display: flex;
gap: 8px 16px;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
width: 100%;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
padding: 6px;
border-radius: 4px;
}
body form .form-group > label,
.bluelib form .form-group > label,
body .form .form-group > label,
.bluelib .form .form-group > label,
body form .form-group .form-group-label,
.bluelib form .form-group .form-group-label,
body .form .form-group .form-group-label,
.bluelib .form .form-group .form-group-label {
display: flex;
gap: 6px;
justify-content: center;
align-items: center;
text-align: left;
}
body form .form-group .form-group-row,
.bluelib form .form-group .form-group-row,
body .form .form-group .form-group-row,
.bluelib .form .form-group .form-group-row {
flex-basis: 100%;
justify-content: start;
}
body form .form-row,
.bluelib form .form-row,
body .form .form-row,

2
src/targets/paper.root.css.map
View file

File diff suppressed because one or more lines are too long

78
src/targets/royalblue.module.css
View file

@ -347,11 +347,6 @@
.bluelib .input:optional::placeholder {
font-style: italic;
}
.bluelib .input:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;
}
.bluelib .input:focus-visible {
outline: none;
}
@ -419,6 +414,52 @@
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.bluelib .input-checkbox,
.bluelib .input-radio {
appearance: none;
cursor: pointer;
width: 24px;
height: 24px;
border-width: 2px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.bluelib .input-checkbox::before,
.bluelib .input-radio::before {
display: block;
content: "";
width: 14px;
height: 14px;
}
.bluelib .input-checkbox:checked::before,
.bluelib .input-radio:checked::before {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.9);
}
.bluelib .input-checkbox:hover:checked::before,
.bluelib .input-radio:hover:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 10), calc(var(--bluelib-color-g) + 10), calc(var(--bluelib-color-b) + 10), 1);
}
.bluelib .input-checkbox:focus:checked::before,
.bluelib .input-radio:focus:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1);
}
.bluelib .input-checkbox:active:checked::before,
.bluelib .input-radio:active:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1);
}
.bluelib .input-checkbox {
border-radius: 4px;
}
.bluelib .input-checkbox::before {
border-radius: 2px;
}
.bluelib .input-radio {
border-radius: 100%;
}
.bluelib .input-radio::before {
border-radius: 100%;
}
.bluelib .form {
display: grid;
align-items: center;
@ -430,12 +471,39 @@
grid-column: 1;
justify-self: end;
text-align: right;
--bluelib-color-r: 255;
--bluelib-color-g: 255;
--bluelib-color-b: 255;
font-weight: 500;
}
.bluelib .form .form-input {
grid-column: 2;
justify-self: stretch;
width: 100%;
}
.bluelib .form .form-group {
grid-column: 2;
display: flex;
gap: 8px 16px;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
width: 100%;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
padding: 6px;
border-radius: 4px;
}
.bluelib .form .form-group .form-group-label {
display: flex;
gap: 6px;
justify-content: center;
align-items: center;
text-align: left;
}
.bluelib .form .form-group .form-group-row {
flex-basis: 100%;
justify-content: start;
}
.bluelib .form .form-row {
grid-column-start: 1;
grid-column-end: 3;

2
src/targets/royalblue.module.css.map
View file

File diff suppressed because one or more lines are too long

408
src/targets/royalblue.root.css
View file

@ -447,6 +447,14 @@ body input[type="reset"],
.bluelib input[type="reset"],
body .input-button,
.bluelib .input-button,
body input[type="checkbox"],
.bluelib input[type="checkbox"],
body .input-checkbox,
.bluelib .input-checkbox,
body input[type="radio"],
.bluelib input[type="radio"],
body .input-radio,
.bluelib .input-radio,
body .input,
.bluelib .input {
font: inherit;
@ -503,6 +511,14 @@ body input[type="reset"][disabled],
.bluelib input[type="reset"][disabled],
body .input-button[disabled],
.bluelib .input-button[disabled],
body input[type="checkbox"][disabled],
.bluelib input[type="checkbox"][disabled],
body .input-checkbox[disabled],
.bluelib .input-checkbox[disabled],
body input[type="radio"][disabled],
.bluelib input[type="radio"][disabled],
body .input-radio[disabled],
.bluelib .input-radio[disabled],
body .input[disabled],
.bluelib .input[disabled],
body .input-field .status-disabled,
@ -553,6 +569,14 @@ body input[type="reset"] .status-disabled,
.bluelib input[type="reset"] .status-disabled,
body .input-button .status-disabled,
.bluelib .input-button .status-disabled,
body input[type="checkbox"] .status-disabled,
.bluelib input[type="checkbox"] .status-disabled,
body .input-checkbox .status-disabled,
.bluelib .input-checkbox .status-disabled,
body input[type="radio"] .status-disabled,
.bluelib input[type="radio"] .status-disabled,
body .input-radio .status-disabled,
.bluelib .input-radio .status-disabled,
body .input .status-disabled,
.bluelib .input .status-disabled {
border-style: dashed;
@ -605,6 +629,14 @@ body input[type="reset"]::placeholder,
.bluelib input[type="reset"]::placeholder,
body .input-button::placeholder,
.bluelib .input-button::placeholder,
body input[type="checkbox"]::placeholder,
.bluelib input[type="checkbox"]::placeholder,
body .input-checkbox::placeholder,
.bluelib .input-checkbox::placeholder,
body input[type="radio"]::placeholder,
.bluelib input[type="radio"]::placeholder,
body .input-radio::placeholder,
.bluelib .input-radio::placeholder,
body .input::placeholder,
.bluelib .input::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
@ -658,6 +690,14 @@ body input[type="reset"]:hover,
.bluelib input[type="reset"]:hover,
body .input-button:hover,
.bluelib .input-button:hover,
body input[type="checkbox"]:hover,
.bluelib input[type="checkbox"]:hover,
body .input-checkbox:hover,
.bluelib .input-checkbox:hover,
body input[type="radio"]:hover,
.bluelib input[type="radio"]:hover,
body .input-radio:hover,
.bluelib .input-radio:hover,
body .input:hover,
.bluelib .input:hover {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
@ -712,6 +752,14 @@ body input[type="reset"]:hover::placeholder,
.bluelib input[type="reset"]:hover::placeholder,
body .input-button:hover::placeholder,
.bluelib .input-button:hover::placeholder,
body input[type="checkbox"]:hover::placeholder,
.bluelib input[type="checkbox"]:hover::placeholder,
body .input-checkbox:hover::placeholder,
.bluelib .input-checkbox:hover::placeholder,
body input[type="radio"]:hover::placeholder,
.bluelib input[type="radio"]:hover::placeholder,
body .input-radio:hover::placeholder,
.bluelib .input-radio:hover::placeholder,
body .input:hover::placeholder,
.bluelib .input:hover::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
@ -764,6 +812,14 @@ body input[type="reset"]:focus,
.bluelib input[type="reset"]:focus,
body .input-button:focus,
.bluelib .input-button:focus,
body input[type="checkbox"]:focus,
.bluelib input[type="checkbox"]:focus,
body .input-checkbox:focus,
.bluelib .input-checkbox:focus,
body input[type="radio"]:focus,
.bluelib input[type="radio"]:focus,
body .input-radio:focus,
.bluelib .input-radio:focus,
body .input:focus,
.bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
@ -818,6 +874,14 @@ body input[type="reset"]:focus::placeholder,
.bluelib input[type="reset"]:focus::placeholder,
body .input-button:focus::placeholder,
.bluelib .input-button:focus::placeholder,
body input[type="checkbox"]:focus::placeholder,
.bluelib input[type="checkbox"]:focus::placeholder,
body .input-checkbox:focus::placeholder,
.bluelib .input-checkbox:focus::placeholder,
body input[type="radio"]:focus::placeholder,
.bluelib input[type="radio"]:focus::placeholder,
body .input-radio:focus::placeholder,
.bluelib .input-radio:focus::placeholder,
body .input:focus::placeholder,
.bluelib .input:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
@ -870,6 +934,14 @@ body input[type="reset"][disabled]:hover,
.bluelib input[type="reset"][disabled]:hover,
body .input-button[disabled]:hover,
.bluelib .input-button[disabled]:hover,
body input[type="checkbox"][disabled]:hover,
.bluelib input[type="checkbox"][disabled]:hover,
body .input-checkbox[disabled]:hover,
.bluelib .input-checkbox[disabled]:hover,
body input[type="radio"][disabled]:hover,
.bluelib input[type="radio"][disabled]:hover,
body .input-radio[disabled]:hover,
.bluelib .input-radio[disabled]:hover,
body .input[disabled]:hover,
.bluelib .input[disabled]:hover,
body .input-field .status-disabled:hover,
@ -920,6 +992,14 @@ body input[type="reset"] .status-disabled:hover,
.bluelib input[type="reset"] .status-disabled:hover,
body .input-button .status-disabled:hover,
.bluelib .input-button .status-disabled:hover,
body input[type="checkbox"] .status-disabled:hover,
.bluelib input[type="checkbox"] .status-disabled:hover,
body .input-checkbox .status-disabled:hover,
.bluelib .input-checkbox .status-disabled:hover,
body input[type="radio"] .status-disabled:hover,
.bluelib input[type="radio"] .status-disabled:hover,
body .input-radio .status-disabled:hover,
.bluelib .input-radio .status-disabled:hover,
body .input .status-disabled:hover,
.bluelib .input .status-disabled:hover,
body .input-field[disabled]:focus,
@ -970,6 +1050,14 @@ body input[type="reset"][disabled]:focus,
.bluelib input[type="reset"][disabled]:focus,
body .input-button[disabled]:focus,
.bluelib .input-button[disabled]:focus,
body input[type="checkbox"][disabled]:focus,
.bluelib input[type="checkbox"][disabled]:focus,
body .input-checkbox[disabled]:focus,
.bluelib .input-checkbox[disabled]:focus,
body input[type="radio"][disabled]:focus,
.bluelib input[type="radio"][disabled]:focus,
body .input-radio[disabled]:focus,
.bluelib .input-radio[disabled]:focus,
body .input[disabled]:focus,
.bluelib .input[disabled]:focus,
body .input-field .status-disabled:focus,
@ -1020,6 +1108,14 @@ body input[type="reset"] .status-disabled:focus,
.bluelib input[type="reset"] .status-disabled:focus,
body .input-button .status-disabled:focus,
.bluelib .input-button .status-disabled:focus,
body input[type="checkbox"] .status-disabled:focus,
.bluelib input[type="checkbox"] .status-disabled:focus,
body .input-checkbox .status-disabled:focus,
.bluelib .input-checkbox .status-disabled:focus,
body input[type="radio"] .status-disabled:focus,
.bluelib input[type="radio"] .status-disabled:focus,
body .input-radio .status-disabled:focus,
.bluelib .input-radio .status-disabled:focus,
body .input .status-disabled:focus,
.bluelib .input .status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
@ -1074,6 +1170,14 @@ body input[type="reset"][disabled]:hover::placeholder,
.bluelib input[type="reset"][disabled]:hover::placeholder,
body .input-button[disabled]:hover::placeholder,
.bluelib .input-button[disabled]:hover::placeholder,
body input[type="checkbox"][disabled]:hover::placeholder,
.bluelib input[type="checkbox"][disabled]:hover::placeholder,
body .input-checkbox[disabled]:hover::placeholder,
.bluelib .input-checkbox[disabled]:hover::placeholder,
body input[type="radio"][disabled]:hover::placeholder,
.bluelib input[type="radio"][disabled]:hover::placeholder,
body .input-radio[disabled]:hover::placeholder,
.bluelib .input-radio[disabled]:hover::placeholder,
body .input[disabled]:hover::placeholder,
.bluelib .input[disabled]:hover::placeholder,
body .input-field .status-disabled:hover::placeholder,
@ -1124,6 +1228,14 @@ body input[type="reset"] .status-disabled:hover::placeholder,
.bluelib input[type="reset"] .status-disabled:hover::placeholder,
body .input-button .status-disabled:hover::placeholder,
.bluelib .input-button .status-disabled:hover::placeholder,
body input[type="checkbox"] .status-disabled:hover::placeholder,
.bluelib input[type="checkbox"] .status-disabled:hover::placeholder,
body .input-checkbox .status-disabled:hover::placeholder,
.bluelib .input-checkbox .status-disabled:hover::placeholder,
body input[type="radio"] .status-disabled:hover::placeholder,
.bluelib input[type="radio"] .status-disabled:hover::placeholder,
body .input-radio .status-disabled:hover::placeholder,
.bluelib .input-radio .status-disabled:hover::placeholder,
body .input .status-disabled:hover::placeholder,
.bluelib .input .status-disabled:hover::placeholder,
body .input-field[disabled]:focus::placeholder,
@ -1174,6 +1286,14 @@ body input[type="reset"][disabled]:focus::placeholder,
.bluelib input[type="reset"][disabled]:focus::placeholder,
body .input-button[disabled]:focus::placeholder,
.bluelib .input-button[disabled]:focus::placeholder,
body input[type="checkbox"][disabled]:focus::placeholder,
.bluelib input[type="checkbox"][disabled]:focus::placeholder,
body .input-checkbox[disabled]:focus::placeholder,
.bluelib .input-checkbox[disabled]:focus::placeholder,
body input[type="radio"][disabled]:focus::placeholder,
.bluelib input[type="radio"][disabled]:focus::placeholder,
body .input-radio[disabled]:focus::placeholder,
.bluelib .input-radio[disabled]:focus::placeholder,
body .input[disabled]:focus::placeholder,
.bluelib .input[disabled]:focus::placeholder,
body .input-field .status-disabled:focus::placeholder,
@ -1224,6 +1344,14 @@ body input[type="reset"] .status-disabled:focus::placeholder,
.bluelib input[type="reset"] .status-disabled:focus::placeholder,
body .input-button .status-disabled:focus::placeholder,
.bluelib .input-button .status-disabled:focus::placeholder,
body input[type="checkbox"] .status-disabled:focus::placeholder,
.bluelib input[type="checkbox"] .status-disabled:focus::placeholder,
body .input-checkbox .status-disabled:focus::placeholder,
.bluelib .input-checkbox .status-disabled:focus::placeholder,
body input[type="radio"] .status-disabled:focus::placeholder,
.bluelib input[type="radio"] .status-disabled:focus::placeholder,
body .input-radio .status-disabled:focus::placeholder,
.bluelib .input-radio .status-disabled:focus::placeholder,
body .input .status-disabled:focus::placeholder,
.bluelib .input .status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
@ -1276,6 +1404,14 @@ body input[type="reset"]:optional,
.bluelib input[type="reset"]:optional,
body .input-button:optional,
.bluelib .input-button:optional,
body input[type="checkbox"]:optional,
.bluelib input[type="checkbox"]:optional,
body .input-checkbox:optional,
.bluelib .input-checkbox:optional,
body input[type="radio"]:optional,
.bluelib input[type="radio"]:optional,
body .input-radio:optional,
.bluelib .input-radio:optional,
body .input:optional,
.bluelib .input:optional,
body .input-field:optional::placeholder,
@ -1326,64 +1462,18 @@ body input[type="reset"]:optional::placeholder,
.bluelib input[type="reset"]:optional::placeholder,
body .input-button:optional::placeholder,
.bluelib .input-button:optional::placeholder,
body input[type="checkbox"]:optional::placeholder,
.bluelib input[type="checkbox"]:optional::placeholder,
body .input-checkbox:optional::placeholder,
.bluelib .input-checkbox:optional::placeholder,
body input[type="radio"]:optional::placeholder,
.bluelib input[type="radio"]:optional::placeholder,
body .input-radio:optional::placeholder,
.bluelib .input-radio:optional::placeholder,
body .input:optional::placeholder,
.bluelib .input:optional::placeholder {
font-style: italic;
}
body .input-field:invalid:not(:placeholder-shown),
.bluelib .input-field:invalid:not(:placeholder-shown),
body input[type="color"]:invalid:not(:placeholder-shown),
.bluelib input[type="color"]:invalid:not(:placeholder-shown),
body input[type="date"]:invalid:not(:placeholder-shown),
.bluelib input[type="date"]:invalid:not(:placeholder-shown),
body input[type="datetime-local"]:invalid:not(:placeholder-shown),
.bluelib input[type="datetime-local"]:invalid:not(:placeholder-shown),
body input[type="email"]:invalid:not(:placeholder-shown),
.bluelib input[type="email"]:invalid:not(:placeholder-shown),
body input[type="file"]:invalid:not(:placeholder-shown),
.bluelib input[type="file"]:invalid:not(:placeholder-shown),
body input[type="image"]:invalid:not(:placeholder-shown),
.bluelib input[type="image"]:invalid:not(:placeholder-shown),
body input[type="month"]:invalid:not(:placeholder-shown),
.bluelib input[type="month"]:invalid:not(:placeholder-shown),
body input[type="number"]:invalid:not(:placeholder-shown),
.bluelib input[type="number"]:invalid:not(:placeholder-shown),
body input[type="password"]:invalid:not(:placeholder-shown),
.bluelib input[type="password"]:invalid:not(:placeholder-shown),
body input[type="search"]:invalid:not(:placeholder-shown),
.bluelib input[type="search"]:invalid:not(:placeholder-shown),
body input[type="tel"]:invalid:not(:placeholder-shown),
.bluelib input[type="tel"]:invalid:not(:placeholder-shown),
body input[type="text"]:invalid:not(:placeholder-shown),
.bluelib input[type="text"]:invalid:not(:placeholder-shown),
body input[type="time"]:invalid:not(:placeholder-shown),
.bluelib input[type="time"]:invalid:not(:placeholder-shown),
body input[type="url"]:invalid:not(:placeholder-shown),
.bluelib input[type="url"]:invalid:not(:placeholder-shown),
body input[type="week"]:invalid:not(:placeholder-shown),
.bluelib input[type="week"]:invalid:not(:placeholder-shown),
body select:not([multiple]):invalid:not(:placeholder-shown),
.bluelib select:not([multiple]):invalid:not(:placeholder-shown),
body .input-select:invalid:not(:placeholder-shown),
.bluelib .input-select:invalid:not(:placeholder-shown),
body select[multiple]:invalid:not(:placeholder-shown),
.bluelib select[multiple]:invalid:not(:placeholder-shown),
body .input-multiselect:invalid:not(:placeholder-shown),
.bluelib .input-multiselect:invalid:not(:placeholder-shown),
body button:invalid:not(:placeholder-shown),
.bluelib button:invalid:not(:placeholder-shown),
body input[type="submit"]:invalid:not(:placeholder-shown),
.bluelib input[type="submit"]:invalid:not(:placeholder-shown),
body input[type="reset"]:invalid:not(:placeholder-shown),
.bluelib input[type="reset"]:invalid:not(:placeholder-shown),
body .input-button:invalid:not(:placeholder-shown),
.bluelib .input-button:invalid:not(:placeholder-shown),
body .input:invalid:not(:placeholder-shown),
.bluelib .input:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;
}
body .input-field:focus-visible,
.bluelib .input-field:focus-visible,
body input[type="color"]:focus-visible,
@ -1432,6 +1522,14 @@ body input[type="reset"]:focus-visible,
.bluelib input[type="reset"]:focus-visible,
body .input-button:focus-visible,
.bluelib .input-button:focus-visible,
body input[type="checkbox"]:focus-visible,
.bluelib input[type="checkbox"]:focus-visible,
body .input-checkbox:focus-visible,
.bluelib .input-checkbox:focus-visible,
body input[type="radio"]:focus-visible,
.bluelib input[type="radio"]:focus-visible,
body .input-radio:focus-visible,
.bluelib .input-radio:focus-visible,
body .input:focus-visible,
.bluelib .input:focus-visible {
outline: none;
@ -1674,6 +1772,100 @@ body .input-button .status-disabled:active,
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
body input[type="checkbox"],
.bluelib input[type="checkbox"],
body .input-checkbox,
.bluelib .input-checkbox,
body input[type="radio"],
.bluelib input[type="radio"],
body .input-radio,
.bluelib .input-radio {
appearance: none;
cursor: pointer;
width: 24px;
height: 24px;
border-width: 2px;
display: inline-flex;
justify-content: center;
align-items: center;
}
body input[type="checkbox"]::before,
.bluelib input[type="checkbox"]::before,
body .input-checkbox::before,
.bluelib .input-checkbox::before,
body input[type="radio"]::before,
.bluelib input[type="radio"]::before,
body .input-radio::before,
.bluelib .input-radio::before {
display: block;
content: "";
width: 14px;
height: 14px;
}
body input[type="checkbox"]:checked::before,
.bluelib input[type="checkbox"]:checked::before,
body .input-checkbox:checked::before,
.bluelib .input-checkbox:checked::before,
body input[type="radio"]:checked::before,
.bluelib input[type="radio"]:checked::before,
body .input-radio:checked::before,
.bluelib .input-radio:checked::before {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.9);
}
body input[type="checkbox"]:hover:checked::before,
.bluelib input[type="checkbox"]:hover:checked::before,
body .input-checkbox:hover:checked::before,
.bluelib .input-checkbox:hover:checked::before,
body input[type="radio"]:hover:checked::before,
.bluelib input[type="radio"]:hover:checked::before,
body .input-radio:hover:checked::before,
.bluelib .input-radio:hover:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 10), calc(var(--bluelib-color-g) + 10), calc(var(--bluelib-color-b) + 10), 1);
}
body input[type="checkbox"]:focus:checked::before,
.bluelib input[type="checkbox"]:focus:checked::before,
body .input-checkbox:focus:checked::before,
.bluelib .input-checkbox:focus:checked::before,
body input[type="radio"]:focus:checked::before,
.bluelib input[type="radio"]:focus:checked::before,
body .input-radio:focus:checked::before,
.bluelib .input-radio:focus:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1);
}
body input[type="checkbox"]:active:checked::before,
.bluelib input[type="checkbox"]:active:checked::before,
body .input-checkbox:active:checked::before,
.bluelib .input-checkbox:active:checked::before,
body input[type="radio"]:active:checked::before,
.bluelib input[type="radio"]:active:checked::before,
body .input-radio:active:checked::before,
.bluelib .input-radio:active:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1);
}
body input[type="checkbox"],
.bluelib input[type="checkbox"],
body .input-checkbox,
.bluelib .input-checkbox {
border-radius: 4px;
}
body input[type="checkbox"]::before,
.bluelib input[type="checkbox"]::before,
body .input-checkbox::before,
.bluelib .input-checkbox::before {
border-radius: 2px;
}
body input[type="radio"],
.bluelib input[type="radio"],
body .input-radio,
.bluelib .input-radio {
border-radius: 100%;
}
body input[type="radio"]::before,
.bluelib input[type="radio"]::before,
body .input-radio::before,
.bluelib .input-radio::before {
border-radius: 100%;
}
body form,
.bluelib form,
body .form,
@ -1684,10 +1876,10 @@ body .form,
column-gap: 8px;
grid-template-columns: minmax(auto, 1fr) 5fr;
}
body form label,
.bluelib form label,
body .form label,
.bluelib .form label,
body form > label,
.bluelib form > label,
body .form > label,
.bluelib .form > label,
body form .form-label,
.bluelib form .form-label,
body .form .form-label,
@ -1695,11 +1887,15 @@ body .form .form-label,
grid-column: 1;
justify-self: end;
text-align: right;
--bluelib-color-r: 255;
--bluelib-color-g: 255;
--bluelib-color-b: 255;
font-weight: 500;
}
body form .input-field,
.bluelib form .input-field,
body .form .input-field,
.bluelib .form .input-field,
body form > .input-field,
.bluelib form > .input-field,
body .form > .input-field,
.bluelib .form > .input-field,
body form input[type="color"],
.bluelib form input[type="color"],
body .form input[type="color"],
@ -1760,26 +1956,26 @@ body form input[type="week"],
.bluelib form input[type="week"],
body .form input[type="week"],
.bluelib .form input[type="week"],
body form select:not([multiple]),
.bluelib form select:not([multiple]),
body .form select:not([multiple]),
.bluelib .form select:not([multiple]),
body form > select:not([multiple]),
.bluelib form > select:not([multiple]),
body .form > select:not([multiple]),
.bluelib .form > select:not([multiple]),
body form .input-select,
.bluelib form .input-select,
body .form .input-select,
.bluelib .form .input-select,
body form select[multiple],
.bluelib form select[multiple],
body .form select[multiple],
.bluelib .form select[multiple],
body form > select[multiple],
.bluelib form > select[multiple],
body .form > select[multiple],
.bluelib .form > select[multiple],
body form .input-multiselect,
.bluelib form .input-multiselect,
body .form .input-multiselect,
.bluelib .form .input-multiselect,
body form button,
.bluelib form button,
body .form button,
.bluelib .form button,
body form > button,
.bluelib form > button,
body .form > button,
.bluelib .form > button,
body form input[type="submit"],
.bluelib form input[type="submit"],
body .form input[type="submit"],
@ -1792,10 +1988,26 @@ body form .input-button,
.bluelib form .input-button,
body .form .input-button,
.bluelib .form .input-button,
body form .input,
.bluelib form .input,
body .form .input,
.bluelib .form .input,
body form > input[type="checkbox"],
.bluelib form > input[type="checkbox"],
body .form > input[type="checkbox"],
.bluelib .form > input[type="checkbox"],
body form .input-checkbox,
.bluelib form .input-checkbox,
body .form .input-checkbox,
.bluelib .form .input-checkbox,
body form > input[type="radio"],
.bluelib form > input[type="radio"],
body .form > input[type="radio"],
.bluelib .form > input[type="radio"],
body form .input-radio,
.bluelib form .input-radio,
body .form .input-radio,
.bluelib .form .input-radio,
body form > .input,
.bluelib form > .input,
body .form > .input,
.bluelib .form > .input,
body form .form-input,
.bluelib form .form-input,
body .form .form-input,
@ -1804,10 +2016,42 @@ body .form .form-input,
justify-self: stretch;
width: 100%;
}
body form div,
.bluelib form div,
body .form div,
.bluelib .form div,
body form .form-group,
.bluelib form .form-group,
body .form .form-group,
.bluelib .form .form-group {
grid-column: 2;
display: flex;
gap: 8px 16px;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
width: 100%;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
padding: 6px;
border-radius: 4px;
}
body form .form-group > label,
.bluelib form .form-group > label,
body .form .form-group > label,
.bluelib .form .form-group > label,
body form .form-group .form-group-label,
.bluelib form .form-group .form-group-label,
body .form .form-group .form-group-label,
.bluelib .form .form-group .form-group-label {
display: flex;
gap: 6px;
justify-content: center;
align-items: center;
text-align: left;
}
body form .form-group .form-group-row,
.bluelib form .form-group .form-group-row,
body .form .form-group .form-group-row,
.bluelib .form .form-group .form-group-row {
flex-basis: 100%;
justify-content: start;
}
body form .form-row,
.bluelib form .form-row,
body .form .form-row,

2
src/targets/royalblue.root.css.map
View file

File diff suppressed because one or more lines are too long

6
src/vars/module.less
View file

@ -34,11 +34,17 @@
@input-option: ~'.input-option';
@input-optgroup: ~'.input-optgroup';
@input-button: ~'.input-button';
@input-checkbox: ~'.input-checkbox';
@input-radio: ~'.input-radio';
@form: ~".form";
@form-label: ~".form-label";
@form-label-full: ~".form-label-full";
@form-input: ~".form-input";
@form-row: ~".form-row";
@form-group: ~'.form-group';
@form-group-label: ~'.form-group-label';
@form-group-row: ~'.form-group-row';
@button: ~':not()';
@button-fill-width: ~'.button-fill-width';

15
src/vars/root.less
View file

@ -27,18 +27,25 @@
@status-disabled: ~"[disabled], .status-disabled";
@input: ~'@{input-field}, @{input-select}, @{input-multiselect}, @{input-button}, .input';
@input: ~'@{input-field}, @{input-select}, @{input-multiselect}, @{input-button}, @{input-checkbox}, @{input-radio}, .input';
@INPUT: ~'> @{input-field}, > @{input-select}, > @{input-multiselect}, > @{input-button}, > @{input-checkbox}, > @{input-radio}, > .input';
@input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]';
@input-select: ~'select:not([multiple]), .input-select';
@input-multiselect: ~'select[multiple], .input-multiselect';
@input-option: ~'option, .input-option';
@input-optgroup: ~'optgroup, .input-optgroup';
@input-button: ~'button, input[type="submit"], input[type="reset"], .input-button';
@input-checkbox: ~'input[type="checkbox"], .input-checkbox';
@input-radio: ~'input[type="radio"], .input-radio';
@form: ~"form, .form";
@form-label: ~"label, .form-label";
@form-input: ~"@{input}, .form-input";
@form-row: ~"div, .form-row";
@form-label: ~"> label, .form-label";
@form-label-full: ~".form-label-full";
@form-input: ~"@{INPUT}, .form-input";
@form-row: ~".form-row";
@form-group: ~'.form-group';
@form-group-label: ~'> label, .form-group-label';
@form-group-row: ~'.form-group-row';
@button: ~':not()';
@button-fill-width: ~':not()';