Skip to content

E
edx-platform
Commit a89de961 by Kyle Fiedler
Options

Added more styles for cloes and open sidebar 

--HG--
branch : close_sidebar
parent ff129a01
Showing with 77 additions and 72 deletions
courseware.html
...@@ -27,13 +27,16 @@ ...@@ -27,13 +27,16 @@
<section class="main-content"> <section class="main-content">
<div class="course-wrapper"> <div class="course-wrapper">
<div id="accordion"> <section class="course-index">
<div id="open_close_accordion"> <div id="open_close_accordion">
<h2>Courseware Index</h2> <h2>Courseware Index</h2>
<a href="#">close</a> <a href="#">close</a>
</div> </div>
${accordion}
</div> <div id="accordion">
${accordion}
</div>
</section>
<section class="course-content"> <section class="course-content">
${content} ${content}
......
sass/_courseware.scss
...@@ -5,92 +5,102 @@ div.course-wrapper { ...@@ -5,92 +5,102 @@ div.course-wrapper {
list-style: none; list-style: none;
} }
div#accordion { .tran {
@include transition( all, .2s, $ease-in-out-quad);
}
section.course-index {
@extend .sidebar; @extend .sidebar;
@include transition( all, .5s, $ease-in-out-quad); position: relative;
@extend .tran;
div#open_close_accordion { div#open_close_accordion {
h2 { h2 {
display: inline-block; padding: 0 lh();
} }
a { a {
text-indent: -9999px; text-indent: -9999px;
display: inline-block;
background: red; background: red;
width: 16px; width: 16px;
height: 16px; height: 16px;
position: absolute;
padding: 8px;
top: 12px;
right: 0;
} }
} }
h3 { div#accordion {
@include transition( all, .5s, $ease-in-out-quad);
overflow: hidden;
margin: 0;
&:last-child {
@include box-shadow(none);
}
&.ui-accordion-header { h3 {
color: #000; overflow: hidden;
margin: 0;
a { &:last-child {
font-size: $body-font-size; @include box-shadow(none);
color: lighten($text-color, 10%);
} }
&.ui-state-hover { &.ui-accordion-header {
border: none; color: #000;
border-bottom: 1px solid #d3d3d3;
}
&.ui-state-active { a {
@extend .active; font-size: $body-font-size;
} color: lighten($text-color, 10%);
} }
}
&.ui-state-hover {
border: none;
border-bottom: 1px solid #d3d3d3;
}
ul.ui-accordion-content { &.ui-state-active {
@include border-radius(0); @extend .active;
@include box-shadow( inset -1px 0 0 #e6e6e6); }
background: #d6d6d6;
border: none;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
overflow: hidden;
li {
&.active {
font-weight: bold;
} }
}
a { ul.ui-accordion-content {
text-decoration: none; @include border-radius(0);
margin-bottom: lh(.5); @include box-shadow( inset -1px 0 0 #e6e6e6);
display: block; background: #d6d6d6;
color: #000; border: none;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
overflow: hidden;
&:hover { li {
color: #666; &.active {
font-weight: bold;
} }
p { a {
margin-bottom: 0; text-decoration: none;
margin-bottom: lh(.5);
display: block;
color: #000;
&.subtitle { &:hover {
color: #666; color: #666;
} }
p {
margin-bottom: 0;
&.subtitle {
color: #666;
}
}
} }
} }
} }
} }
} }
section.course-content { section.course-content {
@extend .content; @extend .content;
@include transition( all, .5s, $ease-in-out-quad);
p { p {
margin-bottom: lh(); margin-bottom: lh();
...@@ -219,34 +229,26 @@ div.course-wrapper { ...@@ -219,34 +229,26 @@ div.course-wrapper {
} }
&.closed { &.closed {
section.course-index {
div#accordion {
width: flex-grid(.5); width: flex-grid(.5);
div#open_close_accordion {
div#open_close_accordion { h2 {
h2 { visibility: hidden;
position: relative; width: 10px;
left: -100%; padding: 0;
}
} }
}
h3, ul, li { div#accordion {
position: relative; visibility: hidden;
left: -100%; width: 10px;
padding: 0;
} }
} }
section.course-content { section.course-content {
width: flex-grid(11.5) + flex-gutter(); width: flex-grid(11.5) + flex-gutter();
} }
// div#accordion {
// left: -(flex-grid(2.7));
// }
// section.course-content {
// left: -(flex-grid(2.7));
// position: relative;
// }
} }
} }
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