Files
edx-platform/static/sass/courseware/_sidebar.scss

135 lines
2.9 KiB
SCSS

section.course-index {
@extend .sidebar;
@extend .tran;
div#accordion {
h3 {
@include box-shadow(inset 0 1px 0 0 #eee);
border-top: 1px solid #d3d3d3;
overflow: hidden;
margin: 0;
&:first-child {
border: none;
}
&:hover {
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
}
&.ui-accordion-header {
color: #000;
a {
font-size: $body-font-size;
color: lighten($text-color, 10%);
}
&.ui-state-active {
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
@extend .active;
border-bottom: 1px solid #d3d3d3;
}
}
}
ul.ui-accordion-content {
@include border-radius(0);
@include box-shadow(inset -1px 0 0 #e6e6e6);
background: #dadada;
border: none;
font-size: 12px;
margin: 0;
padding: 1em 1.5em;
li {
background: transparent;
border: 1px solid transparent;
@include border-radius(4px);
margin-bottom: lh(.5);
position: relative;
padding: 5px 36px 5px 10px;
a {
text-decoration: none;
display: block;
color: #666;
p {
font-weight: bold;
margin-bottom: 0;
span.subtitle {
color: #666;
font-weight: normal;
display: block;
}
}
}
&:after {
background: transparent;
border-top: 1px solid rgb(180,180,180);
border-right: 1px solid rgb(180,180,180);
content: "";
display: block;
height: 12px;
margin-top: -6px;
opacity: 0;
position: absolute;
top: 50%;
right: 30px;
@include transform(rotate(45deg));
width: 12px;
}
&: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;
@include transition(all, 0.2s, linear);
}
> a p {
color: #333;
}
}
&:active {
@include box-shadow(inset 0 1px 14px 0 rgba(0,0,0, 0.1));
top: 1px;
&: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;
> a p {
color: #333;
}
span.subtitle {
font-weight: normal;
}
&:after {
opacity: 1;
right: 15px;
}
}
}
}
}
}