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

Build CSS

Browse source
This commit is contained in:
github-actions[bot] 2025-01-11 03:36:02 +00:00
parent 8533005d9b
commit 6165606caa
255 changed files with 11001 additions and 23349 deletions
Download patch file Download diff file Expand all files Collapse all files

266
css/pico.conditional.blue.css
View file

@ -1,7 +1,7 @@
@charset "UTF-8";
/*!
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2024 - Licensed under MIT
* Copyright 2019-2025 - Licensed under MIT
*/
/**
* Styles
@ -1874,7 +1874,7 @@ main {
text-transform: none;
}
.pico legend {
.pico *:not([role=group]) legend {
max-width: 100%;
padding: 0;
color: inherit;
@ -1944,15 +1944,15 @@ main {
border: 0;
}
.pico label,
.pico fieldset legend {
.pico *:not([role=group]) > label,
.pico fieldset:not([role=group]) > legend {
display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
}
.pico fieldset legend {
.pico fieldset:not([role=group]) > legend {
margin-bottom: calc(var(--pico-spacing) * 0.5);
}
@ -2019,19 +2019,17 @@ main {
}
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico [role=group] > label,
.pico [role=group] > legend,
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
.pico [role=group] > label[aria-disabled=true],
.pico [role=group] > legend[aria-disabled=true],
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
opacity: var(--pico-form-element-disabled-opacity);
pointer-events: none;
}
.pico label[aria-disabled=true] input[disabled],
.pico [role=group] > label,
.pico [role=group] > legend {
.pico label[aria-disabled=true] input[disabled] {
opacity: 1;
}
@ -2497,45 +2495,22 @@ main {
background-position: center right 1.125rem, center left 0.75rem;
}
.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]) input:user-invalid:not(:-moz-placeholder-shown,
[type=button],
[type=reset],
[type=image],
[type=submit],
[type=checkbox],
[type=radio]) {
.pico form:not([novalidate]) {
/* File list when selected from the file input */
}
.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]) input:user-invalid:not(:-moz-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]) 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]) {
.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);
@ -2543,22 +2518,18 @@ main {
background-position: right 0.75rem center, center right 2.25rem;
background-repeat: no-repeat;
}
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
}
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
}
.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 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);
@ -2566,210 +2537,101 @@ main {
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 form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [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 form:not([novalidate]) input:user-invalid: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]),
.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 {
.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]) 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) {
.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 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-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 {
.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]) 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);
}
.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 {
.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 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 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 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 {
.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 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 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 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 {
.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=image], [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 form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
[type=button],
[type=reset],
[type=submit],
[type=checkbox],
[type=radio]) + [data-invalid]::after,
.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 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 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 form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
position: relative;
top: -2rem;
}
.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);
}
/* File list when selected from the file input */
.pico .file-list {
.pico form:not([novalidate]) .file-list {
padding-left: 0;
}
.pico .file-list li {
.pico form:not([novalidate]) .file-list li {
display: flex;
align-items: center;
justify-content: space-between;
list-style-type: none;
text-align: center;
}
.pico .file-list li:nth-child(2n) {
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
background-color: #1b1b1b;
}
.pico .file-list li:hover {
.pico form:not([novalidate]) .file-list li:hover {
background-color: var(--pico-muted-border-color);
}
.pico .file-list li .btn-file-rm {
.pico form:not([novalidate]) .file-list li .btn-file-rm {
display: inline-block;
width: 1rem;
height: 1rem;
@ -2786,7 +2648,7 @@ main {
opacity: 0.5;
transition: opacity var(--pico-transition);
}
.pico .file-list li .btn-file-rm:hover {
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
opacity: 1;
}
@ -2825,11 +2687,11 @@ main {
}
.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);
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
transform: translateY(-55%) scale(0.8);
color: var(--pico-form-element-active-border-color);
font-size: calc(var(--pico-font-size) * 0.85);
line-height: 1.25;
font-size: var(--pico-font-size);
line-height: 1.15;
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@ -2838,13 +2700,13 @@ main {
.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 {
.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);
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
transform: translateY(-55%) scale(0.8);
color: var(--pico-form-element-active-border-color);
font-size: calc(var(--pico-font-size) * 0.85);
line-height: 1.25;
font-size: var(--pico-font-size);
line-height: 1.15;
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 {
@ -3573,6 +3435,46 @@ main {
margin-left: auto;
}
.pico [role=group] > section[role=form] {
flex: 1;
}
.pico [role=group] > section[role=form] > *:focus,
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] > section[role=form] > select:focus,
.pico [role=group] > section[role=form] > label:focus,
.pico [role=group] > section[role=form] > legend:focus,
.pico [role=group] > section[role=form] > details:focus {
z-index: 4;
}
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] > section[role=form] > select:focus {
z-index: 10;
}
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
.pico [role=group] > section[role=form] > select + label {
z-index: 10;
margin-top: 5px;
}
.pico [role=group] > section[role=form]:not(:first-child) > *,
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
.pico [role=group] > section[role=form]:not(:first-child) > select,
.pico [role=group] > section[role=form]:not(:first-child) > label,
.pico [role=group] > section[role=form]:not(:first-child) > legend,
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=group] > section[role=form]:not(:last-child) > *,
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
.pico [role=group] > section[role=form]:not(:last-child) > select,
.pico [role=group] > section[role=form]:not(:last-child) > label,
.pico [role=group] > section[role=form]:not(:last-child) > legend,
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/**
* Loading ([aria-busy=true])
*/