From 16190843e7bc4f4d0a4b797b5ac562bd4b7d996f Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 20 Aug 2012 13:56:51 -0400 Subject: [PATCH] started reworking sidebar styles --- lms/static/images/bg-texture.png | Bin 0 -> 7766 bytes lms/static/sass/base/_variables.scss | 2 ++ lms/static/sass/course.scss | 1 + lms/static/sass/course/_info.scss | 23 ++++++++++++------ lms/static/sass/course/base/_base.scss | 13 +++++++--- lms/static/sass/course/base/_extends.scss | 9 ++++--- .../sass/course/courseware/_courseware.scss | 6 ----- .../course/layout/_courseware_header.scss | 8 +++--- lms/static/sass/course/layout/_footer.scss | 4 +++ 9 files changed, 41 insertions(+), 25 deletions(-) create mode 100644 lms/static/images/bg-texture.png create mode 100644 lms/static/sass/course/layout/_footer.scss diff --git a/lms/static/images/bg-texture.png b/lms/static/images/bg-texture.png new file mode 100644 index 0000000000000000000000000000000000000000..909af2b7ffd30e4ccb5ed9851874c1fc8bd8a96d GIT binary patch literal 7766 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 Yzn8q1gBo1=`=?h;MN7F%@lDYG0lfgid;kCd literal 0 HcmV?d00001 diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 7ad30f0c91..50c5c07b5a 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -21,6 +21,7 @@ $pink: rgb(182,37,104); $yellow: rgb(255, 252, 221); $error-red: rgb(253, 87, 87); $border-color: #C8C8C8; +$sidebar-color: #f6f6f6; // old variables @@ -28,3 +29,4 @@ $light-gray: #ddd; $dark-gray: #333; $mit-red: #993333; $text-color: $dark-gray; + diff --git a/lms/static/sass/course.scss b/lms/static/sass/course.scss index d3a74cb91b..ba40de32e4 100644 --- a/lms/static/sass/course.scss +++ b/lms/static/sass/course.scss @@ -11,6 +11,7 @@ // Course base / layout styles @import 'course/layout/courseware_header'; +@import 'course/layout/footer'; @import 'course/base/base'; @import 'course/base/extends'; @import 'module/module-styles.scss'; diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index 1651ad4da8..886c46c9e7 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -68,23 +68,31 @@ div.info-wrapper { section.handouts { @extend .sidebar; - border-left: 1px solid $border-color; @include border-radius(0 4px 4px 0); border-right: 0; @include box-shadow(none); + font-size: 14px; h1 { - @extend .bottom-border; margin-bottom: 0; - padding: lh(.5) lh(.5); + padding: 20px 26px; + font-size: 18px; + font-style: normal; + font-weight: bold; } ol { li { + padding: 0 26px; + margin-bottom: 14px; + a { display: block; - padding-left: lh(.5); - padding-right: 0; + padding: 0; + + &:hover { + background: transparent; + } } &.expandable, @@ -98,7 +106,6 @@ div.info-wrapper { } &.multiple { - padding: lh(.5) 0 lh(.5) lh(.5); a { @include inline-block; @@ -133,7 +140,7 @@ div.info-wrapper { } div.hitarea { - background-image: url('../images/treeview-default.gif'); + background-image: url('../images/treeview-default.gif') no-repeat; display: block; height: 100%; margin-left: 0; @@ -165,7 +172,7 @@ div.info-wrapper { @include box-shadow(none); color: #aaa; font-size: 1em; - margin-bottom: em(6); + margin-bottom: em(6); } p { diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 6bd42e63cd..780520a3fc 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -1,6 +1,6 @@ body { min-width: 980px; - background: #f7f7f7; + background: url(../images/bg-texture.png) #f7f7f7; } body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a { @@ -12,6 +12,13 @@ table { table-layout: fixed; } +a { + &:hover { + color: $pink; + text-decoration: none !important; + } +} + .content-wrapper { background: none; border: none; @@ -36,6 +43,6 @@ form { } ::selection, ::-moz-selection, ::-webkit-selection { - background:#444; - color:#fff; + background: #444; + color: #fff; } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 04eaf73094..3604f784f9 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -28,7 +28,7 @@ h1.top-header { .content { @include box-sizing(border-box); display: table-cell; - padding: lh(); + padding: 2.5em; vertical-align: top; width: flex-grid(9) + flex-gutter(); @@ -38,13 +38,14 @@ h1.top-header { } .sidebar { - border-right: 1px solid #C8C8C8; + // border-right: 1px solid #C8C8C8; @include box-sizing(border-box); display: table-cell; font-family: $sans-serif; position: relative; vertical-align: top; width: flex-grid(3); + background: $sidebar-color; h1, h2 { font-size: em(20); @@ -85,7 +86,7 @@ h1.top-header { } &.active { - @extend .bottom-border; + // @extend .bottom-border; color: #000; font-weight: bold; @@ -101,7 +102,7 @@ h1.top-header { padding-left: 0; li { - @extend .bottom-border; + // @extend .bottom-border; @extend .clearfix; background: none; position: relative; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 7905bd81e6..198902c146 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -5,12 +5,6 @@ html { div.course-wrapper { @extend .table-wrapper; - padding: 40px; - box-sizing: border-box; - border-radius: 3px; - background: #fff; - @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1)); - ul, ol { list-style: none; diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 7a2a04a5db..ca8b9918d2 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -1,7 +1,6 @@ nav.course-material { @include clearfix; @include box-sizing(border-box); - background: #f6f6f6; border-bottom: none; margin: 0px auto 0px; padding: 0px; @@ -24,7 +23,7 @@ nav.course-material { list-style: none; a { - color: darken($lighter-base-font-color, 20%); + color: #555; display: block; text-align: center; padding: 8px 13px 12px; @@ -34,7 +33,7 @@ nav.course-material { text-shadow: 0 1px rgb(255,255,255); &:hover { - color: $base-font-color; + color: #333; } &.active { @@ -72,6 +71,7 @@ nav.course-material { float: left; font-size: 0.9em; font-weight: 600; + color: #888; line-height: 40px; letter-spacing: 0; text-transform: none; @@ -83,7 +83,7 @@ nav.course-material { .provider { font: inherit; font-weight: bold; - color: #6d6d6d; + color: #555; } } } \ No newline at end of file diff --git a/lms/static/sass/course/layout/_footer.scss b/lms/static/sass/course/layout/_footer.scss new file mode 100644 index 0000000000..7abf35a819 --- /dev/null +++ b/lms/static/sass/course/layout/_footer.scss @@ -0,0 +1,4 @@ +footer { + border: none; + box-shadow: none; +} \ No newline at end of file