@openeuropa/bcl-theme-joinup 1.0.2 → 1.1.0

package/css/oe-bcl-joinup.css

@@ -36,11 +36,7 @@ h1, .h1 {
   color: #113264;
 }
 
-h2.fw-medium, .fw-medium.h2,
-h3.fw-medium,
-.fw-medium.h3,
-h4.fw-medium,
-.fw-medium.h4 {
+h2.fw-medium, .fw-medium.h2, h3.fw-medium, .fw-medium.h3, h4.fw-medium, .fw-medium.h4 {
   color: #113264;
 }
 
@@ -3004,9 +3000,7 @@ textarea.form-control-lg {
   padding-top: 1.625rem;
   padding-bottom: 0.625rem;
 }
-.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
-.form-floating > .form-control-plaintext:focus,
-.form-floating > .form-control-plaintext:not(:placeholder-shown) {
+.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown), .form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown) {
   padding-top: 1.625rem;
   padding-bottom: 0.625rem;
 }
@@ -3223,11 +3217,7 @@ textarea.form-control-lg {
   margin-left: 0.5em;
 }
 
-.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid,
-.was-validated .input-group > .form-select:not(:focus):valid,
-.input-group > .form-select:not(:focus).is-valid,
-.was-validated .input-group > .form-floating:not(:focus-within):valid,
-.input-group > .form-floating:not(:focus-within).is-valid {
+.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, .was-validated .input-group > .form-select:not(:focus):valid, .input-group > .form-select:not(:focus).is-valid, .was-validated .input-group > .form-floating:not(:focus-within):valid, .input-group > .form-floating:not(:focus-within).is-valid {
   z-index: 3;
 }
 
@@ -3313,11 +3303,7 @@ textarea.form-control-lg {
   margin-left: 0.5em;
 }
 
-.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid,
-.was-validated .input-group > .form-select:not(:focus):invalid,
-.input-group > .form-select:not(:focus).is-invalid,
-.was-validated .input-group > .form-floating:not(:focus-within):invalid,
-.input-group > .form-floating:not(:focus-within).is-invalid {
+.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, .was-validated .input-group > .form-select:not(:focus):invalid, .input-group > .form-select:not(:focus).is-invalid, .was-validated .input-group > .form-floating:not(:focus-within):invalid, .input-group > .form-floating:not(:focus-within).is-invalid {
   z-index: 4;
 }
 
@@ -6726,9 +6712,7 @@ textarea.form-control-lg {
     transition: none;
   }
 }
-.carousel-control-prev:hover, .carousel-control-prev:focus,
-.carousel-control-next:hover,
-.carousel-control-next:focus {
+.carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus {
   color: #fff;
   text-decoration: none;
   outline: 0;
@@ -6969,8 +6953,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(-100%);
             transform: translateX(-100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.offcanvas-end {
     top: 0;
     right: 0;
@@ -6979,8 +6961,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(100%);
             transform: translateX(100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.offcanvas-top {
     top: 0;
     right: 0;
@@ -6991,8 +6971,6 @@ textarea.form-control-lg {
     -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -7002,14 +6980,10 @@ textarea.form-control-lg {
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
     -webkit-transform: none;
             transform: none;
   }
-}
-@media (max-width: 575.98px) {
   .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
     visibility: visible;
   }
@@ -7069,8 +7043,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(-100%);
             transform: translateX(-100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.offcanvas-end {
     top: 0;
     right: 0;
@@ -7079,8 +7051,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(100%);
             transform: translateX(100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.offcanvas-top {
     top: 0;
     right: 0;
@@ -7091,8 +7061,6 @@ textarea.form-control-lg {
     -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -7102,14 +7070,10 @@ textarea.form-control-lg {
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
     -webkit-transform: none;
             transform: none;
   }
-}
-@media (max-width: 767.98px) {
   .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
     visibility: visible;
   }
@@ -7169,8 +7133,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(-100%);
             transform: translateX(-100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.offcanvas-end {
     top: 0;
     right: 0;
@@ -7179,8 +7141,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(100%);
             transform: translateX(100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.offcanvas-top {
     top: 0;
     right: 0;
@@ -7191,8 +7151,6 @@ textarea.form-control-lg {
     -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -7202,14 +7160,10 @@ textarea.form-control-lg {
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
     -webkit-transform: none;
             transform: none;
   }
-}
-@media (max-width: 991.98px) {
   .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
     visibility: visible;
   }
@@ -7269,8 +7223,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(-100%);
             transform: translateX(-100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.offcanvas-end {
     top: 0;
     right: 0;
@@ -7279,8 +7231,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(100%);
             transform: translateX(100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.offcanvas-top {
     top: 0;
     right: 0;
@@ -7291,8 +7241,6 @@ textarea.form-control-lg {
     -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -7302,14 +7250,10 @@ textarea.form-control-lg {
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
     -webkit-transform: none;
             transform: none;
   }
-}
-@media (max-width: 1199.98px) {
   .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
     visibility: visible;
   }
@@ -7369,8 +7313,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(-100%);
             transform: translateX(-100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.offcanvas-end {
     top: 0;
     right: 0;
@@ -7379,8 +7321,6 @@ textarea.form-control-lg {
     -webkit-transform: translateX(100%);
             transform: translateX(100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.offcanvas-top {
     top: 0;
     right: 0;
@@ -7391,8 +7331,6 @@ textarea.form-control-lg {
     -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.offcanvas-bottom {
     right: 0;
     left: 0;
@@ -7402,14 +7340,10 @@ textarea.form-control-lg {
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
     -webkit-transform: none;
             transform: none;
   }
-}
-@media (max-width: 1399.98px) {
   .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
     visibility: visible;
   }
@@ -15070,7 +15004,7 @@ em.placeholder {
 }
 .bcl-header__navbar input:active,
 .bcl-header__navbar input:focus {
-  box-shadow: 0 0 0 0.25rem hsla(210deg, 2%, 83%, 0.5);
+  box-shadow: 0 0 0 0.25rem hsla(210, 2%, 83%, 0.5);
 }
 
 .bcl-header--ec,
@@ -15635,24 +15569,7 @@ textarea.form-control.is-valid,
 .badge .icon--close {
   display: -ms-inline-flexbox;
   display: inline-flex;
-  width: 12px;
-  height: 12px;
-  margin-left: 0.3rem;
-  font-size: 1em;
-  font-weight: 300;
-  -ms-flex-pack: center;
-      justify-content: center;
-  -ms-flex-align: center;
-      align-items: center;
-  background: #fff;
-  border-radius: 50%;
-  border: none;
-  padding: 0;
-}
-.badge .icon--close svg {
-  width: 6px;
-  height: 6px;
-  margin: 0;
+  margin-left: 0.5rem;
 }
 
 a.badge {
@@ -15666,10 +15583,6 @@ a.badge:focus-visible {
 .badge.bg-primary {
   color: #fff;
 }
-.badge.bg-primary a .icon--close,
-.badge.bg-primary .icon--close {
-  color: #143b76;
-}
 
 .badge-outline-primary a {
   color: #143b76 !important;
@@ -15680,10 +15593,6 @@ a.badge:focus-visible {
   border: 1px solid #143b76;
   color: #143b76 !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;
@@ -15703,10 +15612,6 @@ a.badge.badge-outline-primary:focus {
 .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;
@@ -15717,10 +15622,6 @@ a.badge.badge-outline-primary:focus {
   border: 1px solid #e7f1fb;
   color: #e7f1fb !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;
@@ -15740,10 +15641,6 @@ a.badge.badge-outline-secondary:focus {
 .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;
@@ -15754,10 +15651,6 @@ a.badge.badge-outline-secondary:focus {
   border: 1px solid #18bf80;
   color: #18bf80 !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;
@@ -15777,10 +15670,6 @@ a.badge.badge-outline-success:focus {
 .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;
@@ -15791,10 +15680,6 @@ a.badge.badge-outline-success:focus {
   border: 1px solid #0d768b;
   color: #0d768b !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;
@@ -15814,11 +15699,6 @@ a.badge.badge-outline-info:focus {
 .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;
@@ -15829,10 +15709,6 @@ a.badge.badge-outline-info:focus {
   border: 1px solid #eba843;
   color: #eba843 !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;
@@ -15852,10 +15728,6 @@ a.badge.badge-outline-warning:focus {
 .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;
@@ -15866,10 +15738,6 @@ a.badge.badge-outline-warning:focus {
   border: 1px solid #eb3434;
   color: #eb3434 !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;
@@ -15889,11 +15757,6 @@ a.badge.badge-outline-danger:focus {
 .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;
@@ -15904,10 +15767,6 @@ a.badge.badge-outline-danger:focus {
   border: 1px solid #f8f9fa;
   color: #f8f9fa !important;
 }
-.badge-outline-light .icon--close {
-  background: #f8f9fa;
-  color: #000;
-}
 
 a.badge:focus-within.badge-outline-light, a.badge:active.badge-outline-light, a.badge:hover.badge-outline-light {
   border-color: #fff;
@@ -15928,10 +15787,6 @@ a.badge.badge-outline-light:focus {
 .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;
@@ -15942,10 +15797,6 @@ a.badge.badge-outline-light:focus {
   border: 1px solid #212529;
   color: #212529 !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;
@@ -15965,10 +15816,6 @@ a.badge.badge-outline-dark:focus {
 .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;
@@ -15979,10 +15826,6 @@ a.badge.badge-outline-dark:focus {
   border: 1px solid #1073de;
   color: #1073de !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;
@@ -16518,6 +16361,10 @@ select.multi-select {
 .ss-main.multi-select {
   padding: 0;
 }
+.ss-main.multi-select.form-select.is-invalid, .ss-main.multi-select.form-select.is-valid {
+  background: none;
+  padding: 0;
+}
 .ss-main.multi-select .ss-values {
   font-size: 1.25rem;
 }
@@ -16578,7 +16425,7 @@ select.multi-select {
 .was-validated .multi-select:valid + .ss-main.multi-select .ss-multi-selected {
   background-repeat: no-repeat;
   background-position: right 1.5rem center;
-  background-size: 1rem 1rem;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
 
 .ss-main.multi-select.is-invalid .ss-multi-selected,