Login bar
{#
Parameters:
- "link" (object): {
- "href" (default: '')
- "label" (default: '')
}
- "logged_in" (boolean) (default: false)
- "message" (string) (default: '')
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
#}
{# Internal properties #}
{% set _link = {
'href': '',
'label': '',
}|merge(link|default({})) %}
{% set _logged_in = logged_in|default(false) %}
{% set _message = message|default('') %}
{% set _css_class = 'ecl-login-bar' %}
{% set _extra_attributes = '' %}
{# Internal logic - Process properties #}
{% if extra_classes is defined and extra_classes is not empty %}
{% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}
{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
{% for attr in extra_attributes %}
{% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value|e ~'"' %}
{% endfor %}
{% endif %}
{# Print the result #}
<div class="{{ _css_class }}"{{ _extra_attributes|raw }}>
<div class="ecl-container ecl-login-bar__container">
{% if _logged_in %}
<span class="ecl-login-bar__message">{{ _message }}</span>
{% endif %}
{% include '@ecl/ec-component-link' with {
'variant': 'standalone',
'extra_classes': 'ecl-login-bar__link'
}|merge(_link) only %}
</div>
</div>
{
"logged_in": null,
"link": {
"href": "../../example.html#",
"label": "Log in"
}
}
<div class="ecl-login-bar">
<div class="ecl-container ecl-login-bar__container">
<a class="ecl-link ecl-link--standalone ecl-login-bar__link" href="../../example.html#">Log in</a>
</div>
</div>
-
Content:
/** * Login bar component * @define login-bar */ // Import base and generic @import '@ecl/ec-base/ec-base'; // Check if overridden dependencies are already loaded, if needed @include check-imports(('ec-layout-grid', 'ec-component-link')); @mixin ecl-login-bar() { .ecl-login-bar { @include ecl-hidden-print(); background-color: map-get($ecl-colors, 'grey-5'); display: block; font-size: map-get($ecl-font-size, 's'); margin: 0; padding: map-get($ecl-spacing, 'xxs') 0; } .ecl-login-bar__container { display: flex; justify-content: flex-end; } .ecl-login-bar__message { color: map-get($ecl-colors, 'grey-100'); margin-right: map-get($ecl-spacing, 'l'); } .ecl-login-bar__link { flex-shrink: 0; } } // Use generic mixin @include exports('ec-component-login bar') { @include ecl-login-bar(); }
- URL: /components/raw/ec-component-login-bar/ec-component-login-bar.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-login-bar/ec-component-login-bar.scss
- Size: 861 Bytes
- Handle: @ecl/ec-component-login-bar--logged-out
- Tags: atom
- Variants (2): Logged in , Logged out
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-login-bar/ec-component-login-bar.twig