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

Added styles for other and made the sequnce always fit on one line

Browse Source
This commit is contained in:
Kyle Fiedler
2012-02-06 12:56:20 -05:00
parent 933b95acee
commit 51821cdeba
2 changed files with 63 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
sass/_courseware-sequence-nav.scss
View File

@@ -3,6 +3,10 @@ nav.sequence-nav {
margin-bottom: $body-line-height;
ol {
display: table-row;
float: left;
width: flex-grid(7.5,9) + flex-gutter();
a {
@extend .block-link;
}
@@ -37,76 +41,65 @@ nav.sequence-nav {
}
li {
@include box-shadow(1px 0 0 #fff);
background-position: center center;
border: none;
border-right: 1px solid darken(#F6EFD4, 10%);
@include box-shadow(1px 0 0 #fff);
cursor: pointer;
display: table-cell;
padding: lh(.75);
float: left;
padding: 14px 14px;
width: 18px;
//problem
// &.seq_problem_inactive {
// width: 14px;
// background: url('/static/images/problem-icon.png') 13px 13px no-repeat;
// @extend .inactive;
// }
// &.seq_problem_visited {
// width: 14px;
// background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
// &:hover {
// background-color: #F6EFD4;
// }
// }
// &.seq_problem_active {
// width: 14px;
// background: #FFFBEB url('/static/images/problem-icon.png') -22px 13px no-repeat;
// @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
// &:hover {
// background-color: #F6EFD4;
// }
// @media screen and (max-width: 800px) {
// padding: 12px 8px;
// }
//video
&.seq_video_inactive {
@extend .inactive;
background-image: url('/static/images/video-icon.png');
background-position: 13px 15px;
background-image: url('/static/images/sequence-nav/video-icon-normal.png');
}
&.seq_video_visited {
@extend .visited;
background-image: url('/static/images/video-icon.png');
background-position: -81px 15px;
background-image: url('/static/images/sequence-nav/video-icon-visited.png');
}
&.seq_video_active {
@extend .active;
background-image: url('/static/images/video-icon.png');
background-position: -32px 15px;
background-image: url('/static/images/sequence-nav/video-icon-current.png');
}
//vertical
&.seq_vertical_inactive, &.seq_problem_inactive {
background-image: url('/static/images/vertical-icon.png');
background-position: -82px 15px;
//other
&.seq_other_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/document-icon-normal.png');
}
&.seq_other_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/document-icon-visited.png');
}
&.seq_other_active {
@extend .active;
background-image: url('/static/images/sequence-nav/document-icon-current.png');
}
//vertical & problems
&.seq_vertical_inactive, &.seq_problem_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/list-icon-normal.png');
}
&.seq_vertical_visited, &.seq_problem_visited {
background-image: url('/static/images/vertical-icon.png');
background-position: 13px 15px;
@extend .visited;
background-image: url('/static/images/sequence-nav/list-icon-visited.png');
}
&.seq_vertical_active, &.seq_problem_active {
background-image: url('/static/images/vertical-icon.png');
background-position: -35px 15px;
@extend .active;
background-image: url('/static/images/sequence-nav/list-icon-current.png');
}
}
@@ -115,28 +108,49 @@ nav.sequence-nav {
ul {
float: right;
margin-right: 1px;
width: flex-grid(1.5, 9);
display: table-row;
li {
float: left;
&.prev, &.next {
// color: darken(#F6EFD4, 80%);
// letter-spacing: 1px;
// text-transform: uppercase;
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
background: darken(#F6EFD4, 5%);
background-color: darken(#F6EFD4, 5%);
background-position: center center;
background-repeat: no-repeat;
border-left: 1px solid darken(#f6efd4, 20%);
color: darken(#F6EFD4, 80%);
float: right;
letter-spacing: 1px;
padding: lh(.75);
text-transform: uppercase;
cursor: pointer;
display: table-cell;
padding: 14px;
text-indent: -9999px;
width: 72px;
&:hover {
text-decoration: none;
color: darken(#F6EFD4, 60%);
text-decoration: none;
background: none;
background-color: none;
}
}
&.prev {
background-image: url('/static/images/sequence-nav/previous-icon.png');
&:hover {
background-color: none;
}
}
&.next {
background-image: url('/static/images/sequence-nav/next-icon.png');
&:hover {
background-color: none;
}
}
}
}
}

2
seq_module.html
View File

@@ -6,8 +6,8 @@
</ol>
<ul>
<li id="${ id }next" class="next">Next</li>
<li id="${ id }prev" class="prev">Previous</li>
<li id="${ id }next" class="next">Next</li>
</ul>
</nav>