<form action="/" method="POST" class="cwf-form">

    <div class="cwf-form__field ">
        <label for="diploma_name" class="cwf-form__label">Full name</label>
        <p class="cwf-form__help">
            This field will be printed on your diploma
        </p>
        <input class="cwf-form__input" id="diploma_name" name="diploma_name" placeholder="Rodney the Ram" readonly required type="text" value="John Doe" />

    </div>

    <div class="cwf-form__field ">
        <label for="diploma_name_wrong" class="cwf-form__label">Donation</label>
        <div class="cwf-form__group">
            <span class="cwf-form__symbol fas fa-dollar-sign">

            </span>
            <input class="cwf-form__input" id="diploma_name_wrong" name="diploma_name_wrong" placeholder="" type="number" value="100" />

            <span class="cwf-form__symbol ">
                .00
            </span>
        </div>

    </div>

    <div class="cwf-form__field cwf-form__field--error">
        <label for="phonetic" class="cwf-form__label">Phonetic spelling</label>
        <p class="cwf-form__help">
            The MC will use this to help pronounce your name as you walk across the stage
        </p>
        <p class="cwf-form__validation">
            This input does not accept special characters such as -@$%^*
        </p>
        <div class="cwf-form__icon fa-exclamation-circle">
            <input class="cwf-form__input" id="phonetic" name="phonetic" placeholder="rah-OOL gon-SAH-les" required type="text" value="Rod-Nee the RAM" />

        </div>

    </div>

    <div class="cwf-form__field ">
        <label for="diploma_pickup" class="cwf-form__label">Diploma pick up time</label>
        <p class="cwf-form__help">
            Our office offers three appointment times to pick up your diploma
        </p>
        <div class="cwf-form__icon cwf-form__icon--select">
            <select class="cwf-form__input" id="diploma_pickup" name="diploma_pickup" required>
                <option>
                    9:00 a.m.
                </option>
                <option selected>
                    10:00 a.m.
                </option>
                <option>
                    1:00 a.m.
                </option>
            </select>
        </div>
    </div>

    <div class="cwf-form__field ">
        <label for="memory" class="cwf-form__label">Favorite VCU memory</label>
        <p class="cwf-form__help">
            Share about a time at VCU you'll always remember
        </p>
        <textarea class="cwf-form__input" id="memory" name="memory" placeholder="..."></textarea>

    </div>

    <div class="cwf-form__field " id="tee_shirt" role="radiogroup" aria-label="Commemorative tee shirt size">
        <label for="tee_shirt" class="cwf-form__label">Commemorative tee shirt size</label>
        <p class="cwf-form__help">
            As a graduate, you'll get an awesome new VCU tee shirt
        </p>
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="sm" name="tee_shirt" type="radio" />
            <label class="cwf-form__label" for="sm">
                Small
            </label>
        </div>
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="md" name="tee_shirt" type="radio" />
            <label class="cwf-form__label" for="md">
                Medium
            </label>
        </div>
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="lg" name="tee_shirt" type="radio" />
            <label class="cwf-form__label" for="lg">
                Large
            </label>
        </div>
    </div>

    <div class="cwf-form__field " id="subscription" role="radiogroup" aria-label="Graduation addons">
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="mail" name="mail" type="checkbox" />
            <label class="cwf-form__label" for="mail">
                Mail me a complementary graduation program
            </label>
            <p class="cwf-form__help">
                Programs will be mailed June 10th
            </p>
        </div>
        <div class="cwf-form__option cwf-form__option--inline">
            <input class="cwf-form__input" id="listserv" name="listserv" type="checkbox" checked />
            <label class="cwf-form__label" for="listserv">
                Subscribe me to the VCU Alumni newsletter
            </label>
        </div>
    </div>

    <div class="cwf-form__field ">
        <label for="password" class="cwf-form__label">Password</label>
        <p class="cwf-form__help">
            Must be at least 8 characters long
        </p>
        <input class="cwf-form__input" id="password" name="password" placeholder="********" required type="password" value="" />

    </div>

    <input type="submit" class="cwf-button" />

</form>
{% from './index.twig' import form %}
{% from '../button/index.twig' import button %}
{# Form content #}
{% set content %}
    {# Full name #}
    {% include './examples/text.twig' %}
    {# Donation #}
    {% include './examples/grouped.twig' %}
    {# Phonetic spelling #}
    {% include './examples/error.twig' %}
    {# Diploma pick up time #}
    {% include './examples/select.twig' %}
    {# Favorite VCU memory #}
    {% include './examples/textarea.twig' %}
    {# Commemorative tee shirt size #}
    {% include './examples/radio.twig' %}
    {# Graduation addons #}
    {% include './examples/checkbox.twig' %}
    {# Password #}
    {% include './examples/password.twig' %}
    {# Submit button #}
    {{
        button({
            element: 'input',
            type: 'submit'
        })
    }}
{% endset %}
{# Form #}
{{
    form({
        action: '/',
        method: 'POST',
        content: content
    })
}}
/* No context defined. */
  • Content:
    // Form component styles
    
    @import "../../shared/animation";
    @import "../../shared/style";
    
    // Form colors
    $form__input--background-color: style__color(white-dark) !default;
    $form__input--disabled--background-color: darken(
        style__color(white-dark),
        5%
    ) !default; // #ebebeb
    $form__input--border-color: style__color(white-darkest) !default;
    $form__input--placeholder--color: style__color(gray-lightest) !default;
    $form__input--hover--border-color: style__color(gray-lightest) !default;
    $form__input--focus--border-color: style__color(gray-darkest) !default;
    $form__input--focus--background-color: style__color(white) !default;
    $form__help--color: style__color(gray-lightest) !default;
    $form--error-color: style__color(red, accent) !default;
    $form--success-color: style__color(green, accent) !default;
    
    // Form
    
    .cwf-form {
        --cwf-form__input--background-color: #{$form__input--background-color};
        --cwf-form__input--disabled--background-color: #{$form__input--disabled--background-color};
        --cwf-form__input--border-color: #{$form__input--border-color};
        --cwf-form__input--placeholder--color: #{$form__input--placeholder--color};
        --cwf-form__input--hover--border-color: #{$form__input--hover--border-color};
        --cwf-form__input--focus--border-color: #{$form__input--focus--border-color};
        --cwf-form__input--focus--background-color: #{$form__input--focus--background-color};
        --cwf-form__help--color: #{$form__help--color};
        --cwf-form--error-color: #{$form--error-color};
        --cwf-form--success-color: #{$form--success-color};
    }
    
    // Field
    
    .cwf-form__field {
        margin-bottom: 1rem;
    
        @include style__children(margins, last);
    }
    
    // Label
    
    .cwf-form__label {
        display: block;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
    
    // Input
    
    .cwf-form__input {
        display: block;
        margin-bottom: 0.5rem;
        background-color: var(--cwf-form__input--background-color);
        resize: none;
        width: 100%;
        &:hover {
            border-color: var(--cwf-form__input--hover--border-color);
        }
        &:focus {
            border-color: var(--cwf-form__input--focus--border-color);
            background-color: var(--cwf-form__input--focus--background-color);
        }
    
        &::placeholder {
            color: var(--cwf-form__input--placeholder--color);
            opacity: 1;
        }
    
        &:disabled,
        &[readonly] {
            background-color: var(--cwf-form__input--disabled--background-color);
            color: var(--cwf-form__input--placeholder--color);
        }
    
        &:disabled:hover,
        &:disabled:focus {
            border-color: var(--cwf-form__input--border-color);
        }
    
        &[type="number"] {
            -webkit-appearance: none;
            -moz-appearance: textfield;
        }
    }
    
    // Icon
    
    .cwf-form__icon {
        position: relative;
    
        &:before {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 3rem;
            height: 100%;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: var(--cwf-form__input--hover--border-color);
            pointer-events: none;
        }
    
        .cwf-form__input {
            height: 100%;
            padding-right: 3rem;
        }
    
        select.cwf-form__input {
            appearance: none;
        }
    }
    
    .cwf-form__icon--select {
        &:before {
            content: "\f078";
            @include animation__transition(transform);
        }
    
        &:focus-within {
            &:before {
                @include animation__flip;
            }
        }
    }
    
    // Select option
    
    .cwf-form__option {
        margin-bottom: 0.5rem;
    }
    
    .cwf-form__option--inline .cwf-form__input,
    .cwf-form__option--inline .cwf-form__label {
        display: inline;
        width: auto;
    }
    
    // Input & symbol
    
    .cwf-form__input,
    .cwf-form__symbol {
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--cwf-form__input--border-color);
        border-radius: 0.25rem;
    }
    
    // Symbol
    
    .cwf-form__symbol {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        color: var(--cwf-form__input--placeholder--color);
    }
    
    // Group
    
    .cwf-form__group {
        display: flex;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    
        .cwf-form__input {
            border-radius: 0;
        }
    
        & > * {
            margin: 0;
            margin-right: -1px;
            border-radius: 0;
            @include style__z-index(content);
    
            &:not(.cwf-form__symbol) {
                flex: 1;
                @include style__z-index(content, middle);
            }
    
            &:first-child:not(.cwf-form__icon),
            &:first-child .cwf-form__input {
                border-top-left-radius: 0.25rem;
                border-bottom-left-radius: 0.25rem;
            }
    
            &:last-child:not(.cwf-form__icon),
            &:last-child .cwf-form__input {
                margin-right: 0;
                border-top-right-radius: 0.25rem;
                border-bottom-right-radius: 0.25rem;
            }
        }
    }
    
    // Help & validation
    
    .cwf-form__help {
        color: var(--cwf-form__help--color);
        font-style: italic;
    }
    
    .cwf-form__help,
    .cwf-form__validation {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
        padding-top: 0;
    }
    
    // Field status
    
    @mixin form__field--status($status) {
        .cwf-form__field--#{ $status } {
            .cwf-form__icon:before,
            .cwf-form__validation {
                color: var(--cwf-form--#{$status}-color);
            }
    
            .cwf-form__input {
                border-color: var(--cwf-form--#{$status}-color);
            }
        }
    }
    
    @include form__field--status(error);
    
    @include form__field--status(success);
    
  • URL: /components/raw/form/_index.scss
  • Filesystem Path: components/form/_index.scss
  • Size: 5.5 KB

No notes defined.