Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplifying semantic and stylistic properties of skip nav UI

Browse Source
This commit is contained in:
Brian Talbot
2013-10-24 12:37:54 -04:00
committed by Diana Huang
parent 43bdb5da54
commit de12777555
6 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
cms/static/sass/_base.scss
View File

@@ -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;
}
}
// ====================

8
cms/templates/base.html
View File

@@ -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}";

7
common/static/sass/_mixins.scss
View File

@@ -240,13 +240,6 @@
padding: 0;
position: absolute;
width: 1px;
&:focus {
@extend %ui-depth5;
width: auto;
height: auto;
overflow: visible;
}
}
// extends - content - wrapping

17
lms/static/sass/base/_base.scss
View File

@@ -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;
}
}

7
lms/static/sass/base/_mixins.scss
View File

@@ -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

8
lms/templates/main.html
View File

@@ -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" />