Przeglądaj źródła

add .wide-gutter-x-lg class

Yuki Takei 2 lat temu
rodzic
commit
de4221acf3

+ 0 - 10
apps/app/src/components/Common/PageViewLayout.module.scss

@@ -19,16 +19,6 @@ $page-view-layout-margin-top: 32px;
   }
 }
 
-// container padding
-.page-view-layout :global,
-.footer-layout :global {
-  @include bs.media-breakpoint-up(lg) {
-    .container-lg {
-      --bs-gutter-x: 3rem;
-    }
-  }
-}
-
 // fluid layout
 .fluid-layout :global {
   .grw-container-convertible {

+ 3 - 4
apps/app/src/components/Common/PageViewLayout.tsx

@@ -3,7 +3,6 @@ import type { ReactNode } from 'react';
 import styles from './PageViewLayout.module.scss';
 
 const pageViewLayoutClass = styles['page-view-layout'] ?? '';
-const footerLayoutClass = styles['footer-layout'] ?? '';
 const _fluidLayoutClass = styles['fluid-layout'] ?? '';
 
 type Props = {
@@ -24,8 +23,8 @@ export const PageViewLayout = (props: Props): JSX.Element => {
 
   return (
     <>
-      <div id="main" className={`main ${pageViewLayoutClass} ${fluidLayoutClass} flex-expand-vert`}>
-        <div id="content-main" className="content-main container-lg grw-container-convertible flex-expand-vert">
+      <div className={`main ${pageViewLayoutClass} ${fluidLayoutClass} flex-expand-vert`}>
+        <div className="container-lg wide-gutter-x-lg grw-container-convertible flex-expand-vert">
           { headerContents != null && headerContents }
           { sideContents != null
             ? (
@@ -48,7 +47,7 @@ export const PageViewLayout = (props: Props): JSX.Element => {
       </div>
 
       { footerContents != null && (
-        <footer className={`footer d-edit-none ${footerLayoutClass} ${fluidLayoutClass}`}>
+        <footer className={`footer d-edit-none wide-gutter-x-lg ${fluidLayoutClass}`}>
           {footerContents}
         </footer>
       ) }

+ 13 - 0
apps/app/src/styles/_layout.scss

@@ -48,6 +48,19 @@
   }
 }
 
+.wide-gutter-x-lg {
+  @include bs.media-breakpoint-up(lg) {
+    &,
+    .container,
+    .container-fluid,
+    .container-xxl,
+    .container-xl,
+    .container-lg {
+      --bs-gutter-x: 3rem;
+    }
+  }
+}
+
 // printable style
 @media print {
   body {