@openeuropa/bcl-theme-default 0.20.0 → 0.23.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/_inpage-navigation.scss

@@ -2,8 +2,7 @@
   top: map-get($spacers, 3); // needed for position-sticky
   background-color: $gray-100;
 
-  h5 {
-    font-weight: bold;
+  .bcl-heading {
     margin-bottom: 0;
     padding: map-get($spacers, "3-5");
     border-bottom: 1px solid $gray-300;

package/src/scss/_multiselect.scss

@@ -12,7 +12,8 @@ $multiselect-spacers: (
   "disabled-spacer": calc(map-get($spacers, 2) - 1px),
   "disabled-spacer-md": calc(map-get($spacers, 1) - 1px),
   "select-spacer": calc(map-get($spacers, 2) - 2px),
-  "select-spacer-md": calc(map-get($spacers, 1) + 0.05rem),
+  "select-spacer-md": 0.075rem,
+  "select-spacer-start": 0.3rem,
   "badge-padding-x": map-get($spacers, 1),
   "badge-padding-y": map-get($spacers, 1),
   "add-margin-top": map-get($spacers, "2-5"),
@@ -55,9 +56,10 @@ select.multi-select {
     }
   }
   .ss-multi-selected {
+    border-color: $input-border-color;
     padding: map-get($multiselect-spacers, "select-spacer") 0
       map-get($multiselect-spacers, "select-spacer")
-      map-get($multiselect-spacers, "select-spacer");
+      map-get($multiselect-spacers, "select-spacer-start");
     &.ss-disabled {
       .ss-values {
         .ss-value {
@@ -66,7 +68,8 @@ select.multi-select {
       }
     }
     .ss-add {
-      margin-top: map-get($multiselect-spacers, "add-margin-top");
+      margin-top: 0;
+      align-self: center;
     }
   }
 }
@@ -112,10 +115,7 @@ select.multi-select {
     .ss-multi-selected {
       padding: map-get($multiselect-spacers, "select-spacer-md") 0
         map-get($multiselect-spacers, "select-spacer-md")
-        map-get($multiselect-spacers, "select-spacer-md");
-      .ss-add {
-        margin-top: map-get($multiselect-spacers, "add-margin-top-md");
-      }
+        map-get($multiselect-spacers, "select-spacer-start");
     }
     .ss-values {
       @include font-size(1rem);

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/_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,6 +63,7 @@ $utilities: map-merge(
   )
 );
 
+/* stylelint-disable no-descending-specificity */
 a {
   text-underline-offset: 2px;
 
@@ -80,7 +82,15 @@ a {
       text-decoration: underline;
     }
   }
+
+  &:visited {
+    color: $link-visited;
+    &:hover {
+      color: shade-color($link-visited, 20%);
+    }
+  }
 }
+/* stylelint-enable no-descending-specificity */
 
 svg {
   fill: currentColor;

package/src/scss/base/_variables.scss

@@ -10,6 +10,8 @@ $yellow-50: tint-color($yellow, 90%);
 $green-50: tint-color($green, 90%);
 $cyan-50: tint-color($cyan, 90%);
 
+$zindex-dropdown: 1055;
+
 // Override theme-color "light"
 $theme-colors: map-merge(
   $theme-colors,
@@ -75,6 +77,8 @@ $accordion-border-color: $gray-300;
 $badge-font-weight: $font-weight-normal; // 400
 $badge-font-size: 1.125rem; // 18px
 $badge-font-size-desktop: 1rem; // 16px
+$badge-active-box-shadow: $btn-active-box-shadow;
+$badge-focus-width: $btn-focus-width;
 
 // banners
 $banner-content-border-color: $primary;

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

@@ -52,6 +52,7 @@
 @import "@openeuropa/bcl-bootstrap/scss/utilities/api";
 
 // Custom styles
+@import "@openeuropa/bcl-theme-default/src/scss/alert";
 @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";
@@ -71,3 +72,6 @@
 @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

@@ -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 %}
@@ -49,7 +57,7 @@
     name: _icon_name ?: _icon_names[_variant],
     size: 's',
     path: _icon_path,
-    attributes: create_attribute().addClass(['flex-shrink-0 me-3 mt-1 align-self-start']),
+    attributes: create_attribute().addClass(_icon_classes),
   } only %}
 {% endif %}
   <div class="alert-content flex-grow-1">

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

@@ -33,22 +33,25 @@
   {% set _classes = _classes|merge([ 'bg-' ~ _background]) %}
 {% endif %}
 
-{% if _background in ['light', 'warning'] %}
-  {% set _classes = _classes|merge(['text-dark']) %}
-{% endif %}
-
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{%- if _url is not empty -%}
+  {% set attributes = attributes.setAttribute('title', _title).setAttribute('href', _url) %}
+{%- endif -%}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 {%- if _url is not empty -%}
-<a href="{{ _url }}" title="{{ _title }}">
+<a
+  {{ attributes }}
+>
+{%- else -%}
+<span
+  {{ attributes }}
+>
 {%- endif -%}
-  <span
-    {{ attributes }}
-  >
   {%- if _assistive_text is not empty -%}
     <span class="visually-hidden">
       {{- _assistive_text -}}
@@ -63,9 +66,10 @@
       } only %}
     </span>
   {%- endif -%}
-  </span>
 {%- if _url is not empty -%}
 </a>
+{%- else -%}
+</span>
 {%- endif -%}
 
 {% endspaceless %}

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

@@ -3,6 +3,8 @@
 {# Parameters:
   - title: (string) (default: "")
   - title_tag: (string) (default: "div")
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - description: (string) (default: "")
   - link: (link object) (default: {}): predefined structure for Link component
   - image: (string) <img> tag
@@ -14,6 +16,8 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('div') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _description = description|default('') %}
 {% set _link = link|default({}) %}
 {% set _image = image|default('') %}
@@ -28,11 +32,13 @@
   {% set _content_class = _content_class ~ " " ~ _content_classes %}
 {% endif %}
 
-{% set _title_classes = "display-6" %}
+{% set _title_classes = ['display-6'] %}
 {% if _description is not empty or _link is not empty %}
-  {% set _title_classes = _title_classes ~ " mb-3" %}
+  {% set _title_classes = _title_classes|merge(['mb-3']) %}
 {% endif %}
 
+{% set _title_attributes = _title_attributes.addClass(_title_classes) %}
+
 {% set _classes = [
   'bcl-banner',
   _shade ? 'shade',
@@ -53,14 +59,19 @@
   {% endif %}
   <div class="container">
     <div class="{{ _content_class }}">
-    {% if _title is not empty %}
-      <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
-      {% if _description is not empty %}
-      <p class="mb-4">{{ _description }}</p>
-      {% endif %}
-      {% if _link.path %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title,
+          title_tag: _title_tag,
+          title_link: _title_link,
+          attributes: _title_attributes,
+        } only %}
       {% endif %}
+    {% if _description is not empty %}
+      <p class="mb-4">{{ _description }}</p>
+    {% endif %}
+    {% if _link.path %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
     {% endif %}
     </div>
   </div>

package/templates/bcl-base-templates/content-type.html.twig

@@ -116,6 +116,9 @@
       {% block related %}
         {{ related }}
       {% endblock %}
+      {% block share %}
+        {{ share }}
+      {% endblock %}
     </div>
   </div>
 </main>
@@ -123,9 +126,6 @@
 {% block feedback %}
   {{ feedback }}
 {% endblock %}
-{% block share %}
-  {{ share }}
-{% endblock %}
 
 {% if _with_footer %}
   {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}

package/templates/bcl-base-templates/listing-page.html.twig

@@ -1,53 +1,63 @@
 {#
   Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - listing (object) (default: {})
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
-  - page_title (string) (default: '')
 #}
 
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _listing = listing|default({}) %}
 {% set _pagination = pagination|default({}) %}
 {% set _search = search|default({}) %}
 {% set _sidebar = sidebar|default({}) %}
-{% set _page_title = page_title|default({}) %}
+
+{% set _title_attributes = _title_attributes ?: create_attribute() %}
 
 {% block content_top %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
   <div class="row">
-    <div class="col-md-6 col-lg-8">
-      <h4>
-        <span class="text-capitalize">
-          {{- _page_title -}}
-        </span>
-        ({{ listing.items.length }})
-      </h4>
-    </div>
-    <div class="col-md-12 order-md-2 mt-3 mt-md-1">
-      {% if badges is not empty and badges is iterable %}
-        {% for badge in badges %}
-          {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge|merge({
-            attributes: create_attribute().addClass(["mb-2", "me-2"])
-          }) only %}
-        {% endfor %}
+    <div class="col-md-6 col-lg-8 align-self-center">
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title ~ ' (' ~ listing.items.length ~ ')',
+          title_tag: _title_tag,
+          title_link: _title_link,
+          attributes: _title_attributes.addClass(['mb-0', 'text-capitalize']),
+        } only %}
       {% endif %}
     </div>
+    {% if badges is not empty and badges is iterable %}
+      <div class="col-md-12 order-md-2 mt-3">
+      {% for badge in badges %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge|merge({
+          attributes: create_attribute().addClass(["mb-2", "me-2"])
+        }) only %}
+      {% endfor %}
+      </div>
+    {% endif %}
     <div class="col-md-6 col-lg-4 mt-3 mt-md-0">
       <div class="float-md-end d-md-flex align-items-center mb-4 mb-md-0">
         {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
-          attributes: create_attribute().addClass(['ms-md-2 mb-2']),
+          attributes: create_attribute().addClass(['ms-md-2']),
         }) only %}
       </div>
     </div>
   </div>
-  <hr class="d-none d-md-block mb-4"/>
+  <hr class="d-none d-md-block mb-4-75"/>
 {% endblock %}
 
 {% block content %}
   {% if _listing is not empty %}
-    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing %}
+    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing only %}
   {% endif %}
 {% endblock %}