@openeuropa/bcl-theme-default 0.19.0 → 0.22.0

package/src/scss/_gallery.scss

@@ -0,0 +1,269 @@
+.bcl-gallery {
+  .bcl-gallery__thumbnails {
+    border-radius: $border-radius;
+    overflow: hidden;
+  }
+
+  ul.bcl-gallery__grid {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  .bcl-gallery__item {
+    position: relative;
+  }
+
+  .bcl-gallery__item-overlay {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 map-get($spacers, 3);
+    transition: background-color 0.2s ease;
+  }
+
+  .bcl-gallery__item-play-icon {
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: $border-radius;
+    pointer-events: none;
+
+    .bi {
+      fill: $white;
+    }
+  }
+
+  .bcl-gallery__item-caption {
+    display: none;
+    color: $white;
+    text-align: center;
+    pointer-events: none;
+
+    h5 {
+      margin-bottom: 0;
+    }
+  }
+
+  .bcl-gallery__item-description {
+    display: none;
+    margin-top: map-get($spacers, 1);
+  }
+
+  ul.bcl-gallery__grid li:not(:last-child) {
+    margin-bottom: map-get($spacers, 2);
+  }
+
+  .bcl-gallery__thumbnails-collaspe {
+    ul.bcl-gallery__grid {
+      margin-top: map-get($spacers, 2);
+    }
+  }
+
+  .bcl-gallery__collapse {
+    &[aria-expanded="false"] {
+      .label-expanded {
+        display: none;
+      }
+    }
+    &[aria-expanded="true"] {
+      .label-collapsed {
+        display: none;
+      }
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .bcl-gallery__mobile-view-more > span {
+    display: block;
+    & * {
+      pointer-events: none;
+    }
+  }
+
+  .carousel {
+    height: 100%;
+    width: 100%;
+    max-height: 500px;
+  }
+
+  .carousel-inner {
+    height: 100%;
+  }
+
+  .carousel-item {
+    position: relative;
+    height: 100%;
+    text-align: center;
+    z-index: 1;
+  }
+
+  .modal-content {
+    background: black;
+    justify-content: center;
+  }
+
+  .modal-title {
+    width: 35%;
+    color: white;
+  }
+
+  .carousel-pager {
+    display: flex;
+    justify-content: center;
+    color: white;
+    width: 30%;
+
+    span {
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+
+  .modal-close {
+    display: flex;
+    justify-content: end;
+    width: 35%;
+
+    .btn-close {
+      filter: invert(100%);
+      opacity: 1;
+    }
+  }
+
+  .carousel-control-next,
+  .carousel-control-prev {
+    // avoid overlapping medias and make play button of the video accessible
+    top: 50%;
+    height: 20%;
+    transform: translateY(-50%);
+  }
+
+  iframe,
+  video {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 16 / 9;
+    max-width: 900px;
+    object-fit: contain;
+  }
+
+  img {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
+
+  /* lazyload */
+  img:not([src]):not([srcset]) {
+    visibility: hidden;
+  }
+
+  @keyframes lazy_spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .carousel-item:after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: -10px;
+    border-radius: 50%;
+    border: 2px solid #ccc;
+    border-top-color: #000;
+    animation: lazy_spinner 0.6s linear infinite;
+    z-index: -1;
+  }
+
+  @include media-breakpoint-up(sm) {
+    ul.bcl-gallery__grid {
+      display: grid;
+      grid-template-rows: 1fr 1fr 0;
+      grid-gap: map-get($spacers, 2);
+      grid-template-columns: repeat(4, 1fr);
+      margin-bottom: -#{map-get($spacers, 2)};
+    }
+
+    ul.bcl-gallery__grid li:not(:last-child) {
+      margin-bottom: 0;
+    }
+
+    ul.bcl-gallery__grid li:first-child {
+      grid-column: 1 / 3;
+      grid-row: 1 / 3;
+    }
+
+    .bcl-gallery__thumbnails-collaspe {
+      ul.bcl-gallery__grid {
+        margin-top: map-get($spacers, 2);
+      }
+      ul.bcl-gallery__grid:nth-child(odd) li:first-child {
+        grid-column: auto;
+        grid-row: auto;
+      }
+      ul.bcl-gallery__grid:nth-child(odd) li:last-child {
+        grid-column: 3 / 5;
+        grid-row: 1 / 3;
+      }
+    }
+
+    .bcl-gallery__item:hover {
+      .bcl-gallery__item-overlay {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+      .bcl-gallery__item-play-icon {
+        background-color: $white;
+
+        .bi {
+          fill: $black;
+        }
+      }
+    }
+
+    .modal-title,
+    .modal-close {
+      width: 45%;
+    }
+
+    .carousel-pager {
+      width: 10%;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .bcl-gallery__item:hover {
+      .bcl-gallery__item-caption {
+        display: block;
+      }
+
+      .bcl-gallery__item-play-icon + .bcl-gallery__item-caption {
+        margin-top: map-get($spacers, 2);
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .bcl-gallery__item-description {
+      display: block;
+    }
+  }
+}

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/_pagination.scss

@@ -0,0 +1,8 @@
+.pagination {
+  .page-link {
+    // fix icons vertical alignment
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+}

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/_search-form.scss

@@ -1,9 +1,11 @@
+@use "sass:math";
+
 // Search form Spacers
 $search-spacers: (
   "icon-spacer-left": map-get($spacers, 3),
-  "icon-spacer-top": calc(($form-select-height - map-get($icon, "xs")) / 2),
+  "icon-spacer-top": math.div(($form-select-height - map-get($icon, "xs")), 2),
   "icon-spacer-top-md":
-    calc(($form-select-height-md - map-get($icon, "xs")) / 2),
+    math.div(($form-select-height-md - map-get($icon, "xs")), 2),
   "submit-spacer-right": map-get($spacers, 3),
 );
 

package/src/scss/base/_colors.scss

@@ -1,12 +1,23 @@
 // Custom theme colors
 
-$primary: #0a58ca;
-$secondary: #801f4f;
-$info: #087990;
-$danger: #b02a37;
-$warning: #ffc107;
-$success: #198754;
+$primary: #253ebe;
+$secondary: #70254a;
+$info: #0d768b;
+$danger: #a51f2c;
+$warning: #ffba07;
+$success: #09854c;
 $light: #f8f9fa;
 $dark: #212529;
 
 $text-muted: #495057;
+
+$link-visited: #6b22b5;
+
+// Color variants scales
+
+// Tables
+$table-hover-bg-factor: 0.1;
+
+// Alerts
+$alert-bg-scale: -90%;
+$alert-border-scale: -80%;

package/src/scss/base/_utilities.scss

@@ -24,6 +24,7 @@ $utilities: map-merge(
               map-get(map-get($utilities, "max-width"), "values"),
               (
                 date: 7.5rem,
+                col-date: calc(7.5rem + var(--#{$variable-prefix}gutter-x)),
                 "listing-img": 10rem,
               )
             ),
@@ -62,11 +63,37 @@ $utilities: map-merge(
   )
 );
 
-.text-underline-hover {
-  text-decoration: none;
+/* stylelint-disable no-descending-specificity */
+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;
+    }
+  }
+
+  &:visited {
+    color: $link-visited;
+    &:hover {
+      color: shade-color($link-visited, 20%);
+    }
+  }
 }
-.text-underline-hover:hover {
-  text-decoration: underline;
+/* stylelint-enable no-descending-specificity */
+
+svg {
+  fill: currentColor;
 }
 
 @include media-breakpoint-down(md) {
@@ -86,6 +113,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,7 @@
 @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";
+@import "@openeuropa/bcl-theme-default/src/scss/carousel";
+@import "@openeuropa/bcl-theme-default/src/scss/gallery";
+@import "@openeuropa/bcl-theme-default/src/scss/pagination";

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('') %}
@@ -37,6 +37,14 @@
   {% set _classes = _classes|merge(['fade', 'show']) %}
 {% endif %}
 
+{% set _classes = _classes|merge(['text-dark']) %}
+
+{% set _icon_classes = ['flex-shrink-0 me-3 mt-1 align-self-start' ] %}
+
+{% if _variant != 'light' %}
+  {% set _icon_classes = _icon_classes|merge(['text-' ~ _variant]) %}
+{% endif %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
@@ -44,12 +52,12 @@
 {% 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,
-    attributes: create_attribute().addClass(['flex-shrink-0 me-3 mt-1 align-self-start']),
+    path: _icon_path,
+    attributes: create_attribute().addClass(_icon_classes),
   } only %}
 {% endif %}
   <div class="alert-content flex-grow-1">

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 -%}