@openeuropa/bcl-theme-default 0.19.0 → 0.20.0

package/src/scss/_banners.scss

@@ -42,12 +42,12 @@
   &::before {
     display: block;
     width: 100%;
-    padding-top: 25%;
+    padding-top: 20%;
     content: "";
   }
 
   .hero &::before {
-    padding-top: 33.33%;
+    padding-top: 25%;
   }
 }
 
@@ -147,14 +147,14 @@
     &::before {
       display: block;
       width: 100%;
-      padding-top: 25%;
+      padding-top: 20%;
       content: "";
     }
 
     &.hero {
       min-height: 380px;
       &::before {
-        padding-top: 33.33%;
+        padding-top: 25%;
       }
     }
   }

package/src/scss/_circular-progress-bar.scss

@@ -0,0 +1,120 @@
+//styling
+$borderWidth: 12px;
+$animationTime: 1s;
+$size: 120px;
+
+//Create how many steps
+$howManySteps: 20;
+
+.circular-progress {
+  width: $size;
+  height: $size;
+  line-height: $size;
+  background: none;
+  box-shadow: none;
+  position: relative;
+  &:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: $borderWidth solid $circular-progress-border-color;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  > span {
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: 1;
+  }
+}
+
+.circular-progress-bar {
+  width: 100%;
+  height: 100%;
+  background: none;
+  border-width: $borderWidth;
+  border-style: solid;
+  position: absolute;
+  top: 0;
+  border-color: $circular-progress-border-color-fill;
+}
+
+.circular-progress-left {
+  left: 0;
+  .circular-progress-bar {
+    left: 100%;
+    border-top-right-radius: ($size / 2);
+    border-bottom-right-radius: ($size / 2);
+    border-left: 0;
+    transform-origin: center left;
+  }
+}
+
+.circular-progress-right {
+  right: 0;
+  .circular-progress-bar {
+    left: -100%;
+    border-top-left-radius: ($size / 2);
+    border-bottom-left-radius: ($size / 2);
+    border-right: 0;
+    transform-origin: center right;
+  }
+}
+
+/* This for loop creates the necessary css animation names 
+Due to the split circle of progress-left and progress right, we must use the animations on each side. 
+*/
+@for $i from 1 through $howManySteps {
+  $stepName: ($i * (100 / $howManySteps));
+
+  //animation only the left side if below 50%
+  @if $i <= ($howManySteps / 2) {
+    .circular-progress[data-percentage="#{$stepName}"] {
+      .circular-progress-right .circular-progress-bar {
+        animation: loading-#{$i} $animationTime linear forwards;
+      }
+      .circular-progress-left .circular-progress-bar {
+        animation: 0;
+      }
+    }
+  }
+  //animation only the right side if above 50%
+  @if $i > ($howManySteps / 2) {
+    .circular-progress[data-percentage="#{$stepName}"] {
+      .circular-progress-right .circular-progress-bar {
+        // prettier-ignore
+        animation: loading-#{($howManySteps / 2)}
+          $animationTime
+          linear
+          forwards; //set the animation to longest animation
+      }
+      .circular-progress-left .circular-progress-bar {
+        // prettier-ignore
+        animation: loading-#{$i - ($howManySteps / 2)}
+          $animationTime
+          linear
+          forwards
+          $animationTime;
+      }
+    }
+  }
+}
+
+//animation
+@for $i from 1 through ($howManySteps / 2) {
+  $degrees: (180 / ($howManySteps / 2));
+  $degrees: ($degrees * $i);
+  @keyframes loading-#{$i} {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(#{$degrees}deg);
+    }
+  }
+}

package/src/scss/_header.scss

@@ -220,50 +220,51 @@ $header-link-active-background: #003776 !default;
   }
 }
 
-// language list
-$language-background: $header-background !default;
-$language-color: #fff !default;
-$language-list-gap: map-get($spacers, 2) !default;
-$language-item-background: #fff !default;
-$language-item-color: $header-background !default;
-$language-item-background-hover: #ffd617 !default;
-$language-item-color-hover: $dark !default;
-
-.bcl-language .modal-content {
-  color: $language-color;
-  background-color: $language-background;
-}
-
-.bcl-language__list {
-  display: grid;
-  gap: $language-list-gap;
-  margin-bottom: map-get($spacers, 4);
-}
-
-.bcl-language__title {
-  margin-bottom: map-get($spacers, 4);
-}
-
-.bcl-language__item {
-  padding: map-get($spacers, 2) $spacer;
-  font-weight: $font-weight-bold;
-  color: $language-item-color;
-  text-decoration: none; //should be handled at link level
-  background-color: $language-item-background;
-
-  &:hover,
-  &:focus {
-    color: $language-item-color-hover;
-    text-decoration: underline;
-    background-color: $language-item-background-hover;
+.bcl-language-list-modal {
+  .btn-close {
+    opacity: 1;
+  }
+  &.bcl-language-list-modal--ec,
+  &.bcl-language-list-modal--eu {
+    .modal-body {
+      padding-top: map-get($spacers, 2);
+      overflow: visible;
+    }
+    .modal-header {
+      border: 0;
+      padding: 0;
+    }
+  }
+  &.bcl-language-list-modal--eu {
+    .modal-body {
+      background: $white;
+    }
+    .modal-dialog {
+      background: $white;
+    }
+    h5 {
+      color: $eu-cta-color;
+    }
+    svg {
+      color: $eu-cta-color;
+    }
+    .btn-close {
+      filter: $btn-close-eu-filter;
+    }
+  }
+  &.bcl-language-list-modal--ec {
+    background: $eu-background-color;
+    .modal-content {
+      background: $eu-background-color;
+    }
+    h5 {
+      color: $white;
+    }
+    svg {
+      color: $white;
+    }
+    .btn-close {
+      filter: $btn-close-white-filter;
+    }
   }
-}
-
-.bcl-language .modal-body {
-  padding-top: map-get($spacers, 5);
-  padding-bottom: map-get($spacers, 5);
-}
-
-.bcl-language .btn-close {
-  filter: $btn-close-white-filter;
 }

package/src/scss/_inpage-navigation.scss

@@ -14,6 +14,12 @@
     .nav-link {
       padding: map-get($spacers, 2);
       margin-bottom: map-get($spacers, 2);
+      &:not(.active) {
+        &:hover {
+          text-decoration-line: underline;
+          text-decoration-color: currentColor;
+        }
+      }
     }
 
     ul {

package/src/scss/_language-list.scss

@@ -0,0 +1,51 @@
+.bcl-language-list {
+  .btn {
+    background: $white;
+    color: $primary;
+    border-color: $gray-400;
+    &:hover {
+      text-decoration: underline;
+      border-color: $eu-cta-color;
+    }
+    &.selected {
+      background: $secondary;
+      color: $white;
+      border-color: $secondary;
+      svg {
+        color: $white;
+      }
+    }
+  }
+  &.bcl-language-list--ec,
+  &.bcl-language-list--eu {
+    .btn {
+      color: $eu-cta-color;
+      font-weight: $font-weight-bold;
+      &.selected {
+        background: $eu-selected-background;
+        color: $black;
+        border-color: $eu-selected-background;
+        svg {
+          color: $black;
+        }
+      }
+    }
+  }
+  &.bcl-language-list--eu {
+    .btn {
+      border: 2px solid $eu-cta-color;
+    }
+  }
+  &.bcl-language-list--ec {
+    .main {
+      background: $eu-background-color;
+      h5 {
+        color: $white;
+      }
+    }
+    .btn {
+      border-radius: 0;
+      border-color: transparent;
+    }
+  }
+}

package/src/scss/_reset.scss

@@ -3,3 +3,12 @@ body {
   // needed for full-width banner
   overflow-x: hidden;
 }
+
+em.placeholder {
+  background-color: transparent;
+  cursor: auto;
+  min-height: 0;
+  vertical-align: baseline;
+  opacity: 1;
+  display: inline;
+}

package/src/scss/base/_utilities.scss

@@ -62,11 +62,28 @@ $utilities: map-merge(
   )
 );
 
-.text-underline-hover {
-  text-decoration: none;
+a {
+  text-underline-offset: 2px;
+
+  &:not(.text-underline-hover),
+  &:not(.standalone) {
+    text-decoration-color: rgba($primary, 0.3);
+    &:hover {
+      text-decoration-color: currentColor;
+    }
+  }
+
+  &.standalone,
+  &.text-underline-hover {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
-.text-underline-hover:hover {
-  text-decoration: underline;
+
+svg {
+  fill: currentColor;
 }
 
 @include media-breakpoint-down(md) {
@@ -86,6 +103,10 @@ $utilities: map-merge(
   background-color: $gray-200;
 }
 
+.bg-gray-400 {
+  background-color: $gray-400;
+}
+
 .grid-3-9 {
   grid-template-columns: 25% 75%;
   grid-gap: map-get($gutters, "2-5");

package/src/scss/base/_variables.scss

@@ -44,9 +44,14 @@ $cyans: map-merge($cyans, $custom-cyans);
 // Custom color variables
 $ec-blue: #17458f;
 
+$eu-background-color: #034da1;
+$eu-cta-color: #0e47cb;
 $eu-blue: #1b4ac3;
 $eu-light-blue: #f3f6fc;
-$eu-footer-link: #0e47cb;
+$eu-footer-link: $eu-cta-color;
+$eu-selected-background: #ffcc00;
+$btn-close-eu-filter: invert(20%) sepia(70%) saturate(2876%) hue-rotate(216deg)
+  brightness(94%) contrast(105%);
 
 // Spacers
 $spacers-extended: (
@@ -83,3 +88,7 @@ $form-select-height-md: 2.375rem !default;
 
 // Navbar
 $navbar-nav-link-padding-x: 0.75rem;
+
+// Circular progress bar
+$circular-progress-border-color: $gray-400;
+$circular-progress-border-color-fill: $primary;

package/src/scss/oe-bcl-default.scss

@@ -54,6 +54,7 @@
 // Custom styles
 @import "@openeuropa/bcl-theme-default/src/scss/button";
 @import "@openeuropa/bcl-theme-default/src/scss/collapse";
+@import "@openeuropa/bcl-theme-default/src/scss/circular-progress-bar";
 @import "@openeuropa/bcl-theme-default/src/scss/reset";
 @import "@openeuropa/bcl-theme-default/src/scss/header";
 @import "@openeuropa/bcl-theme-default/src/scss/footer";
@@ -69,3 +70,4 @@
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
 @import "@openeuropa/bcl-theme-default/src/scss/timeline";
 @import "@openeuropa/bcl-theme-default/src/scss/inpage-navigation";
+@import "@openeuropa/bcl-theme-default/src/scss/language-list";

package/templates/bcl-alert/alert.html.twig

@@ -6,14 +6,14 @@
   - variant (string) (default: 'primary')
   - dismissible (boolean) (default: true)
   - animated_dismiss (boolean) (default: true)
-  - icons_path (string) (default: '')
+  - icon_path (string) (default: '')
   - icon_name (string) (default: '')
 #}
 
 {% set _message = message|default('') %}
 {% set _variant = variant|default('primary') %}
 {% set _heading = heading|default('') %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _dismissible = dismissible ?? true %}
 {% set _animated_dismiss = animated_dismiss ?? true %}
 {% set _icon_name = icon_name|default('') %}
@@ -44,11 +44,11 @@
 {% set attributes = attributes.addClass(_classes).setAttribute('role', 'alert') %}
 
 <div {{ attributes }}>
-{% if _icons_path is not empty %}
+{% if _icon_path is not empty %}
   {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
     name: _icon_name ?: _icon_names[_variant],
     size: 's',
-    path: _icons_path,
+    path: _icon_path,
     attributes: create_attribute().addClass(['flex-shrink-0 me-3 mt-1 align-self-start']),
   } only %}
 {% endif %}

package/templates/bcl-badge/badge.html.twig

@@ -9,7 +9,7 @@
   - assistive_text (string) (default: '')
   - rounded_pill (boolean) (default: false)
   - outline (boolean) (default: false)
-  - icons_path (string) (default: '')
+  - icon_path (string) (default: '')
 #}
 
 {% set _rounded_pill = rounded_pill|default(false) %}
@@ -18,7 +18,7 @@
 {% set _label = label|default('') %}
 {% set _classes = ['badge'] %}
 {% set _url = url|default('') %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _title = title|default(_label) %}
 {% set _dismissible = dismissible|default(false) %}
 {% set _assistive_text = assistive_text|default('') %}
@@ -58,8 +58,8 @@
   {%- if _dismissible -%}
     <span class="icon--close" aria-hidden="true">
       {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-        name: "x",
-        path: _icons_path,
+        name: "x-lg",
+        path: _icon_path,
       } only %}
     </span>
   {%- endif -%}

package/templates/bcl-breadcrumb/breadcrumb.html.twig

@@ -6,7 +6,7 @@
 
 {% set _classes = 'breadcrumb' %}
 {% set _links = links|default([]) %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -41,7 +41,7 @@
               icon_position: 'before',
                 icon: {
                   name: "arrow-left",
-                  path: _icons_path,
+                  path: _icon_path,
                   attributes: create_attribute().addClass(['d-md-none ms-0 me-2']),
                 },
              }) %}

package/templates/bcl-card/card.html.twig

@@ -44,6 +44,10 @@
   - extra_classes_header (string) (default: '')
   - extra_classes_footer (string) (default: '')
   - badges (array of badge object) (default: [])
+
+  Blocks
+    - card_date
+    - card_badge
 #}
 
 {% set _title = title|default({}) %}
@@ -145,7 +149,9 @@
   <div class='{{ _horizontal_grid.left_col_classes  }}'>
 {% endif %}
   {% if _date is not empty %}
-    {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
+    {% block card_date %}
+      {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
+    {% endblock %}
   {% elseif _image is not empty and _image.position != "bottom" %}
     <img
       src="{{ _image.path }}"
@@ -210,7 +216,10 @@
           })
         %}
       {% endif %}
-      {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+      {% block card_badge %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+      {% endblock %}
+      
     {% endfor %}
     </div>
   {%- endif -%}

package/templates/bcl-card-layout/card-layout.html.twig

@@ -14,6 +14,9 @@
     options: ['0', '1', '2', '3', '4', '5']
   - equal_height (boolean) (default: false)
   - cols_extra_classes (string) (default: '')
+
+  Blocks
+    - card_layout_card
 #}
 
 {% set _type = type|default('group') %}
@@ -69,7 +72,9 @@
     {% if _type == 'grid' or _type == 'masonry' %}
       <div class="{{ _cols_classes }}">
     {% endif %}
-      {% include '@oe-bcl/bcl-card/card.html.twig' with _item only %}
+      {% block card_layout_card %}
+        {% include '@oe-bcl/bcl-card/card.html.twig' with _item only %}
+      {% endblock %}
     {% if _type == 'grid' or _type == 'masonry' %}
       </div>
     {% endif %}

package/templates/bcl-content-banner/content-banner.html.twig

@@ -45,34 +45,46 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set _body_classes = 'pt-0 px-0 pb-0' %}
+{% set _card_grid = 'col-12 col-md-10' %}
+
+{% if _image is not empty %}
+  {% set _horizontal_classes = {
+    left_col_classes: 'col-md-4 col-lg-3',
+    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8'
+  } %}
+  {% set _body_classes = 'pt-md-0 px-0 px-md-3 pb-0' %}
+
+  {% if _action_button is not empty %}
+    {% set _horizontal_classes = {
+      left_col_classes: 'col-md-4 col-lg-3',
+      right_col_classes: 'col-md-8 col-lg-9 col-xxl-9'
+    } %}
+  {% endif %}
+{% else %}
+  {% set _horizontal_classes = {
+    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
+  } %}
+  
+  {% if _action_button is not empty %}
+    {% set _horizontal_classes = {
+      right_col_classes: 'col-12'
+    } %}
+    {% set _card_grid = 'col-12 col-md-8' %}
+  {% endif %}
+{% endif %}
+
 {% set _card = {
   title: title|default({})|merge({
     tag: 'h2',
     attributes: create_attribute().addClass(['fw-bold']),
   }),
   horizontal: true,
-  horizontal_grid: {
-    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
-  },
+  horizontal_grid: _horizontal_classes,
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
-  extra_classes_body: 'pt-0 px-0 pb-0',
+  extra_classes_body: _body_classes,
 } %}
 
-{% if _image is not empty %}
-  {% set _card = _card|merge({
-    horizontal_grid: _card.horizontal_grid|merge({
-      left_col_classes: 'col-md-4 col-lg-3',
-    }),
-    extra_classes_body: 'pt-md-0 px-0 px-md-3 pb-0',
-  }) %}
-{% else %}
-  {% set _card = _card|merge({
-    horizontal_grid: {
-      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
-    },
-  }) %}
-{% endif %}
-
 {% set _css_classes = _css_classes|merge([_modifiers[_background]]) %}
 {% set _attributes = attributes.addClass(['bg-transparent', 'border-0']) %}
 
@@ -83,10 +95,16 @@
 <div class="{{ _css_classes|join(' ') }}">
   <div class="container">
     <div class="row">
+  {% if _action_button is not empty %}
+    <div class="{{ _card_grid }}">
+  {% endif %}
     {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
+  {% if _action_button is not empty %}
+  </div>
+  {% endif %}
 
   {% if _action_button is not empty %}
-    <div class="col-12 col-md-2 text-end">
+    <div class="col-12 col-md-2 text-end mt-3 mt-md-0">
       <div class="d-grid d-md-block">
         {% include '@oe-bcl/bcl-button/button.html.twig' with _action_button only %}
       </div>

package/templates/bcl-description-list/description-list.html.twig

@@ -63,10 +63,14 @@
               {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
                 attributes: create_attribute().addClass(_icon_classes)
               }) only %}
-            <p class="mb-0 d-inline-block">{{ _term.label }}</p>
-          {%- else -%}
-            {{- _term.label -}}
-          {%- endif -%}
+              <p class="mb-0 d-inline-block">{{ _term.label }}</p>
+            {%- elseif _term.color is not empty -%}
+              <div class="d-flex align-items-center">
+                <span class="p-2 me-2 d-inline-block rounded-1 {{ _term.color }}"></span>{{- _term.label -}}
+              </div>
+            {%- else -%}
+              {{- _term.label -}}
+            {%- endif -%}
           </dt>
         {% endfor %}
         {% if _variant == 'horizontal' %}
@@ -87,6 +91,10 @@
               attributes: create_attribute().addClass(_icon_classes)
             }) only -%}
             <p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
+          {%- elseif _item.term.color is not empty -%}
+            <div class="d-flex align-items-center">
+              <span class="p-2 me-2 d-inline-block rounded-1 {{ _item.term.color }}"></span>{{- _item.term.label -}}
+            </div>
           {%- else -%}
             {{- _item.term.label -}}
           {%- endif -%}
@@ -96,10 +104,10 @@
     {% if _item.definition is not empty %}
       {% if _item.definition is iterable %}
         {% if _variant == 'horizontal' %}
-          <div>
+          <dd>
         {% endif %}
         {% for _definition in _item.definition %}
-          <dd>
+          {% if _variant == 'horizontal' %}<div>{% else %}<dd>{% endif %}
             {%- if _definition.button is defined -%}
               {% include '@oe-bcl/bcl-button/button.html.twig' with _definition.button only %}
             {%- elseif _definition.link is defined %}
@@ -115,10 +123,10 @@
                 {{- _definition.label -}}
               {%- endif -%}
             {%- endif -%}
-          </dd>
+          {% if _variant == 'horizontal' %}</div>{% else %}</dd>{% endif %}
         {% endfor %}
         {% if _variant == 'horizontal' %}
-          </div>
+          </dd>
         {% endif %}
       {% else %}
         <dd>