refactor: avoid top margin for first menu item (#149)

facebookincubator · Jul 9, 2021 · b5de1a6 · b5de1a6
1 parent 8d6bcfe
commit b5de1a6
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 62 deletions.
diff --git a/packages/core/dist/css/default-dark/default-dark-rtl.css b/packages/core/dist/css/default-dark/default-dark-rtl.css
@@ -2344,9 +2344,9 @@ hr:after {
       margin-right: var(--ifm-menu-link-padding-horizontal);
     }
 
-.menu__list-item {
-    margin-top: 0.25rem;
-  }
+.menu__list-item:not(:first-child) {
+      margin-top: 0.25rem;
+    }
 
 .menu__list-item--collapsed .menu__list {
         height: 0;
@@ -2381,17 +2381,21 @@ hr:after {
       transition-timing-function: var(--ifm-transition-timing-default);
     }
 
-.menu__link--sublist:after {
-      background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
-      content: ' ';
-      display: inline-block;
-      filter: var(--ifm-menu-link-sublist-icon-filter);
-      height: 1.25rem;
-      min-width: 1.25rem;
-      transform: rotate(-180deg);
-      transition: transform var(--ifm-transition-fast) linear;
+.menu__link--sublist {
+      margin-bottom: 0.25rem;
     }
 
+.menu__link--sublist:after {
+        background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+        content: ' ';
+        display: inline-block;
+        filter: var(--ifm-menu-link-sublist-icon-filter);
+        height: 1.25rem;
+        min-width: 1.25rem;
+        transform: rotate(-180deg);
+        transition: transform var(--ifm-transition-fast) linear;
+      }
+
 .menu__link--active {
       color: var(--ifm-menu-color-active);
     }

diff --git a/packages/core/dist/css/default-dark/default-dark-rtl.min.css b/packages/core/dist/css/default-dark/default-dark-rtl.min.css
diff --git a/packages/core/dist/css/default-dark/default-dark.css b/packages/core/dist/css/default-dark/default-dark.css
@@ -2344,9 +2344,9 @@ hr:after {
       margin-left: var(--ifm-menu-link-padding-horizontal);
     }
 
-.menu__list-item {
-    margin-top: 0.25rem;
-  }
+.menu__list-item:not(:first-child) {
+      margin-top: 0.25rem;
+    }
 
 .menu__list-item--collapsed .menu__list {
         height: 0;
@@ -2381,17 +2381,21 @@ hr:after {
       transition-timing-function: var(--ifm-transition-timing-default);
     }
 
-.menu__link--sublist:after {
-      background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
-      content: ' ';
-      display: inline-block;
-      filter: var(--ifm-menu-link-sublist-icon-filter);
-      height: 1.25rem;
-      min-width: 1.25rem;
-      transform: rotate(180deg);
-      transition: transform var(--ifm-transition-fast) linear;
+.menu__link--sublist {
+      margin-bottom: 0.25rem;
     }
 
+.menu__link--sublist:after {
+        background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+        content: ' ';
+        display: inline-block;
+        filter: var(--ifm-menu-link-sublist-icon-filter);
+        height: 1.25rem;
+        min-width: 1.25rem;
+        transform: rotate(180deg);
+        transition: transform var(--ifm-transition-fast) linear;
+      }
+
 .menu__link--active {
       color: var(--ifm-menu-color-active);
     }

diff --git a/packages/core/dist/css/default-dark/default-dark.min.css b/packages/core/dist/css/default-dark/default-dark.min.css
diff --git a/packages/core/dist/css/default/default-rtl.css b/packages/core/dist/css/default/default-rtl.css
@@ -2328,9 +2328,9 @@ hr:after {
       margin-right: var(--ifm-menu-link-padding-horizontal);
     }
 
-.menu__list-item {
-    margin-top: 0.25rem;
-  }
+.menu__list-item:not(:first-child) {
+      margin-top: 0.25rem;
+    }
 
 .menu__list-item--collapsed .menu__list {
         height: 0;
@@ -2365,17 +2365,21 @@ hr:after {
       transition-timing-function: var(--ifm-transition-timing-default);
     }
 
-.menu__link--sublist:after {
-      background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
-      content: ' ';
-      display: inline-block;
-      filter: var(--ifm-menu-link-sublist-icon-filter);
-      height: 1.25rem;
-      min-width: 1.25rem;
-      transform: rotate(-180deg);
-      transition: transform var(--ifm-transition-fast) linear;
+.menu__link--sublist {
+      margin-bottom: 0.25rem;
     }
 
+.menu__link--sublist:after {
+        background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+        content: ' ';
+        display: inline-block;
+        filter: var(--ifm-menu-link-sublist-icon-filter);
+        height: 1.25rem;
+        min-width: 1.25rem;
+        transform: rotate(-180deg);
+        transition: transform var(--ifm-transition-fast) linear;
+      }
+
 .menu__link--active {
       color: var(--ifm-menu-color-active);
     }

diff --git a/packages/core/dist/css/default/default-rtl.min.css b/packages/core/dist/css/default/default-rtl.min.css
diff --git a/packages/core/dist/css/default/default.css b/packages/core/dist/css/default/default.css
@@ -2328,9 +2328,9 @@ hr:after {
       margin-left: var(--ifm-menu-link-padding-horizontal);
     }
 
-.menu__list-item {
-    margin-top: 0.25rem;
-  }
+.menu__list-item:not(:first-child) {
+      margin-top: 0.25rem;
+    }
 
 .menu__list-item--collapsed .menu__list {
         height: 0;
@@ -2365,17 +2365,21 @@ hr:after {
       transition-timing-function: var(--ifm-transition-timing-default);
     }
 
-.menu__link--sublist:after {
-      background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
-      content: ' ';
-      display: inline-block;
-      filter: var(--ifm-menu-link-sublist-icon-filter);
-      height: 1.25rem;
-      min-width: 1.25rem;
-      transform: rotate(180deg);
-      transition: transform var(--ifm-transition-fast) linear;
+.menu__link--sublist {
+      margin-bottom: 0.25rem;
     }
 
+.menu__link--sublist:after {
+        background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+        content: ' ';
+        display: inline-block;
+        filter: var(--ifm-menu-link-sublist-icon-filter);
+        height: 1.25rem;
+        min-width: 1.25rem;
+        transform: rotate(180deg);
+        transition: transform var(--ifm-transition-fast) linear;
+      }
+
 .menu__link--active {
       color: var(--ifm-menu-color-active);
     }

diff --git a/packages/core/dist/css/default/default.min.css b/packages/core/dist/css/default/default.min.css
diff --git a/packages/core/styles/components/menu.pcss b/packages/core/styles/components/menu.pcss
@@ -36,7 +36,9 @@
   }
 
   &__list-item {
-    margin-top: 0.25rem;
+    &:not(:first-child) {
+      margin-top: 0.25rem;
+    }
 
     &--collapsed {
       ^^&__list {
@@ -66,15 +68,19 @@
       text-decoration: none;
     }
 
-    &--sublist:after {
-      background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
-      content: ' ';
-      display: inline-block;
-      filter: var(--ifm-menu-link-sublist-icon-filter);
-      height: 1.25rem;
-      min-width: 1.25rem;
-      transform: rotate(180deg);
-      @mixin transition transform, var(--ifm-transition-fast), linear;
+    &--sublist {
+      margin-bottom: 0.25rem;
+
+      &:after {
+        background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+        content: ' ';
+        display: inline-block;
+        filter: var(--ifm-menu-link-sublist-icon-filter);
+        height: 1.25rem;
+        min-width: 1.25rem;
+        transform: rotate(180deg);
+        @mixin transition transform, var(--ifm-transition-fast), linear;
+      }
     }
 
     &:hover {