Skip to content
Snippets Groups Projects
Select Git revision
  • 7aa2e062013ab02889d18de8d22186444a39cb39
  • master default protected
  • 1.31
  • 4.37.2
  • 4.37.1
  • 4.37.0
  • 4.36.0
  • 4.35.0
  • 4.34.1
  • 4.34.0
  • 4.33.1
  • 4.33.0
  • 4.32.2
  • 4.32.1
  • 4.32.0
  • 4.31.0
  • 4.30.1
  • 4.30.0
  • 4.29.1
  • 4.29.0
  • 4.28.0
  • 4.27.0
  • 4.26.0
23 results

form.pcss

Blame
  • 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;
        }
    
    
    }