Europa Component Library

Status referral

Documentation • Demo

EMA status

{#
  - "items" (array): array of steps (default: '')
  - "extra_classes" (string): extra CSS classes to be added
  - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{# Internal properties #}

{% set _css_class = 'ema-status-referral' %}
{% 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 %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}

<ul class="{{ _css_class }}" {{ _extra_attributes }}">
  {% for item in items %}

    {% set _active = '' %}
    {% if item.active %}
      {% set _active = 'ema-status-referral__step--active' %}
    {% endif %}
    <li class="ema-status-referral__step {{_active}}">{{item.title}}</li>

  {% endfor %}
</ul>
 
{
  "items": [
    {
      "title": "Procedure started"
    },
    {
      "title": "Under evaluation"
    },
    {
      "title": "PRAC recommendation"
    },
    {
      "title": "CHMP opinion",
      "active": true
    },
    {
      "title": "European Commission final decision"
    }
  ]
}
 
<ul class="ema-status-referral" ">
  
            <li class="ema-status-referral__step ">Procedure started</li>

  
            <li class="ema-status-referral__step ">Under evaluation</li>

  
            <li class="ema-status-referral__step ">PRAC recommendation</li>

  
                      <li class="ema-status-referral__step ema-status-referral__step--active ">CHMP opinion</li>

  
            <li class="ema-status-referral__step ">European Commission final decision</li>

  </ul>
  • Content: 
    /**
 * Status referral component
 */

.ema-status-referral {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ema-status-referral__step {
  border-top: solid map-get($ecl-spacing, 'xxxs') map-get($ema-colors, 'grey-3');
  color: map-get($ema-colors, 'grey-3');
  flex-basis: 20%;
  margin-top: map-get($ecl-spacing, 'm');
  padding-left: map-get($ecl-spacing, 'xs');
  padding-right: map-get($ecl-spacing, 'xs');
  text-align: center;
  &:last-child {
    border-top-style: dashed;
  }
}

.ema-status-referral__step::before {
  background-color: map-get($ema-colors, 'grey-3');
  border-radius: map-get($ecl-spacing, 'm');
  content: '';
  display: block;
  height: map-get($ecl-spacing, 'm');
  margin: - map-get($ecl-spacing, 's') auto map-get($ecl-spacing, 's') auto;
  position: relative;
  width: map-get($ecl-spacing, 'm');
  z-index: 2;
}
.ema-status-referral__step:first-child::before {
  margin: -1rem auto 1rem -0.9rem;
}
.ema-status-referral__step:last-child::before {
  border-top-style: dashed;
  margin: -1rem -0.9rem 1rem auto;
}

.ema-status-referral__step--active {
  border-color: map-get($ema-colors, 'primary');
  color: map-get($ema-colors, 'primary');
}
.ema-status-referral__step--active::before {
  background-color: map-get($ema-colors, 'primary');
}

@media (min-width: map-get($ecl-grid-breakpoints, 'md')) {
  .ema-status-referral {
    flex-flow: row wrap;
    flex-wrap: nowrap;
  }
}
  • URL: /components/raw/ema-status-referral/ema-status-referral.scss
  • Filesystem Path: framework/components/ema-status-referral/ema-status-referral.scss
  • Size: 1.5 KB
  • Handle: @ec-europa/ema-status-referral
  • Preview:
  • Filesystem Path: framework/components/ema-status-referral/ema-status-referral.twig