143 lines
3.4 KiB
SCSS
143 lines
3.4 KiB
SCSS
nav.sequence-nav {
|
|
@extend .topbar;
|
|
margin-bottom: $body-line-height;
|
|
|
|
ol {
|
|
a {
|
|
@extend .block-link;
|
|
}
|
|
|
|
.inactive {
|
|
background-repeat: no-repeat;
|
|
|
|
&:hover {
|
|
background-color: lighten(#F6EFD4, 3%);
|
|
}
|
|
}
|
|
|
|
.visited {
|
|
background-color: shade(#F6EFD4, 10%);
|
|
background-repeat: no-repeat;
|
|
border-color: shade(#F6EFD4, 10%);
|
|
|
|
&:hover {
|
|
background-color: #F6EFD4;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
// @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
|
|
@include box-shadow(0 1px 0 #fff);
|
|
background-color: #fff;
|
|
background-repeat: no-repeat;
|
|
|
|
&:hover {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
li {
|
|
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;
|
|
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;
|
|
// }
|
|
// }
|
|
|
|
//video
|
|
&.seq_video_inactive {
|
|
@extend .inactive;
|
|
background-image: url('/static/images/video-icon.png');
|
|
background-position: 13px 15px;
|
|
}
|
|
|
|
&.seq_video_visited {
|
|
@extend .visited;
|
|
background-image: url('/static/images/video-icon.png');
|
|
background-position: -81px 15px;
|
|
}
|
|
|
|
&.seq_video_active {
|
|
@extend .active;
|
|
background-image: url('/static/images/video-icon.png');
|
|
background-position: -32px 15px;
|
|
}
|
|
|
|
//vertical
|
|
&.seq_vertical_inactive, &.seq_problem_inactive {
|
|
background-image: url('/static/images/vertical-icon.png');
|
|
background-position: -82px 15px;
|
|
@extend .inactive;
|
|
}
|
|
|
|
&.seq_vertical_visited, &.seq_problem_visited {
|
|
background-image: url('/static/images/vertical-icon.png');
|
|
background-position: 13px 15px;
|
|
@extend .visited;
|
|
}
|
|
|
|
&.seq_vertical_active, &.seq_problem_active {
|
|
background-image: url('/static/images/vertical-icon.png');
|
|
background-position: -35px 15px;
|
|
@extend .active;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
ul {
|
|
float: right;
|
|
margin-right: 1px;
|
|
|
|
li {
|
|
float: left;
|
|
|
|
&.prev, &.next {
|
|
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
|
|
background: darken(#F6EFD4, 5%);
|
|
border-left: 1px solid darken(#f6efd4, 20%);
|
|
color: darken(#F6EFD4, 80%);
|
|
float: right;
|
|
letter-spacing: 1px;
|
|
padding: lh(.75);
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: darken(#F6EFD4, 60%);
|
|
text-decoration: none;
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|