mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 01:26:13 -04:00
- Updated form validation to not validate when form[novalidate]
- 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
parent
a937be4b4a
commit
f25840f51a
260 changed files with 71329 additions and 11561 deletions
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Pico CSS ✨ v2.1.3 (https://github.com/Yohn/PicoCSS)
|
||||
* Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
|
||||
* Copyright 2019-2024 - Licensed under MIT
|
||||
*/
|
||||
/**
|
||||
|
|
@ -1264,7 +1264,7 @@ main {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.pico :where(input, select, textarea):not([type=checkbox],
|
||||
.pico :not([novalidate]) :where(input, select, textarea):not([type=checkbox],
|
||||
[type=radio],
|
||||
[type=date],
|
||||
[type=datetime-local],
|
||||
|
|
@ -1280,7 +1280,7 @@ main {
|
|||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.pico :where(input, select, textarea):not([type=checkbox],
|
||||
.pico :not([novalidate]) :where(input, select, textarea):not([type=checkbox],
|
||||
[type=radio],
|
||||
[type=date],
|
||||
[type=datetime-local],
|
||||
|
|
@ -1290,7 +1290,7 @@ main {
|
|||
[type=range])[aria-invalid=false]:not(select) {
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
.pico :where(input, select, textarea):not([type=checkbox],
|
||||
.pico :not([novalidate]) :where(input, select, textarea):not([type=checkbox],
|
||||
[type=radio],
|
||||
[type=date],
|
||||
[type=datetime-local],
|
||||
|
|
@ -1300,22 +1300,22 @@ main {
|
|||
[type=range])[aria-invalid=true]:not(select) {
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
.pico :where(input, select, textarea)[aria-invalid=false] {
|
||||
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=false] {
|
||||
--pico-border-color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
.pico :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
||||
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
||||
--pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
|
||||
}
|
||||
.pico :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) {
|
||||
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) {
|
||||
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
|
||||
}
|
||||
.pico :where(input, select, textarea)[aria-invalid=true] {
|
||||
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=true] {
|
||||
--pico-border-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
.pico :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
||||
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
||||
--pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
|
||||
}
|
||||
.pico :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) {
|
||||
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) {
|
||||
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
|
||||
}
|
||||
|
||||
|
|
@ -1496,35 +1496,35 @@ main {
|
|||
--pico-background-color: var(--pico-border-color);
|
||||
}
|
||||
|
||||
.pico [type=checkbox][aria-invalid=false]:checked, .pico [type=checkbox][aria-invalid=false]:checked:active, .pico [type=checkbox][aria-invalid=false]:checked:focus,
|
||||
.pico [type=checkbox][role=switch][aria-invalid=false]:checked,
|
||||
.pico [type=checkbox][role=switch][aria-invalid=false]:checked:active,
|
||||
.pico [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
|
||||
.pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked, .pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:active, .pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:focus,
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked,
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked:active,
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
|
||||
--pico-background-color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
.pico [type=checkbox]:checked[aria-invalid=true], .pico [type=checkbox]:checked:active[aria-invalid=true], .pico [type=checkbox]:checked:focus[aria-invalid=true],
|
||||
.pico [type=checkbox][role=switch]:checked[aria-invalid=true],
|
||||
.pico [type=checkbox][role=switch]:checked:active[aria-invalid=true],
|
||||
.pico [type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
|
||||
.pico :not([novalidate]) [type=checkbox]:checked[aria-invalid=true], .pico :not([novalidate]) [type=checkbox]:checked:active[aria-invalid=true], .pico :not([novalidate]) [type=checkbox]:checked:focus[aria-invalid=true],
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch]:checked[aria-invalid=true],
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch]:checked:active[aria-invalid=true],
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
|
||||
--pico-background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.pico [type=checkbox][aria-invalid=false]:checked, .pico [type=checkbox][aria-invalid=false]:checked:active, .pico [type=checkbox][aria-invalid=false]:checked:focus,
|
||||
.pico [type=radio][aria-invalid=false]:checked,
|
||||
.pico [type=radio][aria-invalid=false]:checked:active,
|
||||
.pico [type=radio][aria-invalid=false]:checked:focus,
|
||||
.pico [type=checkbox][role=switch][aria-invalid=false]:checked,
|
||||
.pico [type=checkbox][role=switch][aria-invalid=false]:checked:active,
|
||||
.pico [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
|
||||
.pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked, .pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:active, .pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:focus,
|
||||
.pico :not([novalidate]) [type=radio][aria-invalid=false]:checked,
|
||||
.pico :not([novalidate]) [type=radio][aria-invalid=false]:checked:active,
|
||||
.pico :not([novalidate]) [type=radio][aria-invalid=false]:checked:focus,
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked,
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked:active,
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
|
||||
--pico-border-color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
.pico [type=checkbox]:checked[aria-invalid=true], .pico [type=checkbox]:checked:active[aria-invalid=true], .pico [type=checkbox]:checked:focus[aria-invalid=true],
|
||||
.pico [type=radio]:checked[aria-invalid=true],
|
||||
.pico [type=radio]:checked:active[aria-invalid=true],
|
||||
.pico [type=radio]:checked:focus[aria-invalid=true],
|
||||
.pico [type=checkbox][role=switch]:checked[aria-invalid=true],
|
||||
.pico [type=checkbox][role=switch]:checked:active[aria-invalid=true],
|
||||
.pico [type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
|
||||
.pico :not([novalidate]) [type=checkbox]:checked[aria-invalid=true], .pico :not([novalidate]) [type=checkbox]:checked:active[aria-invalid=true], .pico :not([novalidate]) [type=checkbox]:checked:focus[aria-invalid=true],
|
||||
.pico :not([novalidate]) [type=radio]:checked[aria-invalid=true],
|
||||
.pico :not([novalidate]) [type=radio]:checked:active[aria-invalid=true],
|
||||
.pico :not([novalidate]) [type=radio]:checked:focus[aria-invalid=true],
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch]:checked[aria-invalid=true],
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch]:checked:active[aria-invalid=true],
|
||||
.pico :not([novalidate]) [type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
|
||||
--pico-border-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
|
|
@ -1724,13 +1724,14 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
.pico input:user-valid:not([type=button],
|
||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -1742,108 +1743,238 @@ main {
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-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;
|
||||
}
|
||||
|
||||
.pico input:user-invalid:not([type=button],
|
||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
.pico input:user-valid:not([type=button],
|
||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||
}
|
||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]):focus,
|
||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||
}
|
||||
|
||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
.pico input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||
border-color: var(--pico-form-element-valid-active-border-color);
|
||||
}
|
||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]):focus,
|
||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||
border-color: var(--pico-form-element-valid-active-border-color);
|
||||
}
|
||||
|
||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/********** To include a message after the element with info ************/
|
||||
.pico input:user-valid:not([type=button],
|
||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
.pico 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,
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
.pico textarea:user-invalid + small[data-invalid]::after,
|
||||
.pico select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
.pico input:user-invalid:not([type=button],
|
||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.pico input:user-valid:not([type=button],
|
||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
.pico input:user-invalid:not([type=button],
|
||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
.pico textarea:user-valid + [data-valid]::after,
|
||||
.pico input[type=file]:user-invalid + [data-invalid]::after,
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
.pico input[type=file]:user-invalid::file-selector-button {
|
||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
|
@ -1886,6 +2017,78 @@ main {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.pico section[role=form] {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.pico section[role=form] > input::-moz-placeholder, .pico section[role=form] > textarea::-moz-placeholder {
|
||||
color: rgba(0, 0, 0, 0);
|
||||
-moz-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.pico section[role=form] > input::placeholder,
|
||||
.pico section[role=form] > textarea::placeholder {
|
||||
color: rgba(0, 0, 0, 0);
|
||||
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.pico section[role=form] > input:focus::-moz-placeholder, .pico section[role=form] > textarea:focus::-moz-placeholder {
|
||||
color: var(--pico-form-element-placeholder-color);
|
||||
}
|
||||
.pico section[role=form] > input:focus::placeholder,
|
||||
.pico section[role=form] > textarea:focus::placeholder {
|
||||
color: var(--pico-form-element-placeholder-color);
|
||||
}
|
||||
.pico section[role=form] > input + label,
|
||||
.pico section[role=form] > textarea + label,
|
||||
.pico section[role=form] > select + label {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 0.8rem;
|
||||
transform: translateY(-50%);
|
||||
background: var(--pico-form-element-background-color);
|
||||
color: var(--pico-form-element-placeholder-color);
|
||||
cursor: text;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + 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.75);
|
||||
line-height: 1.25;
|
||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.pico section[role=form] > input:not(:placeholder-shown) + label,
|
||||
.pico section[role=form] > input:focus + label,
|
||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||
.pico section[role=form] > textarea:focus + label,
|
||||
.pico section[role=form] > select:focus + label,
|
||||
.pico section[role=form] > 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.75);
|
||||
line-height: 1.25;
|
||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
.pico section[role=form] > input:user-invalid:not(:placeholder-shown) + label,
|
||||
.pico section[role=form] > textarea:user-invalid:not(:placeholder-shown) + label {
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
.pico section[role=form] > input:user-valid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-valid:not(:-moz-placeholder-shown) + label {
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
.pico section[role=form] > input:user-valid:not(:placeholder-shown) + label,
|
||||
.pico section[role=form] > textarea:user-valid:not(:placeholder-shown) + label {
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
*/
|
||||
|
|
@ -2011,6 +2214,37 @@ main {
|
|||
border-bottom-right-radius: var(--pico-border-radius);
|
||||
border-bottom-left-radius: var(--pico-border-radius);
|
||||
}
|
||||
.pico article > footer [type=submit],
|
||||
.pico article > footer [type=reset],
|
||||
.pico article > footer [type=button],
|
||||
.pico article > footer [role=group],
|
||||
.pico [role=article] > footer [type=submit],
|
||||
.pico [role=article] > footer [type=reset],
|
||||
.pico [role=article] > footer [type=button],
|
||||
.pico [role=article] > footer [role=group] {
|
||||
margin-bottom: 0px;
|
||||
/* Also remove if next input after button is a hidden input */
|
||||
}
|
||||
.pico article > footer [type=submit]:last-child,
|
||||
.pico article > footer [type=reset]:last-child,
|
||||
.pico article > footer [type=button]:last-child,
|
||||
.pico article > footer [role=group]:last-child,
|
||||
.pico [role=article] > footer [type=submit]:last-child,
|
||||
.pico [role=article] > footer [type=reset]:last-child,
|
||||
.pico [role=article] > footer [type=button]:last-child,
|
||||
.pico [role=article] > footer [role=group]:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.pico article > footer [type=submit]:has(+ [type=hidden]),
|
||||
.pico article > footer [type=reset]:has(+ [type=hidden]),
|
||||
.pico article > footer [type=button]:has(+ [type=hidden]),
|
||||
.pico article > footer [role=group]:has(+ [type=hidden]),
|
||||
.pico [role=article] > footer [type=submit]:has(+ [type=hidden]),
|
||||
.pico [role=article] > footer [type=reset]:has(+ [type=hidden]),
|
||||
.pico [role=article] > footer [type=button]:has(+ [type=hidden]),
|
||||
.pico [role=article] > footer [role=group]:has(+ [type=hidden]) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Group ([role="group"], [role="search"])
|
||||
|
|
@ -2396,6 +2630,219 @@ body:has(dialog[open]) {
|
|||
content: "\\";
|
||||
}
|
||||
|
||||
/**
|
||||
* Nav hamburger menu
|
||||
* modified from https: //codepen.io/brentarias/pen/gOQybod
|
||||
*/
|
||||
.pico nav[role=navigation] {
|
||||
z-index: 1;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pico nav[role=navigation][data-position=start] {
|
||||
/* remove the 'flex-direction' to move menu to the right */
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pico nav[role=navigation] > input[type=checkbox] {
|
||||
display: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.pico nav[role=navigation] > label {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.pico nav[role=navigation] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pico nav[role=navigation] label {
|
||||
display: block;
|
||||
}
|
||||
.pico nav[role=navigation] > [role=list] {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 90vw;
|
||||
max-height: 0;
|
||||
margin: 0 auto;
|
||||
background-color: var(--pico-muted-border-color);
|
||||
box-shadow: var(--pico-box-shadow);
|
||||
transition: max-height var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation] > [role=list] li {
|
||||
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
|
||||
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
|
||||
padding: 0;
|
||||
}
|
||||
.pico nav[role=navigation] > [role=list] a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
transition: border-color var(--pico-transition), color var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation] > [role=list] a:hover {
|
||||
border-bottom-color: var(--pico-underline);
|
||||
text-decoration: none;
|
||||
}
|
||||
.pico nav[role=navigation] input[type=checkbox]:checked ~ [role=list] {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.pico nav[role=navigation][data-breakpoint=md] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=md] label {
|
||||
display: block;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=md] > [role=list] {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 90vw;
|
||||
max-height: 0;
|
||||
margin: 0 auto;
|
||||
background-color: var(--pico-muted-border-color);
|
||||
box-shadow: var(--pico-box-shadow);
|
||||
transition: max-height var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=md] > [role=list] li {
|
||||
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
|
||||
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
|
||||
padding: 0;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=md] > [role=list] a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
transition: border-color var(--pico-transition), color var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=md] > [role=list] a:hover {
|
||||
border-bottom-color: var(--pico-underline);
|
||||
text-decoration: none;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=md] input[type=checkbox]:checked ~ [role=list] {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.pico nav[role=navigation][data-breakpoint=lg] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=lg] label {
|
||||
display: block;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=lg] > [role=list] {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 90vw;
|
||||
max-height: 0;
|
||||
margin: 0 auto;
|
||||
background-color: var(--pico-muted-border-color);
|
||||
box-shadow: var(--pico-box-shadow);
|
||||
transition: max-height var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=lg] > [role=list] li {
|
||||
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
|
||||
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
|
||||
padding: 0;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=lg] > [role=list] a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
transition: border-color var(--pico-transition), color var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=lg] > [role=list] a:hover {
|
||||
border-bottom-color: var(--pico-underline);
|
||||
text-decoration: none;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=lg] input[type=checkbox]:checked ~ [role=list] {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.pico nav[role=navigation][data-breakpoint=xl] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xl] label {
|
||||
display: block;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xl] > [role=list] {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 90vw;
|
||||
max-height: 0;
|
||||
margin: 0 auto;
|
||||
background-color: var(--pico-muted-border-color);
|
||||
box-shadow: var(--pico-box-shadow);
|
||||
transition: max-height var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xl] > [role=list] li {
|
||||
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
|
||||
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
|
||||
padding: 0;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xl] > [role=list] a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
transition: border-color var(--pico-transition), color var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xl] > [role=list] a:hover {
|
||||
border-bottom-color: var(--pico-underline);
|
||||
text-decoration: none;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xl] input[type=checkbox]:checked ~ [role=list] {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.pico nav[role=navigation][data-breakpoint=xxl] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xxl] label {
|
||||
display: block;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xxl] > [role=list] {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 90vw;
|
||||
max-height: 0;
|
||||
margin: 0 auto;
|
||||
background-color: var(--pico-muted-border-color);
|
||||
box-shadow: var(--pico-box-shadow);
|
||||
transition: max-height var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xxl] > [role=list] li {
|
||||
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
|
||||
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
|
||||
padding: 0;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xxl] > [role=list] a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
transition: border-color var(--pico-transition), color var(--pico-transition);
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xxl] > [role=list] a:hover {
|
||||
border-bottom-color: var(--pico-underline);
|
||||
text-decoration: none;
|
||||
}
|
||||
.pico nav[role=navigation][data-breakpoint=xxl] input[type=checkbox]:checked ~ [role=list] {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Progress
|
||||
*/
|
||||
|
|
@ -2474,6 +2921,8 @@ body:has(dialog[open]) {
|
|||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
width: 250px;
|
||||
max-width: 250px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
|
|
@ -2484,9 +2933,10 @@ body:has(dialog[open]) {
|
|||
font-style: normal;
|
||||
font-weight: var(--pico-font-weight);
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
white-space: normal;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -2599,6 +3049,58 @@ body:has(dialog[open]) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tab region
|
||||
* styling help from: https://github.com/picocss/pico/discussions/608
|
||||
* and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
|
||||
*/
|
||||
.pico section[role=region] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.pico section[role=region] details {
|
||||
display: contents;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.pico section[role=region] details summary {
|
||||
flex-grow: 1;
|
||||
order: 0;
|
||||
margin: 0;
|
||||
padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
|
||||
border-bottom: 1px solid transparent;
|
||||
background-color: var(--pico-card-sectioning-background-color);
|
||||
list-style-type: none;
|
||||
touch-action: manipulation;
|
||||
transition: all var(--pico-transition);
|
||||
}
|
||||
.pico section[role=region] details summary:hover {
|
||||
border-bottom-color: var(--pico-primary-border);
|
||||
background-color: var(--pico-card-background-color);
|
||||
}
|
||||
.pico section[role=region] details summary::after {
|
||||
display: none;
|
||||
}
|
||||
.pico section[role=region] details > div {
|
||||
opacity: 0;
|
||||
}
|
||||
.pico section[role=region] details[open] > summary {
|
||||
background-color: var(--pico-primary-background);
|
||||
color: var(--pico-primary-inverse) !important;
|
||||
}
|
||||
.pico section[role=region] details[open] > summary:hover {
|
||||
background-color: var(--pico-primary-hover-background);
|
||||
}
|
||||
.pico section[role=region] details[open] > div {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
padding: var(--pico-spacing);
|
||||
padding-bottom: 0;
|
||||
opacity: 1;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
|
||||
/**
|
||||
* Notification (<dialog>)
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue