Skip to content

E
edx-platform
Commit d2414850 by Kyle Fiedler
Options

Added style for the calendar view and section view

parent 7a568de6
Showing with 151 additions and 49 deletions
cms/static/sass/_base.scss
$fg-column: 70px; $fg-column: 70px;
$fg-gutter: 26px; $fg-gutter: 26px;
$fg-max-columns: 12; $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-font-size: 14px;
$body-line-height: 20px; $body-line-height: 20px;
$light-blue: #f0f8fa;
$dark-blue: #50545c;
$bright-blue: #3c8ebf;
// Base html styles // Base html styles
html { html {
height: 100%; height: 100%;
...@@ -13,6 +17,11 @@ html { ...@@ -13,6 +17,11 @@ html {
a { a {
text-decoration: none; text-decoration: none;
color: #888; color: #888;
@include transition;
&:hover {
color: #ccc;
}
} }
input { input {
...@@ -68,16 +77,16 @@ textarea { ...@@ -68,16 +77,16 @@ textarea {
float: right; float: right;
} }
.wip { // .wip {
outline: 1px solid #f00 !important; // outline: 1px solid #f00 !important;
position: relative; // position: relative;
&:after { // &:after {
content: "WIP"; // content: "WIP";
font-size: 8px; // font-size: 8px;
padding: 2px; // padding: 2px;
background: #f00; // background: #f00;
color: #fff; // color: #fff;
@include position(absolute, 0px 0px 0 0); // @include position(absolute, 0px 0px 0 0);
} // }
} // }
cms/static/sass/_calendar.scss
...@@ -6,8 +6,12 @@ section.cal { ...@@ -6,8 +6,12 @@ section.cal {
> header { > header {
@include clearfix; @include clearfix;
margin-bottom: 10px; margin-bottom: 10px;
background: #efefef; opacity: .4;
border: 1px solid #ddd; @include transition;
&:hover {
opacity: 1;
}
h2 { h2 {
@include inline-block(); @include inline-block();
...@@ -15,7 +19,6 @@ section.cal { ...@@ -15,7 +19,6 @@ section.cal {
letter-spacing: 1px; letter-spacing: 1px;
font-size: 14px; font-size: 14px;
padding: 6px; padding: 6px;
margin-left: 6px;
font-size: 12px; font-size: 12px;
} }
...@@ -25,9 +28,8 @@ section.cal { ...@@ -25,9 +28,8 @@ section.cal {
li { li {
@include inline-block; @include inline-block;
margin-left: 6px; margin-left: 6px;
padding-left: 6px;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
padding: 6px; padding: 0 6px;
a { a {
@include inline-block(); @include inline-block();
...@@ -49,31 +51,34 @@ section.cal { ...@@ -49,31 +51,34 @@ section.cal {
ol { ol {
list-style: none; list-style: none;
@include clearfix; @include clearfix;
border-left: 1px solid #333; border-left: 1px solid lighten($dark-blue, 40%);
border-top: 1px solid #333; border-top: 1px solid lighten($dark-blue, 40%);
width: 100%; width: 100%;
@include box-sizing(border-box);
> li { > li {
border-right: 1px solid #333; border-right: 1px solid lighten($dark-blue, 40%);
border-bottom: 1px solid; border-bottom: 1px solid lighten($dark-blue, 40%);
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; float: left;
width: flex-grid(3) + ((flex-gutter() * 3) / 4); width: flex-grid(3) + ((flex-gutter() * 3) / 4);
background-color: lighten($light-blue, 2%);
header { header {
border-bottom: 1px solid #000; border-bottom: 1px solid lighten($dark-blue, 40%);
@include box-shadow(0 1px 2px #aaa); @include box-shadow(0 2px 2px $light-blue);
display: block; display: block;
margin-bottom: 2px; margin-bottom: 2px;
background: #FFF;
h1 { h1 {
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
border-bottom: 1px solid #ccc; border-bottom: 1px solid lighten($dark-blue, 60%);
padding: 6px; padding: 6px;
a { a {
color: #000; color: $bright-blue;
display: block; display: block;
} }
} }
...@@ -93,10 +98,13 @@ section.cal { ...@@ -93,10 +98,13 @@ section.cal {
margin-bottom: 1px; margin-bottom: 1px;
li { li {
background: #efefef; border-bottom: 1px solid darken($light-blue, 8%);
border-bottom: 1px solid #666;
padding: 6px; padding: 6px;
a {
color: lighten($dark-blue, 10%);
}
&.create-module { &.create-module {
position: relative; position: relative;
......
cms/static/sass/_fonts.scss 0 → 100644
@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');
}
cms/static/sass/_layout.scss
...@@ -9,13 +9,14 @@ body { ...@@ -9,13 +9,14 @@ body {
} }
> header { > header {
background: #000; background: $dark-blue;
color: #fff; color: #fff;
display: block; display: block;
float: none; float: none;
padding: 6px 20px; padding: 8px 25px;
width: 100%; width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
-webkit-font-smoothing: antialiased;
nav { nav {
@include clearfix; @include clearfix;
...@@ -24,6 +25,23 @@ body { ...@@ -24,6 +25,23 @@ body {
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
float: left; float: left;
margin-right: 15px;
a {
color: #fff;
&:hover {
color: rgba(#fff, .6);
}
}
}
a {
color: rgba(#fff, .8);
&:hover {
color: rgba(#fff, .6);
}
} }
ul { ul {
...@@ -35,7 +53,16 @@ body { ...@@ -35,7 +53,16 @@ body {
li { li {
@include inline-block(); @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 { ...@@ -43,11 +70,11 @@ body {
&.content { &.content {
section.main-content { section.main-content {
border-left: 2px solid #000; border-left: 2px solid $dark-blue;
@include box-sizing(border-box); @include box-sizing(border-box);
width: flex-grid(9); width: flex-grid(9);
float: left; float: left;
@include box-shadow( -2px 0 3px #ddd ); @include box-shadow( -2px 0 0 darken($light-blue, 3%));
} }
} }
} }
cms/static/sass/_section.scss
...@@ -2,8 +2,12 @@ section#unit-wrapper { ...@@ -2,8 +2,12 @@ section#unit-wrapper {
section.filters { section.filters {
@include clearfix; @include clearfix;
margin-bottom: 10px; margin-bottom: 10px;
background: #efefef; opacity: .4;
border: 1px solid #ddd; @include transition;
&:hover {
opacity: 1;
}
ul { ul {
@include clearfix(); @include clearfix();
...@@ -22,14 +26,16 @@ section#unit-wrapper { ...@@ -22,14 +26,16 @@ section#unit-wrapper {
div.content { div.content {
display: table; display: table;
border: 1px solid; border: 1px solid lighten($dark-blue, 40%);
width: 100%; width: 100%;
section { section {
header { header {
background: #eee; background: #fff;
padding: 6px; 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; @include clearfix;
h2 { h2 {
...@@ -37,6 +43,7 @@ section#unit-wrapper { ...@@ -37,6 +43,7 @@ section#unit-wrapper {
letter-spacing: 1px; letter-spacing: 1px;
font-size: 12px; font-size: 12px;
float: left; float: left;
color: $bright-blue;
} }
} }
...@@ -44,7 +51,7 @@ section#unit-wrapper { ...@@ -44,7 +51,7 @@ section#unit-wrapper {
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
width: flex-grid(6, 9); width: flex-grid(6, 9);
border-right: 1px solid #333; border-right: 1px solid lighten($dark-blue, 40%);
&.empty { &.empty {
text-align: center; text-align: center;
...@@ -59,14 +66,9 @@ section#unit-wrapper { ...@@ -59,14 +66,9 @@ section#unit-wrapper {
ol { ol {
list-style: none; list-style: none;
border-bottom: 1px solid #333;
li { li {
border-bottom: 1px solid #333; border-bottom: 1px solid lighten($dark-blue, 60%);
&:last-child{
border-bottom: 0;
}
a { a {
color: #000; color: #000;
...@@ -78,6 +80,10 @@ section#unit-wrapper { ...@@ -78,6 +80,10 @@ section#unit-wrapper {
li { li {
padding: 6px; padding: 6px;
&:last-child {
border-bottom: 0;
}
&:hover { &:hover {
a.draggable { a.draggable {
opacity: 1; opacity: 1;
...@@ -127,11 +133,10 @@ section#unit-wrapper { ...@@ -127,11 +133,10 @@ section#unit-wrapper {
ol { ol {
list-style: none; list-style: none;
border-bottom: 1px solid #999;
li { li {
border-bottom: 1px solid #999; border-bottom: 1px solid darken($light-blue, 8%);
background: #f9f9f9; background: lighten($light-blue, 2%);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
......
cms/static/sass/_unit.scss
section#unit-wrapper { section#unit-wrapper {
> header { > header {
border-bottom: 2px solid #333; border-bottom: 2px solid $dark-blue;
@include clearfix(); @include clearfix();
@include box-shadow( 0 2px 0 darken($light-blue, 3%));
padding: 6px 20px; padding: 6px 20px;
section { section {
...@@ -12,6 +13,7 @@ section#unit-wrapper { ...@@ -12,6 +13,7 @@ section#unit-wrapper {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
@include inline-block(); @include inline-block();
color: $bright-blue;
} }
p { p {
...@@ -28,11 +30,26 @@ section#unit-wrapper { ...@@ -28,11 +30,26 @@ section#unit-wrapper {
color: #666; color: #666;
a { a {
display: block;
@include inline-block;
&.cancel { &.cancel {
margin-right: 20px; margin-right: 20px;
font-style: italic; font-style: italic;
font-size: 12px; 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%);
}
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment