Issue #3317346 by jannakha, VladimirAus: Various CSS fixes

bootstrap5.theme

@@ -10,6 +10,7 @@ use Drupal\Core\Render\Element;
 use Drupal\bootstrap5\SettingsManager;
 use Drupal\bootstrap5\SubthemeManager;
 use Drupal\views\ViewExecutable;
+use Drupal\block\Entity\Block;
 
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
@@ -19,6 +20,12 @@ function bootstrap5_theme_suggestions_page_alter(array &$suggestions, array $var
   if (isset($_GET['styleguide'])) {
     $suggestions[] = 'page__styleguide';
   }
+
+  if (isset($variables['attributes']['data-block']['region'])) {
+    $region = $variables['attributes']['data-block']['region'];
+    $suggestions[] = $variables['theme_hook_original'] . '__' . $region;
+    $suggestions[] = 'menu__' . $region;
+  }
 }
 
 /**
@@ -275,3 +282,29 @@ function bootstrap5_preprocess_media_library_item__widget(array &$variables) {
   $variables['content']['remove_button']['#attributes']['class'][] = 'media-library-item__remove';
   $variables['content']['remove_button']['#attributes']['class'][] = 'icon-link';
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ *
+ * Pass block region value to content so this can be used in
+ * THEME_theme_suggestions_menu_alter.
+ */
+function bootstrap5_preprocess_block(&$variables) {
+  if (isset($variables['elements']['#id'])) {
+    $region = Block::load($variables['elements']['#id'])->getRegion();
+    if (!empty($region)) {
+      $variables['content']['#attributes']['data-block']['region'] = $region;
+    }
+  }
+}
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter().
+ */
+function bootstrap5_theme_suggestions_menu_alter(array &$suggestions, array $variables) {
+  if (isset($variables['attributes']['data-block']['region'])) {
+    $region = $variables['attributes']['data-block']['region'];
+    $suggestions[] = $variables['theme_hook_original'] . '__' . $region;
+    $suggestions[] = 'menu__' . $region;
+  }
+}

scss/drupal/_forms.scss

@@ -76,6 +76,7 @@ td {
     }
   }
 }
+
 .dropbutton-widget {
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
@@ -86,41 +87,3 @@ td {
     }
   }
 }
-
-fieldset {
-  &.form-item {
-    @extend .card;
-    > legend {
-      @extend .card-header;
-    }
-
-    > .fieldset-wrapper {
-      @extend .card-body;
-    }
-  }
-}
-
-.form-item-upload {
-  @extend .card;
-  margin-bottom: $spacer;
-
-  label {
-    @extend .card-header;
-  }
-
-  > div {
-    @extend .card-body;
-  }
-}
-
-.form-type-managed-file {
-  @extend .card;
-
-  > label {
-    @extend .card-header;
-  }
-
-  > div {
-    @extend .card-body;
-  }
-}

scss/drupal/_layout.scss

@@ -16,3 +16,9 @@
     margin: 0;
   }
 }
+
+
+.region-nav-branding,
+.region-nav-additional {
+  flex-shrink: 0;
+}

scss/drupal/_local_tasks.scss

@@ -6,36 +6,34 @@
   margin: $local-tasks-secondary-margin;
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .tabs-wrapper {
     .tab-toggle {
-      padding: $spacer;
+      color: $nav-tabs-link-active-color;
+      padding: $nav-link-padding-y $nav-link-padding-x;
     }
 
     .nav-tabs {
       border: $nav-tabs-border-width solid $nav-tabs-border-color;
       border-radius: $nav-tabs-border-radius;
-    }
-
-    .nav-link {
-      border: 0;
-      border-radius: 0;
+      overflow: hidden;
     }
 
     .nav-item {
-      border-radius: 0;
-      margin-bottom: 0;
+      padding: .5 * $nav-link-padding-y .5 * $nav-link-padding-x;
 
       &.active {
         background-color: $nav-tabs-link-active-bg-sm;
       }
 
-      a {
-        align-self: center;
-        display: flex;
-
-        &:not(.tab-toggle) {
+      .nav-link {
+        border: 0;
+        border-radius: 0;
+        background-color: unset;
         flex-grow: 1;
+
+        &.active {
+          background-color: unset;
         }
       }
     }
@@ -66,6 +64,10 @@
         .nav-item {
           display: flex;
 
+          &.active {
+            border-radius: $nav-tabs-border-radius $nav-tabs-border-radius 0 0;
+          }
+
           &:not(.active) {
             border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
           }

scss/drupal/_navbar.scss

@@ -24,15 +24,11 @@
   .nav-link {
     padding-left: $navbar-nav-link-padding-x;
     padding-right: $navbar-nav-link-padding-x;
-  }
 
-  .dropdown-toggle {
-    &::after {
-      float: right;
-      @include media-breakpoint-up(lg) {
-        clear: both;
-        float: none;
-      }
+    &.dropdown-toggle {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
   }
 }

templates/content/page-title.html.twig

@@ -14,6 +14,6 @@
 #}
 {{ title_prefix }}
 {% if title|render|striptags|trim %}
-  <h1{{ title_attributes.addClass(['display-4', 'text-center', 'page-title']) }}>{{ title }}</h1>
+<h1{{title_attributes}}>{{ title }}</h1>
 {% endif %}
 {{ title_suffix }}

templates/layout/html.html.twig

@@ -48,9 +48,11 @@
       Keyboard navigation/accessibility link to main content section in
       page.html.twig.
     #}
-    <a href="#main-content" class="visually-hidden focusable skip-link">
+    <div class="visually-hidden-focusable skip-link p-3 container">
+      <a href="#main-content" class="p-2">
         {{ 'Skip to main content'|t }}
       </a>
+    </div>
     {{ page_top }}
     {{ page }}
     {{ page_bottom }}

templates/layout/page.html.twig

@@ -70,7 +70,7 @@ set footer_classes = ' ' ~
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse justify-content-md-end flex-wrap" id="navbarSupportedContent">
+      <div class="collapse navbar-collapse justify-content-md-end" id="navbarSupportedContent">
         {{ page.nav_main }}
         {{ page.nav_additional }}
       </div>

templates/navigation/menu--main.html.twig

@@ -29,13 +29,16 @@ We call a macro which calls itself to render the full tree.
 {% macro build_menu(items, attributes, menu_level) %}
   {% import _self as menus %}
   {% if items %}
-    {% if menu_level == 0 %}
-    <ul{{ attributes.addClass('navbar-nav mr-auto') }}>
-    {% else %}
-    <ul class="dropdown-menu">
-    {% endif %}
+    {%
+      set ul_classes = [
+        menu_level == 0 ? 'navbar-nav justify-content-end flex-wrap',
+        menu_level > 0 ? 'dropdown-menu',
+        'nav-level-' ~ menu_level,
+      ]
+    %}
+    <ul{{ attributes.addClass(ul_classes) }}>
     {% for item in items %}
-      {{ menus.add_link(item, attributes, menu_level) }}
+      {{ menus.add_link(item, attributes.removeClass(ul_classes), menu_level) }}
     {% endfor %}
     </ul>
   {% endif %}
@@ -51,7 +54,6 @@ We call a macro which calls itself to render the full tree.
   %}
   {%
     set link_class = [
-      menu_level == 0 ? 'nav-item',
       menu_level == 0 ? 'nav-link',
       item.in_active_trail ? 'active',
       menu_level == 0 and (item.is_expanded or item.is_collapsed) ? 'dropdown-toggle',