Styleguide Updates

fixes: CNVS-19415

This makes it so our styleguide nav doesn't have smooth scrolling
and the Tour link is no longer available in the sub-menu.

Test Plan:
- Go to /styleguide and click on something, you should be brought
directly to the section
- Go to Patterns. "Tour Popups" should no longer be in the sub-menu

Change-Id: Ie9396130655b5d6fab19c1a64f9a5625e6c19f22
Reviewed-on: https://gerrit.instructure.com/50660
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
Tested-by: Jenkins
QA-Review: Matt Fairbourn <mfairbourn@instructure.com>

app/coffeescripts/bundles/styleguide.coffee

@@ -149,19 +149,6 @@ require [
   $("#repeat").buttonset()
 
   $(".styleguide-datetime_field-example").datetime_field()
-
-  # Smooth anchor scrolling
-
-  $(".Sg-header__Subnavigation a[href*=#]:not([href=#])").click ->
-    if location.pathname.replace(/^\//, "") is @pathname.replace(/^\//, "") and location.hostname is @hostname
-      target = $(@hash)
-      headerHeight = $(".Sg-header").height()
-      target = (if target.length then target else $("[name=" + @hash.slice(1) + "]"))
-      if target.length
-        $("html,body").animate
-          scrollTop: target.offset().top - headerHeight
-        , 3000
-        false
   
   #Global Navigation Hide/Show Subnav
   selectCategory = (event) ->

app/stylesheets/pages/styleguide/_styleguide_app.scss

@@ -17,6 +17,17 @@
 }
 .Sg-Section {
   padding-bottom: 100px; // adds some padding between our sections and headers
+  
+}
+$sg-Header-height: 85px;
+.Sg-Header {
+  height: $sg-Header-height;
+}
+.Sg-Anchor {
+  display: block;
+  height: $sg-Header-height; 
+  margin-top: -$sg-Header-height; 
+  visibility: hidden;
 }
 .Sg-header__Subnavigation-item {
   // to account for our added "section" for canvas sg nav

app/stylesheets/pages/styleguide/_styleguide_layout.scss

@@ -88,7 +88,8 @@ body.Sg-only {
   }
   &:focus {
     text-decoration: none;  
-  }
+    color: $sg-header-navigation-item;
+  }  
 }
 .Sg-header__Navigation-item.active {
   background: $sg-background-sub-nav;

doc/styleguide/template.mustache

@@ -45,7 +45,6 @@
       <a class="Sg-header__Subnavigation-item" href="#popovers">Popovers</a>
       <a class="Sg-header__Subnavigation-item" href="#progress_bar">Progress Bar</a>
       <a class="Sg-header__Subnavigation-item" href="#publish_state">Publish State</a>
-      <a class="Sg-header__Subnavigation-item" href="#tour_popups">Tour Popups</a>
     </section>
   </nav>  
 </header>
@@ -57,7 +56,8 @@
     {{#docs}}
       <section class="Sg-Section {{id}}" style="position: relative;">
         <div class="Sg-Content">  
-          <h1 id="{{id}}">{{component}}</h1>   
+          <span id="{{id}}" class="Sg-Anchor"></span>
+          <h1>{{component}}</h1>   
           
           <div class="sg-src-file-path">{{file}}</div>
           <div class="grid-row">