revamp template

src/styles/demos/demo1.css

@@ -0,0 +1,132 @@
+/* Variables */
+.demo1 {
+	--tw-sidebar-transition-duration: 0.3s;
+	--tw-sidebar-transition-timing: ease;
+	--tw-sidebar-width: theme('custom.layouts.demo1.sidebar.width.desktop');
+	--tw-sidebar-default-width: theme('custom.layouts.demo1.sidebar.width.desktop');
+	--tw-header-height: theme('custom.layouts.demo1.header.height.desktop');
+}
+
+@media (max-width: theme('screens.lg')) {
+	.demo1 {
+		--tw-sidebar-width: theme('custom.layouts.demo1.sidebar.width.mobile');
+		--tw-header-height: theme('custom.layouts.demo1.header.height.mobile');
+	}
+}
+
+/* Base */
+.demo1 .header {
+	height: var(--tw-header-height);
+}
+
+.demo1 .sidebar {
+	width: var(--tw-sidebar-width);
+}
+
+.demo1.header-fixed .wrapper {
+	padding-top: var(--tw-header-height);
+}
+
+/* Desktop mode */
+@media (min-width: theme('screens.lg')) {
+	.demo1 .sidebar {
+		width: var(--tw-sidebar-width);
+		transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+	}
+
+	.demo1 .sidebar .sidebar-header {
+		height: var(--tw-header-height);
+	}
+
+	.demo1 .sidebar .sidebar-wrapper {
+		width: var(--tw-sidebar-default-width);
+	}
+
+	.demo1 .sidebar .sidebar-logo {
+		width: var(--tw-sidebar-default-width);
+	}
+
+	.demo1 .sidebar .small-logo {
+		display: none;
+	}
+
+	.demo1.sidebar-fixed .wrapper {
+		padding-inline-start: var(--tw-sidebar-width);
+	}
+
+	.demo1.sidebar-fixed.header-fixed .header {
+		inset-inline-start: var(--tw-sidebar-width);
+	}
+
+	.demo1.sidebar-fixed.header-fixed .wrapper {
+		padding-top: var(--tw-header-height);
+	}
+
+	.demo1.sidebar-collapse {
+		--tw-sidebar-width: theme('custom.layouts.demo1.sidebar.width.desktopCollapse');
+	}
+
+	.demo1.sidebar-collapse .sidebar {
+		transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+	}
+
+	.demo1.sidebar-collapse .sidebar.animating {
+		pointer-events: none;
+	}
+
+	.demo1.sidebar-collapse .sidebar:hover:not(.animating) {
+		width: var(--tw-sidebar-default-width);
+		transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+	}
+
+	.demo1.sidebar-collapse .sidebar:not(:hover) .default-logo {
+		display: none;
+	}
+
+	.demo1.sidebar-collapse .sidebar:not(:hover) .small-logo {
+		display: flex;
+	}
+
+	.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-title,
+	.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-arrow,
+	.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-badge,
+	.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-title,
+	.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-arrow,
+	.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-badge {
+		display: none;
+	}
+
+	.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-accordion {
+		display: none;
+	}
+
+	.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading {
+		visibility: hidden;
+		position: relative;
+	}
+
+	.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading::before {
+		content: "...";
+		color: currentColor;
+		font-size: inherit;
+		position: absolute;
+		visibility: visible;
+		display: inline-block;
+		bottom: 50%;
+		inset-inline-start: 0;
+		margin-inline-start: 0.225rem;
+		transform: translateX(100%);
+	}
+
+	.demo1.sidebar-collapse .sidebar .sidebar-content {
+		overflow: hidden;
+	}
+} 
+
+.demo1.layout-initialized .wrapper {	
+	transition: padding-inline-start var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+}
+
+.demo1.layout-initialized .header {
+	transition: inset-inline-start var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+}

src/styles/globals.css

@@ -0,0 +1,10 @@
+/* Tailwind core */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* Demos */
+@import "demos/demo1";
+
+/* Shadcn UI */
+@import "shadcn.ui";

src/styles/shadcn.ui.css

@@ -0,0 +1,65 @@
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 223 32% 22%;
+    --card: 0 0% 100%;
+    --card-foreground: 223 32% 22%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 223 32% 22%;
+    --primary: 212 88% 51%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 137 89% 40%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 230 25% 95%;
+    --muted-foreground: 224 16% 54%;
+    --accent: 230 25% 95%;
+    --accent-foreground: 223 32% 22%;
+    --destructive: 349 86% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 230 25% 95%;
+    --input: 225 23% 89%;
+    --ring: 212 88% 51%;
+    --radius: 0.5rem;
+    --chart-1: 47 100% 48%;
+    --chart-2: 137 89% 40%;
+    --chart-3: 212 88% 51%;
+    --chart-4: 252 83% 52%;
+    --chart-5: 349 86% 50%;
+  }
+
+  .dark {
+    --background: 222 15% 13%;
+    --foreground: 0 0% 100%;
+    --card: 222 15% 13%;
+    --card-foreground: 0 0% 100%;
+    --popover: 222 15% 13%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 212 88% 51%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 137 89% 40%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 231 11% 12%;
+    --muted-foreground: 232 7% 53%;
+    --accent: 231 11% 12%;
+    --accent-foreground: 234 15% 75%;
+    --destructive: 349 86% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 231 11% 12%;
+    --input: 228 11% 24%;
+    --ring: 212 88% 51%;
+    --chart-1: 47 100% 48%;
+    --chart-2: 137 89% 40%;
+    --chart-3: 212 88% 51%;
+    --chart-4: 256 89% 53%;
+    --chart-5: 349 86% 50%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}