1 files changed, 49 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css
index b6ea6f1..4e87335 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.css
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css
@@ -9,7 +9,56 @@
   transition: transform 0.2s;
   background: white;
   color: black;
+  font-size: 16px;
+  padding: 1.5rem;
 }
 .checklist-open .checklist {
   transform: translateZ(0) translateY(0);
 }
+
+
+/* dropdown */
+
+.checklist-dropdown-container {
+  width: 12rem;
+  cursor: pointer;
+}
+.checklist-dropdown {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid black;
+  padding-left: 0.5rem;
+}
+.checklist-dropdown .arrow-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 0.5rem;
+  border-left: 1px solid black;
+}
+.checklist-dropdown .arrow {
+  width: 2.5rem;
+  height: 2rem;
+}
+.checklist-dropdown-options {
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  transition: height 0.2s;
+  overflow: hidden;
+  position: relative;
+  top: -1px;
+}
+.checklist-dropdown-options.open {
+  top: 0;
+}
+.checklist-dropdown-options div {
+  padding: 0.25rem 0.5rem;
+  transition: all 0.1s;
+}
+.checklist-dropdown-options div:hover {
+  color: white;
+  background: black;
+}