EC System

Login bar: Logged in

Documentation • Demo

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": true,
  "message": "Logged in as Jane Doe",
  "link": {
    "href": "../../example.html#",
    "label": "Log out"
  }
}
 
<div class="ecl-login-bar">
  <div class="ecl-container ecl-login-bar__container">
    <span class="ecl-login-bar__message">Logged in as Jane Doe</span>

    <a class="ecl-link ecl-link--standalone ecl-login-bar__link" href="../../example.html#">Log out</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