From 7abe98a32fcbade340b4ff6ee955983c6e287b63 Mon Sep 17 00:00:00 2001
From: pluiedev <hi@pluie.me>
Date: Wed, 14 Dec 2022 11:00:46 +0800
Subject: [PATCH] collapsible system member display

---
 sass/components/team-grid.scss | 51 ++++++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/sass/components/team-grid.scss b/sass/components/team-grid.scss
index c802513..ea82736 100644
--- a/sass/components/team-grid.scss
+++ b/sass/components/team-grid.scss
@@ -41,26 +41,24 @@
 		object-fit: cover;
 	}
 
+	.description {
+		margin-top: 1rem;
+	}
+
 	.card-content {
 		padding-top: 4rem;
 
 		.system-members {
-			display: flex;
-			flex-flow: row wrap;
+			margin-top: 1rem;
 
-			justify-content: center;
+			> div {
+				display: flex;
+				flex-flow: row wrap;
 
-			&:not(:last-child) {
-				margin-bottom: 1rem;
-			}
-
-			div {
-				height: 2rem;
-				width: 2rem;
+				justify-content: center;
+				align-items: center;
 
-				&:not(:last-child) {
-					margin-right: 0.2rem;
-				}
+				margin-top: 0.75rem;
 
 				img {
 					height: 2rem;
@@ -70,13 +68,36 @@
 					border: 1px solid $text;
 				}
 			}
+
+			&[open] .system-member-title .media-content::before {
+				transform: rotate(90deg);
+			}
 		}
 
 		.media {
+			margin-bottom: 0 !important;
+
 			&.system-member-title {
-				margin-bottom: 0.2rem;
+				.media-content {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					&::before {
+						content: " ";
+						display: inline-block;
+
+						width: 0;
+						height: 0;
+						border-top: 5px solid transparent;
+						border-bottom: 5px solid transparent;
+						border-left: 5px solid transparentize($text, 0.2);
+
+						margin-right: 0.7rem;
+						transition: transform 0.2s ease-out;
+					}
+				}
 			}
-
 			.subtitle {
 				color: transparentize($text, 0.2);