Styleguide

Input: Default 

<div class="a-input">
    <label for="some-input" class="a-input__label a-input__label--required">
        PLZ
    </label>
    <input id="some-input" class="a-input__field  is-required" type="text" pattern="(\w{0,3}(?&lt;&#x3D;\w)-)?\d{4,6}" name="some-input" value="" required>
</div>
 
<div class="a-input{{#if wrapper_classes}} {{ wrapper_classes }}{{/if}}">
	<label for="{{ id }}" class="a-input__label {{#if required}}a-input__label--required{{/if}}">
		{{ label }}
	</label>
	{{#if text}}
		<input id="{{ id }}"
					 class="a-input__field {{ modifiers_classes }}{{#if required}} is-required{{/if}}"
					 type="{{ type }}"
					 {{#if pattern}}pattern="{{ pattern }}"{{/if}}
					 name="{{ name }}"
					 value="{{ value }}"
			{{ required }}>
	{{/if}}
	{{#if textarea}}
		<textarea id="{{ id }}"
							class="a-input__field {{ modifiers_classes }}"
							name="{{ name }}"
			{{ required }}>{{ value }}</textarea>
	{{/if}}
	{{#if helptext}}
		<div class="a-input__helptext">{{ helptext }}</div>
	{{/if}}
</div>
  • Content: 
    .a-input {
	position: relative;
	width: 100%;
	margin-top: 0.4em;

	&__label {
		position: absolute;
		left: 0.75rem;
		top: 0;
		text-transform: uppercase;
		font-size: 0.625rem;
		font-weight: $font-weight-bold;
		transition-timing-function: $transition-ease;
		transition-duration: $transition-fast;
		transition-property: font-size, top, font-weight;

		&.is-empty {
			font-size: 1em;
			font-weight: $font-weight-normal;
			text-transform: none;
			top: 1.75rem;
		}

		&--required:after {
			content: "*";
		}
	}

	&__field {
		width: 100%;
		background: $color-grey-1;
		border: none;
		height: 2.625rem;
		color: $color-text;
		font-size: 1rem;
		padding-left: 0.75rem;
		margin-top: 1rem;
		border-bottom: 2px solid $color-grey-2;
		transition: border-bottom-color $transition-fast $transition-ease;
		border-radius: 2px;

		&:not(.is-empty):valid, &.is-valid {
			border-bottom-color: $color-primary;
		}

		&.is-touched:invalid,
		&.is-invalid.is-touched,
		&.is-required.is-empty.is-touched {
			border-bottom-color: $color-red;
		}

		&:focus {
			outline: none;
			border-bottom: 2px solid $color-grey-3;
		}
	}

	&--invers {
		background-color: $color-white;
	}

	&--textarea {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		height: 6em;
	}

	&__helptext {
		font-size: 0.75em;
		color: $color-grey-3;
		margin-top: 0.4em;
	}
}
  • URL: /components/raw/a-input/_a-input.scss
  • Filesystem Path: styleguide/src/components/atoms/form-elements/a-input/_a-input.scss
  • Size: 1.3 KB
  • Content: 
    import BaseView from 'base-view';

const INPUT_SELECTOR = '.a-input__field';
const LABEL_SELECTOR = '.a-input__label';
const EMPTY_STATE = 'is-empty';
const TOUCHED_STATE = 'is-touched';

export default class AInput extends BaseView {
	initialize() {
		this.input = this.getScopedElement( INPUT_SELECTOR );
		this.label = this.getScopedElement( LABEL_SELECTOR );

		this.manageEmptyState();
	}

	bind() {
		super.bind();

		this.on( 'keyup', INPUT_SELECTOR, () => this.setStateClasses() );
		this.on( 'blur', INPUT_SELECTOR, () => this.manageEmptyState() );
		// don't use the focus event, since it makes input fields unusable on FF mobile for Android
	}

	setStateClasses() {
		this.addClass( this.input, TOUCHED_STATE );
		this.manageEmptyState();
	}

	manageEmptyState() {
		if (this.isEmpty()) {
			this.setEmptyState();
		} else {
			this.removeEmptyState();
		}
	}

	setEmptyState() {
		this.addClass( this.label, EMPTY_STATE );
		this.addClass( this.input, EMPTY_STATE );
	}

	removeEmptyState() {
		this.removeClass( this.label, EMPTY_STATE );
		this.removeClass( this.input, EMPTY_STATE );
	}

	isEmpty() {
		return ! this.input.value;
	}
}
  • URL: /components/raw/a-input/a-input.js
  • Filesystem Path: styleguide/src/components/atoms/form-elements/a-input/a-input.js
  • Size: 1.1 KB 
{
  "label": "PLZ",
  "id": "some-input",
  "type": "text",
  "pattern": "(\\w{0,3}(?<=\\w)-)?\\d{4,6}",
  "required": "required",
  "name": "some-input",
  "text": true
}

No notes defined.