steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2025-03-11 11:07:51 +00:00
Code Activity

🔧 Move some rules from .form-field to .input-field

Browse source
This commit is contained in:
Steffo 2021-07-23 02:57:25 +02:00
parent 77ffffbcda
commit 8c7142972c
Signed by: steffo
GPG key ID: 6965406171929D01
9 changed files with 168 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/rules/skeleton.less vendored
View file

@ -109,14 +109,6 @@
grid-column: 2;
justify-self: stretch;
width: 100%;
&:optional::placeholder {
font-style: italic;
}
&:invalid:not(:placeholder-shown) {
.bluelib-color(@hex-red);
}
}
@{form-submit} {
@ -280,6 +272,14 @@
color: @bA;
background-color: @b0;
&:optional::placeholder {
font-style: italic;
}
&:invalid:not(:placeholder-shown) {
.bluelib-color(@hex-red);
}
&:hover, &:focus {
border-color: @b6;
color: @bF;

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

@ -215,14 +215,6 @@
justify-self: stretch;
width: 100%;
}
.bluelib .form-field:optional::placeholder {
font-style: italic;
}
.bluelib .form-field:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
}
.bluelib .form-submit {
width: auto;
}
@ -347,6 +339,14 @@
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-field:optional::placeholder {
font-style: italic;
}
.bluelib .input-field:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
}
.bluelib .input-field:hover,
.bluelib .input-field:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);

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

File diff suppressed because one or more lines are too long

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

@ -847,80 +847,6 @@ body .form-field {
justify-self: stretch;
width: 100%;
}
.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-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;
}
.base-skeleton form input[type="submit"],
body form input[type="submit"],
.base-skeleton form button,
@ -1150,6 +1076,76 @@ body input[type="week"] {
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);
}
.base-skeleton .input-field:optional::placeholder,
body .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 {
font-style: italic;
}
.base-skeleton .input-field:invalid:not(:placeholder-shown),
body .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) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
}
.base-skeleton .input-field:hover,
body .input-field:hover,
.base-skeleton input[type="color"]:hover,

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

File diff suppressed because one or more lines are too long

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

@ -215,14 +215,6 @@
justify-self: stretch;
width: 100%;
}
.bluelib .form-field:optional::placeholder {
font-style: italic;
}
.bluelib .form-field:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;
}
.bluelib .form-submit {
width: auto;
}
@ -347,6 +339,14 @@
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-field:optional::placeholder {
font-style: italic;
}
.bluelib .input-field:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;
}
.bluelib .input-field:hover,
.bluelib .input-field:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);

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

File diff suppressed because one or more lines are too long

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

@ -847,80 +847,6 @@ body .form-field {
justify-self: stretch;
width: 100%;
}
.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-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;
}
.base-skeleton form input[type="submit"],
body form input[type="submit"],
.base-skeleton form button,
@ -1150,6 +1076,76 @@ body input[type="week"] {
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);
}
.base-skeleton .input-field:optional::placeholder,
body .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 {
font-style: italic;
}
.base-skeleton .input-field:invalid:not(:placeholder-shown),
body .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) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;
}
.base-skeleton .input-field:hover,
body .input-field:hover,
.base-skeleton input[type="color"]:hover,

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

File diff suppressed because one or more lines are too long