Skip to content

E
edx-platform
Commit de127775 by Brian Talbot Committed by Diana Huang
Options

simplifying semantic and stylistic properties of skip nav UI

parent 43bdb5da
Showing with 35 additions and 30 deletions
cms/static/sass/_base.scss
...@@ -833,7 +833,23 @@ hr.divider { ...@@ -833,7 +833,23 @@ hr.divider {
// ui - skipnav // ui - skipnav
.nav-skip { .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;
}
} }
// ==================== // ====================
......
cms/templates/base.html
...@@ -30,13 +30,7 @@ ...@@ -30,13 +30,7 @@
</head> </head>
<body class="<%block name='bodyclass'></%block> hide-wip"> <body class="<%block name='bodyclass'></%block> hide-wip">
<nav class="nav-skip"> <a class="nav-skip" href="#content">${_("Skip to this view's content")}</a>
<ul class="list-nav">
<li class="nav-item">
<a href="#content">${_("Skip to this view's content")}</a>
</li>
</ul>
</nav>
<script type="text/javascript"> <script type="text/javascript">
window.baseUrl = "${settings.STATIC_URL}"; window.baseUrl = "${settings.STATIC_URL}";
......
common/static/sass/_mixins.scss
...@@ -240,13 +240,6 @@ ...@@ -240,13 +240,6 @@
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; width: 1px;
&:focus {
@extend %ui-depth5;
width: auto;
height: auto;
overflow: visible;
}
} }
// extends - content - wrapping // extends - content - wrapping
......
lms/static/sass/base/_base.scss
...@@ -288,5 +288,20 @@ mark { ...@@ -288,5 +288,20 @@ mark {
// ui - skipnav // ui - skipnav
.nav-skip { .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;
}
} }
lms/static/sass/base/_mixins.scss
...@@ -83,13 +83,6 @@ ...@@ -83,13 +83,6 @@
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; 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 // extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
......
lms/templates/main.html
...@@ -78,13 +78,7 @@ ...@@ -78,13 +78,7 @@
</head> </head>
<body class="<%block name='bodyclass'/>"> <body class="<%block name='bodyclass'/>">
<nav class="nav-skip"> <a class="nav-skip" href="#content">${_("Skip to this view's content")}</a>
<ul class="list-nav">
<li class="nav-item">
<a href="#content">${_("Skip to this view's content")}</a>
</li>
</ul>
</nav>
<%include file="mathjax_accessible.html" /> <%include file="mathjax_accessible.html" />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment