<input type="text" class="form__input" />
{% switch type %}
{% case 'label' %}
<label{% if for %} for="{{for}}"{% endif %} class="form__label{% if required %} form__label--required{% endif %}">{{label}}:</label>
{% case 'switch' %}
<div class="form__switch{{class|lspace}}">
<input class="form__switch__check" id="{{id}}" type="checkbox"{% if checked %} checked{% endif %}>
<label class="form__switch__label" for="{{id}}">
<div class="toggle" data-text-on="{{textOn}}" data-text-off="{{textOff}}"></div>
<div class="label">{{label|safe}}</div>
</label>
</div>
{% case 'textarea' %}
<textarea
class="form__textarea{{class|lspace}}"
{% if id %} id="{{id}}"{% endif %}
{% if name %} name="{{name}}"{% endif %}
{% if placeholder %} placeholder="{{placeholder}}"{% endif %}
{% if required %} required="required"{% endif %}
{% if autocomplete %} autocomplete="on"{% endif %}>{{value|safe}}</textarea>
{% case 'radio' %}
<input
type="radio"
class="form__radio{{class|lspace}}"
{% if id %} id="{{id}}"{% endif %}
{% if name %} name="{{name}}"{% endif %}
{% if value %} value="{{value}}"{% endif %}
{% if required %} required="required"{% endif %}/>
{% case 'checkbox' %}
<input
type="checkbox"
class="form__checkbox{{class|lspace}}"
{% if id %} id="{{id}}"{% endif %}
{% if name %} name="{{name}}"{% endif %}
{% if value %} value="{{value}}"{% endif %}
{% if required %} required="required"{% endif %}/>
{% case 'select' %}
<select
class="form__select{{class|lspace}}"
{% if id %} id="{{id}}"{% endif %}
{% if name %} name="{{name}}"{% endif %}
{% if required %} required="required"{% endif %}>
{% for item in options %}
<option value="{{item.value}}">{{item.label}}</option>
{% endfor %}
{% for item in optgroups %}
<optgroup label="{{item.label}}">
{% for opt in item.options %}
<option value="{{opt.value}}">{{opt.label}}</option>
{% endfor %}
</optgroup>
{% endfor %}
</select>
{% default %}
<input
type="{{_self.name}}"
class="form__input{{class|lspace}}"
{% if id %} id="{{id}}"{% endif %}
{% if name %} name="{{name}}"{% endif %}
{% if value %} value="{{value}}"{% endif %}
{% if pattern %} pattern="{{pattern}}"{% endif %}
{% if placeholder %} placeholder="{{placeholder}}"{% endif %}
{% if required %} required="required"{% endif %}
{% if autocomplete %} autocomplete="on"{% endif %}/>
{% endswitch %}
{
"type": "text"
}
%form-input {
background: $color-sky-lighter;
border: rem(2px) solid $color-sky-light;
border-radius: rem(3px);
display: block;
font-size: rem(17px);
padding: rem(8px);
width: 100%;
&::placeholder {
color: $color-gray;
}
}
.form__label {
display: block;
font-size: rem(14.4px);
&.is-required,
&--required {
&:after {
content: '\2731'; // heavy asterisk
color: $color-primary-red;
display: inline;
font-size: rem(8px);
margin-left: rem(3px);
vertical-align: top;
}
}
}
.form__input {
@extend %form-input;
height: rem(45px);
}
.form__textarea {
@extend %form-input;
resize: vertical;
min-height: rem(150px);
}
.form__select {
@extend %form-input;
height: rem(45px);
}
.form__radio {}
.form__checkbox {}
.form__switch {
$this: &;
&__check {
width: 0;
height: 0;
opacity: 0;
position: absolute;
}
&__label {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
.toggle {
background: $color-red-light;
border: rem(1px) solid rgba($color-red, 0.25);
border-radius: rem(4px);
display: block;
flex: 0 0 rem(60px);
margin: rem(2px) rem(6px) rem(2px) rem(0);
width: rem(60px);
height: rem(32px);
position: relative;
&:before {
align-items: center;
background: $color-red;
border-radius: rem(4px);
content: attr(data-text-off);
color: $color-white;
display: flex;
font-weight: 900;
font-size: rem(12px);
justify-content: center;
line-height: 0;
text-transform: uppercase;
width: rem(26px);
height: rem(26px);
position: absolute;
top: rem(2px);
left: rem(3px);
transition: 333ms cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
}
.label {
font-size: rem(16px);
font-weight: 500;
small {
font-size: rem(13px);
font-weight: 400;
}
}
&:hover {
cursor: pointer;
}
}
#{$this}__check:checked ~ #{$this}__label {
.toggle {
background: $color-green-light;
border-color: rgba($color-green, 0.25);
&:before {
background: $color-green;
content: attr(data-text-on);
left: rem(29px);
}
}
}
&--centered {
#{$this}__label {
align-items: center;
}
}
}
.input-group {
$this: &;
background: $color-white;
border: rem(1px) solid $color-sky;
border-radius: rem(6px);
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
overflow: hidden;
&__label {
flex: 0 0 100%;
}
&__input,
&__submit {
appearance: none;
background: transparent;
border: none;
border-radius: 0;
padding: rem(12px) rem(20px);
&:focus {
border: none;
outline: none;
}
}
&__input {
flex: 1 1 auto;
}
&__submit {
cursor: pointer;
color: $color-primary-blue;
flex: 0 0 auto;
padding-inline: rem(12px);
&:hover,
&:focus {
color: $color-primary-red;
}
}
&:focus-within {
border-color: $color-primary-blue;
outline: rem(1px) solid $color-primary-blue;
}
}
No notes defined.