<div class="cwf-form__field " id="" role="radiogroup" aria-label="">
    <label for="" class="cwf-form__label"></label>
</div>
<div class="cwf-form__field {{ error ? 'cwf-form__field--error' }}"
    {{ type != 'select' ? 'id="' ~ id ~ '"' }}
    {{ type != 'select' ? 'role="radiogroup"' }}
    {{ type != 'select' ? 'aria-label="' ~ label ~ '"' }}>
    {% if not hideLabel %}
        <label for="{{ id }}" class="cwf-form__label">{{ label }}</label>
    {% endif %}
    {% if help %}
        <p class="cwf-form__help">
            {{ help }}
        </p>
    {% endif %}
    {% if error %}
        <p class="cwf-form__validation">
            {{ error }}
        </p>
    {% endif %}
    {% if type == 'select' %}
        <div class="cwf-form__icon cwf-form__icon--select">
            <select class="cwf-form__input"
                id="{{ id }}"
                name="{{ id }}"
                {{ required ? 'required' }}>
                {% for option in options %}
                    <option {{ option == value ? 'selected' }}>
                        {{ option }}
                    </option>
                {% endfor %}
            </select>
        </div>
    {% endif %}
    {% if type != 'select' %}
        {% for option in options %}
            <div class="cwf-form__option cwf-form__option--inline">
                <input class="cwf-form__input"
                    id="{{ option.id }}"
                    name="{{ type == 'radio' ? id : option.id }}"
                    type="{{ type }}"
                    {{ option.checked ? 'checked' }} />
                <label class="cwf-form__label" for="{{ option.id }}">
                    {{ option.label }}
                </label>
                {% if option.help %}
                    <p class="cwf-form__help">
                        {{ option.help }}
                    </p>
                {% endif %}
            </div>
        {% endfor %}
    {% endif %}
</div>
/* 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.