Merge pull request #5941 from dfsmania/improve-dropdowns

Improve dropdowns and dropdown menu styles

Author: puikinsh

src/html/components/dashboard/_topbar.astro

@@ -209,8 +209,8 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
           <!--end::Menu Body-->
           <!--begin::Menu Footer-->
           <li class="user-footer">
-            <a href="#" class="btn btn-default btn-flat">Profile</a>
-            <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
+            <a href="#" class="btn btn-outline-secondary">Profile</a>
+            <a href="#" class="btn btn-outline-danger float-end">Sign out</a>
           </li>
           <!--end::Menu Footer-->
         </ul>

src/html/components/docs/components/main-header.mdx

@@ -185,8 +185,8 @@
           </li>
           <!-- Menu Footer-->
           <li class="user-footer">
-            <a href="#" class="btn btn-default btn-flat">Profile</a>
-            <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
+            <a href="#" class="btn btn-outline-secondary">Profile</a>
+            <a href="#" class="btn btn-outline-danger float-end">Sign out</a>
           </li>
         </ul>
       </li>

src/scss/_dropdown.scss

@@ -3,14 +3,11 @@
 //
 
 // General Dropdown Rules
-//.dropdown-item {
-//  &:first-of-type {
-//    @include border-top-radius($border-radius);
-//  }
-//  &:last-of-type {
-//    @include border-bottom-radius($border-radius);
-//  }
-//}
+
+// Ensure children cannot overflow and break the dropdown border radius
+.dropdown-menu {
+  overflow: hidden;
+}
 
 .fs-7 {
   .dropdown-menu {
@@ -158,15 +155,9 @@
   }
 
   > .dropdown-menu {
-    @include border-top-radius(0);
     width: 280px;
     padding: 0;
 
-    &,
-    > .user-body {
-      @include border-bottom-radius(4px);
-    }
-
     // Header menu
     > li.user-header {
       min-height: 175px;
@@ -205,10 +196,6 @@
 
       a {
         text-decoration: none;
-        @include media-breakpoint-up(sm) {
-          color: var(--#{$prefix}body-color) !important;
-          background-color: var(--#{$prefix}body-bg) !important;
-        }
       }
     }
 
@@ -217,16 +204,6 @@
       @include clearfix();
       padding: 10px;
       background-color: var(--#{$prefix}light-bg);
-
-      .btn-default {
-        color: var(--#{$prefix}body-color);
-
-        &:hover {
-          @include media-breakpoint-up(sm) {
-            background-color: var(--#{$prefix}body-bg);
-          }
-        }
-      }
     }
   }