@openeuropa/bcl-theme-default 1.2.0 → 1.2.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -21,9 +21,9 @@
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^1.2.0",
-    "@openeuropa/bcl-builder": "^1.2.0",
-    "@openeuropa/bcl-twig-templates": "^1.2.0",
+    "@openeuropa/bcl-bootstrap": "^1.2.1",
+    "@openeuropa/bcl-builder": "^1.2.1",
+    "@openeuropa/bcl-twig-templates": "^1.2.1",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "flag-icons": "6.9.2",
@@ -48,5 +48,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "e8750bd56d83523370a6a1f32f3cc5c0b14bdfca"
+  "gitHead": "57c9a94fe7e7eb84afb69dcb10c1638b7d403483"
 }

package/src/scss/_banners.scss

@@ -3,6 +3,12 @@
 .bcl-banner {
   position: relative;
 
+  &.fixed-height {
+    .bcl-banner__image {
+      height: 150px;
+    }
+  }
+
   p {
     font-size: 1.125rem;
     font-weight: 500;
@@ -142,7 +148,7 @@
     z-index: 1;
     display: inline-block;
     padding: map-get($spacers, "4-5");
-    margin: 2.75rem auto;
+    margin: 2rem auto;
     border-radius: 4px;
     min-width: 540px;
   }
@@ -180,25 +186,31 @@
     }
   }
 }
-
-// Banners ratio
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up(md) {
   .bcl-banner {
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-height: 300px;
-
-    .container {
-      position: absolute;
+    &.fixed-height {
+      height: 330px;
+      .bcl-banner__image {
+        height: 100%;
+      }
     }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .bcl-banner {
+    min-height: 300px;
 
-    &::before {
-      display: block;
-      width: 100%;
-      padding-top: 20%;
-      content: "";
+    &:not(.fixed-height) {
+      &::before {
+        display: block;
+        width: 1px;
+        padding-top: 20%;
+        content: "";
+      }
     }
 
     &.hero {

package/src/scss/_multiselect.scss

@@ -47,8 +47,8 @@ select.multi-select {
       font-weight: $badge-font-weight;
       line-height: 1;
       color: $badge-color;
-      text-align: center;
-      white-space: nowrap;
+      text-align: left;
+      white-space: normal;
       vertical-align: baseline;
       padding-right: map-get($spacers, "3-5");
       @include border-radius($badge-border-radius);
@@ -61,14 +61,14 @@ select.multi-select {
           content: "";
           display: inline-block;
           height: 1rem;
-          transform: scale(0.8);
+          transform: scale(0.8) translateY(50%);
           width: 1rem;
           padding: 15px;
           background-position: 50%;
           border-radius: 50%;
           position: absolute;
           right: 0;
-          bottom: -2px;
+          bottom: calc(50% - 3px);
         }
       }
     }

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

@@ -11,6 +11,7 @@
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
+  - fixed_height: (boolean) (default: false)
   - content_classes: (string) (default: '')
   - attributes (drupal attrs)
 #}
@@ -25,6 +26,7 @@
 {% set _shade = shade ?? false %}
 {% set _hero = hero ?? false %}
 {% set _full_width = full_width ?? false %}
+{% set _fixed_height = fixed_height ?? false %}
 {% set _content_classes = content_classes|default('') %}
 
 {% set _content_class = 'bcl-banner__content' %}
@@ -39,13 +41,27 @@
 
 {% set _title_attributes = _title_attributes.addClass(_title_classes) %}
 
-{% set _classes = [
-  'bcl-banner',
-  _shade ? 'shade',
-  _image and not _shade ? 'overlay',
-  _hero ? 'hero',
-  _full_width ? 'full-width' 
-  ] %}
+{% set _classes = ['bcl-banner'] %}
+
+{% if _shade %}
+  {% set _classes = _classes|merge(['shade']) %}
+{% endif %}
+
+{% if _image and not _shade %}
+  {% set _classes = _classes|merge(['overlay']) %}
+{% endif %}
+
+{% if _hero %}
+  {% set _classes = _classes|merge(['hero']) %}
+{% endif %}
+
+{% if _full_width %}
+  {% set _classes = _classes|merge(['full-width']) %}
+{% endif %}
+
+{% if _fixed_height %}
+  {% set _classes = _classes|merge(['fixed-height']) %}
+{% endif %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}