Skip to content
Snippets Groups Projects
Commit 825cf0e0 authored by Galen Frechette's avatar Galen Frechette
Browse files

wip better communication of current page in course ware

parent ad448828
No related merge requests found
Hide whitespace changes
Inline Side-by-side
static/css/application.css
+ 106
− 8
View file @ 825cf0e0
......@@ -2966,23 +2966,121 @@ section.course-index div#accordion ul.ui-accordion-content {
font-size: 12px;
margin: 0; }
section.course-index div#accordion ul.ui-accordion-content li {
position: relative; }
section.course-index div#accordion ul.ui-accordion-content li.active {
font-weight: bold; }
section.course-index div#accordion ul.ui-accordion-content li.active span.subtitle {
font-weight: normal; }
background: transparent;
border: 1px solid transparent;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
margin-bottom: 11.326px;
position: relative;
padding: 5px 10px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
section.course-index div#accordion ul.ui-accordion-content li a {
text-decoration: none;
margin-bottom: 11.326px;
display: block;
color: #000; }
section.course-index div#accordion ul.ui-accordion-content li a:hover {
color: #666; }
section.course-index div#accordion ul.ui-accordion-content li a p {
margin-bottom: 0; }
section.course-index div#accordion ul.ui-accordion-content li a p span.subtitle {
color: #666;
display: block; }
section.course-index div#accordion ul.ui-accordion-content li:after {
background: transparent;
border-top: 1px solid #b4b4b4;
border-right: 1px solid #b4b4b4;
content: "";
display: block;
height: 13px;
opacity: 0;
position: absolute;
top: 14px;
right: 30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-ms-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 13px; }
section.course-index div#accordion ul.ui-accordion-content li:hover {
background-image: -webkit-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
background-image: -moz-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
background-image: -ms-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
background-image: -o-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
background-image: linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
border-color: #c8c8c8; }
section.course-index div#accordion ul.ui-accordion-content li:hover:after {
opacity: 1;
right: 15px; }
section.course-index div#accordion ul.ui-accordion-content li:hover a {
color: #666; }
section.course-index div#accordion ul.ui-accordion-content li:active {
background-image: -webkit-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
background-image: -moz-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
background-image: -ms-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
background-image: -o-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
background-image: linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4));
border-color: #c8c8c8;
-webkit-box-shadow: inset 0 0 14px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 14px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 14px 0 rgba(0, 0, 0, 0.1); }
section.course-index div#accordion ul.ui-accordion-content li:active:after {
opacity: 1;
right: 15px; }
section.course-index div#accordion ul.ui-accordion-content li.active {
background: #f0f0f0;
background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
background-image: -o-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6);
border-color: #c8c8c8;
font-weight: bold; }
section.course-index div#accordion ul.ui-accordion-content li.active span.subtitle {
font-weight: normal; }
section.course-index div#accordion ul.ui-accordion-content li.active:after {
opacity: 1;
right: 15px; }
 
@-moz-document url-prefix() {
a.add-fullscreen {
......
templates/sass/courseware/_sidebar.scss
+ 63
− 29
View file @ 825cf0e0
......@@ -39,44 +39,21 @@ section.course-index {
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
// overflow: visible;
li {
background: transparent;
border: 1px solid transparent;
@include border-radius(4px);
margin-bottom: lh(.5);
position: relative;
&.active {
font-weight: bold;
span.subtitle {
font-weight: normal;
}
// &:after {
// content: " ";
// width: 16px;
// height: 16px;
// position: absolute;
// right: -35px;
// top: 7px;
// display: block;
// background-color: #dadada;
// border-top: 1px solid #c3c3c3;
// border-right: 1px solid #c3c3c3;
// z-index: 99;
// @include transform(rotate(45deg));
// }
}
padding: 5px 10px;
@include transition(all, 0.15s, linear);
a {
text-decoration: none;
margin-bottom: lh(.5);
display: block;
color: #000;
&:hover {
color: #666;
}
p {
margin-bottom: 0;
......@@ -86,6 +63,63 @@ section.course-index {
}
}
}
&:after {
background: transparent;
border-top: 1px solid rgb(180,180,180);
border-right: 1px solid rgb(180,180,180);
content: "";
display: block;
height: 13px;
opacity: 0;
position: absolute;
top: 14px;
right: 30px;
@include transform(rotate(45deg));
@include transition(all, 0.2s, linear);
width: 13px;
}
&:hover {
@include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4)));
border-color: rgb(200,200,200);
&:after {
opacity: 1;
right: 15px;
}
a {
color: #666;
}
}
&:active {
@include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4)));
border-color: rgb(200,200,200);
@include box-shadow(inset 0 0 14px 0 rgba(0,0,0, 0.1));
&:after {
opacity: 1;
right: 15px;
}
}
&.active {
background: rgb(240,240,240);
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230)));
border-color: rgb(200,200,200);
font-weight: bold;
span.subtitle {
font-weight: normal;
}
&:after {
opacity: 1;
right: 15px;
}
}
}
}
}
......
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