Merge pull request #1043 from Shopify/firefox-scroll-bug

Fix scroll bug on firefox

_includes/sidebar.html

@@ -6,17 +6,26 @@
       <a href="{{ "/" | relative_url }}">Liquid</a>
     {% endif %}
   </header>
-  <nav class="sidebar__nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
 
-    {% for section in sections %}
+  {%- assign sections = "basics, tags, filters" | split: ", " -%}
-    <h3 class="section__header">{{ section | capitalize }}</h3>
 
-    <ul class="section__links">
+  <nav class="sidebar__nav">
-    {% for item in site.pages %}{% if item.url contains section/ %}{% unless item.path contains "index" %}
+    <div class="sidebar__nav-interior">
-      <li><a href="{{ item.url | relative_url }}" class="section__link{% if item.url contains page.url and page.url != '/' and page.type != 'index' %} section__link--is-active{% endif %}">{{ item.title }}</a></li>
+      {%- for section in sections -%}
-    {% endunless %}{% endif %}{% endfor %}
+        <h3 class="section__header">{{ section | capitalize }}</h3>
-    </ul>
-    {% endfor %}
 
+        <ul class="section__links">
+        {%- for item in site.pages -%}
+          {%- if item.url contains section/ -%}
+            {%- unless item.path contains "index" -%}
+              <li class="section__item">
+                <a href="{{ item.url | relative_url }}" class="section__link {% if item.url contains page.url and page.url != '/' and page.type != 'index' %} section__link--is-active{% endif %}">{{ item.title }}</a>
+              </li>
+            {%- endunless -%}
+          {%- endif -%}
+        {%- endfor -%}
+        </ul>
+      {%- endfor -%}
+    </div>
   </nav>
-</div>
+</div>

_sass/modules/_layout.scss

@@ -1,4 +1,3 @@
-
 $sidebar-width: 250px;
 $logo-height: 130px;
 $wrapper-width: 800px;
@@ -95,34 +94,16 @@ body {
 }
 
 .sidebar__nav {
-  padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency.
+
   font-weight: bold;
   max-height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
-
-  li {
-    list-style: none;
-
-    a {
-      color: $color-white;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
 }
 
-.section {
+.sidebar__nav-interior {
-  margin: 0px;
+  height: 100%;
-
+  // Add a bit more padding at the bottom for consistency.
-  > li {
+  padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height);
-    margin-bottom: $spacing-unit / 2;
-
-    &:last-child {
-      margin-bottom: $spacing-unit;
-    }
-  }
 }
 
 .section__header {
@@ -131,13 +112,22 @@ body {
   color: $color-white;
   margin-top: 0;
   margin-bottom: $spacing-unit / 4;
+
+  .section__links + & {
+    margin-top: $spacing-unit;
+  }
 }
 
 .section__links {
-  margin-left: $spacing-unit / 2;
-  margin-bottom: $spacing-unit;
-  font-weight: normal;
   font-size: 0.9em;
+  font-weight: normal;
+
+  list-style: none;
+  margin-left: $spacing-unit / 2;
+}
+
+.section__item {
+  list-style: none;
 }
 
 .section__link {
@@ -145,13 +135,26 @@ body {
   margin-top: $spacing-unit/4;
   opacity: 0.75;
   text-decoration: none;
+  color: $color-white;
 
   &:hover {
     opacity: 1;
+    text-decoration: none;
+  }
+
+  &:empty {
+    // there is an error in the liquid logic that spits out a
+    // empty last-child
+    display: none;
+  }
+
+  &:visited {
+    color: $color-white;
   }
 }
 
 .section__link--is-active {
   font-weight: bold;
   opacity: 1;
+  color: $color-white;
 }