206 lines
4.1 KiB
SCSS
206 lines
4.1 KiB
SCSS
section.course-index {
|
||
@extend .sidebar;
|
||
@extend .tran;
|
||
border-radius: 3px 0 0 3px;
|
||
border-right: 1px solid $border-color-2;
|
||
|
||
#open_close_accordion {
|
||
display: none;
|
||
}
|
||
|
||
header {
|
||
max-height: 47px;
|
||
|
||
h2 {
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
div#accordion {
|
||
width: auto;
|
||
font-size: 14px;
|
||
|
||
h3 {
|
||
border-radius: 0;
|
||
margin: 0;
|
||
overflow: visible;
|
||
|
||
&:first-child {
|
||
border: none;
|
||
}
|
||
|
||
&:hover {
|
||
color: #666;
|
||
}
|
||
|
||
&.ui-state-hover {
|
||
a {
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
&.ui-accordion-header {
|
||
border-bottom: none;
|
||
color: #000;
|
||
|
||
a {
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
padding-left: 19px;
|
||
}
|
||
|
||
&.ui-state-active {
|
||
@extend .active;
|
||
border-bottom: none;
|
||
|
||
&:hover {
|
||
background: none;
|
||
}
|
||
}
|
||
|
||
span.ui-icon {
|
||
left: 0;
|
||
background-image: url("/static/images/ui-icons_222222_256x240.png");
|
||
opacity: 0.3;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chapter {
|
||
width: 100% !important;
|
||
@include box-sizing(border-box);
|
||
padding: 11px 14px;
|
||
@include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
|
||
background-color: $sidebar-chapter-bg;
|
||
box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset;
|
||
@include transition(background-color .1s linear 0s);
|
||
|
||
&.is-open {
|
||
background: #fff;
|
||
}
|
||
|
||
&:first-child {
|
||
border-radius: 3px 0 0 0;
|
||
}
|
||
|
||
&:last-child {
|
||
border-radius: 0 0 0 3px;
|
||
box-shadow: 0 1px 0 #fff inset;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: #fff
|
||
}
|
||
}
|
||
|
||
ul.ui-accordion-content {
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 0;
|
||
margin: 0;
|
||
padding: 9px 0 9px 9px;
|
||
overflow: auto;
|
||
width: 100%;
|
||
|
||
li {
|
||
border-bottom: 0;
|
||
border-radius: 0;
|
||
margin-bottom: 4px;
|
||
|
||
a {
|
||
background: transparent;
|
||
border-radius: 4px;
|
||
display: block;
|
||
padding: 5px 36px 5px 10px;
|
||
position: relative;
|
||
text-decoration: none;
|
||
|
||
p {
|
||
font-weight: bold;
|
||
font-family: $sans-serif;
|
||
margin-bottom: 0;
|
||
line-height: 1.3;
|
||
|
||
&.subtitle {
|
||
color: #666;
|
||
font-size: 13px;
|
||
font-weight: normal;
|
||
display: block;
|
||
margin: 0;
|
||
|
||
&:empty {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
background: rgba(0, 0, 0, .1);
|
||
|
||
> a p {
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
&:active {
|
||
box-shadow: inset 0 1px 14px 0 rgba(0,0,0, 0.1);
|
||
|
||
&:after {
|
||
opacity: 1.0;
|
||
right: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
font-weight: bold;
|
||
|
||
&:after {
|
||
content: '›';
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 20px;
|
||
margin-top: -13px;
|
||
font-size: 30px;
|
||
font-weight: normal;
|
||
color: #333;
|
||
opacity: 0;
|
||
@include transition(none);
|
||
}
|
||
|
||
> a {
|
||
border: 1px solid $border-color-1;
|
||
box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
|
||
background: $sidebar-active-image;
|
||
|
||
&:after {
|
||
opacity: 1.0;
|
||
right: 15px;
|
||
}
|
||
|
||
p {
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
span.subtitle {
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
&.graded {
|
||
> a {
|
||
background-image: url('../images/graded.png');
|
||
background-repeat: no-repeat;
|
||
background-position: 97% center;
|
||
}
|
||
|
||
&.active > a {
|
||
@include background-image(url('../images/graded.png'), linear-gradient(top, #e6e6e6, #d6d6d6));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|