Skip to content

E
edx-platform
Commit 12eb7cf6 by Galen Frechette
Options

wip more defined week headings

parent 825cf0e0
Showing with 45 additions and 54 deletions
static/css/application.css
...@@ -2951,6 +2951,12 @@ section.course-index div#accordion h3.ui-accordion-header a, section.course-inde ...@@ -2951,6 +2951,12 @@ section.course-index div#accordion h3.ui-accordion-header a, section.course-inde
section.course-index div#accordion h3.ui-accordion-header.ui-state-hover, section.course-index div#accordion div#wiki_panel input.ui-accordion-header.ui-state-hover[type="button"], div#wiki_panel section.course-index div#accordion input.ui-accordion-header.ui-state-hover[type="button"] { section.course-index div#accordion h3.ui-accordion-header.ui-state-hover, section.course-index div#accordion div#wiki_panel input.ui-accordion-header.ui-state-hover[type="button"], div#wiki_panel section.course-index div#accordion input.ui-accordion-header.ui-state-hover[type="button"] {
border: none; border: none;
border-bottom: 1px solid #d3d3d3; } border-bottom: 1px solid #d3d3d3; }
section.course-index div#accordion h3.ui-accordion-header.ui-state-active, section.course-index div#accordion div#wiki_panel input.ui-accordion-header.ui-state-active[type="button"], div#wiki_panel section.course-index div#accordion input.ui-accordion-header.ui-state-active[type="button"] {
background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: -o-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: linear-gradient(-90deg, #f5f5f5, #e1e1e1); }
section.course-index div#accordion ul.ui-accordion-content { section.course-index div#accordion ul.ui-accordion-content {
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
...@@ -2975,35 +2981,17 @@ section.course-index div#accordion ul.ui-accordion-content li { ...@@ -2975,35 +2981,17 @@ section.course-index div#accordion ul.ui-accordion-content li {
border-radius: 4px; border-radius: 4px;
margin-bottom: 11.326px; margin-bottom: 11.326px;
position: relative; position: relative;
padding: 5px 10px; 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 { section.course-index div#accordion ul.ui-accordion-content li a {
text-decoration: none; text-decoration: none;
display: block; display: block;
color: #000; } color: #666; }
section.course-index div#accordion ul.ui-accordion-content li a p { section.course-index div#accordion ul.ui-accordion-content li a p {
font-weight: bold;
margin-bottom: 0; } margin-bottom: 0; }
section.course-index div#accordion ul.ui-accordion-content li a p span.subtitle { section.course-index div#accordion ul.ui-accordion-content li a p span.subtitle {
color: #666; color: #666;
font-weight: normal;
display: block; } display: block; }
section.course-index div#accordion ul.ui-accordion-content li:after { section.course-index div#accordion ul.ui-accordion-content li:after {
background: transparent; background: transparent;
...@@ -3021,6 +3009,17 @@ section.course-index div#accordion ul.ui-accordion-content li:after { ...@@ -3021,6 +3009,17 @@ section.course-index div#accordion ul.ui-accordion-content li:after {
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
-o-transform: rotate(45deg); -o-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
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;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
-ms-transition-property: all; -ms-transition-property: all;
...@@ -3040,30 +3039,14 @@ section.course-index div#accordion ul.ui-accordion-content li:after { ...@@ -3040,30 +3039,14 @@ section.course-index div#accordion ul.ui-accordion-content li:after {
-moz-transition-delay: 0; -moz-transition-delay: 0;
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0; }
width: 13px; } section.course-index div#accordion ul.ui-accordion-content li:hover > a p {
section.course-index div#accordion ul.ui-accordion-content li:hover { color: #333; }
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 { 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)); -webkit-box-shadow: inset 0 1px 14px 0 rgba(0, 0, 0, 0.1);
background-image: -moz-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4)); -moz-box-shadow: inset 0 1px 14px 0 rgba(0, 0, 0, 0.1);
background-image: -ms-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4)); box-shadow: inset 0 1px 14px 0 rgba(0, 0, 0, 0.1);
background-image: -o-linear-gradient(-90deg, rgba(245, 245, 245, 0.4), rgba(230, 230, 230, 0.4)); top: 1px; }
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 { section.course-index div#accordion ul.ui-accordion-content li:active:after {
opacity: 1; opacity: 1;
right: 15px; } right: 15px; }
...@@ -3076,6 +3059,8 @@ section.course-index div#accordion ul.ui-accordion-content li.active { ...@@ -3076,6 +3059,8 @@ section.course-index div#accordion ul.ui-accordion-content li.active {
background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6); background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6);
border-color: #c8c8c8; border-color: #c8c8c8;
font-weight: bold; } font-weight: bold; }
section.course-index div#accordion ul.ui-accordion-content li.active > a p {
color: #993333; }
section.course-index div#accordion ul.ui-accordion-content li.active span.subtitle { section.course-index div#accordion ul.ui-accordion-content li.active span.subtitle {
font-weight: normal; } font-weight: normal; }
section.course-index div#accordion ul.ui-accordion-content li.active:after { section.course-index div#accordion ul.ui-accordion-content li.active:after {
......
templates/sass/courseware/_sidebar.scss
...@@ -26,14 +26,16 @@ section.course-index { ...@@ -26,14 +26,16 @@ section.course-index {
} }
&.ui-state-active { &.ui-state-active {
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
@extend .active; @extend .active;
//@include box-shadow(0 1px 3px 0 rgba(0,0,0, 0.15));
} }
} }
} }
ul.ui-accordion-content { ul.ui-accordion-content {
@include border-radius(0); @include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6); @include box-shadow(inset -1px 0 0 #e6e6e6);
background: #dadada; background: #dadada;
border: none; border: none;
border-bottom: 1px solid #c3c3c3; border-bottom: 1px solid #c3c3c3;
...@@ -47,18 +49,19 @@ section.course-index { ...@@ -47,18 +49,19 @@ section.course-index {
margin-bottom: lh(.5); margin-bottom: lh(.5);
position: relative; position: relative;
padding: 5px 10px; padding: 5px 10px;
@include transition(all, 0.15s, linear);
a { a {
text-decoration: none; text-decoration: none;
display: block; display: block;
color: #000; color: #666;
p { p {
font-weight: bold;
margin-bottom: 0; margin-bottom: 0;
span.subtitle { span.subtitle {
color: #666; color: #666;
font-weight: normal;
display: block; display: block;
} }
} }
...@@ -76,7 +79,6 @@ section.course-index { ...@@ -76,7 +79,6 @@ section.course-index {
top: 14px; top: 14px;
right: 30px; right: 30px;
@include transform(rotate(45deg)); @include transform(rotate(45deg));
@include transition(all, 0.2s, linear);
width: 13px; width: 13px;
} }
...@@ -87,17 +89,17 @@ section.course-index { ...@@ -87,17 +89,17 @@ section.course-index {
&:after { &:after {
opacity: 1; opacity: 1;
right: 15px; right: 15px;
@include transition(all, 0.2s, linear);
} }
a { > a p {
color: #666; color: #333;
} }
} }
&:active { &:active {
@include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4))); @include box-shadow(inset 0 1px 14px 0 rgba(0,0,0, 0.1));
border-color: rgb(200,200,200); top: 1px;
@include box-shadow(inset 0 0 14px 0 rgba(0,0,0, 0.1));
&:after { &:after {
opacity: 1; opacity: 1;
...@@ -111,6 +113,10 @@ section.course-index { ...@@ -111,6 +113,10 @@ section.course-index {
border-color: rgb(200,200,200); border-color: rgb(200,200,200);
font-weight: bold; font-weight: bold;
> a p {
color: $mit-red;
}
span.subtitle { span.subtitle {
font-weight: normal; font-weight: normal;
} }
......
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