@openeuropa/bcl-theme-default 1.0.0 → 1.1.0

package/css/oe-bcl-default.css

@@ -2953,9 +2953,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;
 }
@@ -3172,11 +3170,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;
 }
 
@@ -3262,11 +3256,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;
 }
 
@@ -6597,9 +6587,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;
@@ -6839,8 +6827,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;
@@ -6849,8 +6835,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;
@@ -6861,8 +6845,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;
@@ -6872,14 +6854,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;
   }
@@ -6938,8 +6916,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;
@@ -6948,8 +6924,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;
@@ -6960,8 +6934,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;
@@ -6971,14 +6943,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;
   }
@@ -7037,8 +7005,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;
@@ -7047,8 +7013,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;
@@ -7059,8 +7023,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;
@@ -7070,14 +7032,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;
   }
@@ -7136,8 +7094,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;
@@ -7146,8 +7102,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;
@@ -7158,8 +7112,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;
@@ -7169,14 +7121,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;
   }
@@ -7235,8 +7183,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;
@@ -7245,8 +7191,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;
@@ -7257,8 +7201,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;
@@ -7268,14 +7210,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;
   }
@@ -15390,7 +15328,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,
@@ -15930,24 +15868,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 {
@@ -15961,10 +15882,6 @@ a.badge:focus-visible {
 .badge.bg-primary {
   color: #fff;
 }
-.badge.bg-primary a .icon--close,
-.badge.bg-primary .icon--close {
-  color: #253ebe;
-}
 
 .badge-outline-primary a {
   color: #253ebe !important;
@@ -15975,10 +15892,6 @@ a.badge:focus-visible {
   border: 1px solid #253ebe;
   color: #253ebe !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;
@@ -15998,10 +15911,6 @@ a.badge.badge-outline-primary:focus {
 .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;
@@ -16012,10 +15921,6 @@ a.badge.badge-outline-primary:focus {
   border: 1px solid #70254a;
   color: #70254a !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;
@@ -16035,10 +15940,6 @@ a.badge.badge-outline-secondary:focus {
 .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;
@@ -16049,10 +15950,6 @@ a.badge.badge-outline-secondary:focus {
   border: 1px solid #09854c;
   color: #09854c !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;
@@ -16072,10 +15969,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;
@@ -16086,10 +15979,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;
@@ -16109,11 +15998,6 @@ a.badge.badge-outline-info:focus {
 .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;
@@ -16124,10 +16008,6 @@ a.badge.badge-outline-info:focus {
   border: 1px solid #ffba07;
   color: #ffba07 !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;
@@ -16147,10 +16027,6 @@ a.badge.badge-outline-warning:focus {
 .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;
@@ -16161,10 +16037,6 @@ a.badge.badge-outline-warning:focus {
   border: 1px solid #a51f2c;
   color: #a51f2c !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;
@@ -16184,11 +16056,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;
@@ -16199,10 +16066,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;
@@ -16223,10 +16086,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;
@@ -16237,10 +16096,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;
@@ -16776,6 +16631,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: calc(1.275rem + 0.3vw);
 }
@@ -16841,7 +16700,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,