diff --git a/cms/static/img/menu.png b/cms/static/img/menu.png new file mode 100644 index 0000000000..7449b34c1c Binary files /dev/null and b/cms/static/img/menu.png differ diff --git a/cms/static/img/noise.png b/cms/static/img/noise.png new file mode 100644 index 0000000000..8fa5168293 Binary files /dev/null and b/cms/static/img/noise.png differ 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 %>