Inisital Asset Commit

assets/sass/semi-dark.scss

@@ -0,0 +1,118 @@
+[data-bs-theme=semi-dark] body { 
+
+    --bs-semi-body-color: #dee2e6;
+    --bs-semi-body-color-rgb: 222, 226, 230;
+    --bs-semi-body-bg: #212529;
+    --bs-semi-body-bg-2: #181c1f;
+    --bs-semi-border-color: #495057;
+    --bs-semi-emphasis-color:#fff;
+	--bs-semi-light-bg-subtle: #343a40;
+    --bs-semi-border-color-translucent: rgba(255, 255, 255, 0.15);
+
+
+
+    
+/* sidebar wrapper */
+.sidebar-wrapper {
+	background-color: var(--bs-semi-body-bg);
+	border-right: 1px solid var(--bs-border-color-translucent);
+
+	.sidebar-header {
+		background-color: var(--bs-semi-body-bg);
+		border-right: 1px solid var(--bs-semi-border-color-translucent);
+
+		.logo-text {
+			color: var(--bs-semi-body-color);
+		}
+
+		.mobile-toggle-icon {
+            color: var(--bs-semi-body-color);
+            background-color: var(--bs-semi-body-bg);
+            &:hover,
+            &:focus {
+                background-color: var(--bs-semi-light-bg-subtle);
+                color: var(--bs-semi-emphasis-color);
+            }
+        }
+	}
+
+
+	.metismenu {
+		a {
+			color: var(--bs-semi-body-color);
+		}
+
+		ul {
+			background: var(--bs-semi-body-bgbody-bg);
+		}
+	}
+
+	.metismenu .mm-active>a,
+	.metismenu a:active,
+	.metismenu a:focus,
+	.metismenu a:hover {
+		color: var(--bs-semi-emphasis-color);
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+
+}
+
+
+
+@media screen and (min-width:1025px) {
+
+	.wrapper {
+		&.toggled {
+			.sidebar-wrapper {
+				&:hover {
+					.sidebar-header {
+						.mobile-toggle-icon {
+							display: flex;
+						}
+					}
+				}
+			}
+
+			&:not(.sidebar-hovered) {
+				.sidebar-wrapper {
+					width: 70px;
+					.sidebar-header {
+						width: 70px;
+						justify-content: center;
+						width: 70px;
+						.logo-text {
+							display: none;
+						}
+					}
+					.metismenu {
+						a {
+							justify-content: center;
+						}
+						.menu-title {
+							display: none;
+						}
+						li {
+							ul {
+								display: none;
+							}
+							&.menu-label {
+								display: none;
+							}
+						}
+						.has-arrow {
+							&:after {
+								display: none;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	
+	
+}
+
+
+
+}