From 9d638d2ac09266f5d5eb4a7928ff69c9b22ecd56 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Wed, 11 Jul 2012 16:12:33 -0400 Subject: [PATCH] Added some more style for cal view and nav bar --- cms/static/img/menu.png | Bin 0 -> 95 bytes cms/static/img/noise.png | Bin 0 -> 4878 bytes cms/static/sass/_base.scss | 18 +++++--- cms/static/sass/_calendar.scss | 28 +++++++++---- cms/static/sass/_layout.scss | 66 ++++++++++++++++++++++++------ cms/templates/widgets/header.html | 5 ++- 6 files changed, 90 insertions(+), 27 deletions(-) create mode 100644 cms/static/img/menu.png create mode 100644 cms/static/img/noise.png diff --git a/cms/static/img/menu.png b/cms/static/img/menu.png new file mode 100644 index 0000000000000000000000000000000000000000..7449b34c1c0c2e11ddd7e4f353cf7b86e3071dc5 GIT binary patch literal 95 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 AivR!s literal 0 HcmV?d00001 diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 05014dbb7e..cb00dac83a 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -5,7 +5,7 @@ $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida $body-font-size: 14px; $body-line-height: 20px; -$light-blue: #f0f8fa; +$light-blue: #f0f7fd; $dark-blue: #50545c; $bright-blue: #3c8ebf; $orange: #f96e5b; @@ -13,6 +13,14 @@ $yellow: #fff8af; $cream: #F6EFD4; $mit-red: #933; +@mixin hide-text { + background-color: transparent; + border: 0; + color: transparent; + font: 0/0 a; + text-shadow: none; +} + // Base html styles html { height: 100%; @@ -122,10 +130,10 @@ textarea { } } -.wip { - outline: 1px solid #f00 !important; - position: relative; -} +// .wip { +// outline: 1px solid #f00 !important; +// position: relative; +// } .hidden { display: none; diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 4070766617..35609b2d56 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -1,13 +1,15 @@ section.cal { @include box-sizing(border-box); @include clearfix; - padding: 25px; + padding: 20px; > header { + display: none; @include clearfix; margin-bottom: 10px; opacity: .4; @include transition; + text-shadow: 0 1px 0 #fff; &:hover { opacity: 1; @@ -70,12 +72,15 @@ section.cal { ol { list-style: none; @include clearfix; - border-left: 1px solid lighten($dark-blue, 40%); - border-top: 1px solid lighten($dark-blue, 40%); + border: 1px solid lighten( $dark-blue , 30% ); + background: #FFF; width: 100%; @include box-sizing(border-box); margin: 0; padding: 0; + @include box-shadow(0 0 5px lighten($dark-blue, 45%)); + @include border-radius(3px); + overflow: hidden; > li { border-right: 1px solid lighten($dark-blue, 40%); @@ -84,6 +89,7 @@ section.cal { float: left; width: flex-grid(3) + ((flex-gutter() * 3) / 4); background-color: $light-blue; + @include box-shadow(inset 0 0 0 1px lighten($light-blue, 8%)); &:hover { li.create-module { @@ -91,6 +97,10 @@ section.cal { } } + &:nth-child(4n) { + border-right: 0; + } + header { border-bottom: 1px solid lighten($dark-blue, 40%); @include box-shadow(0 2px 2px $light-blue); @@ -128,6 +138,7 @@ section.cal { color: #888; border-bottom: 0; font-size: 12px; + @include box-shadow(none); } } } @@ -138,9 +149,11 @@ section.cal { padding: 0; li { - border-bottom: 1px solid darken($light-blue, 8%); - position: relative; + border-bottom: 1px solid darken($light-blue, 6%); + // @include box-shadow(0 1px 0 lighten($light-blue, 4%)); overflow: hidden; + position: relative; + text-shadow: 0 1px 0 #fff; &:hover { background-color: lighten($yellow, 14%); @@ -314,16 +327,13 @@ section.cal { @include box-sizing(border-box); opacity: .4; @include transition(); - background: darken($light-blue, 2%); &:hover { opacity: 1; width: flex-grid(5) + flex-gutter(); - background-color: transparent; + section.main-content { width: flex-grid(7); - opacity: .6; } } @@ -340,6 +350,7 @@ section.cal { display: block; li { + ul { display: inline; } @@ -351,6 +362,7 @@ section.cal { li { @include box-sizing(border-box); width: 100%; + border-right: 0; &.create-module { display: none; diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss index f4c9f63ea6..419f1df9d8 100644 --- a/cms/static/sass/_layout.scss +++ b/cms/static/sass/_layout.scss @@ -2,6 +2,8 @@ body { @include clearfix(); height: 100%; font: 14px $body-font-family; + background-color: lighten($dark-blue, 62%); + background-image: url('/static/img/noise.png'); > section { display: table; @@ -11,28 +13,53 @@ body { > header { background: $dark-blue; + @include background-image(url('/static/img/noise.png'), linear-gradient(lighten($dark-blue, 10%), $dark-blue)); + border-bottom: 1px solid darken($dark-blue, 15%); + @include box-shadow(inset 0 -1px 0 lighten($dark-blue, 10%)); + @include box-sizing(border-box); color: #fff; display: block; float: none; - padding: 8px 25px; + padding: 0 25px; + text-shadow: 0 -1px 0 darken($dark-blue, 15%); width: 100%; - @include box-sizing(border-box); - -webkit-font-smoothing: antialiased; nav { @include clearfix; - h2 { - font-size: 14px; - text-transform: uppercase; + > a { + @include hide-text; + background: url('/static/img/menu.png') 0 center no-repeat; + border-right: 1px solid darken($dark-blue, 10%); + @include box-shadow(1px 0 0 lighten($dark-blue, 10%)); + display: block; float: left; - margin: 0 15px 0 0; + height: 19px; + padding: 8px 10px 8px 0; + width: 14px; + + &:hover, &:focus { + opacity: .7; + } + } + + h2 { + border-right: 1px solid darken($dark-blue, 10%); + @include box-shadow(1px 0 0 lighten($dark-blue, 10%)); + float: left; + font-size: 14px; + margin: 0; + text-transform: uppercase; + -webkit-font-smoothing: antialiased; a { color: #fff; + padding: 8px 20px; + display: block; &:hover { - color: rgba(#fff, .6); + background-color: rgba(darken($dark-blue, 15%), .5); + color: $yellow; } } } @@ -48,21 +75,35 @@ body { ul { float: left; margin: 0; + padding: 0; + @include clearfix; &.user-nav { float: right; + border-left: 1px solid darken($dark-blue, 10%); } li { - @include inline-block(); + border-right: 1px solid darken($dark-blue, 10%); + float: left; + @include box-shadow(1px 0 0 lighten($dark-blue, 10%)); a { - padding: 8px 10px; + padding: 8px 20px; display: block; - margin: -8px 0; &:hover { - background-color: darken($dark-blue, 15%); + background-color: rgba(darken($dark-blue, 15%), .5); + color: $yellow; + } + + &.new-module { + &:before { + @include inline-block; + content: "+"; + font-weight: bold; + margin-right: 10px; + } } } } @@ -78,6 +119,7 @@ body { float: left; @include box-shadow( -2px 0 0 darken($light-blue, 3%)); @include transition(); + background: #FFF; } } } diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index c1c05671fa..f9322fb13d 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -1,13 +1,14 @@ <%! from django.core.urlresolvers import reverse %>