From 20df117bfc2bb4643f572444aac59e10a0b4aebb Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 2 Jul 2012 16:15:07 -0400 Subject: [PATCH] Added style for the calendar view and section view --- cms/static/sass/_base.scss | 35 +++++++++++++++++++------------ cms/static/sass/_calendar.scss | 38 ++++++++++++++++++++-------------- cms/static/sass/_fonts.scss | 36 ++++++++++++++++++++++++++++++++ cms/static/sass/_layout.scss | 37 ++++++++++++++++++++++++++++----- cms/static/sass/_section.scss | 35 +++++++++++++++++-------------- cms/static/sass/_unit.scss | 19 ++++++++++++++++- 6 files changed, 151 insertions(+), 49 deletions(-) create mode 100644 cms/static/sass/_fonts.scss diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index afda14800f..93109ec865 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -1,10 +1,14 @@ $fg-column: 70px; $fg-gutter: 26px; $fg-max-columns: 12; -$body-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; +$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; $body-font-size: 14px; $body-line-height: 20px; +$light-blue: #f0f8fa; +$dark-blue: #50545c; +$bright-blue: #3c8ebf; + // Base html styles html { height: 100%; @@ -13,6 +17,11 @@ html { a { text-decoration: none; color: #888; + @include transition; + + &:hover { + color: #ccc; + } } input { @@ -68,16 +77,16 @@ textarea { float: right; } -.wip { - outline: 1px solid #f00 !important; - position: relative; +// .wip { +// outline: 1px solid #f00 !important; +// position: relative; - &:after { - content: "WIP"; - font-size: 8px; - padding: 2px; - background: #f00; - color: #fff; - @include position(absolute, 0px 0px 0 0); - } -} +// &:after { +// content: "WIP"; +// font-size: 8px; +// padding: 2px; +// background: #f00; +// color: #fff; +// @include position(absolute, 0px 0px 0 0); +// } +// } diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 71f12f2425..cd7954e827 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -6,8 +6,12 @@ section.cal { > header { @include clearfix; margin-bottom: 10px; - background: #efefef; - border: 1px solid #ddd; + opacity: .4; + @include transition; + + &:hover { + opacity: 1; + } h2 { @include inline-block(); @@ -15,7 +19,6 @@ section.cal { letter-spacing: 1px; font-size: 14px; padding: 6px; - margin-left: 6px; font-size: 12px; } @@ -25,9 +28,8 @@ section.cal { li { @include inline-block; margin-left: 6px; - padding-left: 6px; border-left: 1px solid #ddd; - padding: 6px; + padding: 0 6px; a { @include inline-block(); @@ -49,31 +51,34 @@ section.cal { ol { list-style: none; @include clearfix; - border-left: 1px solid #333; - border-top: 1px solid #333; + border-left: 1px solid lighten($dark-blue, 40%); + border-top: 1px solid lighten($dark-blue, 40%); width: 100%; + @include box-sizing(border-box); > li { - border-right: 1px solid #333; - border-bottom: 1px solid; + border-right: 1px solid lighten($dark-blue, 40%); + border-bottom: 1px solid lighten($dark-blue, 40%); @include box-sizing(border-box); float: left; width: flex-grid(3) + ((flex-gutter() * 3) / 4); + background-color: lighten($light-blue, 2%); header { - border-bottom: 1px solid #000; - @include box-shadow(0 1px 2px #aaa); + border-bottom: 1px solid lighten($dark-blue, 40%); + @include box-shadow(0 2px 2px $light-blue); display: block; margin-bottom: 2px; + background: #FFF; h1 { font-size: 14px; text-transform: uppercase; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid lighten($dark-blue, 60%); padding: 6px; a { - color: #000; + color: $bright-blue; display: block; } } @@ -93,10 +98,13 @@ section.cal { margin-bottom: 1px; li { - background: #efefef; - border-bottom: 1px solid #666; + border-bottom: 1px solid darken($light-blue, 8%); padding: 6px; + a { + color: lighten($dark-blue, 10%); + } + &.create-module { position: relative; diff --git a/cms/static/sass/_fonts.scss b/cms/static/sass/_fonts.scss new file mode 100644 index 0000000000..92a2e185b7 --- /dev/null +++ b/cms/static/sass/_fonts.scss @@ -0,0 +1,36 @@ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 700; + src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 300; + src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 400; + src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'); +} diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss index 98f49940fd..eb30d55f5c 100644 --- a/cms/static/sass/_layout.scss +++ b/cms/static/sass/_layout.scss @@ -9,13 +9,14 @@ body { } > header { - background: #000; + background: $dark-blue; color: #fff; display: block; float: none; - padding: 6px 20px; + padding: 8px 25px; width: 100%; @include box-sizing(border-box); + -webkit-font-smoothing: antialiased; nav { @include clearfix; @@ -24,6 +25,23 @@ body { font-size: 14px; text-transform: uppercase; float: left; + margin-right: 15px; + + a { + color: #fff; + + &:hover { + color: rgba(#fff, .6); + } + } + } + + a { + color: rgba(#fff, .8); + + &:hover { + color: rgba(#fff, .6); + } } ul { @@ -35,7 +53,16 @@ body { li { @include inline-block(); - margin-left: 15px; + + a { + padding: 8px 10px; + display: block; + margin: -8px 0; + + &:hover { + background-color: darken($dark-blue, 15%); + } + } } } } @@ -43,11 +70,11 @@ body { &.content { section.main-content { - border-left: 2px solid #000; + border-left: 2px solid $dark-blue; @include box-sizing(border-box); width: flex-grid(9); float: left; - @include box-shadow( -2px 0 3px #ddd ); + @include box-shadow( -2px 0 0 darken($light-blue, 3%)); } } } diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss index 2048607565..f0ac33ba53 100644 --- a/cms/static/sass/_section.scss +++ b/cms/static/sass/_section.scss @@ -2,8 +2,12 @@ section#unit-wrapper { section.filters { @include clearfix; margin-bottom: 10px; - background: #efefef; - border: 1px solid #ddd; + opacity: .4; + @include transition; + + &:hover { + opacity: 1; + } ul { @include clearfix(); @@ -22,14 +26,16 @@ section#unit-wrapper { div.content { display: table; - border: 1px solid; + border: 1px solid lighten($dark-blue, 40%); width: 100%; section { header { - background: #eee; + background: #fff; padding: 6px; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid lighten($dark-blue, 60%); + border-top: 1px solid lighten($dark-blue, 60%); + margin-top: -1px; @include clearfix; h2 { @@ -37,6 +43,7 @@ section#unit-wrapper { letter-spacing: 1px; font-size: 12px; float: left; + color: $bright-blue; } } @@ -44,7 +51,7 @@ section#unit-wrapper { @include box-sizing(border-box); display: table-cell; width: flex-grid(6, 9); - border-right: 1px solid #333; + border-right: 1px solid lighten($dark-blue, 40%); &.empty { text-align: center; @@ -59,14 +66,9 @@ section#unit-wrapper { ol { list-style: none; - border-bottom: 1px solid #333; li { - border-bottom: 1px solid #333; - - &:last-child{ - border-bottom: 0; - } + border-bottom: 1px solid lighten($dark-blue, 60%); a { color: #000; @@ -78,6 +80,10 @@ section#unit-wrapper { li { padding: 6px; + &:last-child { + border-bottom: 0; + } + &:hover { a.draggable { opacity: 1; @@ -127,11 +133,10 @@ section#unit-wrapper { ol { list-style: none; - border-bottom: 1px solid #999; li { - border-bottom: 1px solid #999; - background: #f9f9f9; + border-bottom: 1px solid darken($light-blue, 8%); + background: lighten($light-blue, 2%); &:last-child { border-bottom: 0; diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index f1e47d36be..593e910885 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -1,7 +1,8 @@ section#unit-wrapper { > header { - border-bottom: 2px solid #333; + border-bottom: 2px solid $dark-blue; @include clearfix(); + @include box-shadow( 0 2px 0 darken($light-blue, 3%)); padding: 6px 20px; section { @@ -12,6 +13,7 @@ section#unit-wrapper { text-transform: uppercase; letter-spacing: 1px; @include inline-block(); + color: $bright-blue; } p { @@ -28,11 +30,26 @@ section#unit-wrapper { color: #666; a { + display: block; + @include inline-block; + &.cancel { margin-right: 20px; font-style: italic; font-size: 12px; } + + &.save-update { + background-color: #f96e5b; + color: #fff; + -webkit-font-smoothing: antialiased; + padding: 8px 10px; + margin: -6px -25px -6px 0; + + &:hover { + background-color: shade(#f96e5b, 10%); + } + } } } }