From 12eb7cf6f3e864bf51f52316e3f51cd53c1a388b Mon Sep 17 00:00:00 2001 From: Galen Frechette Date: Wed, 16 May 2012 15:07:23 -0400 Subject: [PATCH] wip more defined week headings --- static/css/application.css | 75 ++++++++++--------------- templates/sass/courseware/_sidebar.scss | 24 +++++--- 2 files changed, 45 insertions(+), 54 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index fd690df1cb..7015dff7f2 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -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"] { border: none; 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 { -webkit-border-radius: 0; -moz-border-radius: 0; @@ -2975,35 +2981,17 @@ section.course-index div#accordion ul.ui-accordion-content li { 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; } + padding: 5px 10px; } section.course-index div#accordion ul.ui-accordion-content li a { text-decoration: none; display: block; - color: #000; } + color: #666; } section.course-index div#accordion ul.ui-accordion-content li a p { + font-weight: bold; margin-bottom: 0; } section.course-index div#accordion ul.ui-accordion-content li a p span.subtitle { color: #666; + font-weight: normal; display: block; } section.course-index div#accordion ul.ui-accordion-content li:after { background: transparent; @@ -3021,6 +3009,17 @@ section.course-index div#accordion ul.ui-accordion-content li:after { -ms-transform: rotate(45deg); -o-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; -moz-transition-property: all; -ms-transition-property: all; @@ -3040,30 +3039,14 @@ section.course-index div#accordion ul.ui-accordion-content li:after { -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; } + transition-delay: 0; } +section.course-index div#accordion ul.ui-accordion-content li:hover > a p { + color: #333; } 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); } + -webkit-box-shadow: inset 0 1px 14px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 14px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 14px 0 rgba(0, 0, 0, 0.1); + top: 1px; } section.course-index div#accordion ul.ui-accordion-content li:active:after { opacity: 1; right: 15px; } @@ -3076,6 +3059,8 @@ section.course-index div#accordion ul.ui-accordion-content li.active { background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6); border-color: #c8c8c8; 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 { font-weight: normal; } section.course-index div#accordion ul.ui-accordion-content li.active:after { diff --git a/templates/sass/courseware/_sidebar.scss b/templates/sass/courseware/_sidebar.scss index c5416b49ed..c2077171a9 100644 --- a/templates/sass/courseware/_sidebar.scss +++ b/templates/sass/courseware/_sidebar.scss @@ -26,14 +26,16 @@ section.course-index { } &.ui-state-active { + @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225))); @extend .active; + //@include box-shadow(0 1px 3px 0 rgba(0,0,0, 0.15)); } } } ul.ui-accordion-content { @include border-radius(0); - @include box-shadow( inset -1px 0 0 #e6e6e6); + @include box-shadow(inset -1px 0 0 #e6e6e6); background: #dadada; border: none; border-bottom: 1px solid #c3c3c3; @@ -47,18 +49,19 @@ section.course-index { margin-bottom: lh(.5); position: relative; padding: 5px 10px; - @include transition(all, 0.15s, linear); a { text-decoration: none; display: block; - color: #000; + color: #666; p { + font-weight: bold; margin-bottom: 0; span.subtitle { color: #666; + font-weight: normal; display: block; } } @@ -76,7 +79,6 @@ section.course-index { top: 14px; right: 30px; @include transform(rotate(45deg)); - @include transition(all, 0.2s, linear); width: 13px; } @@ -87,17 +89,17 @@ section.course-index { &:after { opacity: 1; right: 15px; + @include transition(all, 0.2s, linear); } - a { - color: #666; + > a p { + color: #333; } } &: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)); + @include box-shadow(inset 0 1px 14px 0 rgba(0,0,0, 0.1)); + top: 1px; &:after { opacity: 1; @@ -111,6 +113,10 @@ section.course-index { border-color: rgb(200,200,200); font-weight: bold; + > a p { + color: $mit-red; + } + span.subtitle { font-weight: normal; }