feat(left-nav): Update medium width in _sizes.media.scss (#3131)

* feat(left-nav): Update var in _sizes.media.scss

* feat(left-nav): Revert var in _sizes.media.scss

* feat(left-nav): manage left margin on left nav logo

Author: joshmarnold

src/features/collapsible-sidebar/CollapsibleSidebar.scss

@@ -7,6 +7,7 @@ $collapsible-side-bar-collapsed-width: 68px;
 $collapsible-side-bar-h-padding: $bdl-grid-unit * 3;
 $collapsible-side-bar-v-padding: $bdl-grid-unit * 3;
 $collaspsible-side-bar-logo-v-margin: $collapsible-side-bar-v-padding + $bdl-grid-unit;
+$collaspsible-side-bar-logo-h-margin-left: $collapsible-side-bar-h-padding + $bdl-grid-unit * 2 - 1px;
 $left-sidebar-z-index: 40 !default;
 
 .bdl-CollapsibleSidebar-wrapper {
@@ -50,7 +51,7 @@ $left-sidebar-z-index: 40 !default;
     // TODO: is there a grid-based value for this sizing?
     // fixed height is to keep the menu in the same spot vertically when Box logo is hidden
     height: 32px + $collapsible-side-bar-v-padding + 4 * 1px; // logo height + padding + border
-    margin: $collaspsible-side-bar-logo-v-margin -1px $collaspsible-side-bar-logo-v-margin $collapsible-side-bar-h-padding - 1px;
+    margin: $collaspsible-side-bar-logo-v-margin -1px $collaspsible-side-bar-logo-v-margin $collaspsible-side-bar-logo-h-margin-left;
     overflow-x: hidden;
 
     .bdl-CollapsibleSidebar-toggleButton {
@@ -111,14 +112,10 @@ $left-sidebar-z-index: 40 !default;
     }
 }
 
-@include large-size {
+@include breakpoint($xlarge-screen) {
     .bdl-CollapsibleSidebar-logo {
-        margin-left: $collapsible-side-bar-h-padding + $bdl-grid-unit * 2 - 1px /* border */;
-    }
-}
+        margin-left: $collapsible-side-bar-h-padding - 1px;
 
-@include medium-minus-size {
-    .bdl-CollapsibleSidebar-logo {
         .bdl-CollapsibleSidebar-toggleButton {
             display: block;
         }