Use gutters instead of styles to set paddings like in B4

clarin-eric · Jan 20, 2024 · 4852ed5 · 4852ed5
1 parent 5442269
commit 4852ed5
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 14 deletions.
diff --git a/scss/utility/elements.scss b/scss/utility/elements.scss
@@ -73,16 +73,6 @@ h6 {
   font-size: $h6-font-size-h6;
 }
 
-.container, .container-sm,
-.container-md, .container-lg,
-.container-xl, {
-  padding: 0 calc(var(--bs-gutter-x) * 5);
-
-    @media (max-width: #{$screen-md-max}) {
-      padding: 0 calc(var(--bs-gutter-x) * .5);
-  }
-}
-
 .row {
   margin: 0 !important;
 }

diff --git a/templates/layout/page--node--landing-page.html.twig b/templates/layout/page--node--landing-page.html.twig
@@ -50,7 +50,7 @@
  * @see html.html.twig
  */
 #}
-{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}
+{% set container = theme.settings.fluid_container ? 'container-fluid gx-4' : 'container gx-4' %}
 
 {# Navbar #}
 {% if page.navigation_left or page.navigation_collapsible or page.navigation_right %}
@@ -65,7 +65,7 @@
     <header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
       <nav{{ navbar_attributes }}>
         {% if container_navbar %}
-        <div class="container-md">
+        <div class="container-md gx-md-4">
         {% endif %}
           {% if page.navigation_left %}
           {{ page.navigation_left }}

diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
@@ -50,7 +50,7 @@
  * @see html.html.twig
  */
 #}
-{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}
+{% set container = theme.settings.fluid_container ? 'container-fluid gx-md-4' : 'container gx-md-4' %}
 {% set has_sidebar_second = page.sidebar_second|render|striptags|trim is not empty %}
 {# Navbar #}
 {% if page.navigation_left or page.navigation_collapsible or page.navigation_right %}
@@ -65,7 +65,7 @@
     <header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
       <nav{{ navbar_attributes }}>
         {% if container_navbar %}
-        <div class="container-md">
+        <div class="container-md gx-md-4">
         {% endif %}
           {% if page.navigation_left %}
           {{ page.navigation_left }}