From 5404e1228a5083b85348f50f790fe4294c6f68be Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 21 Feb 2012 14:25:59 -0500 Subject: [PATCH] added styles for other headers inthe sidebars --HG-- branch : kf-sidebar --- sass/_info.scss | 4 +- sass/_profile.scss | 4 +- sass/_textbook.scss | 2 +- sass/base/_extends.scss | 78 ++++++++++++++++++----------------- sass/discussion/_sidebar.scss | 6 +-- sass/wiki/_sidebar.scss | 7 ++++ simplewiki_base.html | 1 + 7 files changed, 58 insertions(+), 44 deletions(-) diff --git a/sass/_info.scss b/sass/_info.scss index 9f0762cd59..9e67b5c657 100644 --- a/sass/_info.scss +++ b/sass/_info.scss @@ -43,8 +43,10 @@ div.info-wrapper { border-left: 1px solid #d3d3d3; h1 { - padding: 0 lh(); + padding: lh(.5) lh(); font-size: 18px; + margin: 0 ; + @extend .bottom-border; } ol { diff --git a/sass/_profile.scss b/sass/_profile.scss index 8a08759294..00b25ceb12 100644 --- a/sass/_profile.scss +++ b/sass/_profile.scss @@ -9,8 +9,10 @@ div.profile-wrapper { border-right: 0; h1 { - padding:0 lh(); + padding: lh(.5) lh(); font-size: 18px; + margin: 0 ; + @extend .bottom-border; } ul { diff --git a/sass/_textbook.scss b/sass/_textbook.scss index 7c7aef1562..8943eb1064 100644 --- a/sass/_textbook.scss +++ b/sass/_textbook.scss @@ -120,7 +120,7 @@ div.book-wrapper { width: 10px; padding: 0; overflow: hidden; - height: 100px; + max-height: 100px; } } diff --git a/sass/base/_extends.scss b/sass/base/_extends.scss index 48c92cbe9f..2469315630 100644 --- a/sass/base/_extends.scss +++ b/sass/base/_extends.scss @@ -10,8 +10,8 @@ margin: 0 auto; max-width: $fg-max-width; min-width: $fg-min-width; - width: flex-grid(12); text-align: left; + width: flex-grid(12); div.table-wrapper { display: table; @@ -20,24 +20,24 @@ } h1.top-header { - margin: (-(lh())) (-(lh())) lh(); - padding: lh(); background: #f3f3f3; border-bottom: 1px solid #e3e3e3; + margin: (-(lh())) (-(lh())) lh(); + padding: lh(); } .button { - @include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc); - @include linear-gradient(lighten(#888, 5%), darken(#888, 5%)); - @include border-radius(3px); border: 1px solid darken(#888, 10%); - padding: 4px 8px; + @include border-radius(3px); + @include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc); color: #fff; - font: bold $body-font-size $body-font-family; cursor: pointer; - -webkit-font-smoothing: antialiased; - text-shadow: none; + font: bold $body-font-size $body-font-family; + @include linear-gradient(lighten(#888, 5%), darken(#888, 5%)); + padding: 4px 8px; text-decoration: none; + text-shadow: none; + -webkit-font-smoothing: antialiased; &:hover, &:focus { @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc); @@ -47,8 +47,8 @@ h1.top-header { } .content { - @include box-sizing(border-box); @include box-shadow(inset 0 0 2px 3px #f3f3f3); + @include box-sizing(border-box); display: table-cell; padding: lh(); vertical-align: top; @@ -56,46 +56,51 @@ h1.top-header { } .sidebar { + background: #e3e3e3; + @include border-radius(4px 0 0 4px); + border-right: 1px solid #d3d3d3; @include box-shadow( inset 0 0 0 1px #f6f6f6); @include box-sizing(border-box); - @include border-radius(4px 0 0 4px); - background: #e3e3e3; - border-right: 1px solid #d3d3d3; display: table-cell; font-family: $body-font-family; + position: relative; text-shadow: 0 1px 0 #f1f1f1; vertical-align: top; width: flex-grid(3); - position: relative; h1, h2 { font-size: 18px; - text-transform: none; font-weight: 800; letter-spacing: 0; + text-transform: none; + } + + .bottom-border { + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; } h3 { - @include box-shadow(0 1px 0 #eee); - background: none; border: none; border-bottom: 1px solid #d3d3d3; + @extend .bottom-border; + background: none; color: #000; font-weight: normal; margin: 0; overflow: hidden; a { - @include transition(); color: lighten($text-color, 10%); display: block; font-size: $body-font-size; padding: 7px 7px 7px 30px; text-decoration: none; + @include transition(); &:hover { - @include box-shadow(0 1px 0 #fff); background: #efefef; + @include box-shadow(0 1px 0 #fff); } } @@ -104,10 +109,10 @@ h1.top-header { } &.active { - @include box-shadow(none); background: none; border: 0; border-bottom: 1px solid #bbb; + @include box-shadow(none); color: #000; font-weight: bold; @@ -118,8 +123,8 @@ h1.top-header { } header#open_close_accordion { - @include box-shadow(0 1px 0 #eee); border-bottom: 1px solid #d3d3d3; + @include box-shadow(0 1px 0 #eee); padding: lh(.5) lh(); position: relative; @@ -129,16 +134,16 @@ h1.top-header { } a { - width: 16px; - text-indent: -9999px; - height: 16px; - position: absolute; - padding: 8px; - top: 6px; - right: -1px; - border: 1px solid #D3D3D3; background: #eee url('/static/images/slide-left-icon.png') center center no-repeat; + border: 1px solid #D3D3D3; @include border-radius(3px 0 0 3px); + height: 16px; + padding: 8px; + position: absolute; + right: -1px; + text-indent: -9999px; + top: 6px; + width: 16px; &:hover { background-color: white; @@ -151,15 +156,14 @@ h1.top-header { } } - .topbar { + @extend .clearfix; background: #F6EFD4; border-bottom: 1px solid darken(#F6EFD4, 10%); - margin: (-$body-line-height) (-$body-line-height) $body-line-height; - font-size: 12px; - text-shadow: 0 1px 0 #fff; @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff); - @extend .clearfix; + font-size: 12px; + margin: (-$body-line-height) (-$body-line-height) $body-line-height; + text-shadow: 0 1px 0 #fff; a { color: darken(#F6EFD4, 80%); @@ -170,12 +174,12 @@ h1.top-header { } &.block-link { - @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%)); background: darken(#F6EFD4, 5%); border-left: 1px solid darken(#f6efd4, 20%); + @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%)); + display: block; padding: lh(.75); text-transform: uppercase; - display: block; &:hover { background: none; diff --git a/sass/discussion/_sidebar.scss b/sass/discussion/_sidebar.scss index 341fe7ee91..6b8115aef3 100644 --- a/sass/discussion/_sidebar.scss +++ b/sass/discussion/_sidebar.scss @@ -1,14 +1,12 @@ - div.discussion-wrapper aside { @extend .sidebar; - @include box-shadow(inset 1px 0 0 #f6f6f6); - @include border-radius(0 4px 4px 0); border-left: 1px solid #d3d3d3; + @include border-radius(0 4px 4px 0); border-right: 1px solid #f6f6f6; + @include box-shadow(inset 1px 0 0 #f6f6f6); padding: lh(); width: flex-grid(3); - h2 { color: #4D4D4D; diff --git a/sass/wiki/_sidebar.scss b/sass/wiki/_sidebar.scss index 513b3c2556..61575d811d 100644 --- a/sass/wiki/_sidebar.scss +++ b/sass/wiki/_sidebar.scss @@ -2,6 +2,13 @@ div#wiki_panel { @extend .sidebar; overflow: auto; + h2 { + padding: lh(.5) lh(); + font-size: 18px; + margin: 0 ; + @extend .bottom-border; + } + input[type="button"] { @extend h3; @include transition(); diff --git a/simplewiki_base.html b/simplewiki_base.html index 0f4e70cb2c..90d5506e8b 100644 --- a/simplewiki_base.html +++ b/simplewiki_base.html @@ -77,6 +77,7 @@
<%block name="wiki_panel">
+

Course Wiki

<% if (wiki_article is not UNDEFINED): baseURL = reverse("wiki_view", args=[wiki_article.get_url()])