Skip to content

E
edx-platform
Commit f53c6b32 by Calen Pennington
Options

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

Style for CMS
parents 036cc6b8 4efeda06
Showing with 267 additions and 62 deletions
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%;
......@@ -34,14 +42,18 @@ input {
button, input[type="submit"], .button {
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;
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;
&:hover {
background-color: shade($orange, 10%);
&:hover, &:focus {
@include box-shadow(inset 0 0 6px 1px adjust-hue($orange, 30%));
}
}
......@@ -122,10 +134,10 @@ textarea {
}
}
.wip {
outline: 1px solid #f00 !important;
position: relative;
}
// .wip {
// outline: 1px solid #f00 !important;
// position: relative;
// }
.hidden {
display: none;
......
cms/static/sass/_calendar.scss
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;
......
cms/static/sass/_content-types.scss
......@@ -53,3 +53,13 @@
@extend .content-type;
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 {
@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 20px;
text-shadow: 0 -1px 0 darken($dark-blue, 15%);
width: 100%;
@include box-sizing(border-box);
-webkit-font-smoothing: antialiased;
nav {
@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 {
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;
float: left;
margin: 0 15px 0 0;
-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;
}
}
}
}
......@@ -76,8 +117,9 @@ body {
@include box-sizing(border-box);
width: flex-grid(9) + flex-gutter();
float: left;
@include box-shadow( -2px 0 0 darken($light-blue, 3%));
@include box-shadow( -2px 0 0 lighten($dark-blue, 55%));
@include transition();
background: #FFF;
}
}
}
cms/static/sass/_section.scss
section#unit-wrapper {
section.filters {
@include clearfix;
display: none;
opacity: .4;
margin-bottom: 10px;
@include transition;
......@@ -52,22 +53,22 @@ section#unit-wrapper {
display: table;
border: 1px solid lighten($dark-blue, 40%);
width: 100%;
@include border-radius(3px);
@include box-shadow(0 0 4px lighten($dark-blue, 50%));
section {
header {
background: #fff;
padding: 6px;
border-bottom: 1px solid lighten($dark-blue, 60%);
border-top: 1px solid lighten($dark-blue, 60%);
margin-top: -1px;
@include clearfix;
h2 {
color: $bright-blue;
float: left;
font-size: 12px;
// float: left;
font-size: 14px;
letter-spacing: 1px;
line-height: 19px;
// line-height: 20px;
text-transform: uppercase;
margin: 0;
}
......@@ -172,7 +173,6 @@ section#unit-wrapper {
padding: 0;
li {
border-bottom: 1px solid darken($light-blue, 8%);
background: $light-blue;
&:last-child {
......@@ -181,6 +181,7 @@ section#unit-wrapper {
&.new-module a {
background-color: darken($light-blue, 2%);
border-bottom: 1px solid darken($light-blue, 8%);
&:hover {
background-color: lighten($yellow, 10%);
......@@ -199,6 +200,7 @@ section#unit-wrapper {
li {
padding: 6px;
border-collapse: collapse;
border-bottom: 1px solid darken($light-blue, 8%);
position: relative;
&:last-child {
......
cms/static/sass/_unit.scss
section#unit-wrapper {
> 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 box-shadow( 0 2px 0 darken($light-blue, 3%));
padding: 6px 20px;
@include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
text-shadow: 0 1px 0 #fff;
section {
float: left;
padding: 10px 20px;
h1 {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 18px;
@include inline-block();
color: $bright-blue;
color: $dark-blue;
margin: 0;
}
......@@ -22,32 +22,41 @@ section#unit-wrapper {
margin: 0;
a {
text-indent: -9999px;
@include inline-block();
width: 1px;
height: 100%;
font-size: 12px;
}
}
}
div {
float: right;
@include clearfix;
color: #666;
float: right;
padding: 6px 20px;
a {
display: block;
@include inline-block;
&.cancel {
margin-right: 20px;
font-style: italic;
font-size: 12px;
}
&.cancel {
margin-right: 20px;
font-style: italic;
font-size: 12px;
padding: 6px 0;
}
&.save-update {
@extend .button;
margin: -6px -21px -6px 0;
}
&.save-update {
padding: 6px 20px;
@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 'vendor/normalize';
@import 'keyframes';
@import 'base', 'layout', 'content-types';
@import 'calendar';
@import 'section', 'unit';
@import 'section', 'unit', 'index';
@import 'module/module-styles.scss';
cms/templates/base.html
......@@ -15,7 +15,7 @@
<meta name="path_prefix" content="${MITX_ROOT_URL}">
</head>
<body>
<body class="<%block name='bodyclass'></%block>">
<%include file="widgets/header.html"/>
<%include file="courseware_vendor_js.html"/>
......
cms/templates/course_index.html
<%inherit file="base.html" />
<%block name="title">Course Manager</%block>
<%include file="widgets/header.html"/>
<%block name="content">
<section class="main-container">
......
cms/templates/index.html
<%inherit file="base.html" />
<%block name="bodyclass">index</%block>
<%block name="title">Courses</%block>
<%block name="content">
<h1>edX Course Management</h1>
<section class="main-container">
<header>
<h1>Courses</h1>
<a href="#" class="wip">+</a>
</header>
<ol>
%for course, url in courses:
<li><a href="${url}">${course}</a></li>
......
cms/templates/widgets/header.html
<%! from django.core.urlresolvers import reverse %>
<header>
<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>
<li>
<a href="#" class="new-module wip">New Module</a>
<a href="#" class="new-module wip">Module</a>
</li>
<li>
<a href="#" class="new-module wip">New Unit</a>
<a href="#" class="new-module wip">Unit</a>
</li>
</ul>
......
lms/static/.gitignore
......@@ -5,4 +5,5 @@
*.orig
*.DS_Store
application.css
ie.css
\ No newline at end of file
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