Establish theme-level styling for Mandeeps Live Forms

[jeremy-farrance]

This file (code below) came from David Poindexter (Apr 2022) and seems to set a nice baseline.

Do we leave the module's Default in place or remove it?

_forms.scss

body .LiveForm.Default {
    font-family:$font-default;
    font-size: 1rem;
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
    td, 
    th, 
    table {
        font-family: $font-default;
    }
    table {
        margin-bottom: 0.5rem;
    }
    ul.page-break-section,
    .thank-you {
        padding: 0;
        margin: 0 -1rem;
        border-radius: $border-radius;
        box-shadow: none;
        background-color: transparent !important;
        .Field {
            padding: 0.5rem 1rem;
            &.Heading {
                .Header {
                    border: 0;
                    padding: 0;
                    margin: 0;
                }
                h1.Header { // Large
                    font-size: 2.75rem;
                    font-weight: 400;
                }
                h2.Header { // Default
                    font-size: 2.5rem;
                    font-weight: 400;
                }
                h3.Header { // Small
                    font-family:$font-times;
                    font-size: 1rem;
                    font-weight: 400;
                    text-transform: uppercase;
                    color:color('sub-accent') !important;
                }
                &.First {
                    ~ .Field.Heading {
                        h3.Header {
                            margin-top: 2rem;
                            margin-bottom: -1rem;
                        }
                    }
                }
            }
            label[class*=Field-Label-],
            > label, 
            .MatrixWrapper > label {
                font-weight: 400;
                margin: 0.65rem 0;
            }
            &.Radiobutton,
            &.Checkbox {
                label[class*=Field-Label-], 
                > label, 
                .MatrixWrapper > label {
                    font-weight: 600;
                }
            }
            input, 
            textarea, 
            select {
                font-family:$font-default;
                color: color('dark-shade');
                font-size: inherit;
                width: 100%;
                margin: 0;
                padding: 0.5rem 0.5rem;
                border: 1px solid #ccc;
                border-radius: 0;
                outline: none;
                &.error {
                    border-color:darkred;
                }
            }
            input, 
            select:not([size]) {
                height: 40px;
            }
            textarea {
                min-height: 150px;
            }
            input[type=submit], 
            input[type=button] {
                @extend .btn;
                @extend .btn-main-shade;
                &:hover, &:focus {
                    box-shadow: none;
                }
                margin:1rem 0;
            }
            input[type="radio"],
            input[type="checkbox"] {
                position: relative;
                top:1px;
                margin-right:0.25rem;
            }
​
            /* width */
            .Field-Container-Wide {
                display: table;
                width: 100%;
            }
​
            /* full name fields */
            .Field-Container,
            .Field-SubLabel-TextBox {
                display: inline-table;
                width: 50%;
                &:first-child {
                    padding-right: 0.5rem;
                }
                &:last-child {
                    padding-left: 0.5rem;
                }
            }
            &.Fullname input[type=text],
            &.Fullname:last-child input[type=text] {
                width: 100%;
                margin-right: 0;
            }
        }
        + .page-break-section:last-child {
            .Field.PageBreak {
                position: relative;
                input[value*="Back"] {
                    position: absolute;
                    top: -78px;
                    right: 0;
                    @extend .btn-black;
                }
            }
        }
    }
    label.error {
        color: darkred;
        font-size: 0.875rem;
        font-weight: 400 !important;
        padding: 0;
        opacity: 1;
    }
    .Field {
        .Field-Container label, 
        .Field-Container-Wide label, 
        .Field-SubLabel-Container {
            font-size: 0.875rem;
            margin: 0.25rem 0;
            opacity: 0.75;
        }
        &.Radiobutton,
        &.Checkbox {
            .Field-Container label, 
            .Field-Container-Wide label, 
            .Field-SubLabel-Container {
                font-size: 1rem;
                margin: 0;
                opacity: 1;
            }
            &.Required table {
                border-left: 0;
            }
        }
    }
}

[jeremy-farrance]

Did a quick test implementation of this on CPHP in May 2022

[jeremy-farrance]

In June 2022 Brittani worked through SASS compile errors above and got a working/useful baseline in CPHP2022/_forms-live.scss.

Probably still needs some clean-ups.