tailwindcss

2022-12-17 19:22:23 -06:00
parent 8b06077359
commit 7341869d9c
10 changed files with 204 additions and 208 deletions
--- a/src/_index.scss
+++ b/src/_index.scss
@@ -0,0 +1,81 @@
+#root {
+    --bg-color-1: #262626;
+    --bg-color-2: #363636;
+    --bg-color-3-5: #3d3d3d;
+    --bg-color-3: #464646;
+    --text-color-1: #d6d6d6;
+    --text-color-2: #a6a6a6;
+    --color-error: #860000;
+
+    #sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+
+        height: 100%;
+
+        width: 200px;
+        & + #content {
+            margin-left: 200px;
+        }
+
+        &.collapse {
+            width: 50px;
+            & + #content {
+                margin-left: 50px;
+            }
+        }
+
+        background-color: var(--bg-color-2);
+        color: var(--text-color-2);
+
+        #collapse {
+            cursor: pointer;
+            input {
+                display: none;
+            }
+        }
+
+        .menu {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-weight: bold;
+
+            width: 100%;
+            height: calc(100% - 50px);
+
+            a {
+                text-decoration: none;
+                color: inherit;
+                font-weight: inherit;
+                width: 100%;
+            }
+
+            .item {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                width: 100%;
+                height: 50px;
+
+                font-size: 16px;
+
+                &:hover,
+                &:focus {
+                    background-color: var(--bg-color-3);
+                    color: var(--text-color-1);
+
+                    &.important {
+                        background-color: var(--color-error);
+                    }
+                }
+            }
+        }
+    }
+
+    #content {
+        overflow-x: hidden;
+    }
+}