refactor: make breadcrumbs tighter (#234)

Co-authored-by: Joshua Chen <[email protected]>
facebookincubator · Apr 14, 2022 · 8ed53a8 · 8ed53a8
1 parent 45ba580
commit 8ed53a8
Showing 1 changed file with 20 additions and 28 deletions.
diff --git a/packages/core/styles/components/breadcrumb.pcss b/packages/core/styles/components/breadcrumb.pcss
@@ -7,11 +7,11 @@
 
 :root {
   --ifm-breadcrumb-border-radius: 1.5rem;
-  --ifm-breadcrumb-spacing: 0.0625rem;
+  --ifm-breadcrumb-spacing: 0.5rem;
   --ifm-breadcrumb-color-active: var(--ifm-color-primary);
   --ifm-breadcrumb-item-background-active: var(--ifm-hover-overlay);
-  --ifm-breadcrumb-padding-horizontal: 1rem;
-  --ifm-breadcrumb-padding-vertical: 0.5rem;
+  --ifm-breadcrumb-padding-horizontal: 0.8rem;
+  --ifm-breadcrumb-padding-vertical: 0.4rem;
   --ifm-breadcrumb-size-multiplier: 1;
   --ifm-breadcrumb-separator: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
   --ifm-breadcrumb-separator-filter: none;
@@ -26,31 +26,23 @@
   &__item {
     display: inline-block;
 
-    &:not(:first-child) {
-      margin-left: var(--ifm-breadcrumb-spacing);
-    }
-
-    &:not(:last-child) {
-      margin-right: var(--ifm-breadcrumb-spacing);
-
-      &:after {
-        background: var(--ifm-breadcrumb-separator) center;
-        content: ' ';
-        display: inline-block;
-        filter: var(--ifm-breadcrumb-separator-filter);
-        height: calc(
-          var(--ifm-breadcrumb-separator-size) *
-            var(--ifm-breadcrumb-size-multiplier) *
-            var(--ifm-breadcrumb-separator-size-multiplier)
-        );
-        margin: 0 0.5rem;
-        opacity: 0.5;
-        width: calc(
-          var(--ifm-breadcrumb-separator-size) *
-            var(--ifm-breadcrumb-size-multiplier) *
-            var(--ifm-breadcrumb-separator-size-multiplier)
-        );
-      }
+    &:not(:last-child):after {
+      background: var(--ifm-breadcrumb-separator) center;
+      content: ' ';
+      display: inline-block;
+      filter: var(--ifm-breadcrumb-separator-filter);
+      height: calc(
+        var(--ifm-breadcrumb-separator-size) *
+          var(--ifm-breadcrumb-size-multiplier) *
+          var(--ifm-breadcrumb-separator-size-multiplier)
+      );
+      margin: 0 var(--ifm-breadcrumb-spacing);
+      opacity: 0.5;
+      width: calc(
+        var(--ifm-breadcrumb-separator-size) *
+          var(--ifm-breadcrumb-size-multiplier) *
+          var(--ifm-breadcrumb-separator-size-multiplier)
+      );
     }
 
     &--active {