From 825cf0e03e7a12bb033343362a5ebf2c76dd060f Mon Sep 17 00:00:00 2001 From: Galen Frechette Date: Tue, 15 May 2012 17:56:47 -0400 Subject: [PATCH] wip better communication of current page in course ware --- static/css/application.css | 114 ++++++++++++++++++++++-- templates/sass/courseware/_sidebar.scss | 92 +++++++++++++------ 2 files changed, 169 insertions(+), 37 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 5d9d624258..fd690df1cb 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -2966,23 +2966,121 @@ section.course-index div#accordion ul.ui-accordion-content { font-size: 12px; margin: 0; } section.course-index div#accordion ul.ui-accordion-content li { - position: relative; } -section.course-index div#accordion ul.ui-accordion-content li.active { - font-weight: bold; } -section.course-index div#accordion ul.ui-accordion-content li.active span.subtitle { - font-weight: normal; } + background: transparent; + border: 1px solid transparent; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + 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; } section.course-index div#accordion ul.ui-accordion-content li a { text-decoration: none; - margin-bottom: 11.326px; display: block; color: #000; } -section.course-index div#accordion ul.ui-accordion-content li a:hover { - color: #666; } section.course-index div#accordion ul.ui-accordion-content li a p { margin-bottom: 0; } section.course-index div#accordion ul.ui-accordion-content li a p span.subtitle { color: #666; display: block; } +section.course-index div#accordion ul.ui-accordion-content li:after { + background: transparent; + border-top: 1px solid #b4b4b4; + border-right: 1px solid #b4b4b4; + content: ""; + display: block; + height: 13px; + opacity: 0; + position: absolute; + top: 14px; + right: 30px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + -ms-transition-duration: 0.2s; + -o-transition-duration: 0.2s; + transition-duration: 0.2s; + -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; + 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; } +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); } +section.course-index div#accordion ul.ui-accordion-content li:active:after { + opacity: 1; + right: 15px; } +section.course-index div#accordion ul.ui-accordion-content li.active { + background: #f0f0f0; + background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e6e6e6); + background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e6e6e6); + background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e6e6e6); + background-image: -o-linear-gradient(-90deg, #f5f5f5, #e6e6e6); + background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6); + border-color: #c8c8c8; + font-weight: bold; } +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 { + opacity: 1; + right: 15px; } @-moz-document url-prefix() { a.add-fullscreen { diff --git a/templates/sass/courseware/_sidebar.scss b/templates/sass/courseware/_sidebar.scss index b5f0c5a3e1..c5416b49ed 100644 --- a/templates/sass/courseware/_sidebar.scss +++ b/templates/sass/courseware/_sidebar.scss @@ -39,44 +39,21 @@ section.course-index { border-bottom: 1px solid #c3c3c3; font-size: 12px; margin: 0; - // overflow: visible; li { + background: transparent; + border: 1px solid transparent; + @include border-radius(4px); + margin-bottom: lh(.5); position: relative; - - &.active { - font-weight: bold; - - span.subtitle { - font-weight: normal; - } - - // &:after { - // content: " "; - // width: 16px; - // height: 16px; - // position: absolute; - // right: -35px; - // top: 7px; - // display: block; - // background-color: #dadada; - // border-top: 1px solid #c3c3c3; - // border-right: 1px solid #c3c3c3; - // z-index: 99; - // @include transform(rotate(45deg)); - // } - } + padding: 5px 10px; + @include transition(all, 0.15s, linear); a { text-decoration: none; - margin-bottom: lh(.5); display: block; color: #000; - &:hover { - color: #666; - } - p { margin-bottom: 0; @@ -86,6 +63,63 @@ section.course-index { } } } + + &:after { + background: transparent; + border-top: 1px solid rgb(180,180,180); + border-right: 1px solid rgb(180,180,180); + content: ""; + display: block; + height: 13px; + opacity: 0; + position: absolute; + top: 14px; + right: 30px; + @include transform(rotate(45deg)); + @include transition(all, 0.2s, linear); + width: 13px; + } + + &: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; + } + + a { + color: #666; + } + } + + &: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)); + + &: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; + + span.subtitle { + font-weight: normal; + } + + &:after { + opacity: 1; + right: 15px; + } + } } } }