Text inputs
{% set type = type|default('text') %}
{% set id = id|default('default-id') %}
{% set name = name|default('default-name') %}
{# Internal properties #}
{% set _cssClass = 'ecl-text-input' %}
{% set _extraAttributes = '' %}
{# Internal logic - Process properties #}
{% if hasError is defined and hasError == true %}
{% set _cssClass = _cssClass ~ ' ecl-text-input--has-error' %}
{% endif %}
{% if extraClass is defined %}
{% set _cssClass = _cssClass ~ ' ' ~ extraClass %}
{% endif %}
{% if isDisabled is defined and isDisabled == true %}
{% set _extraAttributes = _extraAttributes ~ ' disabled' %}
{% endif %}
{% if extraAttributes is defined %}
{% for attr in extraAttributes %}
{% set _extraAttributes = _extraAttributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
{% endfor %}
{% endif %}
{# Print the result #}
<input
type="{{ type }}"
class="{{ _cssClass }}"
id="{{ id }}"
name="{{ name }}"
{{ _extraAttributes }}
/>
/* Normal input */
{
"id": "example-input-id-1",
"extraAttributes": [
{
"name": "placeholder",
"value": "Some placeholder text."
}
]
}
/* Disabled input */
{
"id": "example-input-id-2",
"isDisabled": true,
"extraAttributes": [
{
"name": "placeholder",
"value": "Some placeholder text."
}
]
}
/* Input with error */
{
"id": "example-input-id-3",
"hasError": true,
"extraAttributes": [
{
"name": "placeholder",
"value": "Some placeholder text."
}
]
}
<!-- Normal input -->
<input type="text" class="ecl-text-input" id="example-input-id-1" name="default-name" placeholder="Some placeholder text." />
<!-- Disabled input -->
<input type="text" class="ecl-text-input" id="example-input-id-2" name="default-name" disabled placeholder="Some placeholder text." />
<!-- Input with error -->
<input type="text" class="ecl-text-input ecl-text-input--has-error" id="example-input-id-3" name="default-name" placeholder="Some placeholder text." />
-
Content:
/** * Text input component * @define text-input */ .ecl-text-input { background-color: #fff; background-image: none; border: 1px solid $ecl-color-shade; color: $ecl-color-shade; display: block; font-family: $ecl-font-family-sans-serif; font-size: map-get($ecl-font-size, 's'); line-height: 1.6; margin: 0; padding: map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxs'); width: 100%; /* stylelint-disable-next-line plugin/selector-bem-pattern */ * + & { margin-top: map-get($ecl-spacing, 'xs'); } &:focus { border-color: map-get($ecl-colors, 'yellow-110'); outline: 3px solid map-get($ecl-colors, 'yellow-110'); outline-offset: 0; text-decoration: none; } &[disabled], &[readonly] { background-color: #eee; cursor: not-allowed; opacity: 1; } } .ecl-text-input--has-error { border-color: $ecl-color-error; border-width: 2px; }
- URL: /components/raw/ecl-forms-text-inputs/_text-inputs.scss
- Filesystem Path: framework/components/ecl-forms/ecl-forms-text-inputs/_text-inputs.scss
- Size: 912 Bytes
- Handle: @ec-europa/ecl-forms-text-inputs
- Tags: atom
- Preview:
- Filesystem Path: framework/components/ecl-forms/ecl-forms-text-inputs/ecl-forms-text-inputs.twig