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

🔧 Rename .form-input to .form-field

Browse source
This commit is contained in:
Steffo 2021-07-19 21:54:13 +02:00
parent a7451b047a
commit ee8915c109
Signed by: steffo
GPG key ID: 6965406171929D01
9 changed files with 215 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/rules/skeleton.less vendored
View file

@ -105,7 +105,7 @@
justify-self: end;
}
@{form-input} {
@{form-field} {
grid-column: 2;
justify-self: stretch;
width: 100%;

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

@ -209,15 +209,15 @@
grid-column: 1;
justify-self: end;
}
.bluelib .form-input {
.bluelib .form-field {
grid-column: 2;
justify-self: stretch;
width: 100%;
}
.bluelib .form-input:optional::placeholder {
.bluelib .form-field:optional::placeholder {
font-style: italic;
}
.bluelib .form-input:invalid:not(:placeholder-shown) {
.bluelib .form-field:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;

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

@ -808,24 +808,114 @@ body .form-label {
grid-column: 1;
justify-self: end;
}
.base-skeleton form input,
body form input,
.base-skeleton .form-input,
body .form-input {
.base-skeleton form .input-field,
body form .input-field,
.base-skeleton input[type="color"],
body input[type="color"],
.base-skeleton input[type="date"],
body input[type="date"],
.base-skeleton input[type="datetime-local"],
body input[type="datetime-local"],
.base-skeleton input[type="email"],
body input[type="email"],
.base-skeleton input[type="file"],
body input[type="file"],
.base-skeleton input[type="image"],
body input[type="image"],
.base-skeleton input[type="month"],
body input[type="month"],
.base-skeleton input[type="number"],
body input[type="number"],
.base-skeleton input[type="password"],
body input[type="password"],
.base-skeleton input[type="search"],
body input[type="search"],
.base-skeleton input[type="tel"],
body input[type="tel"],
.base-skeleton input[type="text"],
body input[type="text"],
.base-skeleton input[type="time"],
body input[type="time"],
.base-skeleton input[type="url"],
body input[type="url"],
.base-skeleton input[type="week"],
body input[type="week"],
.base-skeleton .form-field,
body .form-field {
grid-column: 2;
justify-self: stretch;
width: 100%;
}
.base-skeleton form input:optional::placeholder,
body form input:optional::placeholder,
.base-skeleton .form-input:optional::placeholder,
body .form-input:optional::placeholder {
.base-skeleton form .input-field:optional::placeholder,
body form .input-field:optional::placeholder,
.base-skeleton input[type="color"]:optional::placeholder,
body input[type="color"]:optional::placeholder,
.base-skeleton input[type="date"]:optional::placeholder,
body input[type="date"]:optional::placeholder,
.base-skeleton input[type="datetime-local"]:optional::placeholder,
body input[type="datetime-local"]:optional::placeholder,
.base-skeleton input[type="email"]:optional::placeholder,
body input[type="email"]:optional::placeholder,
.base-skeleton input[type="file"]:optional::placeholder,
body input[type="file"]:optional::placeholder,
.base-skeleton input[type="image"]:optional::placeholder,
body input[type="image"]:optional::placeholder,
.base-skeleton input[type="month"]:optional::placeholder,
body input[type="month"]:optional::placeholder,
.base-skeleton input[type="number"]:optional::placeholder,
body input[type="number"]:optional::placeholder,
.base-skeleton input[type="password"]:optional::placeholder,
body input[type="password"]:optional::placeholder,
.base-skeleton input[type="search"]:optional::placeholder,
body input[type="search"]:optional::placeholder,
.base-skeleton input[type="tel"]:optional::placeholder,
body input[type="tel"]:optional::placeholder,
.base-skeleton input[type="text"]:optional::placeholder,
body input[type="text"]:optional::placeholder,
.base-skeleton input[type="time"]:optional::placeholder,
body input[type="time"]:optional::placeholder,
.base-skeleton input[type="url"]:optional::placeholder,
body input[type="url"]:optional::placeholder,
.base-skeleton input[type="week"]:optional::placeholder,
body input[type="week"]:optional::placeholder,
.base-skeleton .form-field:optional::placeholder,
body .form-field:optional::placeholder {
font-style: italic;
}
.base-skeleton form input:invalid:not(:placeholder-shown),
body form input:invalid:not(:placeholder-shown),
.base-skeleton .form-input:invalid:not(:placeholder-shown),
body .form-input:invalid:not(:placeholder-shown) {
.base-skeleton form .input-field:invalid:not(:placeholder-shown),
body form .input-field:invalid:not(:placeholder-shown),
.base-skeleton input[type="color"]:invalid:not(:placeholder-shown),
body input[type="color"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="date"]:invalid:not(:placeholder-shown),
body input[type="date"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="datetime-local"]:invalid:not(:placeholder-shown),
body input[type="datetime-local"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="email"]:invalid:not(:placeholder-shown),
body input[type="email"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="file"]:invalid:not(:placeholder-shown),
body input[type="file"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="image"]:invalid:not(:placeholder-shown),
body input[type="image"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="month"]:invalid:not(:placeholder-shown),
body input[type="month"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="number"]:invalid:not(:placeholder-shown),
body input[type="number"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="password"]:invalid:not(:placeholder-shown),
body input[type="password"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="search"]:invalid:not(:placeholder-shown),
body input[type="search"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="tel"]:invalid:not(:placeholder-shown),
body input[type="tel"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="text"]:invalid:not(:placeholder-shown),
body input[type="text"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="time"]:invalid:not(:placeholder-shown),
body input[type="time"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="url"]:invalid:not(:placeholder-shown),
body input[type="url"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="week"]:invalid:not(:placeholder-shown),
body input[type="week"]:invalid:not(:placeholder-shown),
.base-skeleton .form-field:invalid:not(:placeholder-shown),
body .form-field:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;

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

File diff suppressed because one or more lines are too long

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

@ -209,15 +209,15 @@
grid-column: 1;
justify-self: end;
}
.bluelib .form-input {
.bluelib .form-field {
grid-column: 2;
justify-self: stretch;
width: 100%;
}
.bluelib .form-input:optional::placeholder {
.bluelib .form-field:optional::placeholder {
font-style: italic;
}
.bluelib .form-input:invalid:not(:placeholder-shown) {
.bluelib .form-field:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;

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

@ -808,24 +808,114 @@ body .form-label {
grid-column: 1;
justify-self: end;
}
.base-skeleton form input,
body form input,
.base-skeleton .form-input,
body .form-input {
.base-skeleton form .input-field,
body form .input-field,
.base-skeleton input[type="color"],
body input[type="color"],
.base-skeleton input[type="date"],
body input[type="date"],
.base-skeleton input[type="datetime-local"],
body input[type="datetime-local"],
.base-skeleton input[type="email"],
body input[type="email"],
.base-skeleton input[type="file"],
body input[type="file"],
.base-skeleton input[type="image"],
body input[type="image"],
.base-skeleton input[type="month"],
body input[type="month"],
.base-skeleton input[type="number"],
body input[type="number"],
.base-skeleton input[type="password"],
body input[type="password"],
.base-skeleton input[type="search"],
body input[type="search"],
.base-skeleton input[type="tel"],
body input[type="tel"],
.base-skeleton input[type="text"],
body input[type="text"],
.base-skeleton input[type="time"],
body input[type="time"],
.base-skeleton input[type="url"],
body input[type="url"],
.base-skeleton input[type="week"],
body input[type="week"],
.base-skeleton .form-field,
body .form-field {
grid-column: 2;
justify-self: stretch;
width: 100%;
}
.base-skeleton form input:optional::placeholder,
body form input:optional::placeholder,
.base-skeleton .form-input:optional::placeholder,
body .form-input:optional::placeholder {
.base-skeleton form .input-field:optional::placeholder,
body form .input-field:optional::placeholder,
.base-skeleton input[type="color"]:optional::placeholder,
body input[type="color"]:optional::placeholder,
.base-skeleton input[type="date"]:optional::placeholder,
body input[type="date"]:optional::placeholder,
.base-skeleton input[type="datetime-local"]:optional::placeholder,
body input[type="datetime-local"]:optional::placeholder,
.base-skeleton input[type="email"]:optional::placeholder,
body input[type="email"]:optional::placeholder,
.base-skeleton input[type="file"]:optional::placeholder,
body input[type="file"]:optional::placeholder,
.base-skeleton input[type="image"]:optional::placeholder,
body input[type="image"]:optional::placeholder,
.base-skeleton input[type="month"]:optional::placeholder,
body input[type="month"]:optional::placeholder,
.base-skeleton input[type="number"]:optional::placeholder,
body input[type="number"]:optional::placeholder,
.base-skeleton input[type="password"]:optional::placeholder,
body input[type="password"]:optional::placeholder,
.base-skeleton input[type="search"]:optional::placeholder,
body input[type="search"]:optional::placeholder,
.base-skeleton input[type="tel"]:optional::placeholder,
body input[type="tel"]:optional::placeholder,
.base-skeleton input[type="text"]:optional::placeholder,
body input[type="text"]:optional::placeholder,
.base-skeleton input[type="time"]:optional::placeholder,
body input[type="time"]:optional::placeholder,
.base-skeleton input[type="url"]:optional::placeholder,
body input[type="url"]:optional::placeholder,
.base-skeleton input[type="week"]:optional::placeholder,
body input[type="week"]:optional::placeholder,
.base-skeleton .form-field:optional::placeholder,
body .form-field:optional::placeholder {
font-style: italic;
}
.base-skeleton form input:invalid:not(:placeholder-shown),
body form input:invalid:not(:placeholder-shown),
.base-skeleton .form-input:invalid:not(:placeholder-shown),
body .form-input:invalid:not(:placeholder-shown) {
.base-skeleton form .input-field:invalid:not(:placeholder-shown),
body form .input-field:invalid:not(:placeholder-shown),
.base-skeleton input[type="color"]:invalid:not(:placeholder-shown),
body input[type="color"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="date"]:invalid:not(:placeholder-shown),
body input[type="date"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="datetime-local"]:invalid:not(:placeholder-shown),
body input[type="datetime-local"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="email"]:invalid:not(:placeholder-shown),
body input[type="email"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="file"]:invalid:not(:placeholder-shown),
body input[type="file"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="image"]:invalid:not(:placeholder-shown),
body input[type="image"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="month"]:invalid:not(:placeholder-shown),
body input[type="month"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="number"]:invalid:not(:placeholder-shown),
body input[type="number"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="password"]:invalid:not(:placeholder-shown),
body input[type="password"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="search"]:invalid:not(:placeholder-shown),
body input[type="search"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="tel"]:invalid:not(:placeholder-shown),
body input[type="tel"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="text"]:invalid:not(:placeholder-shown),
body input[type="text"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="time"]:invalid:not(:placeholder-shown),
body input[type="time"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="url"]:invalid:not(:placeholder-shown),
body input[type="url"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="week"]:invalid:not(:placeholder-shown),
body input[type="week"]:invalid:not(:placeholder-shown),
.base-skeleton .form-field:invalid:not(:placeholder-shown),
body .form-field:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;

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

File diff suppressed because one or more lines are too long

2
src/vars/module.less
View file

@ -11,7 +11,7 @@
@status-clickable: ~".status-clickable";
@form: ~".form";
@form-label: ~".form-label";
@form-input: ~".form-input";
@form-field: ~".form-field";
@form-submit: ~'.form-submit';
@form-buttons: ~'.form-buttons';
@button: ~'.button';

2
src/vars/root.less
View file

@ -11,7 +11,7 @@
@status-clickable: ~"[onclick], .status-clickable";
@form: ~"form, .form";
@form-label: ~"form label, .form-label";
@form-input: ~"form input, .form-input";
@form-field: ~"form @{input-field}, .form-field";
@form-submit: ~'form input[type="submit"], form button, .form-submit';
@form-buttons: ~'.form-buttons';
@button: ~'.button, button, input[type="submit"]';