@openeuropa/bcl-theme-default 1.8.2 → 1.9.1

package/src/scss/_inpage-navigation.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .bcl-sidebar:has(> .bcl-inpage-navigation) {
   position: sticky;
   top: 0;
@@ -66,10 +67,68 @@
     padding-right: 0;
   }
 }
-
-@include media-breakpoint-down(lg) {
-  .bcl-sidebar:has(> .bcl-inpage-navigation) {
-    padding-bottom: map-get($spacers, 3);
+@include media-breakpoint-down(md) {
+  .bcl-inpage-navigation.dynamic-active {
+    display: none;
+    &:has(.active) {
+      display: block;
+    }
+  }
+  .bcl-sidebar {
+    .bcl-inpage-navigation.dynamic-active {
+      ul {
+        padding: map-get($spacers, 1);
+      }
+      .bcl-heading {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 2000;
+        height: 64px;
+        opacity: 0;
+      }
+      .dropdown-menu {
+        display: block;
+        padding: map-get($spacers, 2);
+        position: absolute;
+        &.show {
+          .nav-item {
+            display: block;
+            &:has(> .active) {
+              order: -1;
+            }
+          }
+          &:after {
+            border-top-color: transparent;
+            border-bottom: 5px solid #fff;
+            top: 25px;
+          }
+        }
+        .nav {
+          display: flex;
+        }
+        .nav-item {
+          display: none;
+          transition: none;
+          &:has(> .active) {
+            display: block;
+          }
+          .nav-link {
+            margin: 0;
+          }
+        }
+        &:after {
+          content: "";
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top: 5px solid #fff;
+          position: absolute;
+          top: 30px;
+          right: 22px;
+        }
+      }
+    }
   }
 }
 
@@ -94,3 +153,9 @@
     }
   }
 }
+
+@include media-breakpoint-down(lg) {
+  .bcl-sidebar:has(> .bcl-inpage-navigation) {
+    padding-bottom: map-get($spacers, 3);
+  }
+}

package/src/scss/_input.scss

@@ -1,11 +1,16 @@
-// stylelint-disable no-duplicate-selectors
-// stylelint-disable selector-no-qualifying-type
+/* stylelint-disable no-duplicate-selectors, selector-no-qualifying-type, no-descending-specificity */
 
 .form-select {
   padding-top: $input-padding-y-lg;
   padding-bottom: $input-padding-y-lg;
   padding-left: $input-padding-x-lg;
   font-size: $form-font-size-lg;
+  &:focus-visible {
+    outline: 2px solid $primary;
+    box-shadow: none;
+    border-radius: 4px;
+    outline-offset: -1px;
+  }
 }
 
 .form-control {
@@ -18,6 +23,12 @@
     margin: (-$input-padding-y-lg) $input-padding-x-lg (-$input-padding-y-lg)
       (-$input-padding-x-lg);
   }
+  &:focus-visible {
+    outline: 2px solid $primary;
+    box-shadow: none;
+    border-radius: 4px;
+    outline-offset: -1px;
+  }
 }
 .form-check:not(.form-switch) {
   padding-left: 1.8rem;
@@ -30,6 +41,20 @@
     margin-top: 0.15rem;
   }
 }
+.form-check-input {
+  &:focus-visible {
+    outline: 4px solid $primary;
+    box-shadow: none;
+    border-radius: 4px;
+    outline-offset: 0;
+    &[type="radio"] {
+      border-radius: 50%;
+    }
+  }
+  &:checked:focus-visible {
+    border-color: $white;
+  }
+}
 
 @include media-breakpoint-up(md) {
   .form-check:not(.form-switch) {
@@ -73,12 +98,20 @@ textarea.form-control,
 }
 
 .form-select:not([multiple]):not([size]) {
+  &:focus-visible {
+    outline: 2px solid $primary;
+    box-shadow: none;
+    border-radius: 4px;
+    outline-offset: -1px;
+  }
   &.is-invalid {
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),
+    background-image:
+      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),
       url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
   }
   &.is-valid {
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),
+    background-image:
+      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),
       url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
   }
 }

package/src/scss/_language-list.scss

@@ -1,3 +1,5 @@
+// stylelint-disable no-descending-specificity
+
 .bcl-language-list {
   .btn {
     background: $white;
@@ -7,6 +9,12 @@
       text-decoration: underline;
       border-color: $eu-cta-color;
     }
+    &:focus-visible {
+      background: $primary;
+      color: $white;
+      outline: 2px solid $white;
+      outline-offset: -4px;
+    }
     &.selected {
       background: $secondary;
       color: $white;
@@ -21,6 +29,9 @@
     .btn {
       color: $eu-cta-color;
       font-weight: $font-weight-bold;
+      &:focus-visible {
+        color: $white;
+      }
       &.selected {
         background: $eu-selected-background;
         color: $black;