fui-material 0.2.59 → 0.2.60

package/src/material/FGrid/FGrid.css

@@ -0,0 +1,179 @@
+@media (min-width: 1400px) {
+    .container-xs {
+        max-width: 1320px;
+    }
+
+    .container-sm {
+        max-width: 1320px;
+    }
+
+    .container-md {
+        max-width: 1320px;
+    }
+
+    .container-lg {
+        max-width: 1320px;
+    }
+
+    .container-xl {
+        max-width: 1320px;
+    }
+
+    .container-xxl {
+        max-width: 1320px;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 1200px) and (max-width: 1399px) {
+    .container-xs {
+        max-width: 1140px;
+    }
+
+    .container-sm {
+        max-width: 1140px;
+    }
+
+    .container-md {
+        max-width: 1140px;
+    }
+
+    .container-lg {
+        max-width: 1140px;
+    }
+
+    .container-xl {
+        max-width: 1140px;
+    }
+
+    .container-xxl {
+        max-width: 100%;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+    .container-xs {
+        max-width: 960px;
+    }
+
+    .container-sm {
+        max-width: 960px;
+    }
+
+    .container-md {
+        max-width: 960px;
+    }
+
+    .container-lg {
+        max-width: 960px;
+    }
+
+    .container-xl {
+        max-width: 100%;
+    }
+
+    .container-xxl {
+        max-width: 100%;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+    .container-xs {
+        max-width: 720px;
+    }
+
+    .container-sm {
+        max-width: 720px;
+    }
+
+    .container-md {
+        max-width: 720px;
+    }
+
+    .container-lg {
+        max-width: 100%;
+    }
+
+    .container-xl {
+        max-width: 100%;
+    }
+
+    .container-xxl {
+        max-width: 100%;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+    .container-xs {
+        max-width: 540px;
+    }
+
+    .container-sm {
+        max-width: 540px;
+    }
+
+    .container-md {
+        max-width: 100%;
+    }
+
+    .container-lg {
+        max-width: 100%;
+    }
+
+    .container-xl {
+        max-width: 100%;
+    }
+
+    .container-xxl {
+        max-width: 100%;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 576px) {
+    .container-xs {
+        max-width: 100%;
+    }
+
+    .container-sm {
+        max-width: 100%;
+    }
+
+    .container-md {
+        max-width: 100%;
+    }
+
+    .container-lg {
+        max-width: 100%;
+    }
+
+    .container-xl {
+        max-width: 100%;
+    }
+
+    .container-xxl {
+        max-width: 100%;
+    }
+
+    .container-fluid {
+        max-width: 100%;
+    }
+}

package/src/material/FGrid/FGrid.tsx

@@ -0,0 +1,76 @@
+import React, {FC} from "react";
+// import "./css/bootstrap.css"
+
+export interface IFGrid {
+    children?: React.ReactChild | React.ReactNode,
+    className?: string,
+    st?: React.CSSProperties,
+    id?: string
+    obj?: 'container' | 'item'
+    xs?: number,
+    sm?: number,
+    md?: number,
+    lg?: number,
+    xl?: number,
+    xxl?: number,
+    colAuto?: 'col-sm-auto' | 'col-md-auto' | 'col-lg-auto' | 'col-xl-auto' | 'col-xxl-auto'
+}
+
+const FGrid: FC<IFGrid> = ({
+                               children,
+                               className,
+                               st,
+                               id,
+                               obj,
+                               xs,
+                               sm,
+                               md,
+                               lg,
+                               xl,
+                               xxl,
+                               colAuto
+                           }) => {
+
+    let style: React.CSSProperties = {
+        paddingBottom: '16px'
+    }
+
+    if (st !== undefined) {
+        style = Object.assign(style, st);
+    }
+
+
+    return (
+        <React.Fragment>
+            {obj === 'container' &&
+                <div
+                    className={`container`}
+                >
+                    <div
+                        className={`row ${className !== undefined ? className : ''}`}
+                        style={st}
+                        id={id}
+                    >
+                        {children}
+                    </div>
+                </div>
+            }
+            {obj === 'item' &&
+                <div
+                    className={`${className !== undefined ? className : ''} ${xs !== undefined ? `col-${xs}` : ''} ${sm !== undefined ? `col-sm-${sm}` : ''} ${md !== undefined ? `col-md-${md}` : ''} ${lg !== undefined ? `col-lg-${lg}` : ''} ${xl !== undefined ? `col-lg-${lg}` : ''} ${xxl !== undefined ? `col-xxl-${xxl}` : ''} ${colAuto !== undefined ? colAuto : ''}`}
+                    style={style}
+                    id={id}
+                >
+                    {children}
+                </div>
+            }
+            {obj === undefined &&
+                <div>
+                    {children}
+                </div>
+            }
+        </React.Fragment>
+    )
+}
+
+export default FGrid