@openeuropa/bcl-theme-ucpkn 0.14.0 → 0.18.0

package/bcl-builder.config.js

@@ -112,6 +112,10 @@ module.exports = {
           nodeModules,
           "@openeuropa/bcl-bootstrap/bootstrap-icons.svg"
         ),
+        path.resolve(
+          nodeModules,
+          "@ecl/resources-flag-icons/dist/sprites/icons-flag.svg"
+        ),
       ],
       to: path.resolve(outputFolder, "icons"),
       options: { up: true },

package/css/oe-bcl-ucpkn.css

@@ -2694,9 +2694,9 @@ progress {
 .form-control:focus {
   color: #212529;
   background-color: #fff;
-  border-color: #86b7fe;
+  border-color: #918bc2;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(34, 22, 132, 0.25);
 }
 .form-control::-webkit-date-and-time-value {
   height: 1.5em;
@@ -2920,9 +2920,9 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #86b7fe;
+  border-color: #918bc2;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(34, 22, 132, 0.25);
 }
 .form-select[multiple], .form-select[size]:not([size="1"]) {
   padding-right: 0.75rem;
@@ -2990,9 +2990,9 @@ textarea.form-control-lg {
           filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #86b7fe;
+  border-color: #918bc2;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(34, 22, 132, 0.25);
 }
 .form-check-input:checked {
   background-color: #0d6efd;
@@ -3036,7 +3036,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23918bc2'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -4288,7 +4288,7 @@ textarea.form-control-lg {
 .dropdown-item.active, .dropdown-item:active {
   color: #fff;
   text-decoration: none;
-  background-color: #0d6efd;
+  background-color: #221684;
 }
 .dropdown-item.disabled, .dropdown-item:disabled {
   color: #adb5bd;
@@ -4471,7 +4471,7 @@ textarea.form-control-lg {
   }
 }
 .nav-link:hover, .nav-link:focus {
-  color: #0a58ca;
+  color: #1b126a;
 }
 .nav-link.disabled {
   color: #6c757d;
@@ -4670,8 +4670,8 @@ textarea.form-control-lg {
     position: absolute;
   }
   .navbar-expand-sm .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
   }
   .navbar-expand-sm .navbar-nav-scroll {
     overflow: visible;
@@ -4732,8 +4732,8 @@ textarea.form-control-lg {
     position: absolute;
   }
   .navbar-expand-md .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
   }
   .navbar-expand-md .navbar-nav-scroll {
     overflow: visible;
@@ -4794,8 +4794,8 @@ textarea.form-control-lg {
     position: absolute;
   }
   .navbar-expand-lg .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
   }
   .navbar-expand-lg .navbar-nav-scroll {
     overflow: visible;
@@ -4856,8 +4856,8 @@ textarea.form-control-lg {
     position: absolute;
   }
   .navbar-expand-xl .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
   }
   .navbar-expand-xl .navbar-nav-scroll {
     overflow: visible;
@@ -4918,8 +4918,8 @@ textarea.form-control-lg {
     position: absolute;
   }
   .navbar-expand-xxl .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
   }
   .navbar-expand-xxl .navbar-nav-scroll {
     overflow: visible;
@@ -4979,8 +4979,8 @@ textarea.form-control-lg {
   position: absolute;
 }
 .navbar-expand .navbar-nav .nav-link {
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
 }
 .navbar-expand .navbar-nav-scroll {
   overflow: visible;
@@ -5282,9 +5282,9 @@ textarea.form-control-lg {
   }
 }
 .accordion-button:not(.collapsed) {
-  color: #0c63e4;
-  background-color: #e7f1ff;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
+  color: #212529;
+  background-color: #f8f9fa;
+  box-shadow: inset 0 -1px 0 #dee2e6;
 }
 .accordion-button:not(.collapsed)::after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
@@ -5315,9 +5315,9 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: #86b7fe;
+  border-color: #918bc2;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(34, 22, 132, 0.25);
 }
 
 .accordion-header {
@@ -5326,7 +5326,7 @@ textarea.form-control-lg {
 
 .accordion-item {
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.125);
+  border: 1px solid #dee2e6;
 }
 .accordion-item:first-of-type {
   border-top-left-radius: 0.25rem;
@@ -5429,7 +5429,7 @@ textarea.form-control-lg {
   color: #0a58ca;
   background-color: #e9ecef;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(34, 22, 132, 0.25);
 }
 
 .page-item:not(:first-child) .page-link {
@@ -5487,6 +5487,69 @@ textarea.form-control-lg {
   border-bottom-right-radius: 0.2rem;
 }
 
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  vertical-align: middle;
+  cursor: wait;
+  background-color: currentColor;
+  opacity: 0.5;
+}
+.placeholder.btn::before {
+  display: inline-block;
+  content: "";
+}
+
+.placeholder-xs {
+  min-height: 0.6em;
+}
+
+.placeholder-sm {
+  min-height: 0.8em;
+}
+
+.placeholder-lg {
+  min-height: 1.2em;
+}
+
+.placeholder-glow .placeholder {
+  -webkit-animation: placeholder-glow 2s ease-in-out infinite;
+          animation: placeholder-glow 2s ease-in-out infinite;
+}
+
+@-webkit-keyframes placeholder-glow {
+  50% {
+    opacity: 0.2;
+  }
+}
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: 0.2;
+  }
+}
+.placeholder-wave {
+  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
+          mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
+  -webkit-mask-size: 200% 100%;
+          mask-size: 200% 100%;
+  -webkit-animation: placeholder-wave 2s linear infinite;
+          animation: placeholder-wave 2s linear infinite;
+}
+
+@-webkit-keyframes placeholder-wave {
+  100% {
+    -webkit-mask-position: -200% 0%;
+            mask-position: -200% 0%;
+  }
+}
+
+@keyframes placeholder-wave {
+  100% {
+    -webkit-mask-position: -200% 0%;
+            mask-position: -200% 0%;
+  }
+}
 .badge {
   display: inline-block;
   padding: 0.35em 0.65em;
@@ -5639,7 +5702,7 @@ textarea.form-control-lg {
   color: #fff;
   text-align: center;
   white-space: nowrap;
-  background-color: #0d6efd;
+  background-color: #221684;
   transition: width 0.6s ease;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -7280,10 +7343,8 @@ textarea.form-control-lg {
 }
 
 .grid-3-9 {
-  -ms-grid-columns: 25% -webkit-max-content;
-  -ms-grid-columns: 25% max-content;
-  grid-template-columns: 25% -webkit-max-content;
-  grid-template-columns: 25% max-content;
+  -ms-grid-columns: 25% 75%;
+  grid-template-columns: 25% 75%;
   grid-gap: 0.75rem;
 }
 
@@ -15511,13 +15572,9 @@ body {
   padding-bottom: 1rem;
 }
 
-.bcl-header__project {
-  padding-top: 1rem;
-}
-
-.ec__header .bcl-header__project,
-.ec__header .bcl-header__navbar {
-  background: #004494;
+.bcl-header--neutral .bcl-header__project,
+.bcl-header--neutral .bcl-header__navbar {
+  background: #495057;
 }
 
 .bcl-navbar-header {
@@ -15529,12 +15586,26 @@ body {
   color: #1b4ac3;
 }
 
-.bcl-header.ec__header .nav-link {
+.bcl-header--ec .bcl-header__project,
+.bcl-header--ec .bcl-header__navbar,
+.ec__header .bcl-header__project,
+.ec__header .bcl-header__navbar {
+  background: #004494;
+}
+.bcl-header--ec .nav-link,
+.ec__header .nav-link {
   color: #17458f;
 }
 
+.bcl-header:not(.bcl-header--neutral) .bcl-header__project {
+  padding-top: 1rem;
+}
+
 .bcl-header__navbar .navbar-nav .nav-link {
-  color: #ced4da;
+  color: #f8f9fa;
+}
+.bcl-header__navbar .navbar-nav .nav-link:first-child {
+  padding-left: 0;
 }
 
 .bcl-header__navbar .navbar-nav .nav-link:focus,
@@ -15568,13 +15639,14 @@ body {
           transform: translate(-11px, 5px);
 }
 
-.bcl-header__project p {
+.bcl-header__project .bcl-header__site-name {
   display: inline-block;
   margin-bottom: 0;
   font-size: 1.3rem;
   font-weight: 300;
   color: #fff;
   vertical-align: middle;
+  max-width: 80%;
 }
 
 .bcl-header .navbar-toggler {
@@ -15588,28 +15660,65 @@ body {
   background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
 }
 
+@media only screen and (max-width: 400px) {
+  .bcl-header--neutral .bcl-header__project-logo {
+    display: none;
+  }
+}
 @media (max-width: 575.98px) {
   .bcl-header .navbar:first-child .nav-link {
     padding: 0.5rem 0.4rem;
   }
 }
 @media (min-width: 768px) {
-  .ec__header .navbar-brand img {
+  .bcl-header--ec .navbar-brand img,
+.ec__header .navbar-brand img {
     width: 180px;
   }
 }
+@media (max-width: 991.98px) {
+  .bcl-header__project {
+    min-height: 3rem;
+    padding-top: 1rem;
+  }
+
+  .bcl-header nav + nav {
+    min-height: 3rem;
+  }
+  .bcl-header nav + nav .navbar-toggler {
+    position: static;
+  }
+  .bcl-header nav + nav .container {
+    -ms-flex-pack: right;
+        justify-content: right;
+  }
+
+  .bcl-header__navbar .navbar-collapse {
+    max-width: 100%;
+  }
+  .bcl-header__navbar .navbar-collapse .nav-item.dropdown {
+    max-width: 100%;
+  }
+  .bcl-header__navbar .navbar-collapse .nav-item.dropdown a {
+    white-space: normal;
+  }
+  .bcl-header__navbar .navbar-collapse .nav-item.dropdown .dropdown-menu {
+    max-width: 100%;
+  }
+}
 @media (min-width: 992px) {
   .bcl-header__project.light,
+.bcl-header--ec .bcl-header__project.light,
 .ec__header .bcl-header__project.light {
     background: #fff;
   }
 
-  .bcl-header__project p {
+  .bcl-header__site-name {
     padding-left: 1.5rem;
     font-weight: 500;
   }
 
-  .bcl-header__project.light p {
+  .bcl-header__project.light .bcl-header__site-name {
     color: #000;
   }
 
@@ -15638,11 +15747,12 @@ body {
     z-index: 1050;
   }
 
-  .bcl-header__project {
+  .bcl-header:not(.bcl-header--neutral) .bcl-header__project {
     padding-bottom: 1rem;
   }
 
-  .ec__header .navbar-brand img {
+  .bcl-header--ec .navbar-brand img,
+.ec__header .navbar-brand img {
     width: 285px;
   }
 }
@@ -15685,16 +15795,31 @@ body {
           filter: invert(1) grayscale(100%) brightness(200%);
 }
 
-.bcl-footer {
-  background: #f4f6fb;
+.bcl-footer--neutral {
+  background: #6c757d;
+}
+.bcl-footer--neutral a,
+.bcl-footer--neutral p {
+  color: #fff;
 }
 
-.bcl-footer.ec__footer {
-  background: #17458f;
+.bcl-footer--eu,
+.eu__footer {
+  background: #f3f6fc;
+}
+.bcl-footer--eu a,
+.eu__footer a {
+  color: #0e47cb;
 }
 
-.bcl-footer.ec__footer a,
-.bcl-footer.ec__footer p {
+.bcl-footer--ec,
+.ec__footer {
+  background: #17458f;
+}
+.bcl-footer--ec a,
+.bcl-footer--ec p,
+.ec__footer a,
+.ec__footer p {
   color: #fff;
 }
 
@@ -16006,6 +16131,87 @@ a .badge {
   font-size: 0.75em;
 }
 
+.badge-outline-primary {
+  border: 1px solid #221684;
+  color: #221684 !important;
+  background: transparent !important;
+}
+.badge-outline-primary .icon--close {
+  background: #221684;
+  color: #fff;
+}
+
+.badge-outline-secondary {
+  border: 1px solid #f25924;
+  color: #f25924 !important;
+  background: transparent !important;
+}
+.badge-outline-secondary .icon--close {
+  background: #f25924;
+  color: #fff;
+}
+
+.badge-outline-success {
+  border: 1px solid #3c8f38;
+  color: #3c8f38 !important;
+  background: transparent !important;
+}
+.badge-outline-success .icon--close {
+  background: #3c8f38;
+  color: #fff;
+}
+
+.badge-outline-info {
+  border: 1px solid #2b768a;
+  color: #2b768a !important;
+  background: transparent !important;
+}
+.badge-outline-info .icon--close {
+  background: #2b768a;
+  color: #fff;
+}
+
+.badge-outline-warning {
+  border: 1px solid #e1ab00;
+  color: #e1ab00 !important;
+  background: transparent !important;
+}
+.badge-outline-warning .icon--close {
+  background: #e1ab00;
+  color: #fff;
+}
+
+.badge-outline-danger {
+  border: 1px solid #b8282a;
+  color: #b8282a !important;
+  background: transparent !important;
+}
+.badge-outline-danger .icon--close {
+  background: #b8282a;
+  color: #fff;
+}
+
+.badge-outline-light {
+  border: 1px solid #f0f0f0;
+  color: #f0f0f0 !important;
+  background: transparent !important;
+}
+.badge-outline-light .icon--close {
+  background: #f0f0f0;
+  color: #fff;
+  color: #000;
+}
+
+.badge-outline-dark {
+  border: 1px solid #2e3338;
+  color: #2e3338 !important;
+  background: transparent !important;
+}
+.badge-outline-dark .icon--close {
+  background: #2e3338;
+  color: #fff;
+}
+
 .ss-main {
   position: relative;
   display: inline-block;
@@ -16615,7 +16821,7 @@ select.multi-select {
     background-position: right 1.6rem center;
   }
 }
-@media screen and (min-width: 992px) {
+@media (min-width: 992px) {
   .bcl-offcanvas {
     position: relative;
     width: auto;
@@ -16661,7 +16867,7 @@ select.multi-select {
 
 .bcl-banner__content {
   padding: 2.5rem 2rem;
-  border-color: #0d6efd;
+  border-color: #221684;
 }
 
 .bcl-banner__image {
@@ -16687,7 +16893,7 @@ select.multi-select {
   }
   .bcl-banner.overlay .bcl-banner__content {
     background: #fff;
-    border-bottom: 4px solid #0d6efd;
+    border-bottom: 4px solid #221684;
   }
   .bcl-banner.shade {
     color: #fff;
@@ -16832,20 +17038,20 @@ select.multi-select {
           transform: rotate(180deg);
 }
 
-#bcl-inpage-navigation {
+.bcl-inpage-navigation {
   top: 1rem;
   background-color: #f8f9fa;
 }
-#bcl-inpage-navigation h5, #bcl-inpage-navigation .h5 {
+.bcl-inpage-navigation h5, .bcl-inpage-navigation .h5 {
   font-weight: bold;
   margin-bottom: 0;
   padding: 1.25rem;
   border-bottom: 1px solid #dee2e6;
 }
-#bcl-inpage-navigation ul {
+.bcl-inpage-navigation ul {
   padding: 0.75rem;
 }
-#bcl-inpage-navigation ul .nav-link {
+.bcl-inpage-navigation ul .nav-link {
   padding: 0.5rem;
   margin-bottom: 0.5rem;
 }