first commit

.gitignore

@@ -0,0 +1,13 @@
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+.npmrc
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,9 @@
+# Admin Styles
+
+A collection of styles for admin interfaces.
+
+## Getting Started
+
+```bash
+npm i @typedbootstrap/admin-styles
+```

package.json

@@ -0,0 +1,21 @@
+{
+    "name": "@typedbootstrap/admin-styles",
+    "description": "A collection of styles for admin interfaces",
+    "version": "0.1.0",
+    "main": "index.js",
+    "license": "MIT",
+    "scripts": {
+        "build": "rimraf dist/ && sass ./src/scss/styles.scss ./dist/css/styles.css --no-source-map && sass ./src/scss/styles.scss ./dist/css/styles.min.css --no-source-map --style compressed",
+        "prepublishOnly": "npm run build",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "devDependencies": {
+        "bootstrap": "5.2.3",
+        "rimraf": "^5.0.5",
+        "sass": "^1.69.5"
+    },
+    "files": [
+        "dist",
+        "src"
+    ]
+}

src/scss/_global.scss

@@ -0,0 +1,8 @@
+// 
+// Global
+// 
+
+html,
+body {
+    height: 100%;
+}

src/scss/_variables.scss

@@ -0,0 +1,13 @@
+// 
+// Variables
+// 
+
+// Import Bootstrap variables for use within theme
+@import '../../node_modules/bootstrap/scss/functions.scss';
+@import '../../node_modules/bootstrap/scss/variables.scss';
+
+// Import spacing variables
+@import "./variables/spacing.scss";
+
+// Import navigation variables
+@import "./variables/navigation.scss";

src/scss/layout/_authentication.scss

@@ -0,0 +1,18 @@
+// 
+// Authentication layout
+//
+
+#layoutAuthentication {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+
+    #layoutAuthentication_content {
+        min-width: 0;
+        flex-grow: 1;
+    }
+
+    #layoutAuthentication_footer {
+        min-width: 0;
+    }
+}

src/scss/layout/_dashboard-default.scss

@@ -0,0 +1,89 @@
+// 
+// Default dashboard layout
+// 
+
+// Default behavior for the sidenav layout
+// The default positioning for the sidenav is a static position
+
+#layoutSidenav {
+    display: flex;
+
+    // Wraps the .sb-sidenav element and sets the size
+    #layoutSidenav_nav {
+        flex-basis: $sidenav-base-width;
+        flex-shrink: 0;
+        transition: transform 0.15s ease-in-out;
+        z-index: $zindex-sidenav;
+        // Mobile first transform - by default the sidenav will be moved off-canvas
+        transform: translateX(-$sidenav-base-width);
+    }
+
+    // Wraps the content when using the sidenav layout
+    #layoutSidenav_content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-width: 0;
+        flex-grow: 1;
+        min-height: calc(100vh - #{$topnav-base-height});
+        margin-left: -$sidenav-base-width;
+    }
+}
+
+// Default behavior for the static sidenav collapse
+.sb-sidenav-toggled {
+    #layoutSidenav {
+        #layoutSidenav_nav {
+            transform: translateX(0);
+        }
+
+        #layoutSidenav_content {
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: $black;
+                z-index: $zindex-content;
+                opacity: 0.5;
+                transition: opacity 0.3s ease-in-out;
+            }
+        }
+    }
+}
+
+// Responsive styling for the sidenav layout
+@include media-breakpoint-up(lg) {
+    #layoutSidenav {
+        #layoutSidenav_nav {
+            transform: translateX(0);
+        }
+
+        #layoutSidenav_content {
+            margin-left: 0;
+            transition: margin 0.15s ease-in-out;
+        }
+    }
+
+    // Behavior for the sidenav collapse on screens larger than the med breakpoint
+    .sb-sidenav-toggled {
+        #layoutSidenav {
+            #layoutSidenav_nav {
+                transform: translateX(-$sidenav-base-width);
+            }
+
+            #layoutSidenav_content {
+                margin-left: -$sidenav-base-width;
+
+                // Removes the sidenav overlay on screens larger than the med breakpoint
+                &:before {
+                    display: none;
+                }
+            }
+        }
+    }
+}

src/scss/layout/_dashboard-fixed.scss

@@ -0,0 +1,32 @@
+// 
+// Fixed dashboard layout
+// 
+
+.sb-nav-fixed {
+    .sb-topnav {
+        @extend .fixed-top;
+        z-index: $zindex-topnav;
+    }
+
+    #layoutSidenav {
+        #layoutSidenav_nav {
+            @extend .fixed-top;
+            width: $sidenav-base-width;
+            height: 100vh;
+            z-index: $zindex-sidenav;
+
+            .sb-sidenav {
+                padding-top: $topnav-base-height;
+
+                .sb-sidenav-menu {
+                    overflow-y: auto;
+                }
+            }
+        }
+
+        #layoutSidenav_content {
+            padding-left: $sidenav-base-width;
+            top: $topnav-base-height;
+        }
+    }
+}

src/scss/layout/_error.scss

@@ -0,0 +1,22 @@
+// 
+// Error page layout
+// 
+
+#layoutError {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+
+    #layoutError_content {
+        min-width: 0;
+        flex-grow: 1;
+    }
+
+    #layoutError_footer {
+        min-width: 0;
+    }
+}
+
+.img-error {
+    max-width: 20rem;
+}

src/scss/navigation/_nav.scss

@@ -0,0 +1,11 @@
+// 
+// Nav
+// 
+
+// Add styling for icons used within nav links
+.nav,
+.sb-sidenav-menu {
+    .nav-link .sb-nav-link-icon {
+        margin-right: 0.5rem;
+    }
+}

src/scss/navigation/_topnav.scss

@@ -0,0 +1,28 @@
+// 
+// Topnav
+// 
+
+.sb-topnav {
+    padding-left: 0;
+    height: $topnav-base-height;
+    z-index: $zindex-topnav;
+
+    .navbar-brand {
+        width: $sidenav-base-width;
+        padding-left: $navbar-padding-x;
+        padding-right: $navbar-padding-x;
+        margin: 0;
+    }
+
+    &.navbar-dark {
+        #sidebarToggle {
+            color: $topnav-dark-toggler-color;
+        }
+    }
+
+    &.navbar-light {
+        #sidebarToggle {
+            color: $topnav-light-toggler-color;
+        }
+    }
+}

src/scss/navigation/sidenav/_sidenav-dark.scss

@@ -0,0 +1,45 @@
+// 
+// Sidenav Dark
+// 
+
+// Dark theme for sidenav
+// Append .sb-sidenav-dark to .sb-sidenav to use
+
+.sb-sidenav-dark {
+    background-color: $sidenav-dark-bg;
+    color: $sidenav-dark-color;
+
+    .sb-sidenav-menu {
+        .sb-sidenav-menu-heading {
+            color: $sidenav-dark-heading-color;
+        }
+
+        .nav-link {
+            color: $sidenav-dark-link-color;
+
+            .sb-nav-link-icon {
+                color: $sidenav-dark-icon-color;
+            }
+
+            .sb-sidenav-collapse-arrow {
+                color: $sidenav-dark-icon-color;
+            }
+
+            &:hover {
+                color: $sidenav-dark-link-active-color;
+            }
+
+            &.active {
+                color: $sidenav-dark-link-active-color;
+
+                .sb-nav-link-icon {
+                    color: $sidenav-dark-link-active-color;
+                }
+            }
+        }
+    }
+
+    .sb-sidenav-footer {
+        background-color: $sidenav-dark-footer-bg;
+    }
+}

src/scss/navigation/sidenav/_sidenav-light.scss

@@ -0,0 +1,45 @@
+// 
+// Sidenav Light
+// 
+
+// Light theme for sidenav
+// Append .sb-sidenav-light to .sb-sidenav to use
+
+.sb-sidenav-light {
+    background-color: $sidenav-light-bg;
+    color: $sidenav-light-color;
+
+    .sb-sidenav-menu {
+        .sb-sidenav-menu-heading {
+            color: $sidenav-light-heading-color;
+        }
+
+        .nav-link {
+            color: $sidenav-light-link-color;
+
+            .sb-nav-link-icon {
+                color: $sidenav-light-icon-color;
+            }
+
+            .sb-sidenav-collapse-arrow {
+                color: $sidenav-light-icon-color;
+            }
+
+            &:hover {
+                color: $sidenav-light-link-active-color;
+            }
+
+            &.active {
+                color: $sidenav-light-link-active-color;
+
+                .sb-nav-link-icon {
+                    color: $sidenav-light-link-active-color;
+                }
+            }
+        }
+    }
+
+    .sb-sidenav-footer {
+        background-color: $sidenav-light-footer-bg;
+    }
+}