Skip to content

E
edx-platform
Commit 5e60983e by Calen Pennington
Options

Merge pull request #314 from MITx/kf-cms-style 

Style for CMS
parents 02217c33 44168def
Showing with 259 additions and 53 deletions
cms/static/sass/_base.scss
...@@ -5,7 +5,7 @@ $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida ...@@ -5,7 +5,7 @@ $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida
$body-font-size: 14px; $body-font-size: 14px;
$body-line-height: 20px; $body-line-height: 20px;
$light-blue: #f0f8fa; $light-blue: #f0f7fd;
$dark-blue: #50545c; $dark-blue: #50545c;
$bright-blue: #3c8ebf; $bright-blue: #3c8ebf;
$orange: #f96e5b; $orange: #f96e5b;
...@@ -13,6 +13,14 @@ $yellow: #fff8af; ...@@ -13,6 +13,14 @@ $yellow: #fff8af;
$cream: #F6EFD4; $cream: #F6EFD4;
$mit-red: #933; $mit-red: #933;
@mixin hide-text {
background-color: transparent;
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none;
}
// Base html styles // Base html styles
html { html {
height: 100%; height: 100%;
...@@ -34,14 +42,18 @@ input { ...@@ -34,14 +42,18 @@ input {
button, input[type="submit"], .button { button, input[type="submit"], .button {
background-color: $orange; background-color: $orange;
border: 0; border: 1px solid darken($orange, 15%);
@include border-radius(4px);
@include box-shadow(inset 0 0 0 1px adjust-hue($orange, 20%), 0 1px 0 #fff);
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
padding: 8px 10px; @include linear-gradient(adjust-hue($orange, 8%), $orange);
padding: 6px 20px;
text-shadow: 0 1px 0 darken($orange, 10%);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
&:hover { &:hover, &:focus {
background-color: shade($orange, 10%); @include box-shadow(inset 0 0 6px 1px adjust-hue($orange, 30%));
} }
} }
...@@ -122,10 +134,10 @@ textarea { ...@@ -122,10 +134,10 @@ textarea {
} }
} }
.wip { // .wip {
outline: 1px solid #f00 !important; // outline: 1px solid #f00 !important;
position: relative; // position: relative;
} // }
.hidden { .hidden {
display: none; display: none;
......
cms/static/sass/_calendar.scss
section.cal { section.cal {
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
padding: 25px; padding: 20px;
> header { > header {
display: none;
@include clearfix; @include clearfix;
margin-bottom: 10px; margin-bottom: 10px;
opacity: .4; opacity: .4;
@include transition; @include transition;
text-shadow: 0 1px 0 #fff;
&:hover { &:hover {
opacity: 1; opacity: 1;
...@@ -70,12 +72,15 @@ section.cal { ...@@ -70,12 +72,15 @@ section.cal {
ol { ol {
list-style: none; list-style: none;
@include clearfix; @include clearfix;
border-left: 1px solid lighten($dark-blue, 40%); border: 1px solid lighten( $dark-blue , 30% );
border-top: 1px solid lighten($dark-blue, 40%); background: #FFF;
width: 100%; width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0; margin: 0;
padding: 0; padding: 0;
@include box-shadow(0 0 5px lighten($dark-blue, 45%));
@include border-radius(3px);
overflow: hidden;
> li { > li {
border-right: 1px solid lighten($dark-blue, 40%); border-right: 1px solid lighten($dark-blue, 40%);
...@@ -84,6 +89,7 @@ section.cal { ...@@ -84,6 +89,7 @@ section.cal {
float: left; float: left;
width: flex-grid(3) + ((flex-gutter() * 3) / 4); width: flex-grid(3) + ((flex-gutter() * 3) / 4);
background-color: $light-blue; background-color: $light-blue;
@include box-shadow(inset 0 0 0 1px lighten($light-blue, 8%));
&:hover { &:hover {
li.create-module { li.create-module {
...@@ -91,6 +97,10 @@ section.cal { ...@@ -91,6 +97,10 @@ section.cal {
} }
} }
&:nth-child(4n) {
border-right: 0;
}
header { header {
border-bottom: 1px solid lighten($dark-blue, 40%); border-bottom: 1px solid lighten($dark-blue, 40%);
@include box-shadow(0 2px 2px $light-blue); @include box-shadow(0 2px 2px $light-blue);
...@@ -128,6 +138,7 @@ section.cal { ...@@ -128,6 +138,7 @@ section.cal {
color: #888; color: #888;
border-bottom: 0; border-bottom: 0;
font-size: 12px; font-size: 12px;
@include box-shadow(none);
} }
} }
} }
...@@ -138,9 +149,11 @@ section.cal { ...@@ -138,9 +149,11 @@ section.cal {
padding: 0; padding: 0;
li { li {
border-bottom: 1px solid darken($light-blue, 8%); border-bottom: 1px solid darken($light-blue, 6%);
position: relative; // @include box-shadow(0 1px 0 lighten($light-blue, 4%));
overflow: hidden; overflow: hidden;
position: relative;
text-shadow: 0 1px 0 #fff;
&:hover { &:hover {
background-color: lighten($yellow, 14%); background-color: lighten($yellow, 14%);
...@@ -314,16 +327,13 @@ section.cal { ...@@ -314,16 +327,13 @@ section.cal {
@include box-sizing(border-box); @include box-sizing(border-box);
opacity: .4; opacity: .4;
@include transition(); @include transition();
background: darken($light-blue, 2%);
&:hover { &:hover {
opacity: 1; opacity: 1;
width: flex-grid(5) + flex-gutter(); width: flex-grid(5) + flex-gutter();
background-color: transparent;
+ section.main-content { + section.main-content {
width: flex-grid(7); width: flex-grid(7);
opacity: .6;
} }
} }
...@@ -340,6 +350,7 @@ section.cal { ...@@ -340,6 +350,7 @@ section.cal {
display: block; display: block;
li { li {
ul { ul {
display: inline; display: inline;
} }
...@@ -351,6 +362,7 @@ section.cal { ...@@ -351,6 +362,7 @@ section.cal {
li { li {
@include box-sizing(border-box); @include box-sizing(border-box);
width: 100%; width: 100%;
border-right: 0;
&.create-module { &.create-module {
display: none; display: none;
......
cms/static/sass/_content-types.scss
...@@ -53,3 +53,13 @@ ...@@ -53,3 +53,13 @@
@extend .content-type; @extend .content-type;
background-image: url('../img/content-types/chapter.png'); background-image: url('../img/content-types/chapter.png');
} }
.module a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/module.png');
}
.module a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/module.png');
}
cms/static/sass/_index.scss 0 → 100644
body.index {
> header {
display: none;
}
> h1 {
font-weight: 300;
color: lighten($dark-blue, 40%);
text-shadow: 0 1px 0 #fff;
-webkit-font-smoothing: antialiased;
max-width: 600px;
text-align: center;
margin: 80px auto 30px;
}
section.main-container {
border-right: 3px;
background: #FFF;
max-width: 600px;
margin: 0 auto;
display: block;
@include box-sizing(border-box);
border: 1px solid lighten( $dark-blue , 30% );
@include border-radius(3px);
overflow: hidden;
@include bounce-in-animation(.8s);
header {
border-bottom: 1px solid lighten($dark-blue, 50%);
@include linear-gradient(#fff, lighten($dark-blue, 62%));
@include clearfix();
@include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
text-shadow: 0 1px 0 #fff;
h1 {
font-size: 14px;
padding: 8px 20px;
float: left;
color: $dark-blue;
margin: 0;
}
a {
float: right;
padding: 8px 20px;
border-left: 1px solid lighten($dark-blue, 50%);
@include box-shadow( inset -1px 0 0 #fff);
font-weight: bold;
font-size: 22px;
line-height: 1;
color: $dark-blue;
}
}
ol {
list-style: none;
margin: 0;
padding: 0;
li {
border-bottom: 1px solid lighten($dark-blue, 50%);
a {
display: block;
padding: 10px 20px;
&:hover {
color: $dark-blue;
background: lighten($yellow, 10%);
text-shadow: 0 1px 0 #fff;
}
}
&:last-child {
border-bottom: none;
}
}
}
}
}
cms/static/sass/_keyframes.scss 0 → 100644
@mixin bounce-in {
0% {
opacity: 0;
@include transform(scale(.3));
}
50% {
opacity: 1;
@include transform(scale(1.05));
}
100% {
@include transform(scale(1));
}
}
@-moz-keyframes bounce-in { @include bounce-in(); }
@-webkit-keyframes bounce-in { @include bounce-in(); }
@-o-keyframes bounce-in { @include bounce-in(); }
@keyframes bounce-in { @include bounce-in();}
@mixin bounce-in-animation($duration, $timing: ease-in-out) {
@include animation-name(bounce-in);
@include animation-duration($duration);
@include animation-timing-function($timing);
@include animation-fill-mode(both);
}
cms/static/sass/_layout.scss
...@@ -2,6 +2,8 @@ body { ...@@ -2,6 +2,8 @@ body {
@include clearfix(); @include clearfix();
height: 100%; height: 100%;
font: 14px $body-font-family; font: 14px $body-font-family;
background-color: lighten($dark-blue, 62%);
background-image: url('/static/img/noise.png');
> section { > section {
display: table; display: table;
...@@ -11,28 +13,53 @@ body { ...@@ -11,28 +13,53 @@ body {
> header { > header {
background: $dark-blue; 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; color: #fff;
display: block; display: block;
float: none; float: none;
padding: 8px 25px; padding: 0 20px;
text-shadow: 0 -1px 0 darken($dark-blue, 15%);
width: 100%; width: 100%;
@include box-sizing(border-box);
-webkit-font-smoothing: antialiased;
nav { nav {
@include clearfix; @include clearfix;
> 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;
height: 19px;
padding: 8px 10px 8px 0;
width: 14px;
&:hover, &:focus {
opacity: .7;
}
}
h2 { h2 {
border-right: 1px solid darken($dark-blue, 10%);
@include box-shadow(1px 0 0 lighten($dark-blue, 10%));
float: left;
font-size: 14px; font-size: 14px;
margin: 0;
text-transform: uppercase; text-transform: uppercase;
float: left; -webkit-font-smoothing: antialiased;
margin: 0 15px 0 0;
a { a {
color: #fff; color: #fff;
padding: 8px 20px;
display: block;
&:hover { &:hover {
color: rgba(#fff, .6); background-color: rgba(darken($dark-blue, 15%), .5);
color: $yellow;
} }
} }
} }
...@@ -48,21 +75,35 @@ body { ...@@ -48,21 +75,35 @@ body {
ul { ul {
float: left; float: left;
margin: 0; margin: 0;
padding: 0;
@include clearfix;
&.user-nav { &.user-nav {
float: right; float: right;
border-left: 1px solid darken($dark-blue, 10%);
} }
li { 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 { a {
padding: 8px 10px; padding: 8px 20px;
display: block; display: block;
margin: -8px 0;
&:hover { &: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;
}
} }
} }
} }
...@@ -76,8 +117,9 @@ body { ...@@ -76,8 +117,9 @@ body {
@include box-sizing(border-box); @include box-sizing(border-box);
width: flex-grid(9) + flex-gutter(); width: flex-grid(9) + flex-gutter();
float: left; float: left;
@include box-shadow( -2px 0 0 darken($light-blue, 3%)); @include box-shadow( -2px 0 0 lighten($dark-blue, 55%));
@include transition(); @include transition();
background: #FFF;
} }
} }
} }
cms/static/sass/_section.scss
section#unit-wrapper { section#unit-wrapper {
section.filters { section.filters {
@include clearfix; @include clearfix;
display: none;
opacity: .4; opacity: .4;
margin-bottom: 10px; margin-bottom: 10px;
@include transition; @include transition;
...@@ -52,22 +53,22 @@ section#unit-wrapper { ...@@ -52,22 +53,22 @@ section#unit-wrapper {
display: table; display: table;
border: 1px solid lighten($dark-blue, 40%); border: 1px solid lighten($dark-blue, 40%);
width: 100%; width: 100%;
@include border-radius(3px);
@include box-shadow(0 0 4px lighten($dark-blue, 50%));
section { section {
header { header {
background: #fff; background: #fff;
padding: 6px; padding: 6px;
border-bottom: 1px solid lighten($dark-blue, 60%); 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 {
color: $bright-blue; color: $bright-blue;
float: left; // float: left;
font-size: 12px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 19px; // line-height: 20px;
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0;
} }
...@@ -172,7 +173,6 @@ section#unit-wrapper { ...@@ -172,7 +173,6 @@ section#unit-wrapper {
padding: 0; padding: 0;
li { li {
border-bottom: 1px solid darken($light-blue, 8%);
background: $light-blue; background: $light-blue;
&:last-child { &:last-child {
...@@ -181,6 +181,7 @@ section#unit-wrapper { ...@@ -181,6 +181,7 @@ section#unit-wrapper {
&.new-module a { &.new-module a {
background-color: darken($light-blue, 2%); background-color: darken($light-blue, 2%);
border-bottom: 1px solid darken($light-blue, 8%);
&:hover { &:hover {
background-color: lighten($yellow, 10%); background-color: lighten($yellow, 10%);
...@@ -199,6 +200,7 @@ section#unit-wrapper { ...@@ -199,6 +200,7 @@ section#unit-wrapper {
li { li {
padding: 6px; padding: 6px;
border-collapse: collapse; border-collapse: collapse;
border-bottom: 1px solid darken($light-blue, 8%);
position: relative; position: relative;
&:last-child { &:last-child {
......
cms/static/sass/_unit.scss
section#unit-wrapper { section#unit-wrapper {
> header { > header {
border-bottom: 2px solid $dark-blue; border-bottom: 1px solid lighten($dark-blue, 50%);
@include linear-gradient(#fff, lighten($dark-blue, 62%));
@include clearfix(); @include clearfix();
@include box-shadow( 0 2px 0 darken($light-blue, 3%)); @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
padding: 6px 20px; text-shadow: 0 1px 0 #fff;
section { section {
float: left; float: left;
padding: 10px 20px;
h1 { h1 {
font-size: 16px; font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
@include inline-block(); @include inline-block();
color: $bright-blue; color: $dark-blue;
margin: 0; margin: 0;
} }
...@@ -22,31 +22,40 @@ section#unit-wrapper { ...@@ -22,31 +22,40 @@ section#unit-wrapper {
margin: 0; margin: 0;
a { a {
text-indent: -9999px;
@include inline-block(); @include inline-block();
width: 1px; font-size: 12px;
height: 100%;
} }
} }
} }
div { div {
float: right; @include clearfix;
color: #666; color: #666;
float: right;
padding: 6px 20px;
a { a {
display: block;
@include inline-block; @include inline-block;
&.cancel { &.cancel {
margin-right: 20px; margin-right: 20px;
font-style: italic; font-style: italic;
font-size: 12px; font-size: 12px;
padding: 6px 0;
} }
&.save-update { &.save-update {
@extend .button; padding: 6px 20px;
margin: -6px -21px -6px 0; @include border-radius(3px);
border: 1px solid lighten($dark-blue, 40%);
@include box-shadow(inset 0 0 0 1px #fff);
color: $dark-blue;
@include linear-gradient(lighten($dark-blue, 60%), lighten($dark-blue, 55%));
&:hover, &:focus {
@include linear-gradient(lighten($dark-blue, 58%), lighten($dark-blue, 53%));
@include box-shadow(inset 0 0 6px 1px #fff);
}
} }
} }
} }
......
cms/static/sass/base-style.scss
@import 'bourbon/bourbon'; @import 'bourbon/bourbon';
@import 'vendor/normalize'; @import 'vendor/normalize';
@import 'keyframes';
@import 'base', 'layout', 'content-types'; @import 'base', 'layout', 'content-types';
@import 'calendar'; @import 'calendar';
@import 'section', 'unit'; @import 'section', 'unit', 'index';
@import 'module/module-styles.scss'; @import 'module/module-styles.scss';
cms/templates/base.html
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<meta name="path_prefix" content="${MITX_ROOT_URL}"> <meta name="path_prefix" content="${MITX_ROOT_URL}">
</head> </head>
<body> <body class="<%block name='bodyclass'></%block>">
<%include file="widgets/header.html"/> <%include file="widgets/header.html"/>
<%include file="courseware_vendor_js.html"/> <%include file="courseware_vendor_js.html"/>
......
cms/templates/course_index.html
<%inherit file="base.html" /> <%inherit file="base.html" />
<%block name="title">Course Manager</%block> <%block name="title">Course Manager</%block>
<%include file="widgets/header.html"/>
<%block name="content"> <%block name="content">
<section class="main-container"> <section class="main-container">
......
cms/templates/index.html
<%inherit file="base.html" /> <%inherit file="base.html" />
<%block name="bodyclass">index</%block>
<%block name="title">Courses</%block> <%block name="title">Courses</%block>
<%block name="content"> <%block name="content">
<h1>edX Course Management</h1>
<section class="main-container"> <section class="main-container">
<header>
<h1>Courses</h1>
<a href="#" class="wip">+</a>
</header>
<ol> <ol>
%for course, url in courses: %for course, url in courses:
<li><a href="${url}">${course}</a></li> <li><a href="${url}">${course}</a></li>
......
cms/templates/widgets/header.html
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<header> <header>
<nav> <nav>
<h2><a href="/">edX CMS: TODO:-course-name-here</a></h2> <a href="/">Home</a>
<h2><a href="#">edX CMS: TODO:-course-name-here</a></h2>
<ul> <ul>
<li> <li>
<a href="#" class="new-module wip">New Module</a> <a href="#" class="new-module wip">Module</a>
</li> </li>
<li> <li>
<a href="#" class="new-module wip">New Unit</a> <a href="#" class="new-module wip">Unit</a>
</li> </li>
</ul> </ul>
......
lms/static/.gitignore
...@@ -6,3 +6,4 @@ ...@@ -6,3 +6,4 @@
*.DS_Store *.DS_Store
application.css application.css
ie.css ie.css
Gemfile.lock
lms/static/sass/course.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
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