Refactor containerFluidMargin to containerFluidPadding, update variable usage, and adjust related styles and documentation.

Author: imagine10255

README.md

@@ -80,7 +80,7 @@ const gridTheme: IGridSetting = {
     //   xs: '1rem',
     //   lg: '40px',  
     // },
-    containerFluidMargin: '40px',
+    containerFluidPadding: '40px',
     // containerFluidMargin: {
     //     xs: '40px',
     //     lg: '80px',

src/GridSystem/Container/utils.ts

@@ -18,8 +18,7 @@ export const createFluidBreakpoint = (props: TStyledProps<IContainerProps>) => {
 
     if(typeof containerFluidMargin === 'string'){
         return `
-            margin-left: ${containerFluidMargin};
-            margin-right: ${containerFluidMargin};
+            --acrool-container-fluid-padding: ${containerFluidMargin};
         `;
     }
 
@@ -29,14 +28,12 @@ export const createFluidBreakpoint = (props: TStyledProps<IContainerProps>) => {
         if(rwdContainerFluidMargin){
             if(sizeName === 'xs'){
                 return curr.concat(`
-                    margin-left: ${rwdContainerFluidMargin};
-                    margin-right: ${rwdContainerFluidMargin};
+                    --acrool-container-fluid-padding: ${rwdContainerFluidMargin};
                 `);
             }
 
             return curr.concat(media[sizeName]`
-                   margin-left: ${rwdContainerFluidMargin};
-                   margin-right: ${rwdContainerFluidMargin};
+                   --acrool-container-fluid-padding: ${rwdContainerFluidMargin};
             `);
         }
 

src/styles.scss

@@ -260,6 +260,11 @@ $directions: (
     margin-left: auto;
     padding-right: calc(var(--acrool-gutter-x) * 0.5);
     padding-left: calc(var(--acrool-gutter-x) * 0.5);
+
+    &[data-class="container-fluid"]{
+        padding-right: calc((var(--acrool-gutter-x) * 0.5) + var(--acrool-container-fluid-padding, 0));
+        padding-left: calc((var(--acrool-gutter-x) * 0.5) + var(--acrool-container-fluid-padding, 0));
+    }
 }
 
 [data-grid="row"]{