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 {
// 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;
}
}
// ====================
......
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}";
......
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
......
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;
}
}
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
......
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" />
......
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