<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
}
// 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);
No notes defined.