<div class="text-field--light">
<div class="text-field__wrapper">
<input class="text-field__input" id="text" type="text" name="text" />
<label class="text-field__label" for="text">Text</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="text-field__error">Put in the error message here...</div>-->
</div>
<div class="text-field--{{splitDashLast _self.name}}">
<div class="text-field__wrapper">
<input class="text-field__input" id="{{id}}" type="{{type}}" name="{{name}}" {{#if value}}value="{{value}}"{{/if}} {{#if disabled}}disabled{{/if}} {{#if required }}required="true"{{/if}} {{#if autocomplete}}autocomplete="{{autocomplete}}"{{/if}}/>
<label class="text-field__label" for="{{id}}">{{label}}</label>
</div>
{{#if helper}}
<div class="text-field__helper">{{helper}}</div>
{{/if}}
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
{{#if error}}
<div class="text-field__error">{{error}}</div>
{{else}}
<!--<div class="text-field__error">Put in the error message here...</div>-->
{{/if}}
</div>
{
"id": "text",
"name": "text",
"label": "Text",
"required": false,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": "",
"helper": ""
}
export * from '../text-field-material-like/text-field-material-like-bundle';
import './text-field-material-like-indent.scss'; // override SCSS from above
export * from '../text-field-material-like/text-field-material-like';
@import "~shared/base";
/*******************************************************************************
* Contextual classes:
* - is-disabled: When input is disabled
* - is-filled-in: When value is available or the user clicked into the input
* - is-tabbed: When the input is focused by tabbing (a11y)
* - is-focused: When the input is focused
* - is-initialized: When the JS for the component is initialized
* - has-no-label: If there is no label available
******************************************************************************/
// size settings
$textFieldPaddingX: 10px;
// need to use string here due to:
// https://github.com/webpack-contrib/sass-loader/issues/487
$variants: "dark", "light";
@each $color in $variants {
/*****************************************************************************
* General
****************************************************************************/
.text-field {
$block: &;
&--#{unquote($color)} {
/*************************************************************************
* Input
************************************************************************/
#{$block}__input {
&,
&:invalid,
&:required {
padding-left: $textFieldPaddingX;
padding-right: $textFieldPaddingX;
// Active
&:focus,
&:invalid:focus,
&:required:focus {
padding-left: $textFieldPaddingX;
padding-right: $textFieldPaddingX;
}
}
}
/*************************************************************************
* Label (will be moved to top when value available)
************************************************************************/
#{$block}__label {
padding-left: $textFieldPaddingX;
padding-right: $textFieldPaddingX;
}
/*************************************************************************
* Error & Helper
************************************************************************/
#{$block}__error,
#{$block}__helper {
margin-left: $textFieldPaddingX;
margin-right: $textFieldPaddingX;
}
}
}
}
This component is based on ‘text field material like’ and inherits its behavior