mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Got the file validation and previewer lines up nicer

Browse source
This commit is contained in:
Yohn 2024-11-13 07:26:10 -05:00
parent 7602474cfd
commit b611b528bc
239 changed files with 5076 additions and 3137 deletions
Download patch file Download diff file Expand all files Collapse all files

130
scss/forms/_validation.scss
View file

@ -3,7 +3,8 @@
@use "../settings" as *;
@if map.get($modules, "forms/validation") {
input:user-valid:not(
#{$parent-selector}
input:user-valid:not(
[type="button"],
[type="reset"],
[type="image"],
@ -11,7 +12,8 @@
[type="checkbox"],
[type="radio"]
),
input:user-invalid:not(
#{$parent-selector}
input:user-invalid:not(
[type="button"],
[type="reset"],
[type="image"],
@ -24,8 +26,8 @@
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-repeat: no-repeat;
}
select:user-valid:not([multiple], [size]),
select:user-invalid:not([multiple], [size]) {
#{$parent-selector} select:user-valid:not([multiple], [size]),
#{$parent-selector} select:user-invalid:not([multiple], [size]) {
padding-right: calc(1.5em + 0.75rem);
padding-right: 4.2rem;
background-position:
@ -33,20 +35,21 @@
center right 2.25rem;
background-repeat: no-repeat;
}
select:user-invalid:not([multiple], [size]) {
#{$parent-selector} select:user-invalid:not([multiple], [size]) {
background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-invalid);
}
select:user-valid:not([multiple], [size]) {
#{$parent-selector} select:user-valid:not([multiple], [size]) {
background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-valid);
}
textarea:user-valid,
textarea:user-invalid {
#{$parent-selector} textarea:user-valid,
#{$parent-selector} textarea:user-invalid {
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-repeat: no-repeat;
}
input:user-invalid:not(
#{$parent-selector}
input:user-invalid:not(
[type="button"],
[type="reset"],
[type="image"],
@ -54,12 +57,13 @@
[type="checkbox"],
[type="radio"]
),
select:user-invalid,
textarea:user-invalid {
#{$parent-selector} select:user-invalid,
#{$parent-selector} textarea:user-invalid {
border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
background-image: var(#{$css-var-prefix}icon-invalid);
}
input:user-valid:not(
#{$parent-selector}
input:user-valid:not(
[type="button"],
[type="reset"],
[type="image"],
@ -67,16 +71,17 @@
[type="checkbox"],
[type="radio"]
),
select:user-valid,
textarea:user-valid {
#{$parent-selector} select:user-valid,
#{$parent-selector} textarea:user-valid {
border-color: var(#{$css-var-prefix}form-element-valid-border-color);
background-image: var(#{$css-var-prefix}icon-valid);
}
input:required:user-invalid:is([type="checkbox"]) {
#{$parent-selector} input:required:user-invalid:is([type="checkbox"]) {
border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
}
/********** To include a message after the element with info ************/
input:user-valid:not(
#{$parent-selector}
input:user-valid:not(
[type="button"],
[type="reset"],
[type="image"],
@ -85,14 +90,15 @@
[type="radio"]
)
+ small[data-valid]::after,
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
textarea:user-valid + small[data-valid]::after {
#{$parent-selector} select:user-valid:not([multiple], [size]) + small[data-valid]::after,
#{$parent-selector} textarea:user-valid + small[data-valid]::after {
content: attr(data-valid);
color: var(#{$css-var-prefix}form-element-valid-border-color);
}
textarea:user-invalid + small[data-invalid]::after,
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
input:user-invalid:not(
#{$parent-selector} textarea:user-invalid + small[data-invalid]::after,
#{$parent-selector} select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
#{$parent-selector}
input:user-invalid:not(
[type="button"],
[type="reset"],
[type="image"],
@ -101,11 +107,12 @@
[type="radio"]
)
+ [data-invalid]::after,
input[type="file"]:user-invalid + ul + [data-invalid]::after {
#{$parent-selector} input[type="file"]:user-invalid + ul + [data-invalid]::after {
content: attr(data-invalid);
color: var(#{$css-var-prefix}form-element-invalid-border-color);
}
input:user-valid:not(
#{$parent-selector}
input:user-valid:not(
[type="button"],
[type="reset"],
[type="image"],
@ -114,7 +121,8 @@
[type="radio"]
)
+ [data-valid]::after,
input:user-invalid:not(
#{$parent-selector}
input:user-invalid:not(
[type="button"],
[type="reset"],
[type="image"],
@ -123,42 +131,84 @@
[type="radio"]
)
+ [data-invalid]::after,
textarea:user-valid + [data-valid]::after,
input[type="file"]:user-invalid + [data-invalid]::after,
input[type="file"]:user-invalid + ul + [data-invalid]::after {
#{$parent-selector} textarea:user-valid + [data-valid]::after,
#{$parent-selector} input[type="file"]:user-invalid + [data-invalid]::after,
#{$parent-selector} input[type="file"]:user-invalid + ul + [data-invalid]::after {
display: block;
}
//input[type="file"]:user-invalid + [data-invalid]::after,
input[type="file"]:user-invalid + ul + [data-invalid]::after {
#{$parent-selector} input[type="file"]:user-invalid + ul + [data-invalid]::after {
position: relative;
top: -2rem;
}
// the file btn
input[type="file"]:user-invalid::file-selector-button {
#{$parent-selector} input[type="file"]:user-invalid::file-selector-button {
border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
background-color: var(#{$css-var-prefix}form-element-invalid-border-color);
}
.btn-file-rm {
margin-left: 10px;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * 0.5);
border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
color: var(#{$css-var-prefix}form-element-invalid-border-color);
}
/* File list when selected from the file input */
.file-list {
margin-left: 0;
padding-right: 0;
/* File list when selected from the file input */
#{$parent-selector} .file-list {
padding-left: 0;
li {
display: flex;
align-items: center;
justify-content: space-between;
list-style-type: none;
text-align: center;
&:nth-child(2n) {
background-color: $grey-900;
}
&:hover {
background-color: var(#{$css-var-prefix}muted-border-color);
}
.btn-file-rm {
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: 10px;
padding: 0;
padding-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
border: none;
background-image: var(#{$css-var-prefix}icon-red-close);
background-position: center;
background-size: 1rem;
background-repeat: no-repeat;
background-color: transparent;
color: var(#{$css-var-prefix}element-invalid-border-color);
opacity: 0.5;
transition: opacity var(#{$css-var-prefix}transition);
&:hover {
opacity: 1;
}
}
}
}
//.btn-file-rm { // orig
// //margin-left: 10px;
// //padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
// // calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * 0.5);
// //border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
// //color: var(#{$css-var-prefix}form-element-invalid-border-color);
//
// display: block;
// width: 1rem;
// height: 1rem;
// margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
// margin-bottom: var(#{$css-var-prefix}spacing);
// margin-left: auto;
// border: none;
// background-image: var(#{$css-var-prefix}icon-close);
// background-position: center;
// background-size: auto 1rem;
// background-repeat: no-repeat;
// background-color: transparent;
// opacity: .5;
// transition: opacity var(#{$css-var-prefix}transition);
//}
}

2
scss/themes/default/_styles.scss
View file

@ -33,6 +33,8 @@
// Spacings
#{$css-var-prefix}spacing: 1rem;
#{$css-var-prefix}icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
// Spacings for typography elements
@if map.get($modules, "content/typography") {
#{$css-var-prefix}typography-spacing-vertical: 1rem;