@openeuropa/bcl-theme-default 0.18.0 → 0.21.0

package/src/scss/_carousel.scss

@@ -0,0 +1,85 @@
+$indicator-size: 8px;
+
+.carousel-indicators {
+  background-color: rgba(0, 0, 0, 0.5);
+  margin: 0;
+  [data-bs-target] {
+    width: $indicator-size;
+    height: $indicator-size;
+    margin: map-get($spacers, "1-5") map-get($spacers, 2) map-get($spacers, 3);
+    border-radius: 50%;
+  }
+}
+
+.carousel-caption {
+  width: 100%;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  bottom: 0;
+  padding: map-get($spacers, 3) 0 map-get($spacers, 4);
+  p {
+    margin-bottom: 0;
+  }
+  a {
+    color: $white;
+    text-decoration-color: $white;
+  }
+}
+
+.carousel-dark {
+  .carousel-caption {
+    background-color: rgba(255, 255, 255, 0.5);
+    a {
+      color: $black;
+      text-decoration-color: $black;
+    }
+  }
+
+  .carousel-indicators {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}
+
+.carousel-control-next,
+.carousel-control-prev {
+  opacity: 1;
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  width: 40px;
+  height: 40px;
+  background-size: 60% 60%;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+}
+
+.carousel-control-next-icon {
+  background-position: 9px center;
+}
+
+.carousel-control-prev-icon {
+  background-position: 7px center;
+}
+
+.carousel.rounded-indicators {
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    border-radius: 50%;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .carousel-indicators {
+    & + .carousel-inner {
+      .carousel-caption {
+        bottom: 50px;
+        padding-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+@use "sass:math";
+
+//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: math.div($size, 2);
+    border-bottom-right-radius: math.div($size, 2);
+    border-left: 0;
+    transform-origin: center left;
+  }
+}
+
+.circular-progress-right {
+  right: 0;
+  .circular-progress-bar {
+    left: -100%;
+    border-top-left-radius: math.div($size, 2);
+    border-bottom-left-radius: math.div($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 * math.div(100, $howManySteps));
+
+  //animation only the left side if below 50%
+  @if $i <= math.div($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 > math.div($howManySteps, 2) {
+    .circular-progress[data-percentage="#{$stepName}"] {
+      .circular-progress-right .circular-progress-bar {
+        // prettier-ignore
+        animation: loading-#{ math.div($howManySteps, 2)}
+          $animationTime
+          linear
+          forwards; //set the animation to longest animation
+      }
+      .circular-progress-left .circular-progress-bar {
+        // prettier-ignore
+        animation: loading-#{$i - math.div($howManySteps, 2)}
+          $animationTime
+          linear
+          forwards
+          $animationTime;
+      }
+    }
+  }
+}
+
+//animation
+@for $i from 1 through math.div($howManySteps, 2) {
+  $degrees: math.div(180, math.div($howManySteps, 2));
+  $degrees: ($degrees * $i);
+  @keyframes loading-#{$i} {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(#{$degrees}deg);
+    }
+  }
+}

package/src/scss/_gallery.scss

@@ -0,0 +1,262 @@
+.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);
+      }
+    }
+  }
+
+  .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/_icon.scss

@@ -71,9 +71,6 @@ $icon: (
   transform: scaleY(-1);
 }
 
-.btn {
-  .bi {
-    vertical-align: top;
-    margin-top: map-get($spacers, 1);
-  }
+.icon--file {
+  color: $gray-600;
 }

package/src/scss/_inpage-navigation.scss

@@ -14,6 +14,16 @@
     .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 {
+      padding: 0 map-get($spacers, "2-5");
     }
   }
 }

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

@@ -0,0 +1,12 @@
+// Custom theme colors
+
+$primary: #0a58ca;
+$secondary: #801f4f;
+$info: #087990;
+$danger: #b02a37;
+$warning: #ffc107;
+$success: #198754;
+$light: #f8f9fa;
+$dark: #212529;
+
+$text-muted: #495057;