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

Merge pull request #7763 from edx/clrux/sequence-nav-button-icons

Browse Source 
Changing sequence nav buttons from images to icon fonts
This commit is contained in:
Chris
2015-04-28 14:05:38 -04:00
parent 6eda3ef758 74ce5cbb87
commit d9e13d22b8
2 changed files with 6 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
common/lib/xmodule/xmodule/css/sequence/display.scss
View File

@@ -239,47 +239,22 @@ $sequence--border-color: #C8C8C8;
.sequence-nav-button {
@extend %ui-depth3;
@include transition(all .2s $ease-in-out-quad 0s);
position: absolute;
display: block;
top: 0;
width: ($baseline*2);
height: 46px;
background-position: center;
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
@include transition(all .2s $ease-in-out-quad 0s);
padding: 0;
&.button-previous {
@include border-radius(35px, 0, 0, 35px);
@include left(0);
background-position: center 15px;
// CASE: left to right layout
@include ltr {
background-image: url('../images/sequence-nav/previous-icon.png');
}
// CASE: right to left layout
@include rtl {
background-image: url('../images/sequence-nav/next-icon.png');
}
}
&.button-next {
@include border-radius(0, 35px, 35px, 0);
@include right(0);
background-position: center 15px;
// CASE: left to right layout
@include ltr {
background-image: url('../images/sequence-nav/next-icon.png');
}
// CASE: right to left layout
@include rtl {
background-image: url('../images/sequence-nav/previous-icon.png');
}
}
&:hover,

8
lms/templates/seq_module.html
View File

@@ -2,7 +2,7 @@
<div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" >
<div class="sequence-nav">
<button class="sequence-nav-button button-previous">${_('Previous')}</button>
<button class="sequence-nav-button button-previous"><span class="icon fa fa-chevron-left" aria-hidden="true"></span><span class="sr">${_('Previous')}</span></button>
<nav class="sequence-list-wrapper" aria-label="${_('Unit')}">
<ol id="sequence-list">
% for idx, item in enumerate(items):
@@ -27,7 +27,7 @@
% endfor
</ol>
</nav>
<button class="sequence-nav-button button-next">${_('Next')}</button>
<button class="sequence-nav-button button-next"><span class="icon fa fa-chevron-right" aria-hidden="true"></span><span class="sr">${_('Next')}</span></button>
</div>
<div class="sr-is-focusable" tabindex="-1"></div>
@@ -43,8 +43,8 @@
<div id="seq_content"></div>
<nav class="sequence-bottom" aria-label="${_('Section')}">
<button class="sequence-nav-button button-previous">${_('Previous')}</button>
<button class="sequence-nav-button button-next">${_('Next')}</button>
<button class="sequence-nav-button button-previous"><span class="icon fa fa-chevron-left" aria-hidden="true"></span><span class="sr">${_('Previous')}</span></button>
<button class="sequence-nav-button button-next"><span class="icon fa fa-chevron-right" aria-hidden="true"></span><span class="sr">${_('Next')}</span></button>
</nav>
</div>