@openeuropa/bcl-theme-joinup 0.22.0 → 0.23.0

package/css/oe-bcl-joinup.css

@@ -4190,7 +4190,7 @@ textarea.form-control-lg {
 
 .dropdown-menu {
   position: absolute;
-  z-index: 1000;
+  z-index: 1055;
   display: none;
   min-width: 10rem;
   padding: 0.5rem 0;
@@ -15837,7 +15837,7 @@ em.placeholder {
 
 .bcl-header__navbar input:active,
 .bcl-header__navbar input:focus {
-  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
+  box-shadow: 0 0 0 0.25rem hsla(210deg, 2%, 83%, 0.5);
 }
 
 .bcl-header .notification {
@@ -16373,150 +16373,360 @@ textarea.form-control.is-valid,
       justify-content: center;
   -ms-flex-align: center;
       align-items: center;
-  cursor: pointer;
   background: #fff;
   border-radius: 50%;
+  border: none;
+  padding: 0;
 }
 .badge .icon--close svg {
   width: 6px;
   height: 6px;
   margin: 0;
 }
-.badge.bg-primary .icon--close {
-  color: #143b76;
-}
-.badge.bg-secondary .icon--close {
-  color: #e7f1fb;
-}
-.badge.bg-success .icon--close {
-  color: #18bf80;
-}
-.badge.bg-danger .icon--close {
-  color: #eb3434;
-}
-.badge.bg-dark .icon--close {
-  color: #212529;
+
+a.badge {
+  text-decoration: none;
 }
-.badge.bg-warning .icon--close {
-  color: #eba843;
-  background: #000;
+a.badge:focus-visible {
+  outline: none;
 }
-.badge.bg-info .icon--close {
-  color: #0d768b;
-  background: #000;
+
+.badge.bg-primary a,
+.badge.bg-primary {
+  color: #fff;
 }
-.badge.bg-light .icon--close {
-  color: #f8f9fa;
-  background: #000;
+.badge.bg-primary a .icon--close,
+.badge.bg-primary .icon--close {
+  color: #143b76;
 }
 
-h1 .badge, .h1 .badge,
-h2 .badge,
-.h2 .badge,
-h3 .badge,
-.h3 .badge,
-h4 .badge,
-.h4 .badge,
-h5 .badge,
-.h5 .badge,
-h6 .badge,
-.h6 .badge,
-p .badge,
-a .badge {
-  font-size: 0.75em;
+.badge-outline-primary a {
+  color: #143b76 !important;
 }
 
 .badge-outline-primary {
+  background: transparent !important;
   border: 1px solid #143b76;
   color: #143b76 !important;
-  background: transparent !important;
 }
 .badge-outline-primary .icon--close {
   background: #143b76;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-primary, a.badge:active.badge-outline-primary, a.badge:hover.badge-outline-primary {
+  background-color: #e8ebf1 !important;
+  border-color: #113264 !important;
+}
+a.badge:focus-within.bg-primary, a.badge:active.bg-primary, a.badge:hover.bg-primary {
+  background-color: #113264 !important;
+}
+a.badge.badge.bg-primary:focus {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(55, 88, 139, 0.5);
+}
+a.badge.badge-outline-primary:focus {
+  box-shadow: 0 0 0 0.25rem rgba(20, 59, 118, 0.5);
+}
+
+.badge.bg-secondary a,
+.badge.bg-secondary {
+  color: #fff;
+}
+.badge.bg-secondary a .icon--close,
+.badge.bg-secondary .icon--close {
+  color: #e7f1fb;
+}
+
+.badge-outline-secondary a {
+  color: #e7f1fb !important;
+}
+
 .badge-outline-secondary {
+  background: transparent !important;
   border: 1px solid #e7f1fb;
   color: #e7f1fb !important;
-  background: transparent !important;
 }
 .badge-outline-secondary .icon--close {
   background: #e7f1fb;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-secondary, a.badge:active.badge-outline-secondary, a.badge:hover.badge-outline-secondary {
+  background-color: #fdfeff !important;
+  border-color: #c4cdd5 !important;
+}
+a.badge:focus-within.bg-secondary, a.badge:active.bg-secondary, a.badge:hover.bg-secondary {
+  background-color: #c4cdd5 !important;
+}
+a.badge.badge.bg-secondary:focus {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(196, 205, 213, 0.5);
+}
+a.badge.badge-outline-secondary:focus {
+  box-shadow: 0 0 0 0.25rem rgba(231, 241, 251, 0.5);
+}
+
+.badge.bg-success a,
+.badge.bg-success {
+  color: #fff;
+}
+.badge.bg-success a .icon--close,
+.badge.bg-success .icon--close {
+  color: #18bf80;
+}
+
+.badge-outline-success a {
+  color: #18bf80 !important;
+}
+
 .badge-outline-success {
+  background: transparent !important;
   border: 1px solid #18bf80;
   color: #18bf80 !important;
-  background: transparent !important;
 }
 .badge-outline-success .icon--close {
   background: #18bf80;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-success, a.badge:active.badge-outline-success, a.badge:hover.badge-outline-success {
+  background-color: #e8f9f2 !important;
+  border-color: #14a26d !important;
+}
+a.badge:focus-within.bg-success, a.badge:active.bg-success, a.badge:hover.bg-success {
+  background-color: #14a26d !important;
+}
+a.badge.badge.bg-success:focus {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(20, 162, 109, 0.5);
+}
+a.badge.badge-outline-success:focus {
+  box-shadow: 0 0 0 0.25rem rgba(24, 191, 128, 0.5);
+}
+
+.badge.bg-info a,
+.badge.bg-info {
+  color: #fff;
+}
+.badge.bg-info a .icon--close,
+.badge.bg-info .icon--close {
+  color: #0d768b;
+}
+
+.badge-outline-info a {
+  color: #0d768b !important;
+}
+
 .badge-outline-info {
+  background: transparent !important;
   border: 1px solid #0d768b;
   color: #0d768b !important;
-  background: transparent !important;
 }
 .badge-outline-info .icon--close {
   background: #0d768b;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-info, a.badge:active.badge-outline-info, a.badge:hover.badge-outline-info {
+  background-color: #e7f1f3 !important;
+  border-color: #0b6476 !important;
+}
+a.badge:focus-within.bg-info, a.badge:active.bg-info, a.badge:hover.bg-info {
+  background-color: #0b6476 !important;
+}
+a.badge.badge.bg-info:focus {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(49, 139, 156, 0.5);
+}
+a.badge.badge-outline-info:focus {
+  box-shadow: 0 0 0 0.25rem rgba(13, 118, 139, 0.5);
+}
+
+.badge.bg-warning a,
+.badge.bg-warning {
+  color: #000;
+}
+.badge.bg-warning a .icon--close,
+.badge.bg-warning .icon--close {
+  color: #eba843;
+  background: #000;
+}
+
+.badge-outline-warning a {
+  color: #eba843 !important;
+}
+
 .badge-outline-warning {
+  background: transparent !important;
   border: 1px solid #eba843;
   color: #eba843 !important;
-  background: transparent !important;
 }
 .badge-outline-warning .icon--close {
   background: #eba843;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-warning, a.badge:active.badge-outline-warning, a.badge:hover.badge-outline-warning {
+  background-color: #fdf6ec !important;
+  border-color: #c88f39 !important;
+}
+a.badge:focus-within.bg-warning, a.badge:active.bg-warning, a.badge:hover.bg-warning {
+  background-color: #c88f39 !important;
+}
+a.badge.badge.bg-warning:focus {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(200, 143, 57, 0.5);
+}
+a.badge.badge-outline-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba(235, 168, 67, 0.5);
+}
+
+.badge.bg-danger a,
+.badge.bg-danger {
+  color: #fff;
+}
+.badge.bg-danger a .icon--close,
+.badge.bg-danger .icon--close {
+  color: #eb3434;
+}
+
+.badge-outline-danger a {
+  color: #eb3434 !important;
+}
+
 .badge-outline-danger {
+  background: transparent !important;
   border: 1px solid #eb3434;
   color: #eb3434 !important;
-  background: transparent !important;
 }
 .badge-outline-danger .icon--close {
   background: #eb3434;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-danger, a.badge:active.badge-outline-danger, a.badge:hover.badge-outline-danger {
+  background-color: #fdebeb !important;
+  border-color: #c82c2c !important;
+}
+a.badge:focus-within.bg-danger, a.badge:active.bg-danger, a.badge:hover.bg-danger {
+  background-color: #c82c2c !important;
+}
+a.badge.badge.bg-danger:focus {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(200, 44, 44, 0.5);
+}
+a.badge.badge-outline-danger:focus {
+  box-shadow: 0 0 0 0.25rem rgba(235, 52, 52, 0.5);
+}
+
+.badge.bg-light a,
+.badge.bg-light {
+  color: #000;
+}
+.badge.bg-light a .icon--close,
+.badge.bg-light .icon--close {
+  color: #f8f9fa;
+  background: #000;
+}
+
+.badge-outline-light a {
+  color: #f8f9fa !important;
+}
+
 .badge-outline-light {
+  background: transparent !important;
   border: 1px solid #f8f9fa;
   color: #f8f9fa !important;
-  background: transparent !important;
 }
 .badge-outline-light .icon--close {
   background: #f8f9fa;
-  color: #fff;
   color: #000;
 }
 
+a.badge:focus-within.badge-outline-light, a.badge:active.badge-outline-light, a.badge:hover.badge-outline-light {
+  border-color: #fff;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.3) !important;
+}
+a.badge:focus-within.bg-light, a.badge:active.bg-light, a.badge:hover.bg-light {
+  background-color: #d3d4d5 !important;
+}
+a.badge.badge.bg-light:focus {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
+}
+a.badge.badge-outline-light:focus {
+  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
+}
+
+.badge.bg-dark a,
+.badge.bg-dark {
+  color: #fff;
+}
+.badge.bg-dark a .icon--close,
+.badge.bg-dark .icon--close {
+  color: #212529;
+}
+
+.badge-outline-dark a {
+  color: #212529 !important;
+}
+
 .badge-outline-dark {
+  background: transparent !important;
   border: 1px solid #212529;
   color: #212529 !important;
-  background: transparent !important;
 }
 .badge-outline-dark .icon--close {
   background: #212529;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-dark, a.badge:active.badge-outline-dark, a.badge:hover.badge-outline-dark {
+  background-color: #f8f9fa !important;
+  border-color: #000;
+}
+a.badge:focus-within.bg-dark, a.badge:active.bg-dark, a.badge:hover.bg-dark {
+  background-color: #1c1f23 !important;
+}
+a.badge.badge.bg-dark:focus {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
+}
+a.badge.badge-outline-dark:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+
+.badge.bg-brand a,
+.badge.bg-brand {
+  color: #fff;
+}
+.badge.bg-brand a .icon--close,
+.badge.bg-brand .icon--close {
+  color: #1073de;
+}
+
+.badge-outline-brand a {
+  color: #1073de !important;
+}
+
 .badge-outline-brand {
+  background: transparent !important;
   border: 1px solid #1073de;
   color: #1073de !important;
-  background: transparent !important;
 }
 .badge-outline-brand .icon--close {
   background: #1073de;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-brand, a.badge:active.badge-outline-brand, a.badge:hover.badge-outline-brand {
+  background-color: #e7f1fc !important;
+  border-color: #0e62bd !important;
+}
+a.badge:focus-within.bg-brand, a.badge:active.bg-brand, a.badge:hover.bg-brand {
+  background-color: #0e62bd !important;
+}
+a.badge.badge.bg-brand:focus {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(52, 136, 227, 0.5);
+}
+a.badge.badge-outline-brand:focus {
+  box-shadow: 0 0 0 0.25rem rgba(16, 115, 222, 0.5);
+}
+
 .ss-main {
   position: relative;
   display: inline-block;
@@ -17058,13 +17268,17 @@ select.multi-select {
   font-size: 1rem;
 }
 .ss-main.multi-select .ss-multi-selected {
-  padding: calc(0.5rem - 2px) 0 calc(0.5rem - 2px) calc(0.5rem - 2px);
+  border-color: #a2a8ab;
+  padding: calc(0.5rem - 2px) 0 calc(0.5rem - 2px) 0.3rem;
 }
 .ss-main.multi-select .ss-multi-selected.ss-disabled .ss-values .ss-value {
   background: #858a8c;
 }
 .ss-main.multi-select .ss-multi-selected .ss-add {
-  margin-top: 0.75rem;
+  margin-top: 0;
+  -ms-flex-item-align: center;
+      -ms-grid-row-align: center;
+      align-self: center;
 }
 
 .ss-main.multi-select.is-invalid .ss-multi-selected,
@@ -17098,10 +17312,7 @@ select.multi-select {
 
 @media (min-width: 768px) {
   .ss-main.multi-select .ss-multi-selected {
-    padding: 0.3rem 0 0.3rem 0.3rem;
-  }
-  .ss-main.multi-select .ss-multi-selected .ss-add {
-    margin-top: 0.5rem;
+    padding: 0.075rem 0 0.075rem 0.3rem;
   }
   .ss-main.multi-select .ss-values {
     font-size: 1rem;
@@ -17197,6 +17408,11 @@ select.multi-select {
   padding-top: 25%;
 }
 
+@media (max-width: 767.98px) {
+  .container .bcl-content-banner .container {
+    padding: 0;
+  }
+}
 @media (min-width: 768px) {
   .bcl-banner {
     overflow: hidden;
@@ -17261,6 +17477,10 @@ select.multi-select {
   .container .bcl-banner:not(.text-center):not(.shade) .bcl-banner__content {
     margin-left: 0;
   }
+  .container .bcl-content-banner .card {
+    margin-right: -0.75rem;
+    margin-left: -0.75rem;
+  }
 }
 @media (min-width: 992px) {
   .bcl-banner {
@@ -18183,8 +18403,7 @@ input:hover {
   top: 1rem;
   background-color: #fafbfc;
 }
-.bcl-inpage-navigation h5, .bcl-inpage-navigation .h5 {
-  font-weight: bold;
+.bcl-inpage-navigation .bcl-heading {
   margin-bottom: 0;
   padding: 1.25rem;
   border-bottom: 1px solid #dadee0;