Something went wrong on our end
Select Git revision
-
Volker Schukai authoredVolker Schukai authored
form.pcss 5.50 KiB
@import "hover.pcss";
@define-mixin form {
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
position: relative;
flex-direction: column;
align-content: flex-start;
align-items: flex-start;
accent-color: var(--monster-color-secondary-2);
& label {
color: var(--monster-color-primary-1);
background-color: var(--monster-bg-color-primary-1);
display: grid;
}
& label:has(input[type="radio"]) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
& input {
margin-right: 0.4rem;
margin-left: 0.4rem;
}
}
& label:has(input[type="radio"]) ~ label:has(input[type="radio"]) {
margin-top: 0.2rem;
}
& label:has(input[type="checkbox"]) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
& input {
margin-right: 0.4rem;
margin-left: 0.4rem;
}
}
& label:has(input[type="checkbox"]) ~ label:has(input[type="checkbox"]) {
margin-top: 0.2rem;
}
& label ~ label {
margin-top: 1rem;
}
& label ~ fieldset {
margin-top: 1rem;
}
& button,
& input,
& select,
& textarea {
font-family: inherit;
font-size: 100%;
padding: 0.4rem 0.6rem;
margin: 0;
outline: none;
box-sizing: border-box;
accent-color: var(--monster-color-secondary-2);
color: var(--monster-color-primary-1);
background-color: var(--monster-bg-color-primary-1);
}
& button {
color: var(--monster-color-tertiary-1);
background-color: var(--monster-bg-color-tertiary-1);
/** monster-border-primary-1 */
border-width: var(--monster-border-width);
border-radius: var(--monster-border-radius);
border-style: var(--monster-border-style);
border-shadow: var(--monster-box-shadow-1);
border-color: var(--monster-bg-color-primary-3);
}
& option:checked {
background-color: var(--monster-bg-color-primary-3);
color: var(--monster-color-primary-3);
}
& option:focus {
background-color: var(--monster-bg-color-primary-3);
color: var(--monster-color-primary-3);
}
& option:hover {
background-color: var(--monster-bg-color-primary-3);
color: var(--monster-color-primary-3);
}
& input,
& select,
& textarea {
border: 0;
border-bottom-width: thin;
border-bottom-radius: var(--monster-border-radius);
border-bottom-style: var(--monster-border-style);
border-bottom-shadow: var(--monster-box-shadow-1);
border-bottom-color: var(--monster-bg-color-primary-1);
}
& input,
& select,
& textarea {
border-width: thin;
border-radius: var(--monster-border-radius);
border-style: var(--monster-border-style);
border-shadow: var(--monster-box-shadow-1);
border-color: var(--monster-bg-color-primary-2);
}
& button,
& input:not([type="radio"]):not([type="checkbox"]),
& select,
& textarea {
width: 100%;
}
& label {
width: 100%;
& input:not([type="radio"]):not([type="checkbox"]),
& select,
& textarea {
width: 100%;
margin-top: 0.2rem;
}
}
& label + input:not([type="radio"]):not([type="checkbox"]),
& label + select,
& label + textarea {
width: 100%;
margin-top: 0.2rem;
}
& fieldset {
margin: 0;
position: relative;
padding: 2.5rem 2rem 2rem;
border: 2px solid var(--monster-bg-color-primary-3);
background-color: var(--monster-bg-color-primary-1);
color: var(--monster-color-primary-1);
box-sizing: border-box;
width: 100%;
outline: none;
& legend {
position: absolute;
top: 0;
right: 0px;
padding: 0.1rem 2rem 0.2rem 0.5rem;
max-width: 95%;
text-align: right;
text-transform: uppercase;
text-overflow: ellipsis;
font-size: 0.8rem;
overflow: hidden;
white-space: nowrap;
}
& label {
}
}
& fieldset ~ fieldset {
margin-top: 1rem;
}
& button {
margin: 0.2rem 0;
}
& button:first-of-type {
margin-top: 1rem;
}
& button:last-of-type {
margin-bottom: 1rem;
}
& input:focus-visible {
outline: none;
}
& button:focus,
& input:focus,
& select:focus,
& textarea:focus {
outline: 1px dashed var(--monster-color-selection-4);
outline-offset: 2px;
}
@media (prefers-color-scheme: light) {
& button,
& input,
& select,
& textarea {
background-color: var(--monster-bg-color-primary-2);
color: var(--monster-color-primary-2);
border-color: var(--monster-bg-color-primary-3);
}
& button:focus,
& input:focus,
& select:focus,
& textarea:focus {
outline: 1px dashed var(--monster-color-selection-3);
outline-offset: 2px;
}
}
& button:hover,
& input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
& select:hover,
& textarea:hover {
@mixin box-hover;
}
}