@openeuropa/bcl-theme-joinup 1.1.1 → 1.2.1

package/css/oe-bcl-joinup.css

@@ -14857,83 +14857,56 @@ svg {
   border-color: #dadee0;
 }
 
-.card.bg-primary {
-  color: #fff;
-}
-.card.bg-primary .card-header,
-.card.bg-primary .card-footer {
+.card.text-bg-primary .card-header,
+.card.text-bg-primary .card-footer {
   border: none;
   background: #102f5e;
 }
 
-.card.bg-secondary {
-  color: #000;
-}
-.card.bg-secondary .card-header,
-.card.bg-secondary .card-footer {
+.card.text-bg-secondary .card-header,
+.card.text-bg-secondary .card-footer {
   border: none;
   background: #b9c1c9;
 }
 
-.card.bg-success {
-  color: #000;
-}
-.card.bg-success .card-header,
-.card.bg-success .card-footer {
+.card.text-bg-success .card-header,
+.card.text-bg-success .card-footer {
   border: none;
   background: #139966;
 }
 
-.card.bg-info {
-  color: #fff;
-}
-.card.bg-info .card-header,
-.card.bg-info .card-footer {
+.card.text-bg-info .card-header,
+.card.text-bg-info .card-footer {
   border: none;
   background: #0a5e6f;
 }
 
-.card.bg-warning {
-  color: #000;
-}
-.card.bg-warning .card-header,
-.card.bg-warning .card-footer {
+.card.text-bg-warning .card-header,
+.card.text-bg-warning .card-footer {
   border: none;
   background: #bc8636;
 }
 
-.card.bg-danger {
-  color: #000;
-}
-.card.bg-danger .card-header,
-.card.bg-danger .card-footer {
+.card.text-bg-danger .card-header,
+.card.text-bg-danger .card-footer {
   border: none;
   background: #bc2a2a;
 }
 
-.card.bg-light {
-  color: #000;
-}
-.card.bg-light .card-header,
-.card.bg-light .card-footer {
+.card.text-bg-light .card-header,
+.card.text-bg-light .card-footer {
   border: none;
   background: #c6c7c8;
 }
 
-.card.bg-dark {
-  color: #fff;
-}
-.card.bg-dark .card-header,
-.card.bg-dark .card-footer {
+.card.text-bg-dark .card-header,
+.card.text-bg-dark .card-footer {
   border: none;
   background: #1a1e21;
 }
 
-.card.bg-brand {
-  color: #fff;
-}
-.card.bg-brand .card-header,
-.card.bg-brand .card-footer {
+.card.text-bg-brand .card-header,
+.card.text-bg-brand .card-footer {
   border: none;
   background: #0d5cb2;
 }
@@ -15598,10 +15571,10 @@ a.badge:focus-within.badge-outline-primary, a.badge:active.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 {
+a.badge:focus-within.text-bg-primary, a.badge:active.text-bg-primary, a.badge:hover.text-bg-primary {
   background-color: #113264 !important;
 }
-a.badge.badge.bg-primary:focus {
+a.badge.text-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 {
@@ -15627,10 +15600,10 @@ a.badge:focus-within.badge-outline-secondary, a.badge:active.badge-outline-secon
   background-color: #fdfeff !important;
   border-color: #c4cdd5 !important;
 }
-a.badge:focus-within.bg-secondary, a.badge:active.bg-secondary, a.badge:hover.bg-secondary {
+a.badge:focus-within.text-bg-secondary, a.badge:active.text-bg-secondary, a.badge:hover.text-bg-secondary {
   background-color: #c4cdd5 !important;
 }
-a.badge.badge.bg-secondary:focus {
+a.badge.text-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 {
@@ -15656,10 +15629,10 @@ a.badge:focus-within.badge-outline-success, a.badge:active.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 {
+a.badge:focus-within.text-bg-success, a.badge:active.text-bg-success, a.badge:hover.text-bg-success {
   background-color: #14a26d !important;
 }
-a.badge.badge.bg-success:focus {
+a.badge.text-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 {
@@ -15685,10 +15658,10 @@ a.badge:focus-within.badge-outline-info, a.badge:active.badge-outline-info, a.ba
   background-color: #e7f1f3 !important;
   border-color: #0b6476 !important;
 }
-a.badge:focus-within.bg-info, a.badge:active.bg-info, a.badge:hover.bg-info {
+a.badge:focus-within.text-bg-info, a.badge:active.text-bg-info, a.badge:hover.text-bg-info {
   background-color: #0b6476 !important;
 }
-a.badge.badge.bg-info:focus {
+a.badge.text-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 {
@@ -15714,10 +15687,10 @@ a.badge:focus-within.badge-outline-warning, a.badge:active.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 {
+a.badge:focus-within.text-bg-warning, a.badge:active.text-bg-warning, a.badge:hover.text-bg-warning {
   background-color: #c88f39 !important;
 }
-a.badge.badge.bg-warning:focus {
+a.badge.text-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 {
@@ -15743,10 +15716,10 @@ a.badge:focus-within.badge-outline-danger, a.badge:active.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 {
+a.badge:focus-within.text-bg-danger, a.badge:active.text-bg-danger, a.badge:hover.text-bg-danger {
   background-color: #c82c2c !important;
 }
-a.badge.badge.bg-danger:focus {
+a.badge.text-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 {
@@ -15773,10 +15746,10 @@ a.badge:focus-within.badge-outline-light, a.badge:active.badge-outline-light, a.
   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 {
+a.badge:focus-within.text-bg-light, a.badge:active.text-bg-light, a.badge:hover.text-bg-light {
   background-color: #d3d4d5 !important;
 }
-a.badge.badge.bg-light:focus {
+a.badge.text-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 {
@@ -15802,10 +15775,10 @@ a.badge:focus-within.badge-outline-dark, a.badge:active.badge-outline-dark, a.ba
   background-color: #f8f9fa !important;
   border-color: #000;
 }
-a.badge:focus-within.bg-dark, a.badge:active.bg-dark, a.badge:hover.bg-dark {
+a.badge:focus-within.text-bg-dark, a.badge:active.text-bg-dark, a.badge:hover.text-bg-dark {
   background-color: #1c1f23 !important;
 }
-a.badge.badge.bg-dark:focus {
+a.badge.text-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 {
@@ -15831,10 +15804,10 @@ a.badge:focus-within.badge-outline-brand, a.badge:active.badge-outline-brand, a.
   background-color: #e7f1fc !important;
   border-color: #0e62bd !important;
 }
-a.badge:focus-within.bg-brand, a.badge:active.bg-brand, a.badge:hover.bg-brand {
+a.badge:focus-within.text-bg-brand, a.badge:active.text-bg-brand, a.badge:hover.text-bg-brand {
   background-color: #0e62bd !important;
 }
-a.badge.badge.bg-brand:focus {
+a.badge.text-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 {
@@ -16344,11 +16317,6 @@ a.badge.badge-outline-brand:focus {
   background-color: #fffb8c;
 }
 
-/* stylelint-disable selector-no-qualifying-type,
-   selector-max-class, selector-max-compound-selectors,
-   no-descending-specificity,
-   function-calc-no-unspaced-operator,
-*/
 select.multi-select {
   position: absolute;
   display: inline-block !important;
@@ -16375,8 +16343,8 @@ select.multi-select {
   font-weight: 400;
   line-height: 1;
   color: #fff;
-  text-align: center;
-  white-space: nowrap;
+  text-align: left;
+  white-space: normal;
   vertical-align: baseline;
   padding-right: 1.25rem;
   border-radius: 0.375rem;
@@ -16390,15 +16358,15 @@ select.multi-select {
   content: "";
   display: inline-block;
   height: 1rem;
-  -webkit-transform: scale(0.8);
-          transform: scale(0.8);
+  -webkit-transform: scale(0.8) translateY(50%);
+          transform: scale(0.8) translateY(50%);
   width: 1rem;
   padding: 15px;
   background-position: 50%;
   border-radius: 50%;
   position: absolute;
   right: 0;
-  bottom: -2px;
+  bottom: calc(50% - 3px);
 }
 .ss-main.multi-select .ss-values .ss-disabled {
   padding-top: calc(0.5rem - 1px);
@@ -16482,6 +16450,9 @@ select.multi-select {
 .bcl-banner {
   position: relative;
 }
+.bcl-banner.fixed-height .bcl-banner__image {
+  height: 150px;
+}
 .bcl-banner p {
   font-size: 1.125rem;
   font-weight: 500;
@@ -16499,6 +16470,25 @@ select.multi-select {
   padding: 3rem 2rem;
 }
 
+.container .bcl-content-banner > .container > .card {
+  margin: 0;
+  z-index: 2;
+}
+.container .bcl-content-banner.bg-lighter {
+  position: relative;
+}
+.container .bcl-content-banner.bg-lighter:after {
+  background: #fafbfc;
+  content: "";
+  height: 100%;
+  left: 50%;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
 .bcl-banner__content {
   padding: 2.5rem 2rem;
   border-color: #143b76;
@@ -16569,7 +16559,7 @@ select.multi-select {
     z-index: 1;
     display: inline-block;
     padding: 2rem;
-    margin: 2.75rem auto;
+    margin: 2rem auto;
     border-radius: 4px;
     min-width: 540px;
   }
@@ -16594,24 +16584,29 @@ select.multi-select {
     margin-left: 0;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 768px) {
   .bcl-banner {
     display: -ms-flexbox;
     display: flex;
-    -ms-flex-direction: column;
-        flex-direction: column;
     -ms-flex-align: center;
         align-items: center;
     -ms-flex-pack: center;
         justify-content: center;
-    min-height: 300px;
   }
-  .bcl-banner .container {
-    position: absolute;
+  .bcl-banner.fixed-height {
+    height: 330px;
+  }
+  .bcl-banner.fixed-height .bcl-banner__image {
+    height: 100%;
   }
-  .bcl-banner::before {
+}
+@media (min-width: 992px) {
+  .bcl-banner {
+    min-height: 300px;
+  }
+  .bcl-banner:not(.fixed-height)::before {
     display: block;
-    width: 100%;
+    width: 1px;
     padding-top: 20%;
     content: "";
   }