Skip to content

Commit 7602474

Browse files
YohnYohn
committed
Added form validation
1 parent 359e51e commit 7602474

File tree

241 files changed

+17845
-118
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

241 files changed

+17845
-118
lines changed

‎css/pico.amber.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2413,6 +2413,153 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
24132413
background-position: center right 1.125rem, center left 0.75rem;
24142414
}
24152415

2416+
input:user-valid:not([type=button],
2417+
[type=reset],
2418+
[type=image],
2419+
[type=submit],
2420+
[type=checkbox],
2421+
[type=radio]),
2422+
input:user-invalid:not([type=button],
2423+
[type=reset],
2424+
[type=image],
2425+
[type=submit],
2426+
[type=checkbox],
2427+
[type=radio]) {
2428+
padding-right: calc(1.5em + 0.75rem);
2429+
background-position: right calc(0.375em + 0.1875rem) center;
2430+
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
2431+
background-repeat: no-repeat;
2432+
}
2433+
2434+
select:user-valid:not([multiple], [size]),
2435+
select:user-invalid:not([multiple], [size]) {
2436+
padding-right: calc(1.5em + 0.75rem);
2437+
padding-right: 4.2rem;
2438+
background-position: right 0.75rem center, center right 2.25rem;
2439+
background-repeat: no-repeat;
2440+
}
2441+
2442+
select:user-invalid:not([multiple], [size]) {
2443+
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
2444+
}
2445+
2446+
select:user-valid:not([multiple], [size]) {
2447+
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
2448+
}
2449+
2450+
textarea:user-valid,
2451+
textarea:user-invalid {
2452+
padding-right: calc(1.5em + 0.75rem);
2453+
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
2454+
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
2455+
background-repeat: no-repeat;
2456+
}
2457+
2458+
input:user-invalid:not([type=button],
2459+
[type=reset],
2460+
[type=image],
2461+
[type=submit],
2462+
[type=checkbox],
2463+
[type=radio]),
2464+
select:user-invalid,
2465+
textarea:user-invalid {
2466+
border-color: var(--pico-form-element-invalid-border-color);
2467+
background-image: var(--pico-icon-invalid);
2468+
}
2469+
2470+
input:user-valid:not([type=button],
2471+
[type=reset],
2472+
[type=image],
2473+
[type=submit],
2474+
[type=checkbox],
2475+
[type=radio]),
2476+
select:user-valid,
2477+
textarea:user-valid {
2478+
border-color: var(--pico-form-element-valid-border-color);
2479+
background-image: var(--pico-icon-valid);
2480+
}
2481+
2482+
input:required:user-invalid:is([type=checkbox]) {
2483+
border-color: var(--pico-form-element-invalid-border-color);
2484+
}
2485+
2486+
/********** To include a message after the element with info ************/
2487+
input:user-valid:not([type=button],
2488+
[type=reset],
2489+
[type=image],
2490+
[type=submit],
2491+
[type=checkbox],
2492+
[type=radio]) + small[data-valid]::after,
2493+
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
2494+
textarea:user-valid + small[data-valid]::after {
2495+
content: attr(data-valid);
2496+
color: var(--pico-form-element-valid-border-color);
2497+
}
2498+
2499+
textarea:user-invalid + small[data-invalid]::after,
2500+
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
2501+
input:user-invalid:not([type=button],
2502+
[type=reset],
2503+
[type=image],
2504+
[type=submit],
2505+
[type=checkbox],
2506+
[type=radio]) + [data-invalid]::after,
2507+
input[type=file]:user-invalid + ul + [data-invalid]::after {
2508+
content: attr(data-invalid);
2509+
color: var(--pico-form-element-invalid-border-color);
2510+
}
2511+
2512+
input:user-valid:not([type=button],
2513+
[type=reset],
2514+
[type=image],
2515+
[type=submit],
2516+
[type=checkbox],
2517+
[type=radio]) + [data-valid]::after,
2518+
input:user-invalid:not([type=button],
2519+
[type=reset],
2520+
[type=image],
2521+
[type=submit],
2522+
[type=checkbox],
2523+
[type=radio]) + [data-invalid]::after,
2524+
textarea:user-valid + [data-valid]::after,
2525+
input[type=file]:user-invalid + [data-invalid]::after,
2526+
input[type=file]:user-invalid + ul + [data-invalid]::after {
2527+
display: block;
2528+
}
2529+
2530+
input[type=file]:user-invalid + ul + [data-invalid]::after {
2531+
position: relative;
2532+
top: -2rem;
2533+
}
2534+
2535+
input[type=file]:user-invalid::file-selector-button {
2536+
border-color: var(--pico-form-element-invalid-border-color);
2537+
background-color: var(--pico-form-element-invalid-border-color);
2538+
}
2539+
2540+
.btn-file-rm {
2541+
margin-left: 10px;
2542+
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
2543+
border-color: var(--pico-form-element-invalid-border-color);
2544+
color: var(--pico-form-element-invalid-border-color);
2545+
}
2546+
2547+
/* File list when selected from the file input */
2548+
.file-list {
2549+
margin-left: 0;
2550+
padding-right: 0;
2551+
padding-left: 0;
2552+
}
2553+
.file-list li {
2554+
list-style-type: none;
2555+
}
2556+
.file-list li:nth-child(2n) {
2557+
background-color: #1b1b1b;
2558+
}
2559+
.file-list li:hover {
2560+
background-color: var(--pico-muted-border-color);
2561+
}
2562+
24162563
/**
24172564
* Accordion (<details>)
24182565
*/

‎css/pico.amber.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.blue.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2413,6 +2413,153 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
24132413
background-position: center right 1.125rem, center left 0.75rem;
24142414
}
24152415

2416+
input:user-valid:not([type=button],
2417+
[type=reset],
2418+
[type=image],
2419+
[type=submit],
2420+
[type=checkbox],
2421+
[type=radio]),
2422+
input:user-invalid:not([type=button],
2423+
[type=reset],
2424+
[type=image],
2425+
[type=submit],
2426+
[type=checkbox],
2427+
[type=radio]) {
2428+
padding-right: calc(1.5em + 0.75rem);
2429+
background-position: right calc(0.375em + 0.1875rem) center;
2430+
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
2431+
background-repeat: no-repeat;
2432+
}
2433+
2434+
select:user-valid:not([multiple], [size]),
2435+
select:user-invalid:not([multiple], [size]) {
2436+
padding-right: calc(1.5em + 0.75rem);
2437+
padding-right: 4.2rem;
2438+
background-position: right 0.75rem center, center right 2.25rem;
2439+
background-repeat: no-repeat;
2440+
}
2441+
2442+
select:user-invalid:not([multiple], [size]) {
2443+
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
2444+
}
2445+
2446+
select:user-valid:not([multiple], [size]) {
2447+
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
2448+
}
2449+
2450+
textarea:user-valid,
2451+
textarea:user-invalid {
2452+
padding-right: calc(1.5em + 0.75rem);
2453+
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
2454+
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
2455+
background-repeat: no-repeat;
2456+
}
2457+
2458+
input:user-invalid:not([type=button],
2459+
[type=reset],
2460+
[type=image],
2461+
[type=submit],
2462+
[type=checkbox],
2463+
[type=radio]),
2464+
select:user-invalid,
2465+
textarea:user-invalid {
2466+
border-color: var(--pico-form-element-invalid-border-color);
2467+
background-image: var(--pico-icon-invalid);
2468+
}
2469+
2470+
input:user-valid:not([type=button],
2471+
[type=reset],
2472+
[type=image],
2473+
[type=submit],
2474+
[type=checkbox],
2475+
[type=radio]),
2476+
select:user-valid,
2477+
textarea:user-valid {
2478+
border-color: var(--pico-form-element-valid-border-color);
2479+
background-image: var(--pico-icon-valid);
2480+
}
2481+
2482+
input:required:user-invalid:is([type=checkbox]) {
2483+
border-color: var(--pico-form-element-invalid-border-color);
2484+
}
2485+
2486+
/********** To include a message after the element with info ************/
2487+
input:user-valid:not([type=button],
2488+
[type=reset],
2489+
[type=image],
2490+
[type=submit],
2491+
[type=checkbox],
2492+
[type=radio]) + small[data-valid]::after,
2493+
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
2494+
textarea:user-valid + small[data-valid]::after {
2495+
content: attr(data-valid);
2496+
color: var(--pico-form-element-valid-border-color);
2497+
}
2498+
2499+
textarea:user-invalid + small[data-invalid]::after,
2500+
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
2501+
input:user-invalid:not([type=button],
2502+
[type=reset],
2503+
[type=image],
2504+
[type=submit],
2505+
[type=checkbox],
2506+
[type=radio]) + [data-invalid]::after,
2507+
input[type=file]:user-invalid + ul + [data-invalid]::after {
2508+
content: attr(data-invalid);
2509+
color: var(--pico-form-element-invalid-border-color);
2510+
}
2511+
2512+
input:user-valid:not([type=button],
2513+
[type=reset],
2514+
[type=image],
2515+
[type=submit],
2516+
[type=checkbox],
2517+
[type=radio]) + [data-valid]::after,
2518+
input:user-invalid:not([type=button],
2519+
[type=reset],
2520+
[type=image],
2521+
[type=submit],
2522+
[type=checkbox],
2523+
[type=radio]) + [data-invalid]::after,
2524+
textarea:user-valid + [data-valid]::after,
2525+
input[type=file]:user-invalid + [data-invalid]::after,
2526+
input[type=file]:user-invalid + ul + [data-invalid]::after {
2527+
display: block;
2528+
}
2529+
2530+
input[type=file]:user-invalid + ul + [data-invalid]::after {
2531+
position: relative;
2532+
top: -2rem;
2533+
}
2534+
2535+
input[type=file]:user-invalid::file-selector-button {
2536+
border-color: var(--pico-form-element-invalid-border-color);
2537+
background-color: var(--pico-form-element-invalid-border-color);
2538+
}
2539+
2540+
.btn-file-rm {
2541+
margin-left: 10px;
2542+
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
2543+
border-color: var(--pico-form-element-invalid-border-color);
2544+
color: var(--pico-form-element-invalid-border-color);
2545+
}
2546+
2547+
/* File list when selected from the file input */
2548+
.file-list {
2549+
margin-left: 0;
2550+
padding-right: 0;
2551+
padding-left: 0;
2552+
}
2553+
.file-list li {
2554+
list-style-type: none;
2555+
}
2556+
.file-list li:nth-child(2n) {
2557+
background-color: #1b1b1b;
2558+
}
2559+
.file-list li:hover {
2560+
background-color: var(--pico-muted-border-color);
2561+
}
2562+
24162563
/**
24172564
* Accordion (<details>)
24182565
*/

‎css/pico.blue.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)