simplifying semantic and stylistic properties of skip nav UI

de127775 · Brian Talbot · Diana Huang · 43bdb5da · de127775 · de127775
Commit de127775 authored 11 years ago by Brian Talbot Committed by Diana Huang 11 years ago
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -833,7 +833,23 @@ hr.divider {

 // ui - skipnav
 .nav-skip {
-  @extend %cont-text-sr;
+  @include font-size(13);
+  display: block;
+  position: absolute;
+  left: 0px;
+  top: -($baseline*30);
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  background: $white;
+  border-bottom: 1px solid $gray-l4;
+  padding: ($baseline*0.75) ($baseline/2);
+
+  &:focus, &:active {
+    position: static;
+    width: auto;
+    height: auto;
+  }
 }

 // ====================

--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -30,13 +30,7 @@
  </head>

  <body class="<%block name='bodyclass'></%block> hide-wip">
-    <nav class="nav-skip">
-      <ul class="list-nav">
-        <li class="nav-item">
-          <a href="#content">${_("Skip to this view's content")}</a>
-        </li>
-      </ul>
-    </nav>
+    <a class="nav-skip" href="#content">${_("Skip to this view's content")}</a>

    <script type="text/javascript">
    window.baseUrl = "${settings.STATIC_URL}";

--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -240,13 +240,6 @@
  padding: 0;
  position: absolute;
  width: 1px;
-
-  &:focus {
-    @extend %ui-depth5;
-    width: auto;
-    height: auto;
-    overflow: visible;
-  }
 }

 // extends - content - wrapping

--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -288,5 +288,20 @@ mark {

 // ui - skipnav
 .nav-skip {
-  @extend %text-sr;
+  display: block;
+  position: absolute;
+  left: 0px;
+  top:- ($baseline*30);
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  background: $white;
+  border-bottom: 1px solid $border-color-4;
+  padding: ($baseline*0.75) ($baseline/2);
+
+  &:focus, &:active {
+    position: static;
+    width: auto;
+    height: auto;
+  }
 }
--- a/lms/static/sass/base/_mixins.scss
+++ b/lms/static/sass/base/_mixins.scss
@@ -83,13 +83,6 @@
  padding: 0;
  position: absolute;
  width: 1px;
-
-  &:focus {
-    @extend %ui-depth5;
-    width: auto;
-    height: auto;
-    overflow: visible;
-  }
 }

 // extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases

--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -78,13 +78,7 @@
 </head>

 <body class="<%block name='bodyclass'/>">
-  <nav class="nav-skip">
-    <ul class="list-nav">
-      <li class="nav-item">
-        <a href="#content">${_("Skip to this view's content")}</a>
-      </li>
-    </ul>
-  </nav>
+  <a class="nav-skip" href="#content">${_("Skip to this view's content")}</a>

  <%include file="mathjax_accessible.html" />