Add padding between nav and filter in S/M Viewport (#808) rdar://124561315

Add padding between nav and filter in S/M Viewport (#808) rdar://124561315

Author: hqhhuang

src/components/DocumentationTopic/DocumentationNav/LanguageToggle.vue

@@ -316,7 +316,7 @@ $nav-menu-toggle-label-margin: 6px;
     display: inline-block;
 
     &:not(:first-child) {
-      border-left: 1px solid var(--color-grid);
+      border-left: $generic-border-style;
       margin-left: $nav-menu-toggle-label-margin;
       padding-left: $nav-menu-toggle-label-margin;
     }

src/components/Footer.vue

@@ -30,7 +30,7 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .footer {
-  border-top: 1px solid var(--color-grid);
+  border-top: $generic-border-style;
 }
 
 .row {

src/components/Navigator/NavigatorCard.vue

@@ -977,7 +977,7 @@ export default {
 
 // unfortunately we need to hard-code the filter height
 $filter-height: 71px;
-$filter-height-small: 50px;
+$filter-height-small: 60px;
 $close-icon-size: 19px;
 $technology-title-background: var(--color-fill) !default;
 $technology-title-background-active: var(--color-fill-gray-quaternary) !default;
@@ -1044,7 +1044,7 @@ $navigator-card-vertical-spacing: 8px !default;
 .navigator-filter {
   box-sizing: border-box;
   padding: 15px var(--nav-filter-horizontal-padding);
-  border-top: 1px solid var(--color-grid);
+  border-top: $generic-border-style;
   height: $filter-height;
   display: flex;
   align-items: flex-end;
@@ -1060,7 +1060,7 @@ $navigator-card-vertical-spacing: 8px !default;
   @include breakpoint(medium, nav) {
     --nav-filter-horizontal-padding: 20px;
     border: none;
-    padding-top: 0px;
+    padding-top: 10px;
     padding-bottom: 10px;
     height: $filter-height-small;
   }

src/components/Navigator/QuickNavigationButton.vue

@@ -30,7 +30,7 @@ export default { name: 'QuickNavigationButton' };
   align-items: center;
   justify-content: center;
   width: $icon-size-default;
-  border: 1px solid var(--color-grid);
+  border: $generic-border-style;
   height: 100%;
   border-radius: $small-border-radius;
   transition: background-color .15s;

src/components/SuggestLang.vue

@@ -82,7 +82,7 @@ $banner-icon-padding: $nav-padding-small * 0.25;
   color: light-color(fill);
   display: flex;
   justify-content: center;
-  border-bottom: 1px solid var(--color-grid);
+  border-bottom: $generic-border-style;
 
   &__wrapper {
     display: flex;

src/styles/core/_vars.scss

@@ -13,6 +13,8 @@ $globalnav-height: 44px;
 
 $form-focus-size: 4px;
 
+$generic-border-style: 1px solid var(--color-grid);
+
 // Border radius
 $border-radius: var(--border-radius, 4px) !default;
 $nano-border-radius: $border-radius !default;

src/views/DocumentationTopic.vue

@@ -469,14 +469,14 @@ export default {
 .doc-topic-aside {
   height: 100%;
   box-sizing: border-box;
-  border-right: 1px solid var(--color-grid);
+  border-right: $generic-border-style;
 
   @include breakpoint(medium, nav) {
     background: var(--color-fill);
     border-right: none;
 
     .sidebar-transitioning & {
-      border-right: 1px solid var(--color-grid);
+      border-right: $generic-border-style;
     }
   }
 }
@@ -494,8 +494,8 @@ export default {
   @include inTargetWeb {
     @include breakpoint-full-width-container();
     @include breakpoints-from(xlarge) {
-      border-left: 1px solid var(--color-grid);
-      border-right: 1px solid var(--color-grid);
+      border-left: $generic-border-style;
+      border-right: $generic-border-style;
       box-sizing: border-box;
     }
   }