mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
Got the file validation and previewer lines up nicer
This commit is contained in:
Yohn
parent
7602474cfd
commit
b611b528bc
239 changed files with 5076 additions and 3137 deletions
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2537,21 +2538,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2559,6 +2555,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.amber.min.css
vendored
2
css/pico.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2537,21 +2538,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2559,6 +2555,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.blue.min.css
vendored
2
css/pico.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.amber.min.css
vendored
2
css/pico.classless.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.blue.min.css
vendored
2
css/pico.classless.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.amber.min.css
vendored
2
css/pico.classless.conditional.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.blue.min.css
vendored
2
css/pico.classless.conditional.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.cyan.min.css
vendored
2
css/pico.classless.conditional.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.green.min.css
vendored
2
css/pico.classless.conditional.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.grey.min.css
vendored
2
css/pico.classless.conditional.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.jade.min.css
vendored
2
css/pico.classless.conditional.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.lime.min.css
vendored
2
css/pico.classless.conditional.lime.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.pink.min.css
vendored
2
css/pico.classless.conditional.pink.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.red.min.css
vendored
2
css/pico.classless.conditional.red.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.sand.min.css
vendored
2
css/pico.classless.conditional.sand.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.slate.min.css
vendored
2
css/pico.classless.conditional.slate.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2247,13 +2248,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2265,134 +2266,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.conditional.zinc.min.css
vendored
2
css/pico.classless.conditional.zinc.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.cyan.min.css
vendored
2
css/pico.classless.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.fuchsia.min.css
vendored
2
css/pico.classless.fuchsia.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.green.min.css
vendored
2
css/pico.classless.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.grey.min.css
vendored
2
css/pico.classless.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.indigo.min.css
vendored
2
css/pico.classless.indigo.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.jade.min.css
vendored
2
css/pico.classless.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.lime.min.css
vendored
2
css/pico.classless.lime.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.orange.min.css
vendored
2
css/pico.classless.orange.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.pink.min.css
vendored
2
css/pico.classless.pink.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.pumpkin.min.css
vendored
2
css/pico.classless.pumpkin.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.purple.min.css
vendored
2
css/pico.classless.purple.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.red.min.css
vendored
2
css/pico.classless.red.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.sand.min.css
vendored
2
css/pico.classless.sand.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.slate.min.css
vendored
2
css/pico.classless.slate.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.violet.min.css
vendored
2
css/pico.classless.violet.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.yellow.min.css
vendored
2
css/pico.classless.yellow.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2371,21 +2372,16 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
background-color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
|
|
@ -2393,6 +2389,26 @@ input[type=file]:user-invalid::file-selector-button {
|
|||
.file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.classless.zinc.min.css
vendored
2
css/pico.classless.zinc.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.conditional.amber.min.css
vendored
2
css/pico.conditional.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.conditional.blue.min.css
vendored
2
css/pico.conditional.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.conditional.cyan.min.css
vendored
2
css/pico.conditional.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.conditional.fuchsia.min.css
vendored
2
css/pico.conditional.fuchsia.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.conditional.green.min.css
vendored
2
css/pico.conditional.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.conditional.grey.min.css
vendored
2
css/pico.conditional.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.conditional.indigo.min.css
vendored
2
css/pico.conditional.indigo.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
2
css/pico.conditional.jade.min.css
vendored
2
css/pico.conditional.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,7 @@
|
|||
--pico-outline-width: 0.125rem;
|
||||
--pico-transition: 0.2s ease-in-out;
|
||||
--pico-spacing: 1rem;
|
||||
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--pico-typography-spacing-vertical: 1rem;
|
||||
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||
|
|
@ -2413,13 +2414,13 @@ main {
|
|||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
|
|
@ -2431,134 +2432,149 @@ input:user-invalid:not([type=button],
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]),
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]),
|
||||
.pico 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;
|
||||
}
|
||||
|
||||
select:user-invalid:not([multiple], [size]) {
|
||||
.pico select:user-invalid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
select:user-valid:not([multiple], [size]) {
|
||||
.pico select:user-valid:not([multiple], [size]) {
|
||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
textarea:user-valid,
|
||||
textarea:user-invalid {
|
||||
.pico textarea:user-valid,
|
||||
.pico textarea:user-invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-invalid,
|
||||
textarea:user-invalid {
|
||||
.pico select:user-invalid,
|
||||
.pico textarea:user-invalid {
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
background-image: var(--pico-icon-invalid);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]),
|
||||
select:user-valid,
|
||||
textarea:user-valid {
|
||||
.pico select:user-valid,
|
||||
.pico textarea:user-valid {
|
||||
border-color: var(--pico-form-element-valid-border-color);
|
||||
background-image: var(--pico-icon-valid);
|
||||
}
|
||||
|
||||
input:required:user-invalid:is([type=checkbox]) {
|
||||
.pico 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 ************/
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + small[data-valid]::after,
|
||||
select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
textarea:user-valid + small[data-valid]::after {
|
||||
.pico select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||
.pico textarea:user-valid + small[data-valid]::after {
|
||||
content: attr(data-valid);
|
||||
color: var(--pico-form-element-valid-border-color);
|
||||
}
|
||||
|
||||
textarea:user-invalid + small[data-invalid]::after,
|
||||
select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.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],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
content: attr(data-invalid);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
input:user-valid:not([type=button],
|
||||
.pico input:user-valid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-valid]::after,
|
||||
input:user-invalid:not([type=button],
|
||||
.pico input:user-invalid:not([type=button],
|
||||
[type=reset],
|
||||
[type=image],
|
||||
[type=submit],
|
||||
[type=checkbox],
|
||||
[type=radio]) + [data-invalid]::after,
|
||||
textarea:user-valid + [data-valid]::after,
|
||||
input[type=file]:user-invalid + [data-invalid]::after,
|
||||
input[type=file]:user-invalid + ul + [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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
.pico input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||
position: relative;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
input[type=file]:user-invalid::file-selector-button {
|
||||
.pico 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);
|
||||
}
|
||||
|
||||
.btn-file-rm {
|
||||
margin-left: 10px;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
|
||||
border-color: var(--pico-form-element-invalid-border-color);
|
||||
color: var(--pico-form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
/* File list when selected from the file input */
|
||||
.file-list {
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
.pico .file-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.file-list li {
|
||||
.pico .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
}
|
||||
.file-list li:nth-child(2n) {
|
||||
.pico .file-list li:nth-child(2n) {
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
.file-list li:hover {
|
||||
.pico .file-list li:hover {
|
||||
background-color: var(--pico-muted-border-color);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
padding-top: calc(var(--pico-spacing) * 0.25);
|
||||
border: none;
|
||||
background-image: var(--pico-icon-red-close);
|
||||
background-position: center;
|
||||
background-size: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
color: var(--pico-element-invalid-border-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
.pico .file-list li .btn-file-rm:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue