<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.