107 lines
2.2 KiB
CSS
107 lines
2.2 KiB
CSS
:root {
|
|
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
|
--fwd-invalid-color: #d8000c;
|
|
--fwd-valid-color: #4f8a10;
|
|
|
|
--pico-form-element-invalid-border-color: var(--fwd-invalid-color) !important;
|
|
--pico-form-element-valid-border-color: var(--fwd-valid-color) !important;
|
|
}
|
|
|
|
|
|
/* Status card */
|
|
.status-card {
|
|
font-weight: bold;
|
|
position: relative;
|
|
}
|
|
|
|
.status-card output {
|
|
display: block;
|
|
margin-right: var(--pico-block-spacing-horizontal);
|
|
}
|
|
|
|
.status-card .close {
|
|
position: absolute;
|
|
right: var(--pico-block-spacing-horizontal);
|
|
top: calc(50% - .5rem);
|
|
|
|
width: 1rem;
|
|
height: 1rem;
|
|
|
|
background-image: var(--pico-icon-close);
|
|
background-position: center;
|
|
background-size: auto 1rem;
|
|
background-repeat: no-repeat;
|
|
|
|
opacity: .5;
|
|
transition: opacity var(--pico-transition);
|
|
}
|
|
|
|
.status-card .close:is([aria-current], :hover, :active, :focus) {
|
|
opacity: 1
|
|
}
|
|
|
|
.status-card.error {
|
|
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
|
background-color: #ffbaba;
|
|
color: var(--fwd-invalid-color);
|
|
}
|
|
|
|
.status-card.info {
|
|
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
|
background-color: #bde5f8;
|
|
color: #00529b;
|
|
}
|
|
|
|
.status-card.success {
|
|
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
|
background-color: #dff2bf;
|
|
color: var(--fwd-valid-color);
|
|
}
|
|
|
|
.status-card.warning {
|
|
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
|
background-color: #feefb3;
|
|
color: #9f6000;
|
|
}
|
|
|
|
|
|
/* Input validation */
|
|
label.invalid,
|
|
*[data-label-for].invalid,
|
|
input.invalid,
|
|
*[data-hint-for].invalid {
|
|
color: var(--fwd-invalid-color) !important;
|
|
}
|
|
|
|
input.invalid {
|
|
border-color: var(--fwd-invalid-color) !important;
|
|
}
|
|
|
|
label.valid,
|
|
*[data-label-for].valid,
|
|
input.valid,
|
|
*[data-hint-for].valid {
|
|
color: var(--fwd-valid-color) !important;
|
|
}
|
|
|
|
input.valid {
|
|
border-color: var(--fwd-valid-color) !important;
|
|
}
|
|
|
|
|
|
/* Enable hint-like styling on any element */
|
|
.input-hint {
|
|
display: block;
|
|
|
|
margin-top: calc(var(--pico-spacing) * -.75);
|
|
}
|
|
|
|
|
|
/* Custom components */
|
|
.inline-button {
|
|
display: inline-block;
|
|
width: unset;
|
|
margin: 0;
|
|
padding: 0.3em;
|
|
}
|