scss beautify

Author: MaximilianPfitzenmaier

README.md

@@ -39,4 +39,4 @@ Using the latest LTS version of node.js should work just fine: https://nodejs.or
 You should now be able to reach your site.
 
 Keywords: React dropdown menu, Customizable menu component, User-friendly dropdown menu, Reusable dropdown template, React menu interface, Dropdown menu solution, Easy integration with React
-https://github.com/MaximilianPfitzenmaier/
+https://github.com/MaximilianPfitzenmaier/

src/assets/scss/default.scss

@@ -4,7 +4,7 @@ $screen-md-min: 768px;
 // Medium devices
 @mixin md {
   @media (min-width: #{$screen-md-min}) {
-      @content;
+    @content;
   }
 }
 
@@ -30,7 +30,7 @@ $screen-md-min: 768px;
   --color-links-hover: hsl(var(--hs-links) 45%);
   --color-border: hsl(277, 85%, 38%);
   --color-invalid: hsl(356, 100%, 71%);
-  --color-font: 	hsl(210, 11%, 15%);
+  --color-font: hsl(210, 11%, 15%);
   --gradient-background: radial-gradient(circle, rgba(152, 11, 238, 1) 0%, rgba(118, 15, 181, 1) 35%, rgba(58, 13, 85, 1) 100%);
   --font-body: -apple-system, 'Segoe UI', Helvetica Neue, Helvetica, Roboto, Arial, sans-serif, system-ui, 'Apple Color Emoji', 'Segoe UI Emoji';
   --font-display: roboto-regular, var(--font-body);
@@ -159,8 +159,7 @@ h6 {
 
   @include md {
     flex-direction: row;
-}
-
+  }
 }
 
 .mt-3 {
@@ -176,4 +175,4 @@ ol {
   li::marker {
     content: none;
   }
-}
+}

src/assets/scss/dropdown.scss

@@ -1,88 +1,87 @@
 .dropdown {
-    &--container {
-        text-align: left;
-        border: 1px solid #ccc;
-        position: relative;
-        border-radius: 5px;
+  &--container {
+    text-align: left;
+    border: 1px solid #ccc;
+    position: relative;
+    border-radius: 5px;
+  }
+
+  &--input {
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    user-select: none;
+    cursor: pointer;
+
+    svg {
+      transition: all 0.4s;
     }
-    
-    &--input {
-        padding: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        user-select: none;
-        cursor: pointer;
-        
-        svg {
-            transition: all .4s;
-        }
 
-        &.open svg {
-            transform: rotate(180deg);
-        }
+    &.open svg {
+      transform: rotate(180deg);
     }
-    
-    &--menu {
-        position: absolute;
-        transform: translateY(4px);
+  }
+
+  &--menu {
+    position: absolute;
+    transform: translateY(4px);
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    overflow: auto;
+    max-height: 150px;
+    background-color: #fff;
+    z-index: 99;
+
+    .search-box {
+      padding: 5px;
+      background-color: #eee;
+
+      input {
         width: 100%;
+        box-sizing: border-box;
+        padding: 5px;
         border: 1px solid #ccc;
         border-radius: 5px;
-        overflow: auto;
-        max-height: 150px;
-        background-color: #fff;
-        z-index: 99;
-        
-        .search-box {
-            padding: 5px;
-            background-color: #eee;
-            
-            input {
-                width: 100%;
-                box-sizing: border-box;
-                padding: 5px;
-                border: 1px solid #ccc;
-                border-radius: 5px;
-            }
-        }
-    }
-    
-    &--item {
-        padding: 5px;
-        cursor: pointer;
-    }
-    
-    &--item:hover {
-        background-color: #9fc3f870;
-    }
-    
-    &--item.selected {
-        background-color: #0d6efd;
-        color: #fff;
+      }
     }
+  }
 
-    &--tags {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 5px;
-    }
+  &--item {
+    padding: 5px;
+    cursor: pointer;
+  }
 
-    &--tag-item {
-        background-color: #ddd;
-        padding: 2px 4px;
-        border-radius: 2px;
-        display: flex;
-        align-items: center;
+  &--item:hover {
+    background-color: #9fc3f870;
+  }
 
-        &:hover {
-            cursor: pointer;
-        }
-    }
+  &--item.selected {
+    background-color: #0d6efd;
+    color: #fff;
+  }
+
+  &--tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
+
+  &--tag-item {
+    background-color: #ddd;
+    padding: 2px 4px;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
 
-    &--tag-close {
-        display: flex;
-        align-items: center;
+    &:hover {
+      cursor: pointer;
     }
+  }
 
-}
+  &--tag-close {
+    display: flex;
+    align-items: center;
+  }
+}

src/assets/scss/footer.scss

@@ -13,27 +13,27 @@ footer {
   .name {
     margin-left: 2rem;
   }
-  
+
   .socials {
     margin-right: 2rem;
-    transition: all .3s;
-    
-    span a{
+    transition: all 0.3s;
+
+    span a {
       display: flex;
       color: var(--color-foreground);
     }
-    
+
     svg {
       width: 24px;
       height: 24px;
       fill: var(--color-foreground);
       margin-left: 1rem;
     }
 
-    &:hover svg{
+    &:hover svg {
       fill: var(--color-links);
     }
-    &:hover span a{
+    &:hover span a {
       color: var(--color-links);
       text-decoration: none;
     }