Fix button paddings on navbar

LeunensMichiel · Dec 5, 2021 · db15d97 · db15d97
1 parent 356d432
commit db15d97
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 20 deletions.
diff --git a/components/common/Navbar/NavItem.module.scss b/components/common/Navbar/NavItem.module.scss
@@ -33,25 +33,16 @@
     background: var(--color-bg-secondary);
     color: inherit;
   }
-  &::after {
-    content: ' ';
-    position: absolute;
-    bottom: -0.5rem;
-    left: 0;
-    width: 100%;
-    height: 0.5rem;
-    background: transparent;
-  }
 }
 
 .subMenuButton {
-  padding: 0;
   border: none;
   color: inherit;
   font-weight: inherit;
   background: inherit;
   min-height: unset;
   line-height: inherit;
+  border-radius: var(--border-radius) !important;
 
   &:hover,
   &:focus,
@@ -66,7 +57,11 @@
   color: inherit;
   border-radius: var(--border-radius);
   top: calc(100% + 0.5rem) !important;
-  padding: 1rem 1rem 0 1rem;
+  padding: 1rem;
+
+  @include theme.breakpoint-up(lg) {
+    padding: 1rem 1rem 0rem 1rem;
+  }
 }
 
 .activeLink {

diff --git a/components/common/Navbar/NavItem.tsx b/components/common/Navbar/NavItem.tsx
@@ -39,7 +39,7 @@ const NavItem: FC<NavItemProps> = ({ children, label, link }) => {
           willFloat
           willOpenOnHover
           startOpen={open}
-          buttonClassName={styles.subMenuButton}
+          buttonClassName={cn(styles.subMenuButton, 'parentSubMenuButton')}
           listClassName={styles.subMenuList}
           containerOpenClassName={styles.subMenuOpen}
           containerClassName={cn(

diff --git a/components/common/Navbar/NavItems.module.scss b/components/common/Navbar/NavItems.module.scss
@@ -43,10 +43,11 @@
   position: relative;
 
   & > * {
+    margin-bottom: 0.5rem;
+  }
+  & > a,
+  & > div > [class~='parentSubMenuButton'] {
     padding: 1rem;
-    &:not(:last-child) {
-      margin-bottom: 0.5rem;
-    }
   }
 
   @include theme.breakpoint-up(lg) {
@@ -55,11 +56,12 @@
     align-items: stretch;
     justify-content: flex-start;
     & > * {
+      margin-right: 0.5rem;
+      margin-bottom: unset;
+    }
+    & > a,
+    & > div > [class~='parentSubMenuButton'] {
       padding: 0.75rem 1.25rem;
-      &:not(:last-child) {
-        margin-right: 0.5rem;
-        margin-bottom: unset;
-      }
     }
   }
 }
diff --git a/components/ui/Dropdown/Dropdown.module.scss b/components/ui/Dropdown/Dropdown.module.scss
@@ -28,6 +28,16 @@ $variants: primary, secondary, success, danger, warning, info, 'transparent';
         transform: rotate(90deg);
       }
     }
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      bottom: -0.5rem;
+      left: 0;
+      width: 100%;
+      height: 0.5rem;
+      background: transparent;
+    }
   }
 }
 

diff --git a/components/ui/Dropdown/Dropdown.tsx b/components/ui/Dropdown/Dropdown.tsx
@@ -54,11 +54,11 @@ const Dropdown: React.FC<DropdownProps> = ({
       onMouseLeave={() => willOpenOnHover && setOpen(touched || false)}
     >
       <Button
+        {...btnProps}
         className={cn(styles.dropdownButton, buttonClassName)}
         size="sm"
         variant={variant}
         iconRight={<Chevron />}
-        {...btnProps}
         aria-label={`Open ${label} menu`}
         onClick={handleClick}
       >