<div class="textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="text1" name="textfield">
<label class="textfield__label text-button " for="text1">
Textfield label
</label>
</div>
</div>
{% set BEM -%}
textfield
{% if modifier %} {{ modifier }}{% endif %}
{%- if class %} {{ class }}{% endif %}
{%- if data.value %} is-dirty{% endif %}
{%- if data.isInvalid %} is-invalid{% endif %}
{%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}
<div class="{{ BEM }}">
<div class="textfield__inner">
{% if input %}
{{ input }}
{% else %}
<input
class="textfield__input"
type="{{ type|default(data.type|default('text')) }}"
id="{{ data.id }}"
name="{{ data.name }}"
{% if data.placeholder %}
placeholder="{{ data.placeholder }}"
{% endif %}
{{ data.value ? 'value="' ~ data.value ~ '"' : '' }}
{% if data.isDisabled %}disabled{% endif %}
{{ data.attributes }}
>
{% endif %}
{% if data.label %}
<label class="textfield__label text-button {{ labelClass }}" for="{{ data.id }}">
{{ data.label }}
</label>
{% endif %}
</div>
{% if data.error %}
<div class="textfield__error text-small">
{{ data.error }}
</div>
{% endif %}
{% if data.description %}
<div class="textfield__description">
{{ data.description }}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"label": "Textfield label",
"id": "text1",
"name": "textfield"
}
}
.textfield {
&.is-disabled {
opacity: .3;
}
}
.textfield__inner {
display: flex;
height: 100%;
flex-direction: column-reverse;
justify-content: flex-start;
overflow: hidden;
}
.textfield__label {
display: inline-block;
height: 24px;
margin-bottom: 7px;
padding-left: 15px;
@include bp(sm-min) {
margin-bottom: 16px;
}
.textfield--label-hidden & {
display: none;
}
}
.textfield__input {
position: relative;
height: 38px;
padding-left: 15px;
color: var(--color-text);
background-color: transparent;
transition: $transition-duration $transition-easing;
transition-property: background-color, border-color, color;
border: none;
border-top: 1px solid var(--color-brand);
border-bottom: 1px solid var(--color-brand);
font-size: 16px;
@include bp(sm-min) {
height: 58px;
font-size: $font-size-base-lg;
}
.textfield--border-hidden & {
border: none;
}
&:hover {
@media (hover: hover) {
background-color: rgba(var(--color-brand--rgb), .02);
border-color: rgba(var(--color-brand--rgb), .6);
color: rgba(var(--color-text--rgb), .5);
}
&:disabled {
@media (hover: hover) {
background-color: transparent;
border-color: var(--color-brand);
color: var(--color-text);
}
}
}
&:focus {
outline: none;
background-color: rgba(var(--color-brand--rgb), .02);
border-color: var(--color-brand);
color: rgba(var(--color-text--rgb), .5);
&:disabled {
background-color: transparent;
border-color: var(--color-brand);
color: var(--color-text);
}
}
&::placeholder {
color: var(--color-text);
transition: color $transition-duration $transition-easing;
opacity: .5;
}
}
.textfield__error {
background-color: var(--color-brand);
color: var(--color-text-inverse);
padding-left: 15px;
width: 100%;
height: 32px;
line-height: 32px;
margin-top: 28px;
vertical-align: middle;
transition: $transition-duration $transition-easing;
transition-property: background-color, color;
@include bp(sm-min) {
height: 40px;
line-height: 40px;
margin-top: 16px;
}
}
import Component from '@component';
import './textfield.scss';
export interface ITextFieldSettings {
focusClass?: string;
dirtyClass?: string;
}
export default class TextField extends Component {
static initSelector: string = '.textfield';
public settings: ITextFieldSettings;
public input: JQuery;
public label: JQuery;
constructor(element: HTMLElement) {
super(element);
this.settings = $.extend({
dirtyClass: 'is-dirty',
focusClass: 'is-focused',
}, this.element.data());
this.input = this.element.find('.textfield__input');
this.label = this.element.find('.textfield__label');
this.init();
}
init(): void {
this.input.on('focus', this.onFocus.bind(this));
this.input.on('blur', this.onBlur.bind(this));
this.input.on('change', this.onChange.bind(this));
this.checkValue();
}
onFocus(): void {
this.element.addClass(this.settings.focusClass);
}
onBlur(): void {
setTimeout((): void => {
this.element.removeClass(this.settings.focusClass);
}, 100);
}
onChange(): void {
this.checkValue();
}
checkValue(): void {
if (this.input.val() === '') {
this.element.removeClass(this.settings.dirtyClass);
} else {
this.element.addClass(this.settings.dirtyClass);
}
}
}
<div class="textfield is-dirty is-invalid">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="text1" name="textfield" value="info2play.ee">
<label class="textfield__label text-button " for="text1">
Textfield label
</label>
</div>
<div class="textfield__error text-small">
Please check your input
</div>
</div>
{% set BEM -%}
textfield
{% if modifier %} {{ modifier }}{% endif %}
{%- if class %} {{ class }}{% endif %}
{%- if data.value %} is-dirty{% endif %}
{%- if data.isInvalid %} is-invalid{% endif %}
{%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}
<div class="{{ BEM }}">
<div class="textfield__inner">
{% if input %}
{{ input }}
{% else %}
<input
class="textfield__input"
type="{{ type|default(data.type|default('text')) }}"
id="{{ data.id }}"
name="{{ data.name }}"
{% if data.placeholder %}
placeholder="{{ data.placeholder }}"
{% endif %}
{{ data.value ? 'value="' ~ data.value ~ '"' : '' }}
{% if data.isDisabled %}disabled{% endif %}
{{ data.attributes }}
>
{% endif %}
{% if data.label %}
<label class="textfield__label text-button {{ labelClass }}" for="{{ data.id }}">
{{ data.label }}
</label>
{% endif %}
</div>
{% if data.error %}
<div class="textfield__error text-small">
{{ data.error }}
</div>
{% endif %}
{% if data.description %}
<div class="textfield__description">
{{ data.description }}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"label": "Textfield label",
"id": "text1",
"name": "textfield",
"isInvalid": true,
"error": "Please check your input",
"value": "info2play.ee"
}
}
.textfield {
&.is-disabled {
opacity: .3;
}
}
.textfield__inner {
display: flex;
height: 100%;
flex-direction: column-reverse;
justify-content: flex-start;
overflow: hidden;
}
.textfield__label {
display: inline-block;
height: 24px;
margin-bottom: 7px;
padding-left: 15px;
@include bp(sm-min) {
margin-bottom: 16px;
}
.textfield--label-hidden & {
display: none;
}
}
.textfield__input {
position: relative;
height: 38px;
padding-left: 15px;
color: var(--color-text);
background-color: transparent;
transition: $transition-duration $transition-easing;
transition-property: background-color, border-color, color;
border: none;
border-top: 1px solid var(--color-brand);
border-bottom: 1px solid var(--color-brand);
font-size: 16px;
@include bp(sm-min) {
height: 58px;
font-size: $font-size-base-lg;
}
.textfield--border-hidden & {
border: none;
}
&:hover {
@media (hover: hover) {
background-color: rgba(var(--color-brand--rgb), .02);
border-color: rgba(var(--color-brand--rgb), .6);
color: rgba(var(--color-text--rgb), .5);
}
&:disabled {
@media (hover: hover) {
background-color: transparent;
border-color: var(--color-brand);
color: var(--color-text);
}
}
}
&:focus {
outline: none;
background-color: rgba(var(--color-brand--rgb), .02);
border-color: var(--color-brand);
color: rgba(var(--color-text--rgb), .5);
&:disabled {
background-color: transparent;
border-color: var(--color-brand);
color: var(--color-text);
}
}
&::placeholder {
color: var(--color-text);
transition: color $transition-duration $transition-easing;
opacity: .5;
}
}
.textfield__error {
background-color: var(--color-brand);
color: var(--color-text-inverse);
padding-left: 15px;
width: 100%;
height: 32px;
line-height: 32px;
margin-top: 28px;
vertical-align: middle;
transition: $transition-duration $transition-easing;
transition-property: background-color, color;
@include bp(sm-min) {
height: 40px;
line-height: 40px;
margin-top: 16px;
}
}
import Component from '@component';
import './textfield.scss';
export interface ITextFieldSettings {
focusClass?: string;
dirtyClass?: string;
}
export default class TextField extends Component {
static initSelector: string = '.textfield';
public settings: ITextFieldSettings;
public input: JQuery;
public label: JQuery;
constructor(element: HTMLElement) {
super(element);
this.settings = $.extend({
dirtyClass: 'is-dirty',
focusClass: 'is-focused',
}, this.element.data());
this.input = this.element.find('.textfield__input');
this.label = this.element.find('.textfield__label');
this.init();
}
init(): void {
this.input.on('focus', this.onFocus.bind(this));
this.input.on('blur', this.onBlur.bind(this));
this.input.on('change', this.onChange.bind(this));
this.checkValue();
}
onFocus(): void {
this.element.addClass(this.settings.focusClass);
}
onBlur(): void {
setTimeout((): void => {
this.element.removeClass(this.settings.focusClass);
}, 100);
}
onChange(): void {
this.checkValue();
}
checkValue(): void {
if (this.input.val() === '') {
this.element.removeClass(this.settings.dirtyClass);
} else {
this.element.addClass(this.settings.dirtyClass);
}
}
}
<div class="textfield is-dirty is-disabled">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="text1" name="textfield" value="Tere" disabled>
<label class="textfield__label text-button " for="text1">
Textfield label
</label>
</div>
</div>
{% set BEM -%}
textfield
{% if modifier %} {{ modifier }}{% endif %}
{%- if class %} {{ class }}{% endif %}
{%- if data.value %} is-dirty{% endif %}
{%- if data.isInvalid %} is-invalid{% endif %}
{%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}
<div class="{{ BEM }}">
<div class="textfield__inner">
{% if input %}
{{ input }}
{% else %}
<input
class="textfield__input"
type="{{ type|default(data.type|default('text')) }}"
id="{{ data.id }}"
name="{{ data.name }}"
{% if data.placeholder %}
placeholder="{{ data.placeholder }}"
{% endif %}
{{ data.value ? 'value="' ~ data.value ~ '"' : '' }}
{% if data.isDisabled %}disabled{% endif %}
{{ data.attributes }}
>
{% endif %}
{% if data.label %}
<label class="textfield__label text-button {{ labelClass }}" for="{{ data.id }}">
{{ data.label }}
</label>
{% endif %}
</div>
{% if data.error %}
<div class="textfield__error text-small">
{{ data.error }}
</div>
{% endif %}
{% if data.description %}
<div class="textfield__description">
{{ data.description }}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"label": "Textfield label",
"id": "text1",
"name": "textfield",
"isDisabled": true,
"value": "Tere"
}
}
.textfield {
&.is-disabled {
opacity: .3;
}
}
.textfield__inner {
display: flex;
height: 100%;
flex-direction: column-reverse;
justify-content: flex-start;
overflow: hidden;
}
.textfield__label {
display: inline-block;
height: 24px;
margin-bottom: 7px;
padding-left: 15px;
@include bp(sm-min) {
margin-bottom: 16px;
}
.textfield--label-hidden & {
display: none;
}
}
.textfield__input {
position: relative;
height: 38px;
padding-left: 15px;
color: var(--color-text);
background-color: transparent;
transition: $transition-duration $transition-easing;
transition-property: background-color, border-color, color;
border: none;
border-top: 1px solid var(--color-brand);
border-bottom: 1px solid var(--color-brand);
font-size: 16px;
@include bp(sm-min) {
height: 58px;
font-size: $font-size-base-lg;
}
.textfield--border-hidden & {
border: none;
}
&:hover {
@media (hover: hover) {
background-color: rgba(var(--color-brand--rgb), .02);
border-color: rgba(var(--color-brand--rgb), .6);
color: rgba(var(--color-text--rgb), .5);
}
&:disabled {
@media (hover: hover) {
background-color: transparent;
border-color: var(--color-brand);
color: var(--color-text);
}
}
}
&:focus {
outline: none;
background-color: rgba(var(--color-brand--rgb), .02);
border-color: var(--color-brand);
color: rgba(var(--color-text--rgb), .5);
&:disabled {
background-color: transparent;
border-color: var(--color-brand);
color: var(--color-text);
}
}
&::placeholder {
color: var(--color-text);
transition: color $transition-duration $transition-easing;
opacity: .5;
}
}
.textfield__error {
background-color: var(--color-brand);
color: var(--color-text-inverse);
padding-left: 15px;
width: 100%;
height: 32px;
line-height: 32px;
margin-top: 28px;
vertical-align: middle;
transition: $transition-duration $transition-easing;
transition-property: background-color, color;
@include bp(sm-min) {
height: 40px;
line-height: 40px;
margin-top: 16px;
}
}
import Component from '@component';
import './textfield.scss';
export interface ITextFieldSettings {
focusClass?: string;
dirtyClass?: string;
}
export default class TextField extends Component {
static initSelector: string = '.textfield';
public settings: ITextFieldSettings;
public input: JQuery;
public label: JQuery;
constructor(element: HTMLElement) {
super(element);
this.settings = $.extend({
dirtyClass: 'is-dirty',
focusClass: 'is-focused',
}, this.element.data());
this.input = this.element.find('.textfield__input');
this.label = this.element.find('.textfield__label');
this.init();
}
init(): void {
this.input.on('focus', this.onFocus.bind(this));
this.input.on('blur', this.onBlur.bind(this));
this.input.on('change', this.onChange.bind(this));
this.checkValue();
}
onFocus(): void {
this.element.addClass(this.settings.focusClass);
}
onBlur(): void {
setTimeout((): void => {
this.element.removeClass(this.settings.focusClass);
}, 100);
}
onChange(): void {
this.checkValue();
}
checkValue(): void {
if (this.input.val() === '') {
this.element.removeClass(this.settings.dirtyClass);
} else {
this.element.addClass(this.settings.dirtyClass);
}
}
}