mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 18:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

- Updated form validation to not validate when form[novalidate]

Browse source 
- Updated tooltips to go multiline, max width of 250px.
-Updated card footer, to remove the margin from the last element if they are buttons or groups when in the footer
- Made container, grid, and row classes to have a parent class, so they will not effect rest of page. This will only work if you use that style css.

- Added tabs
- Added floating labels
- Added responsive nav hamburger menu

Let me know if you find any bugs or have ideas for improvements!
This commit is contained in:
Yohn 2024-12-10 12:30:06 -05:00
parent a937be4b4a
commit f25840f51a
260 changed files with 71329 additions and 11561 deletions
Download patch file Download diff file Expand all files Collapse all files

101
scss/forms/_validation.scss
View file

@ -4,7 +4,9 @@
@if map.get($modules, "forms/validation") {
#{$parent-selector}
form:not([novalidate])
input:user-valid:not(
:placeholder-shown,
[type="button"],
[type="reset"],
[type="image"],
@ -13,7 +15,9 @@
[type="radio"]
),
#{$parent-selector}
form:not([novalidate])
input:user-invalid:not(
:placeholder-shown,
[type="button"],
[type="reset"],
[type="image"],
@ -26,8 +30,8 @@
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-repeat: no-repeat;
}
#{$parent-selector} select:user-valid:not([multiple], [size]),
#{$parent-selector} select:user-invalid:not([multiple], [size]) {
#{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]),
#{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
padding-right: calc(1.5em + 0.75rem);
padding-right: 4.2rem;
background-position:
@ -35,21 +39,23 @@
center right 2.25rem;
background-repeat: no-repeat;
}
#{$parent-selector} select:user-invalid:not([multiple], [size]) {
#{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-invalid);
}
#{$parent-selector} select:user-valid:not([multiple], [size]) {
#{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]) {
background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-valid);
}
#{$parent-selector} textarea:user-valid,
#{$parent-selector} textarea:user-invalid {
#{$parent-selector} form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
#{$parent-selector} form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
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;
}
#{$parent-selector}
form:not([novalidate])
input:user-invalid:not(
:placeholder-shown,
[type="button"],
[type="reset"],
[type="image"],
@ -57,13 +63,19 @@
[type="checkbox"],
[type="radio"]
),
#{$parent-selector} select:user-invalid,
#{$parent-selector} textarea:user-invalid {
#{$parent-selector} form:not([novalidate]) select:user-invalid:not([multiple], [size]),
#{$parent-selector} form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
background-image: var(#{$css-var-prefix}icon-invalid);
&:focus {
border-color: var(#{$css-var-prefix}form-element-invalid-active-border-color);
}
}
#{$parent-selector}
form:not([novalidate])
input:user-valid:not(
:placeholder-shown,
[type="button"],
[type="reset"],
[type="image"],
@ -71,17 +83,23 @@
[type="checkbox"],
[type="radio"]
),
#{$parent-selector} select:user-valid,
#{$parent-selector} textarea:user-valid {
#{$parent-selector} form:not([novalidate]) select:user-valid:not([multiple], [size]),
#{$parent-selector} form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
border-color: var(#{$css-var-prefix}form-element-valid-border-color);
background-image: var(#{$css-var-prefix}icon-valid);
&:focus {
border-color: var(#{$css-var-prefix}form-element-valid-active-border-color);
}
}
#{$parent-selector} input:required:user-invalid:is([type="checkbox"]) {
#{$parent-selector} form:not([novalidate]) 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 ************/
#{$parent-selector}
form:not([novalidate])
input:user-valid:not(
:placeholder-shown,
[type="button"],
[type="reset"],
[type="image"],
@ -90,15 +108,29 @@
[type="radio"]
)
+ 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 {
#{$parent-selector}
form:not([novalidate])
select:user-valid:not([multiple], [size])
+ small[data-valid]::after,
#{$parent-selector}
form:not([novalidate])
textarea:user-valid:not(:placeholder-shown)
+ small[data-valid]::after {
content: attr(data-valid);
color: var(#{$css-var-prefix}form-element-valid-border-color);
}
#{$parent-selector} textarea:user-invalid + small[data-invalid]::after,
#{$parent-selector} select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
#{$parent-selector}
form:not([novalidate])
textarea:user-invalid:not(:placeholder-shown)
+ small[data-invalid]::after,
#{$parent-selector}
form:not([novalidate])
select:user-invalid:not([multiple], [size])
+ small[data-invalid]::after,
#{$parent-selector}
form:not([novalidate])
input:user-invalid:not(
:placeholder-shown,
[type="button"],
[type="reset"],
[type="image"],
@ -107,12 +139,18 @@
[type="radio"]
)
+ [data-invalid]::after,
#{$parent-selector} input[type="file"]:user-invalid + ul + [data-invalid]::after {
#{$parent-selector}
form:not([novalidate])
input[type="file"]:user-invalid
+ ul
+ [data-invalid]::after {
content: attr(data-invalid);
color: var(#{$css-var-prefix}form-element-invalid-border-color);
}
#{$parent-selector}
form:not([novalidate])
input:user-valid:not(
:placeholder-shown,
[type="button"],
[type="reset"],
[type="image"],
@ -122,27 +160,42 @@
)
+ [data-valid]::after,
#{$parent-selector}
form:not([novalidate])
input:user-invalid:not(
:placeholder-shown,
[type="button"],
[type="reset"],
[type="image"],
[type="submit"],
[type="checkbox"],
[type="radio"]
)
+ [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 {
#{$parent-selector}
form:not([novalidate])
textarea:user-valid:not(:placeholder-shown)
+ [data-valid]::after,
#{$parent-selector}
form:not([novalidate])
input[type="file"]:user-invalid
+ [data-invalid]::after,
#{$parent-selector}
form:not([novalidate])
input[type="file"]:user-invalid
+ ul
+ [data-invalid]::after {
display: block;
}
//input[type="file"]:user-invalid + [data-invalid]::after,
#{$parent-selector} input[type="file"]:user-invalid + ul + [data-invalid]::after {
#{$parent-selector}
form:not([novalidate])
input[type="file"]:user-invalid
+ ul
+ [data-invalid]::after {
position: relative;
top: -2rem;
}
// the file btn
#{$parent-selector} input[type="file"]:user-invalid::file-selector-button {
#{$parent-selector} form:not([novalidate]) 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);
}