From 207a2540101b2f216bde94ae53286d2e52f044e3 Mon Sep 17 00:00:00 2001
From: Wolfboy248 <georgejvindkarlsen@gmail.com>
Date: Mon, 25 Nov 2024 09:20:01 +0100
Subject: frontend: begin port to css modules, sidebar refactor

---
 frontend/src/css/Button.module.css | 91 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 frontend/src/css/Button.module.css

(limited to 'frontend/src/css/Button.module.css')

diff --git a/frontend/src/css/Button.module.css b/frontend/src/css/Button.module.css
new file mode 100644
index 0000000..d1c3ad7
--- /dev/null
+++ b/frontend/src/css/Button.module.css
@@ -0,0 +1,91 @@
+.default, .defaultWide, .sidebar, .logout {
+	border: none;
+	border-radius: 24px;
+	padding: 5px 10px;
+	background-color: #2b2e46;
+	font-family: BarlowSemiCondensed-Regular;
+	color: #CDCFDF;
+	font-size: 18px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.sidebar.selected {
+	background-color: #202232;
+}
+
+.sidebar.selected:hover {
+	background-color: #202232;
+}
+
+.default:hover, .defaultWide:hover, .sidebar:hover {
+	background-color: rgb(38, 42, 62);
+}
+
+.defaultWide {
+	width: 100%;
+}
+
+.default.error, .defaultWide.error {
+	background-color: rgb(147, 45, 45);
+}
+
+.default.error:hover, .defaultWide.error {
+	background-color: rgb(105, 36, 36);
+}
+
+.sidebar {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	font-family: BarlowSemiCondensed-Regular;
+	padding: 8px 12px;
+	height: 42px;
+	padding-right: 4px;
+	text-wrap: nowrap;
+	transition: all 0.2s ease;
+}
+
+.sidebar.min {
+	padding: 8px 9px;
+}
+
+.sidebar.min>span {
+	opacity: 0;
+	animation: sidebar_text_out 0.2s ease;
+	transform: translateX(-200px);
+}
+
+.sidebar img {
+	height: 24px;
+}
+
+.sidebar.profile>img {
+	border-radius: 24px;
+}
+
+.sidebar>span {
+	padding: 0px 8px;
+	transition: all 0.2s ease;
+}
+
+.logout {
+	background-color: #00000000;
+	display: flex;
+	align-items: center;
+}
+
+@keyframes sidebar_text_out {
+	0% {
+		opacity: 1;
+		transform: translateX(0px);
+	}
+	50% {
+		opacity: 0;
+		transform: translateX(0px);
+	}
+	60%, 100% {
+		transform: translateX(-200px);
+	}
+}
+
-- 
cgit v1.2.3