Add layout components

src/assets/styles/bootstrap/_utilities.scss

@@ -42,6 +42,14 @@ $utilities: map-merge(
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
     // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (

src/assets/styles/grid.scss

@@ -1,44 +0,0 @@
-$grid-options: (
-    "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
-);
-
-.grid-items {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: flex-start;
-    width: 100%;
-    margin-top: -3px;
-    overflow: hidden;
-
-    @each $option in $grid-options {
-        &.grid-#{$option} {
-            .grid-item {
-                width: calc(1 / #{$option} * 100% - (1 - 1 / #{$option}) * 3px);
-
-                &:nth-child(#{$option}n) {
-                    margin-right: 0;
-                }
-            }
-        }
-    }
-}
-
-.row-grid {
-    margin: 0 !important;
-    
-    .col {
-        padding: 0 !important;
-    }
-}
-
-@each $option in $grid-options {
-    .row-grid {
-        &.row-cols-#{$option} {
-            .col:nth-child(#{$option}n) {
-                padding-left: 10px !important;
-            }
-        }
-    }
-}

src/assets/styles/index.scss

@@ -7,7 +7,6 @@
 @import '../node_modules/animate.css/animate.min.css';
 @import './scrollbars';
 @import './slider';
-@import './grid';
 @import './icons';
 @import './utils';
 

src/assets/styles/scrollbars.scss

@@ -1,15 +1,41 @@
 ::-webkit-scrollbar {
     width: 0.5rem;
+
+    &:horizontal {
         height: 0.5rem;
     }
 
+    &:not(:horizontal) {
+        width: 0.5rem;
+    }
+}
+
 ::-webkit-scrollbar-track {
-    background-clip: padding-box;
+
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($black, .1);
+    }
+
+    &:not(:horizontal) {
         border-right: 0.25rem solid rgba($black, .1);
     }
+}
 
 ::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
+
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($primary, .4);
+
+        &:hover {
+            border-bottom: 0.25rem solid rgba($primary, .8);
+        }
+    
+        &:active {
+            border-bottom: 0.25rem solid $secondary;
+        }
+    }
+
+    &:not(:horizontal) {
         border-right: 0.25rem solid rgba($primary, .4);
 
         &:hover {
@@ -20,3 +46,8 @@
             border-right: 0.25rem solid $secondary;
         }
     }
+}
+
+::-webkit-scrollbar-corner {
+    background: rgba($black, .1);
+}

src/layout/card/NitroCardView.scss

@@ -36,12 +36,13 @@ $nitro-card-tabs-height: 33px;
         }
     
         .nitro-card {
-            width: 100%;
-            height: 100%;
+            max-width: 75%;
+            max-height: calc(100% - 20px);
+            margin: 10px auto 10px;
     
-            &.rounded {
-                border-radius: 0 !important;
-            }
+            // &.rounded {
+            //     border-radius: 0 !important;
+            // }
         }
     }
 }

src/layout/card/content/NitroCardContentView.tsx

@@ -8,7 +8,7 @@ export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
     const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-hidden ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
             { children }
         </div>
     );

src/layout/card/grid/NitroCardGridView.scss

@@ -1,71 +1,6 @@
-.nitro-card-grid {
-    width: 100%;
-
-    .row-cols-3 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(3n+3) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-4 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(4n+4) {
-                padding-right: 0;
-            }
-        }
-    }
-    
-    .row-cols-5 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(5n+5) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-6 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(6n+6) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-7 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(7n+7) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-8 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(8n+8) {
-                padding-right: 0;
-            }
-        }
-    }
+.nitro-grid {
+    --nitro-grid-column-min-width: 45px;
+    grid-template-columns: repeat(auto-fill, minmax(var(--nitro-grid-column-min-width, 45px), 1fr));
 }
 
 @import './item/NitroCardGridItemView.scss';

src/layout/card/grid/NitroCardGridView.tsx

@@ -7,7 +7,7 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = `grid gap-${ gap } overflow-auto`;
+        let newClassName = `grid gap-${ gap } nitro-grid overflow-auto`;
 
         if(className && className.length) newClassName += ' ' + className;
 
@@ -18,7 +18,7 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
     {
         const newStyle = { ...style };
 
-        newStyle['--bs-columns'] = columns.toString();
+        //newStyle['--bs-columns'] = columns.toString();
 
         return newStyle;
     }, [ style, columns ]);

src/layout/common/NitroLayoutColumns.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

src/layout/common/NitroLayoutOverflow.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutOverflow = 'hidden' | 'auto';

src/layout/common/NitroLayoutPosition.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutPosition = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky';

src/layout/common/NitroLayoutSpacing.type.ts

@@ -0,0 +1 @@
+export type NitroLayoutSpacing = 1 | 2 | 3 | 4 | 5;

src/layout/common/index.ts

@@ -0,0 +1,4 @@
+export * from './NitroLayoutColumns.type';
+export * from './NitroLayoutOverflow.type';
+export * from './NitroLayoutPosition.type';
+export * from './NitroLayoutSpacing.type';

src/layout/flex-column/NitroLayoutFlexColumn.tsx

@@ -0,0 +1,28 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlexColumnProps } from './NitroLayoutFlexColumn.types';
+
+export const NitroLayoutFlexColumn: FC<NitroLayoutFlexColumnProps> = props =>
+{
+    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'd-flex flex-column';
+
+        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
+
+        if(position && position.length) newClassName += ` position-${ position }`;
+
+        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, overflow, position, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}

src/layout/flex-column/NitroLayoutFlexColumn.types.ts

@@ -0,0 +1,9 @@
+import { DetailsHTMLAttributes } from 'react';
+import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutFlexColumnProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    overflow?: NitroLayoutOverflow;
+    position?: NitroLayoutPosition;
+    gap?: NitroLayoutSpacing;
+}

src/layout/grid/NitroLayoutGrid.tsx

@@ -0,0 +1,24 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutGridProps } from './NitroLayoutGrid.types';
+
+export const NitroLayoutGrid: FC<NitroLayoutGridProps> = props =>
+{
+    const { className = '', gap = 3, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'grid h-100';
+
+        if(gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}

src/layout/grid/NitroLayoutGrid.types.ts

@@ -0,0 +1,7 @@
+import { DetailsHTMLAttributes } from 'react';
+import { NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutGridProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    gap?: NitroLayoutSpacing;
+}

src/layout/grid/column/NitroLayoutGridColumn.tsx

@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlexColumn } from '../../flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumnProps } from './NitroLayoutGridColumn.types';
+
+export const NitroLayoutGridColumn: FC<NitroLayoutGridColumnProps> = props =>
+{
+    const { className = '', size = 12, gap = 3, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = `g-col-${ size }`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, size ]);
+
+    return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow="auto" { ...rest } />
+}

src/layout/grid/column/NitroLayoutGridColumn.types.ts

@@ -0,0 +1,8 @@
+import { NitroLayoutColumns, NitroLayoutSpacing } from '../../common';
+import { NitroLayoutFlexColumnProps } from '../../flex-column/NitroLayoutFlexColumn.types';
+
+export interface NitroLayoutGridColumnProps extends NitroLayoutFlexColumnProps
+{
+    size?: NitroLayoutColumns;
+    gap?: NitroLayoutSpacing;
+}