VCU Compass Web Framework

Form: Grouped 

<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>
 
{% 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
    })
}}
 
{
  "group": {
    "start": {
      "icon": "fas fa-dollar-sign"
    },
    "end": {
      "text": ".00"
    }
  },
  "id": "diploma_name_wrong",
  "label": "Donation",
  "value": "100",
  "type": "number",
  "required": false
}
  • 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.