@openeuropa/bcl-theme-default 0.19.0 → 0.20.0

package/css/oe-bcl-default.css

@@ -7318,14 +7318,28 @@ textarea.form-control-lg {
   opacity: 0.25;
 }
 
-.text-underline-hover {
+a {
+  text-underline-offset: 2px;
+}
+a:not(.text-underline-hover), a:not(.standalone) {
+  -webkit-text-decoration-color: rgba(10, 88, 202, 0.3);
+          text-decoration-color: rgba(10, 88, 202, 0.3);
+}
+a:not(.text-underline-hover):hover, a:not(.standalone):hover {
+  -webkit-text-decoration-color: currentColor;
+          text-decoration-color: currentColor;
+}
+a.standalone, a.text-underline-hover {
   text-decoration: none;
 }
-
-.text-underline-hover:hover {
+a.standalone:hover, a.text-underline-hover:hover {
   text-decoration: underline;
 }
 
+svg {
+  fill: currentColor;
+}
+
 @media (max-width: 767.98px) {
   .n-mx-container {
     padding-right: 0.75rem;
@@ -7342,6 +7356,10 @@ textarea.form-control-lg {
   background-color: #e9ecef;
 }
 
+.bg-gray-400 {
+  background-color: #ced4da;
+}
+
 .grid-3-9 {
   -ms-grid-columns: 25% 75%;
   grid-template-columns: 25% 75%;
@@ -15575,10 +15593,465 @@ textarea.form-control-lg {
   display: none;
 }
 
+.circular-progress {
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  background: none;
+  box-shadow: none;
+  position: relative;
+}
+.circular-progress:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 12px solid #ced4da;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.circular-progress > 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: 12px;
+  border-style: solid;
+  position: absolute;
+  top: 0;
+  border-color: #0a58ca;
+}
+
+.circular-progress-left {
+  left: 0;
+}
+.circular-progress-left .circular-progress-bar {
+  left: 100%;
+  border-top-right-radius: 60px;
+  border-bottom-right-radius: 60px;
+  border-left: 0;
+  -webkit-transform-origin: center left;
+          transform-origin: center left;
+}
+
+.circular-progress-right {
+  right: 0;
+}
+.circular-progress-right .circular-progress-bar {
+  left: -100%;
+  border-top-left-radius: 60px;
+  border-bottom-left-radius: 60px;
+  border-right: 0;
+  -webkit-transform-origin: center right;
+          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. 
+*/
+.circular-progress[data-percentage="5"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-1 1s linear forwards;
+          animation: loading-1 1s linear forwards;
+}
+.circular-progress[data-percentage="5"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="10"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-2 1s linear forwards;
+          animation: loading-2 1s linear forwards;
+}
+.circular-progress[data-percentage="10"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="15"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-3 1s linear forwards;
+          animation: loading-3 1s linear forwards;
+}
+.circular-progress[data-percentage="15"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="20"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-4 1s linear forwards;
+          animation: loading-4 1s linear forwards;
+}
+.circular-progress[data-percentage="20"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="25"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-5 1s linear forwards;
+          animation: loading-5 1s linear forwards;
+}
+.circular-progress[data-percentage="25"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="30"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-6 1s linear forwards;
+          animation: loading-6 1s linear forwards;
+}
+.circular-progress[data-percentage="30"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="35"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-7 1s linear forwards;
+          animation: loading-7 1s linear forwards;
+}
+.circular-progress[data-percentage="35"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="40"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-8 1s linear forwards;
+          animation: loading-8 1s linear forwards;
+}
+.circular-progress[data-percentage="40"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="45"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-9 1s linear forwards;
+          animation: loading-9 1s linear forwards;
+}
+.circular-progress[data-percentage="45"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="50"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="50"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: 0;
+          animation: 0;
+}
+
+.circular-progress[data-percentage="55"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="55"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-1 1s linear forwards 1s;
+          animation: loading-1 1s linear forwards 1s;
+}
+
+.circular-progress[data-percentage="60"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="60"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-2 1s linear forwards 1s;
+          animation: loading-2 1s linear forwards 1s;
+}
+
+.circular-progress[data-percentage="65"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="65"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-3 1s linear forwards 1s;
+          animation: loading-3 1s linear forwards 1s;
+}
+
+.circular-progress[data-percentage="70"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="70"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-4 1s linear forwards 1s;
+          animation: loading-4 1s linear forwards 1s;
+}
+
+.circular-progress[data-percentage="75"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="75"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-5 1s linear forwards 1s;
+          animation: loading-5 1s linear forwards 1s;
+}
+
+.circular-progress[data-percentage="80"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="80"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-6 1s linear forwards 1s;
+          animation: loading-6 1s linear forwards 1s;
+}
+
+.circular-progress[data-percentage="85"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="85"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-7 1s linear forwards 1s;
+          animation: loading-7 1s linear forwards 1s;
+}
+
+.circular-progress[data-percentage="90"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="90"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-8 1s linear forwards 1s;
+          animation: loading-8 1s linear forwards 1s;
+}
+
+.circular-progress[data-percentage="95"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="95"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-9 1s linear forwards 1s;
+          animation: loading-9 1s linear forwards 1s;
+}
+
+.circular-progress[data-percentage="100"] .circular-progress-right .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards;
+          animation: loading-10 1s linear forwards;
+}
+.circular-progress[data-percentage="100"] .circular-progress-left .circular-progress-bar {
+  -webkit-animation: loading-10 1s linear forwards 1s;
+          animation: loading-10 1s linear forwards 1s;
+}
+
+@-webkit-keyframes loading-1 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(18deg);
+            transform: rotate(18deg);
+  }
+}
+
+@keyframes loading-1 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(18deg);
+            transform: rotate(18deg);
+  }
+}
+@-webkit-keyframes loading-2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(36deg);
+            transform: rotate(36deg);
+  }
+}
+@keyframes loading-2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(36deg);
+            transform: rotate(36deg);
+  }
+}
+@-webkit-keyframes loading-3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(54deg);
+            transform: rotate(54deg);
+  }
+}
+@keyframes loading-3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(54deg);
+            transform: rotate(54deg);
+  }
+}
+@-webkit-keyframes loading-4 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(72deg);
+            transform: rotate(72deg);
+  }
+}
+@keyframes loading-4 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(72deg);
+            transform: rotate(72deg);
+  }
+}
+@-webkit-keyframes loading-5 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+}
+@keyframes loading-5 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+}
+@-webkit-keyframes loading-6 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(108deg);
+            transform: rotate(108deg);
+  }
+}
+@keyframes loading-6 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(108deg);
+            transform: rotate(108deg);
+  }
+}
+@-webkit-keyframes loading-7 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(126deg);
+            transform: rotate(126deg);
+  }
+}
+@keyframes loading-7 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(126deg);
+            transform: rotate(126deg);
+  }
+}
+@-webkit-keyframes loading-8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(144deg);
+            transform: rotate(144deg);
+  }
+}
+@keyframes loading-8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(144deg);
+            transform: rotate(144deg);
+  }
+}
+@-webkit-keyframes loading-9 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(162deg);
+            transform: rotate(162deg);
+  }
+}
+@keyframes loading-9 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(162deg);
+            transform: rotate(162deg);
+  }
+}
+@-webkit-keyframes loading-10 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+}
+@keyframes loading-10 {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+}
 body {
   overflow-x: hidden;
 }
 
+em.placeholder {
+  background-color: transparent;
+  cursor: auto;
+  min-height: 0;
+  vertical-align: baseline;
+  opacity: 1;
+  display: inline;
+}
+
 .bcl-header__project,
 .bcl-header__navbar {
   background: linear-gradient(90deg, #039 0%, #1b4ac3 100%);
@@ -15776,41 +16249,46 @@ body {
     width: 285px;
   }
 }
-.bcl-language .modal-content {
-  color: #fff;
-  background-color: #004494;
+.bcl-language-list-modal .btn-close {
+  opacity: 1;
 }
-
-.bcl-language__list {
-  display: -ms-grid;
-  display: grid;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
+.bcl-language-list-modal.bcl-language-list-modal--ec .modal-body, .bcl-language-list-modal.bcl-language-list-modal--eu .modal-body {
+  padding-top: 0.5rem;
+  overflow: visible;
 }
-
-.bcl-language__title {
-  margin-bottom: 1.5rem;
+.bcl-language-list-modal.bcl-language-list-modal--ec .modal-header, .bcl-language-list-modal.bcl-language-list-modal--eu .modal-header {
+  border: 0;
+  padding: 0;
 }
-
-.bcl-language__item {
-  padding: 0.5rem 1rem;
-  font-weight: 700;
-  color: #004494;
-  text-decoration: none;
-  background-color: #fff;
+.bcl-language-list-modal.bcl-language-list-modal--eu .modal-body {
+  background: #fff;
 }
-.bcl-language__item:hover, .bcl-language__item:focus {
-  color: #212529;
-  text-decoration: underline;
-  background-color: #ffd617;
+.bcl-language-list-modal.bcl-language-list-modal--eu .modal-dialog {
+  background: #fff;
 }
-
-.bcl-language .modal-body {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+.bcl-language-list-modal.bcl-language-list-modal--eu h5, .bcl-language-list-modal.bcl-language-list-modal--eu .h5 {
+  color: #0e47cb;
 }
-
-.bcl-language .btn-close {
+.bcl-language-list-modal.bcl-language-list-modal--eu svg {
+  color: #0e47cb;
+}
+.bcl-language-list-modal.bcl-language-list-modal--eu .btn-close {
+  -webkit-filter: invert(20%) sepia(70%) saturate(2876%) hue-rotate(216deg) brightness(94%) contrast(105%);
+          filter: invert(20%) sepia(70%) saturate(2876%) hue-rotate(216deg) brightness(94%) contrast(105%);
+}
+.bcl-language-list-modal.bcl-language-list-modal--ec {
+  background: #034da1;
+}
+.bcl-language-list-modal.bcl-language-list-modal--ec .modal-content {
+  background: #034da1;
+}
+.bcl-language-list-modal.bcl-language-list-modal--ec h5, .bcl-language-list-modal.bcl-language-list-modal--ec .h5 {
+  color: #fff;
+}
+.bcl-language-list-modal.bcl-language-list-modal--ec svg {
+  color: #fff;
+}
+.bcl-language-list-modal.bcl-language-list-modal--ec .btn-close {
   -webkit-filter: invert(1) grayscale(100%) brightness(200%);
           filter: invert(1) grayscale(100%) brightness(200%);
 }
@@ -16147,21 +16625,24 @@ textarea.form-control.is-valid,
   }
 }
 .badge .icon--close {
-  display: inline-block;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   width: 12px;
   height: 12px;
   margin-left: 0.3rem;
   font-size: 1em;
   font-weight: 300;
-  line-height: 0.55rem;
-  vertical-align: inherit;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
   cursor: pointer;
   background: #fff;
   border-radius: 50%;
 }
 .badge .icon--close svg {
-  width: 12px;
-  height: 12px;
+  width: 6px;
+  height: 6px;
   margin: 0;
 }
 .badge.bg-primary .icon--close {
@@ -16959,11 +17440,11 @@ select.multi-select {
 .bcl-banner__image::before {
   display: block;
   width: 100%;
-  padding-top: 25%;
+  padding-top: 20%;
   content: "";
 }
 .hero .bcl-banner__image::before {
-  padding-top: 33.33%;
+  padding-top: 25%;
 }
 
 @media (min-width: 768px) {
@@ -17049,14 +17530,14 @@ select.multi-select {
   .bcl-banner::before {
     display: block;
     width: 100%;
-    padding-top: 25%;
+    padding-top: 20%;
     content: "";
   }
   .bcl-banner.hero {
     min-height: 380px;
   }
   .bcl-banner.hero::before {
-    padding-top: 33.33%;
+    padding-top: 25%;
   }
 }
 /* stylelint-disable declaration-no-important */
@@ -17135,7 +17616,56 @@ select.multi-select {
   padding: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.bcl-inpage-navigation ul .nav-link:not(.active):hover {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+  -webkit-text-decoration-color: currentColor;
+          text-decoration-color: currentColor;
+}
 .bcl-inpage-navigation ul ul {
   padding: 0 0.75rem;
 }
+
+.bcl-language-list .btn {
+  background: #fff;
+  color: #0a58ca;
+  border-color: #ced4da;
+}
+.bcl-language-list .btn:hover {
+  text-decoration: underline;
+  border-color: #0e47cb;
+}
+.bcl-language-list .btn.selected {
+  background: #801f4f;
+  color: #fff;
+  border-color: #801f4f;
+}
+.bcl-language-list .btn.selected svg {
+  color: #fff;
+}
+.bcl-language-list.bcl-language-list--ec .btn, .bcl-language-list.bcl-language-list--eu .btn {
+  color: #0e47cb;
+  font-weight: 700;
+}
+.bcl-language-list.bcl-language-list--ec .btn.selected, .bcl-language-list.bcl-language-list--eu .btn.selected {
+  background: #ffcc00;
+  color: #000;
+  border-color: #ffcc00;
+}
+.bcl-language-list.bcl-language-list--ec .btn.selected svg, .bcl-language-list.bcl-language-list--eu .btn.selected svg {
+  color: #000;
+}
+.bcl-language-list.bcl-language-list--eu .btn {
+  border: 2px solid #0e47cb;
+}
+.bcl-language-list.bcl-language-list--ec .main {
+  background: #034da1;
+}
+.bcl-language-list.bcl-language-list--ec .main h5, .bcl-language-list.bcl-language-list--ec .main .h5 {
+  color: #fff;
+}
+.bcl-language-list.bcl-language-list--ec .btn {
+  border-radius: 0;
+  border-color: transparent;
+}
 /*# sourceMappingURL=oe-bcl-default.css.map */