added base dropdown design

Author: handymathis@gmail..com

dropdown/animations.scss

@@ -0,0 +1,19 @@
+@import "./dropdown.scss";
+
+.dropdown.active {
+    display: flex;
+    animation-name: showDropdown;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+}
+
+@keyframes showDropdown {
+    from {
+        top: -100%;
+        opacity: 0.5;
+    }
+    to {
+        top: 2.5%;
+        opacity: 1;
+    }
+}

dropdown/dropdown.scss

@@ -0,0 +1,10 @@
+.dropdown {
+    width: fit-content;
+    height: fit-content;
+    border-radius: 12px;
+    padding: 10px 10px 10px 10px;
+    display: none;
+    position: absolute;
+    top: -100%;
+    overflow: hidden;
+}

dropdown/menu.scss

@@ -0,0 +1,27 @@
+.dropdown-menu {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.dropdown-submenu {
+    @extend .dropdown-menu;
+    position: absolute;
+    right: -100%;
+}
+
+.dropdown-menu-item {
+    width: 200px;
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border-radius: 7px;
+    transition: .3s;
+}
+
+.dropdown-menu-item:hover {
+    filter: brightness(2);
+}

dropdown/theme.scss

@@ -0,0 +1,17 @@
+@import "./dropdown.scss";
+@import "./menu.scss";
+
+@mixin dropdownTheme($class-name, $bg-color, $text-color) {
+    
+    .dropdown.#{$class-name} {
+        background: $bg-color;
+        box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+    }
+
+    .#{$class-name} .dropdown-menu-item {
+        color: $text-color;
+        font-family: "Roboto", sans-serif;
+        font-size: 1.2em;
+        background: $bg-color;
+    }
+}  

main.scss

@@ -27,6 +27,13 @@
 @import "./cards/responsive.scss";
 
 
+// Dropdown
+@import "./dropdown/dropdown.scss";
+@import "./dropdown/menu.scss";
+@import "./dropdown/theme.scss";
+@import "./dropdown/animations.scss";
+
+
 
 // Buttons
 @include buttonBase(btn-blue, #1d3bae, #264BD9, #fff);
@@ -62,3 +69,6 @@
 @include cardTheme(card-light, #fff, rgba(0,0,0,0.4), #000);
 @include cardTheme(card-grey, #303030, rgba(0,0,0,0.6), #fff);
 @include cardTheme(card-dark, #161616, rgba(0,0,0,0.6), #fff);
+
+// Dropdown
+@include dropdownTheme(dropdown-dark, #232323, #fff);