mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 02:36:15 -04:00
Reverted back to before prettier
Better floating label handling organized validation for better scss Updated copyright for 2025
This commit is contained in:
Yohn
parent
5677e11bc2
commit
8533005d9b
6 changed files with 198 additions and 238 deletions
|
|
@ -208,3 +208,58 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if map.get($modules, "forms/floating") {
|
||||
#{$parent-selector} [role="group"] > section[role="form"] {
|
||||
flex: 1;
|
||||
|
||||
> *,
|
||||
> input:not([type="checkbox"], [type="radio"]),
|
||||
> select,
|
||||
> label,
|
||||
> legend,
|
||||
> details {
|
||||
// need to check this for details > summary
|
||||
&:focus {
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
> input:not([type="checkbox"], [type="radio"]),
|
||||
> select {
|
||||
&:focus {
|
||||
z-index: 10;
|
||||
}
|
||||
+ label {
|
||||
z-index: 10;
|
||||
// label was positioned above placeholder..
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
> *,
|
||||
> input:not([type="checkbox"], [type="radio"]),
|
||||
> select,
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
> *,
|
||||
> input:not([type="checkbox"], [type="radio"]),
|
||||
> select,
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
// 2. Correct the color inheritance from `fieldset` elements in IE
|
||||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers
|
||||
#{$parent-selector} legend {
|
||||
#{$parent-selector} *:not([role="group"]) legend {
|
||||
max-width: 100%; // 1
|
||||
padding: 0; // 3
|
||||
color: inherit; // 2
|
||||
|
|
@ -138,15 +138,15 @@
|
|||
}
|
||||
|
||||
// Label & legend
|
||||
#{$parent-selector} label,
|
||||
#{$parent-selector} fieldset legend {
|
||||
#{$parent-selector} *:not([role="group"]) > label,
|
||||
#{$parent-selector} fieldset:not([role="group"]) > legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
|
||||
}
|
||||
|
||||
#{$parent-selector} fieldset legend {
|
||||
#{$parent-selector} fieldset:not([role="group"]) > legend {
|
||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -245,11 +245,11 @@
|
|||
|
||||
// Disabled
|
||||
#{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||||
#{$parent-selector} [role="group"] > label,
|
||||
#{$parent-selector} [role="group"] > legend,
|
||||
#{$parent-selector} select[disabled],
|
||||
#{$parent-selector} textarea[disabled],
|
||||
#{$parent-selector} label[aria-disabled="true"],
|
||||
#{$parent-selector} [role="group"] > label[aria-disabled="true"],
|
||||
#{$parent-selector} [role="group"] > legend[aria-disabled="true"],
|
||||
#{$parent-selector}
|
||||
:where(fieldset[disabled])
|
||||
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||
|
|
@ -257,9 +257,10 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
#{$parent-selector} label[aria-disabled="true"] input[disabled],
|
||||
#{$parent-selector} [role="group"] > label,
|
||||
#{$parent-selector} [role="group"] > legend {
|
||||
#{$parent-selector} label[aria-disabled="true"] input[disabled] {
|
||||
//},
|
||||
//#{$parent-selector} [role="group"] > label,
|
||||
//#{$parent-selector} [role="group"] > legend {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
// Used this before I tried: >select:has(option:checked:not([disabled]))~label
|
||||
// Used this before I tried: >select:has(option:checked:not([disabled]))+label
|
||||
//> select + label {
|
||||
// position: absolute;
|
||||
// top: -5%;
|
||||
|
|
@ -49,13 +49,14 @@
|
|||
> textarea:not(:placeholder-shown) + label,
|
||||
> textarea:focus + label,
|
||||
> select:focus + label,
|
||||
> select:has(option:checked:not([disabled])) ~ label {
|
||||
> select:has(option:checked:not([disabled])) + label {
|
||||
top: -5%;
|
||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
||||
transform: translateY(-50%) scale(0.85);
|
||||
color: var(--pico-form-element-active-border-color);
|
||||
font-size: calc(var(--pico-font-size) * 0.85);
|
||||
line-height: 1.25;
|
||||
padding: calc(var(#{$css-var-prefix}spacing) * 0.15)
|
||||
calc(var(#{$css-var-prefix}spacing) * 0.5);
|
||||
transform: translateY(-55%) scale(0.8);
|
||||
color: var(#{$css-var-prefix}form-element-active-border-color);
|
||||
font-size: var(#{$css-var-prefix}font-size);
|
||||
line-height: 1.15;
|
||||
transition: all $transition-fast;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,240 +3,142 @@
|
|||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "forms/validation") {
|
||||
#{$parent-selector}
|
||||
form:not([novalidate])
|
||||
input:user-valid:not(
|
||||
:placeholder-shown,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="image"],
|
||||
[type="submit"],
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
),
|
||||
#{$parent-selector}
|
||||
form:not([novalidate])
|
||||
input:user-invalid:not(
|
||||
:placeholder-shown,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="image"],
|
||||
[type="submit"],
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
) {
|
||||
padding-right: calc(1.5em + 0.75rem);
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#{$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:
|
||||
right 0.75rem center,
|
||||
center right 2.25rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#{$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} 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} 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"],
|
||||
[type="submit"],
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
),
|
||||
#{$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);
|
||||
// these are used so much below, and was making it too long for my liking.
|
||||
$excluded-elements: ':placeholder-shown, [type="button"], [type="reset"], [type="image"], [type="submit"], [type="checkbox"], [type="radio"]';
|
||||
|
||||
&:focus {
|
||||
border-color: var(#{$css-var-prefix}form-element-invalid-active-border-color);
|
||||
#{$parent-selector} form:not([novalidate]) {
|
||||
input:user-valid:not(#{$excluded-elements}),
|
||||
input:user-invalid:not(#{$excluded-elements}) {
|
||||
padding-right: calc(1.5em + 0.75rem);
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
#{$parent-selector}
|
||||
form:not([novalidate])
|
||||
input:user-valid:not(
|
||||
:placeholder-shown,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="image"],
|
||||
[type="submit"],
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
),
|
||||
#{$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);
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
padding-right: calc(1.5em + 0.75rem);
|
||||
padding-right: 4.2rem;
|
||||
background-position:
|
||||
right 0.75rem center,
|
||||
center right 2.25rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
#{$parent-selector} form:not([novalidate]) input:required:user-invalid:is([type="checkbox"]) {
|
||||
border-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"],
|
||||
[type="submit"],
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
)
|
||||
+ 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}
|
||||
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"],
|
||||
[type="submit"],
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
)
|
||||
+ [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"],
|
||||
[type="submit"],
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
)
|
||||
+ [data-valid]::after,
|
||||
#{$parent-selector}
|
||||
form:not([novalidate])
|
||||
input:user-invalid:not(
|
||||
:placeholder-shown,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"],
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
)
|
||||
+ [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;
|
||||
}
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-invalid);
|
||||
}
|
||||
|
||||
#{$parent-selector}
|
||||
form:not([novalidate])
|
||||
input[type="file"]:user-invalid
|
||||
+ ul
|
||||
+ [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
// the file btn
|
||||
#{$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);
|
||||
}
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(#{$css-var-prefix}icon-chevron), var(#{$css-var-prefix}icon-valid);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
textarea:user-valid:not(:placeholder-shown),
|
||||
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;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: $grey-900;
|
||||
input:user-invalid:not(#{$excluded-elements}),
|
||||
select:user-invalid:not([multiple], [size]),
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(#{$css-var-prefix}muted-border-color);
|
||||
input:user-valid:not(#{$excluded-elements}),
|
||||
select:user-valid:not([multiple], [size]),
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
input:required:user-invalid:is([type="checkbox"]) {
|
||||
border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not(#{$excluded-elements}) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(#{$css-var-prefix}form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not(#{$excluded-elements}) + [data-invalid]::after,
|
||||
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(#{$excluded-elements}) + [data-valid]::after,
|
||||
input:user-invalid:not(#{$excluded-elements}) + [data-invalid]::after,
|
||||
textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||
input[type="file"]:user-invalid + [data-invalid]::after,
|
||||
input[type="file"]:user-invalid + ul + [data-invalid]::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type="file"]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
// the file btn
|
||||
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);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.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 {
|
||||
opacity: 1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*!
|
||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||
* Copyright 2019-2024 - Licensed under MIT
|
||||
* Copyright 2019-2025 - Licensed under MIT
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue