sharpetronics/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-02-23 00:01:58 -05:00
Code Issues Projects Releases Wiki Activity

refactor: :not() selectors

Browse Source
This commit is contained in:
Lucas Larroche 2022-09-11 18:30:49 +07:00
parent 844a5fcf84
commit 17b3b4cead
31 changed files with 144 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
css/pico.classless.css
View File

@ -180,7 +180,7 @@ tfoot td {
--border-width: 3px;
}
:not(thead):not(tfoot) > * > td {
:not(thead, tfoot) > * > td {
--font-size: 0.875em;
}
@ -1027,7 +1027,7 @@ textarea {
border-width: 0;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
input:not([type=checkbox], [type=radio], [type=range]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}
@ -1045,13 +1045,13 @@ fieldset legend {
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),
input:not([type=checkbox], [type=radio]),
select,
textarea {
width: 100%;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
select,
textarea {
-webkit-appearance: none;
@ -1077,33 +1077,33 @@ textarea {
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,
input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus,
textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
input:not([type=submit], [type=button], [type=reset])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
@ -1114,10 +1114,10 @@ textarea[disabled],
background-size: 1rem auto;
background-repeat: no-repeat;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
:where(input, select, textarea)[aria-invalid=false] {
@ -1135,7 +1135,7 @@ textarea[disabled],
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
}
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
[dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
background-position: center left 0.75rem;
}
@ -1148,7 +1148,7 @@ select:invalid {
opacity: 1;
}
input:not([type=checkbox]):not([type=radio]),
input:not([type=checkbox], [type=radio]),
select,
textarea {
margin-bottom: var(--spacing);
@ -1158,7 +1158,7 @@ select::-ms-expand {
border: 0;
background-color: transparent;
}
select:not([multiple]):not([size]) {
select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1171,7 +1171,7 @@ select:not([multiple]):not([size]) {
background-repeat: no-repeat;
}
[dir=rtl] select:not([multiple]):not([size]) {
[dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem;
}
@ -1324,7 +1324,7 @@ label > :where(input, select, textarea) {
border-radius: calc(var(--border-radius) * 0.5);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
@ -1333,7 +1333,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
background-image: var(--icon-time);
}
@ -1558,7 +1558,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
transform: scale(1.25);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
@ -1567,15 +1567,15 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: 1rem auto;
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
background-image: var(--icon-search), var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
background-image: var(--icon-search), var(--icon-invalid);
}
@ -1584,10 +1584,10 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
display: none;
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
background-position: center right 1.125rem;
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
}
@ -2217,7 +2217,7 @@ li[role=list] > a::after {
cursor: progress;
}
[aria-busy=true]:not(input):not(select):not(textarea)::before {
[aria-busy=true]:not(input, select, textarea)::before {
display: inline-block;
width: 1em;
height: 1em;
@ -2231,7 +2231,7 @@ li[role=list] > a::after {
animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity);
}
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
[aria-busy=true]:not(input, select, textarea):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
@ -2239,7 +2239,7 @@ li[role=list] > a::after {
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5);
}
[aria-busy=true]:not(input):not(select):not(textarea):empty {
[aria-busy=true]:not(input, select, textarea):empty {
text-align: center;
}
@ -2268,7 +2268,7 @@ a[aria-busy=true] {
[data-tooltip] {
position: relative;
}
[data-tooltip]:not(a):not(button):not(input) {
[data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;

2
css/pico.classless.css.map
View File

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View File

File diff suppressed because one or more lines are too long

56
css/pico.css
View File

@ -185,7 +185,7 @@ tfoot td {
--border-width: 3px;
}
:not(thead):not(tfoot) > * > td {
:not(thead, tfoot) > * > td {
--font-size: 0.875em;
}
@ -1130,7 +1130,7 @@ textarea {
border-width: 0;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
input:not([type=checkbox], [type=radio], [type=range]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}
@ -1148,13 +1148,13 @@ fieldset legend {
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),
input:not([type=checkbox], [type=radio]),
select,
textarea {
width: 100%;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
select,
textarea {
-webkit-appearance: none;
@ -1180,33 +1180,33 @@ textarea {
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,
input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus,
textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
input:not([type=submit], [type=button], [type=reset])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
@ -1217,10 +1217,10 @@ textarea[disabled],
background-size: 1rem auto;
background-repeat: no-repeat;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
:where(input, select, textarea)[aria-invalid=false] {
@ -1238,7 +1238,7 @@ textarea[disabled],
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
}
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
[dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
background-position: center left 0.75rem;
}
@ -1251,7 +1251,7 @@ select:invalid {
opacity: 1;
}
input:not([type=checkbox]):not([type=radio]),
input:not([type=checkbox], [type=radio]),
select,
textarea {
margin-bottom: var(--spacing);
@ -1261,7 +1261,7 @@ select::-ms-expand {
border: 0;
background-color: transparent;
}
select:not([multiple]):not([size]) {
select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1274,7 +1274,7 @@ select:not([multiple]):not([size]) {
background-repeat: no-repeat;
}
[dir=rtl] select:not([multiple]):not([size]) {
[dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem;
}
@ -1427,7 +1427,7 @@ label > :where(input, select, textarea) {
border-radius: calc(var(--border-radius) * 0.5);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
@ -1436,7 +1436,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
background-image: var(--icon-time);
}
@ -1661,7 +1661,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
transform: scale(1.25);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
@ -1670,15 +1670,15 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: 1rem auto;
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
background-image: var(--icon-search), var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
background-image: var(--icon-search), var(--icon-invalid);
}
@ -1687,10 +1687,10 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
display: none;
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
background-position: center right 1.125rem;
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
}
@ -2405,7 +2405,7 @@ li[role=list] > a::after {
cursor: progress;
}
[aria-busy=true]:not(input):not(select):not(textarea)::before {
[aria-busy=true]:not(input, select, textarea)::before {
display: inline-block;
width: 1em;
height: 1em;
@ -2419,7 +2419,7 @@ li[role=list] > a::after {
animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity);
}
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
[aria-busy=true]:not(input, select, textarea):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
@ -2427,7 +2427,7 @@ li[role=list] > a::after {
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5);
}
[aria-busy=true]:not(input):not(select):not(textarea):empty {
[aria-busy=true]:not(input, select, textarea):empty {
text-align: center;
}
@ -2456,7 +2456,7 @@ a[aria-busy=true] {
[data-tooltip] {
position: relative;
}
[data-tooltip]:not(a):not(button):not(input) {
[data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;

2
css/pico.css.map
View File

File diff suppressed because one or more lines are too long

56
css/pico.fluid.classless.css
View File

@ -180,7 +180,7 @@ tfoot td {
--border-width: 3px;
}
:not(thead):not(tfoot) > * > td {
:not(thead, tfoot) > * > td {
--font-size: 0.875em;
}
@ -997,7 +997,7 @@ textarea {
border-width: 0;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
input:not([type=checkbox], [type=radio], [type=range]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}
@ -1015,13 +1015,13 @@ fieldset legend {
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),
input:not([type=checkbox], [type=radio]),
select,
textarea {
width: 100%;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
select,
textarea {
-webkit-appearance: none;
@ -1047,33 +1047,33 @@ textarea {
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,
input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus,
textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
input:not([type=submit], [type=button], [type=reset])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
@ -1084,10 +1084,10 @@ textarea[disabled],
background-size: 1rem auto;
background-repeat: no-repeat;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
:where(input, select, textarea)[aria-invalid=false] {
@ -1105,7 +1105,7 @@ textarea[disabled],
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
}
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
[dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
background-position: center left 0.75rem;
}
@ -1118,7 +1118,7 @@ select:invalid {
opacity: 1;
}
input:not([type=checkbox]):not([type=radio]),
input:not([type=checkbox], [type=radio]),
select,
textarea {
margin-bottom: var(--spacing);
@ -1128,7 +1128,7 @@ select::-ms-expand {
border: 0;
background-color: transparent;
}
select:not([multiple]):not([size]) {
select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1141,7 +1141,7 @@ select:not([multiple]):not([size]) {
background-repeat: no-repeat;
}
[dir=rtl] select:not([multiple]):not([size]) {
[dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem;
}
@ -1294,7 +1294,7 @@ label > :where(input, select, textarea) {
border-radius: calc(var(--border-radius) * 0.5);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
@ -1303,7 +1303,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
background-image: var(--icon-time);
}
@ -1528,7 +1528,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
transform: scale(1.25);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
@ -1537,15 +1537,15 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: 1rem auto;
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
background-image: var(--icon-search), var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] {
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
background-image: var(--icon-search), var(--icon-invalid);
}
@ -1554,10 +1554,10 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
display: none;
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
background-position: center right 1.125rem;
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
}
@ -2187,7 +2187,7 @@ li[role=list] > a::after {
cursor: progress;
}
[aria-busy=true]:not(input):not(select):not(textarea)::before {
[aria-busy=true]:not(input, select, textarea)::before {
display: inline-block;
width: 1em;
height: 1em;
@ -2201,7 +2201,7 @@ li[role=list] > a::after {
animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity);
}
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
[aria-busy=true]:not(input, select, textarea):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
@ -2209,7 +2209,7 @@ li[role=list] > a::after {
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5);
}
[aria-busy=true]:not(input):not(select):not(textarea):empty {
[aria-busy=true]:not(input, select, textarea):empty {
text-align: center;
}
@ -2238,7 +2238,7 @@ a[aria-busy=true] {
[data-tooltip] {
position: relative;
}
[data-tooltip]:not(a):not(button):not(input) {
[data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;

2
css/pico.fluid.classless.css.map
View File

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View File

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View File

File diff suppressed because one or more lines are too long

32
css/pico.slim.css
View File

@ -116,7 +116,7 @@ tfoot td {
--border-width: 3px;
}
:not(thead):not(tfoot) > * > td {
:not(thead, tfoot) > * > td {
--font-size: 0.875em;
}
@ -1057,7 +1057,7 @@ textarea {
border-width: 0;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
input:not([type=checkbox], [type=radio], [type=range]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}
@ -1075,13 +1075,13 @@ fieldset legend {
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),
input:not([type=checkbox], [type=radio]),
select,
textarea {
width: 100%;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
select,
textarea {
-webkit-appearance: none;
@ -1106,33 +1106,33 @@ textarea {
font-weight: var(--font-weight);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,
input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus,
textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
input:not([type=submit], [type=button], [type=reset])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1143,10 +1143,10 @@ textarea[disabled],
background-size: 1rem auto;
background-repeat: no-repeat;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
:where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
:where(input, select, textarea)[aria-invalid=false] {
@ -1164,7 +1164,7 @@ textarea[disabled],
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
}
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
[dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
background-position: center left 0.75rem;
}
@ -1177,7 +1177,7 @@ select:invalid {
opacity: 1;
}
input:not([type=checkbox]):not([type=radio]),
input:not([type=checkbox], [type=radio]),
select,
textarea {
margin-bottom: var(--spacing);
@ -1187,7 +1187,7 @@ select::-ms-expand {
border: 0;
background-color: transparent;
}
select:not([multiple]):not([size]) {
select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1200,7 +1200,7 @@ select:not([multiple]):not([size]) {
background-repeat: no-repeat;
}
[dir=rtl] select:not([multiple]):not([size]) {
[dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem;
}

2
css/pico.slim.css.map
View File

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View File

File diff suppressed because one or more lines are too long

2
css/themes/default.css
View File

@ -180,7 +180,7 @@ tfoot td {
--border-width: 3px;
}
:not(thead):not(tfoot) > * > td {
:not(thead, tfoot) > * > td {
--font-size: 0.875em;
}

2
css/themes/default.css.map
View File

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View File

File diff suppressed because one or more lines are too long

4
docs/css/pico.docs.css
View File

@ -70,7 +70,7 @@ body > main div[role=document] {
min-width: 0;
}
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after {
display: inline-block;
width: 1rem;
height: 1rem;
@ -180,7 +180,7 @@ main > aside details summary::after {
main > aside details[open] > summary {
margin-bottom: 0;
}
main > aside details[open] > summary:not([role=button]):not(:focus) {
main > aside details[open] > summary:not([role=button], :focus) {
color: var(--h1-color);
}

2
docs/css/pico.docs.css.map
View File

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css.map
View File

File diff suppressed because one or more lines are too long

2
docs/scss/layout/_aside.scss
View File

@ -122,7 +122,7 @@ main > aside {
> summary {
margin-bottom: 0;
&:not([role=button]):not(:focus) {
&:not([role=button], :focus) {
color: var(--h1-color);
}
}

2
docs/scss/layout/_main.scss
View File

@ -31,7 +31,7 @@ body > main {
}
// External links
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after
{
display: inline-block;
width: 1rem;

12
scss/content/_form-alt-input-types.scss
View File

@ -35,12 +35,8 @@
// Date & Time
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
&[type="date"],
&[type="datetime-local"],
&[type="month"],
&[type="time"],
&[type="week"] {
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
@ -224,7 +220,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
// Search
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
@ -263,7 +259,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
[dir="rtl"] {
:where(input) {
&:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
background-position: center right 1.125rem;

30
scss/content/_form.scss
View File

@ -109,7 +109,7 @@ textarea {
// ––––––––––––––––––––
// Force height for alternatives input types
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc(
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
(var(--border-width) * 2)
@ -133,14 +133,14 @@ fieldset legend {
}
// Blocks, 100%
input:not([type="checkbox"]):not([type="radio"]),
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
width: 100%;
}
// Reset appearance (Not Checkboxes, Radios, Range and File)
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select,
textarea {
appearance: none;
@ -172,7 +172,7 @@ textarea {
}
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
:where(select, textarea) {
&:is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
@ -180,7 +180,7 @@ input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="c
}
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
:where(select, textarea) {
&:is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
@ -188,7 +188,7 @@ input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="s
}
// Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]),
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
select,
textarea {
&:focus {
@ -197,10 +197,10 @@ textarea {
}
// Disabled
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
:where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
@ -209,7 +209,7 @@ textarea[disabled],
// Aria-invalid
:where(input, select, textarea) {
&:not([type="checkbox"]):not([type="radio"]) {
&:not([type="checkbox"], [type="radio"]) {
&[aria-invalid] {
@if $enable-important {
padding-right: calc(
@ -274,10 +274,8 @@ textarea[disabled],
[dir="rtl"] {
:where(input, select, textarea) {
&:not([type="checkbox"]):not([type="radio"]) {
&[aria-invalid],
&[aria-invalid="true"],
&[aria-invalid="false"] {
&:not([type="checkbox"], [type="radio"]) {
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"] ){
background-position: center left 0.75rem;
}
}
@ -295,7 +293,7 @@ select:invalid {
}
// Margin bottom (Not Checkboxes and Radios)
input:not([type="checkbox"]):not([type="radio"]),
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
margin-bottom: var(--spacing);
@ -309,7 +307,7 @@ select {
background-color: transparent;
}
&:not([multiple]):not([size]) {
&:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal);
@ -323,7 +321,7 @@ select {
[dir="rtl"] {
select {
&:not([multiple]):not([size]) {
&:not([multiple], [size]) {
background-position: center left 0.75rem;
}
}

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

@ -228,7 +228,7 @@ tfoot {
}
}
:not(thead):not(tfoot) > * > td {
:not(thead, tfoot) > * > td {
--font-size: 0.875em;
}

2
scss/utilities/_loading.scss
View File

@ -9,7 +9,7 @@
}
// Everyting except form elements
[aria-busy="true"]:not(input):not(select):not(textarea) {
[aria-busy="true"]:not(input, select, textarea) {
&::before {
display: inline-block;

2
scss/utilities/_tooltip.scss
View File

@ -5,7 +5,7 @@
[data-tooltip] {
position: relative;
&:not(a):not(button):not(input) {
&:not(a, button, input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;