@openeuropa/bcl-theme-default 0.22.0 → 0.23.0

package/css/oe-bcl-default.css

@@ -4064,7 +4064,7 @@ textarea.form-control-lg {
 
 .dropdown-menu {
   position: absolute;
-  z-index: 1000;
+  z-index: 1055;
   display: none;
   min-width: 10rem;
   padding: 0.5rem 0;
@@ -15589,6 +15589,16 @@ svg {
     display: none !important;
   }
 }
+.alert-light {
+  border-color: #f8f9fa;
+  background: #fff;
+}
+
+.alert-dark {
+  border-color: #ced4da;
+  background: #e9ecef;
+}
+
 .btn {
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -16121,7 +16131,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 {
@@ -16648,140 +16658,323 @@ 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: #253ebe;
-}
-.badge.bg-secondary .icon--close {
-  color: #70254a;
-}
-.badge.bg-success .icon--close {
-  color: #09854c;
-}
-.badge.bg-danger .icon--close {
-  color: #a51f2c;
+
+a.badge {
+  text-decoration: none;
 }
-.badge.bg-dark .icon--close {
-  color: #212529;
+a.badge:focus-visible {
+  outline: none;
 }
-.badge.bg-warning .icon--close {
-  color: #ffba07;
-  background: #000;
-}
-.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: #253ebe;
 }
 
-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: #253ebe !important;
 }
 
 .badge-outline-primary {
+  background: transparent !important;
   border: 1px solid #253ebe;
   color: #253ebe !important;
-  background: transparent !important;
 }
 .badge-outline-primary .icon--close {
   background: #253ebe;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-primary, a.badge:active.badge-outline-primary, a.badge:hover.badge-outline-primary {
+  background-color: #e9ecf9 !important;
+  border-color: #1f35a2 !important;
+}
+a.badge:focus-within.bg-primary, a.badge:active.bg-primary, a.badge:hover.bg-primary {
+  background-color: #1f35a2 !important;
+}
+a.badge.badge.bg-primary:focus {
+  box-shadow: 0 0 0 0.25rem rgba(70, 91, 200, 0.5);
+}
+a.badge.badge-outline-primary:focus {
+  box-shadow: 0 0 0 0.25rem rgba(37, 62, 190, 0.5);
+}
+
+.badge.bg-secondary a,
+.badge.bg-secondary {
+  color: #fff;
+}
+.badge.bg-secondary a .icon--close,
+.badge.bg-secondary .icon--close {
+  color: #70254a;
+}
+
+.badge-outline-secondary a {
+  color: #70254a !important;
+}
+
 .badge-outline-secondary {
+  background: transparent !important;
   border: 1px solid #70254a;
   color: #70254a !important;
-  background: transparent !important;
 }
 .badge-outline-secondary .icon--close {
   background: #70254a;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-secondary, a.badge:active.badge-outline-secondary, a.badge:hover.badge-outline-secondary {
+  background-color: #f1e9ed !important;
+  border-color: #5f1f3f !important;
+}
+a.badge:focus-within.bg-secondary, a.badge:active.bg-secondary, a.badge:hover.bg-secondary {
+  background-color: #5f1f3f !important;
+}
+a.badge.badge.bg-secondary:focus {
+  box-shadow: 0 0 0 0.25rem rgba(133, 70, 101, 0.5);
+}
+a.badge.badge-outline-secondary:focus {
+  box-shadow: 0 0 0 0.25rem rgba(112, 37, 74, 0.5);
+}
+
+.badge.bg-success a,
+.badge.bg-success {
+  color: #fff;
+}
+.badge.bg-success a .icon--close,
+.badge.bg-success .icon--close {
+  color: #09854c;
+}
+
+.badge-outline-success a {
+  color: #09854c !important;
+}
+
 .badge-outline-success {
+  background: transparent !important;
   border: 1px solid #09854c;
   color: #09854c !important;
-  background: transparent !important;
 }
 .badge-outline-success .icon--close {
   background: #09854c;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-success, a.badge:active.badge-outline-success, a.badge:hover.badge-outline-success {
+  background-color: #e6f3ed !important;
+  border-color: #087141 !important;
+}
+a.badge:focus-within.bg-success, a.badge:active.bg-success, a.badge:hover.bg-success {
+  background-color: #087141 !important;
+}
+a.badge.badge.bg-success:focus {
+  box-shadow: 0 0 0 0.25rem rgba(46, 151, 103, 0.5);
+}
+a.badge.badge-outline-success:focus {
+  box-shadow: 0 0 0 0.25rem rgba(9, 133, 76, 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: 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: #ffba07;
+  background: #000;
+}
+
+.badge-outline-warning a {
+  color: #ffba07 !important;
+}
+
 .badge-outline-warning {
+  background: transparent !important;
   border: 1px solid #ffba07;
   color: #ffba07 !important;
-  background: transparent !important;
 }
 .badge-outline-warning .icon--close {
   background: #ffba07;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-warning, a.badge:active.badge-outline-warning, a.badge:hover.badge-outline-warning {
+  background-color: #fff8e6 !important;
+  border-color: #d99e06 !important;
+}
+a.badge:focus-within.bg-warning, a.badge:active.bg-warning, a.badge:hover.bg-warning {
+  background-color: #d99e06 !important;
+}
+a.badge.badge.bg-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba(217, 158, 6, 0.5);
+}
+a.badge.badge-outline-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 186, 7, 0.5);
+}
+
+.badge.bg-danger a,
+.badge.bg-danger {
+  color: #fff;
+}
+.badge.bg-danger a .icon--close,
+.badge.bg-danger .icon--close {
+  color: #a51f2c;
+}
+
+.badge-outline-danger a {
+  color: #a51f2c !important;
+}
+
 .badge-outline-danger {
+  background: transparent !important;
   border: 1px solid #a51f2c;
   color: #a51f2c !important;
-  background: transparent !important;
 }
 .badge-outline-danger .icon--close {
   background: #a51f2c;
   color: #fff;
 }
 
+a.badge:focus-within.badge-outline-danger, a.badge:active.badge-outline-danger, a.badge:hover.badge-outline-danger {
+  background-color: #f6e9ea !important;
+  border-color: #8c1a25 !important;
+}
+a.badge:focus-within.bg-danger, a.badge:active.bg-danger, a.badge:hover.bg-danger {
+  background-color: #8c1a25 !important;
+}
+a.badge.badge.bg-danger:focus {
+  box-shadow: 0 0 0 0.25rem rgba(179, 65, 76, 0.5);
+}
+a.badge.badge-outline-danger:focus {
+  box-shadow: 0 0 0 0.25rem rgba(165, 31, 44, 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: 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: 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);
+}
+
 .ss-main {
   position: relative;
   display: inline-block;
@@ -17328,13 +17521,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: #ced4da;
+  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: #adb5bd;
 }
 .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,
@@ -17368,10 +17565,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;
@@ -17467,6 +17661,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;
@@ -17531,6 +17730,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 {
@@ -17623,8 +17826,7 @@ select.multi-select {
   top: 1rem;
   background-color: #f8f9fa;
 }
-.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 #dee2e6;