Skip to content

E
edx-platform
Commit cdd37eeb by Kyle Fiedler
Options

Strip down sequence navigaiton and more stripping of the courseware nav

parent 0e7ce4a6
Showing with 65 additions and 170 deletions
common/lib/xmodule/xmodule/css/sequence/display.scss
......@@ -2,10 +2,8 @@ nav.sequence-nav {
// TODO (cpennington): This doesn't work anymore. XModules aren't able to
// import from external sources.
@extend .topbar;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid $border-color;
margin: (-(lh())) (-(lh())) lh() (-(lh()));
background: #eee;
position: relative;
@include border-top-right-radius(4px);
......@@ -14,7 +12,7 @@ nav.sequence-nav {
display: table;
height: 100%;
margin: 0;
padding-left: 0;
padding-left: 3px;
padding-right: flex-grid(1, 9);
width: 100%;
......@@ -23,133 +21,104 @@ nav.sequence-nav {
}
li {
border-left: 1px solid #eee;
display: table-cell;
min-width: 20px;
&:first-child {
border-left: none;
}
.inactive {
a {
background-position: center;
background-repeat: no-repeat;
border: 1px solid transparent;
border-bottom: none;
@include border-radius(3px 3px 0 0);
cursor: pointer;
display: block;
height: 10px;
padding: 15px 0 14px;
position: relative;
@include transition();
width: 100%;
&:hover {
background-color: #eee;
background-repeat: no-repeat;
background-position: center;
background-color: #F6F6F6;
}
}
.visited {
background-color: #ddd;
background-repeat: no-repeat;
&.visited {
background-color: #F6F6F6;
&:hover {
background-position: center center;
&:hover {
background-position: center center;
}
}
}
.active {
background-color: #fff;
background-repeat: no-repeat;
@include box-shadow(0 1px 0 #fff);
&:hover {
&.active {
border-color: $border-color;
@include box-shadow(0 2px 0 #fff);
background-color: #fff;
background-position: center;
}
}
z-index: 9;
a {
background-position: center center;
border: none;
cursor: pointer;
display: block;
height: 17px;
padding: 15px 0 14px;
position: relative;
@include transition(all, .4s, $ease-in-out-quad);
width: 100%;
&.progress {
border-bottom-style: solid;
border-bottom-width: 4px;
&:hover {
background-position: center;
background-color: #fff;
}
}
&.progress-none {
@extend .progress;
border-bottom-color: red;
background-color: lighten(red, 50%);
}
&.progress-some {
@extend .progress;
border-bottom-color: yellow;
background-color: yellow;
}
&.progress-done {
@extend .progress;
border-bottom-color: green;
background-color: green;
}
//video
&.seq_video {
&.inactive {
@extend .inactive;
background-image: url('../images/sequence-nav/video-icon-normal.png');
background-position: center;
}
&.visited {
@extend .visited;
background-image: url('../images/sequence-nav/video-icon-visited.png');
background-position: center;
}
&.active {
@extend .active;
background-image: url('../images/sequence-nav/video-icon-current.png');
background-position: center;
}
}
//other
&.seq_other {
&.inactive {
@extend .inactive;
background-image: url('../images/sequence-nav/document-icon-normal.png');
background-position: center;
}
&.visited {
@extend .visited;
background-image: url('../images/sequence-nav/document-icon-visited.png');
background-position: center;
}
&.active {
@extend .active;
background-image: url('../images/sequence-nav/document-icon-current.png');
background-position: center;
}
}
//vertical & problems
&.seq_vertical, &.seq_problem {
&.inactive {
@extend .inactive;
background-image: url('../images/sequence-nav/list-icon-normal.png');
background-position: center;
}
&.visited {
@extend .visited;
background-image: url('../images/sequence-nav/list-icon-visited.png');
background-position: center;
}
&.active {
@extend .active;
background-image: url('../images/sequence-nav/list-icon-current.png');
background-position: center;
}
}
......@@ -157,6 +126,7 @@ nav.sequence-nav {
background: #333;
color: #fff;
display: none;
font-family: $sans-serif;
line-height: lh();
left: 0px;
opacity: 0;
......@@ -207,27 +177,29 @@ nav.sequence-nav {
right: 0;
top: 0;
width: flex-grid(1, 9);
border: 1px solid $border-color;
border-bottom: 0;
@include border-radius(3px 3px 0 0);
li {
float: left;
margin-bottom: 0;
width: 50%;
&.prev, &.next {
a {
// background-color: darken($cream, 5%);
background-position: center center;
background-position: center;
background-repeat: no-repeat;
border-left: 1px solid darken(#f6efd4, 20%);
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
@include box-sizing(border-box);
cursor: pointer;
display: block;
height: 10px;
padding: 15px 0 14px;
text-indent: -9999px;
@include transition(all, .2s, $ease-in-out-quad);
&:hover {
opacity: .5;
background-color: #f4f4f4;
}
&.disabled {
......@@ -240,20 +212,13 @@ nav.sequence-nav {
&.prev {
a {
background-image: url('../images/sequence-nav/previous-icon.png');
&:hover {
// background-color: $cream;
}
}
}
&.next {
a {
border-left: 1px solid lighten($border-color, 10%);
background-image: url('../images/sequence-nav/next-icon.png');
&:hover {
// background-color: $cream;
}
}
}
}
......@@ -274,10 +239,8 @@ nav.sequence-bottom {
ul {
@extend .clearfix;
background-color: #eee;
border: 1px solid #ddd;
border: 1px solid $border-color;
@include border-radius(3px);
@include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
@include inline-block();
li {
......@@ -312,7 +275,7 @@ nav.sequence-bottom {
&.prev {
a {
background-image: url('../images/sequence-nav/previous-icon.png');
border-right: 1px solid darken(#f6efd4, 20%);
border-right: 1px solid lighten($border-color, 10%);
&:hover {
background-color: none;
......
lms/static/sass/base/_variables.scss
......@@ -15,6 +15,7 @@ $blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
$error-red: rgb(253, 87, 87);
$border-color: #C8C8C8;
// old variables
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
......@@ -29,4 +30,3 @@ $dark-gray: #333;
$mit-red: #993333;
$cream: #F6EFD4;
$text-color: $dark-gray;
$border-color: $light-gray;
lms/static/sass/course/base/_base.scss
......@@ -12,4 +12,10 @@ table {
.container {
padding: lh(2);
> div {
display: table;
width: 100%;
table-layout: fixed;
}
}
lms/static/sass/course/base/_extends.scss
.wrapper {
margin: 0 auto;
max-width: $fg-max-width;
min-width: $fg-min-width;
text-align: left;
width: flex-grid(12);
div.table-wrapper {
display: table;
width: flex-grid(12);
overflow: hidden;
}
}
h1.top-header {
background: #f3f3f3;
border-bottom: 1px solid #e3e3e3;
margin: (-(lh())) (-(lh())) lh();
padding: lh();
text-align: left;
}
.button {
border: 1px solid darken(#888, 10%);
@include border-radius(3px);
@include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
color: #fff;
cursor: pointer;
font: bold $body-font-size $body-font-family;
@include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
padding: 4px 8px;
text-decoration: none;
text-shadow: none;
-webkit-font-smoothing: antialiased;
&:hover, &:focus {
border: 1px solid darken(#888, 20%);
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
@include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
}
font-size: 24px;
font-weight: 100;
padding-bottom: lh();
}
.light-button, a.light-button {
......@@ -147,27 +113,20 @@ h1.top-header {
}
header#open_close_accordion {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: lh(.5) lh();
position: relative;
h2 {
margin: 0;
padding-right: 20px;
}
a {
background: #eee url('../images/slide-left-icon.png') center center no-repeat;
background: #f6f6f6 url('../images/slide-left-icon.png') center center no-repeat;
border: 1px solid #D3D3D3;
@include border-radius(3px 0 0 3px);
height: 16px;
padding: 8px;
padding: 6px;
position: absolute;
right: -1px;
text-indent: -9999px;
top: 6px;
width: 16px;
z-index: 99;
&:hover {
background-color: white;
......@@ -182,32 +141,17 @@ h1.top-header {
.topbar {
@extend .clearfix;
border-bottom: 1px solid darken($cream, 10%);
border-top: 1px solid #fff;
font-size: 12px;
line-height: 46px;
text-shadow: 0 1px 0 #fff;
border-bottom: 1px solid $border-color;
font-size: 14px;
@media print {
display: none;
}
a {
line-height: 46px;
border-bottom: 0;
color: darken($cream, 80%);
&:hover {
color: darken($cream, 60%);
text-decoration: none;
}
&.block-link {
// background: darken($cream, 5%);
border-left: 1px solid darken($cream, 20%);
@include box-shadow(inset 1px 0 0 lighten($cream, 5%));
border-left: 1px solid lighten($border-color, 10%);
display: block;
text-transform: uppercase;
&:hover {
background: none;
......@@ -219,12 +163,3 @@ h1.top-header {
.tran {
@include transition( all, .2s, $ease-in-out-quad);
}
p.ie-warning {
background: yellow;
display: block !important;
line-height: 1.3em;
margin-bottom: 0;
padding: lh();
text-align: left;
}
lms/static/sass/course/courseware/_courseware.scss
......@@ -181,17 +181,9 @@ div.course-wrapper {
overflow: hidden;
header#open_close_accordion {
padding: 0;
min-height: 47px;
a {
background-image: url('../images/slide-right-icon.png');
}
h2 {
visibility: hidden;
width: 10px;
}
}
div#accordion {
......
lms/static/sass/course/courseware/_sidebar.scss
......@@ -23,7 +23,8 @@ section.course-index {
}
&:hover {
background: #eee;
background: #f6f6f6;
text-decoration: none;
}
&.ui-accordion-header {
......@@ -49,7 +50,7 @@ section.course-index {
ul.ui-accordion-content {
@include border-radius(0);
background: #FFF;
background: transparent;
border: none;
font-size: 12px;
margin: 0;
......@@ -104,7 +105,7 @@ section.course-index {
&:after {
opacity: 1;
right: 15px;
@include transition(all, 0.2s, linear);
@include transition();
}
> a p {
......
lms/static/sass/course/discussion/_question-view.scss
......@@ -313,7 +313,6 @@ div.question-header {
}
a.edit {
@extend .button;
font-size: 12px;
padding: 2px 10px;
}
......
lms/templates/staticbook.html
......@@ -67,7 +67,6 @@ $("#open_close_accordion a").click(function(){
<section aria-label="Textbook Navigation" class="book-sidebar">
<header id="open_close_accordion">
<h2>Table of Contents</h2>
<a href="#">close</a>
</header>
......
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