Skip to content

E
edx-platform
Commit d959e8b8 by Kyle Fiedler
Options

Added more styles includeing the index page more color changes and header styles

parent 53b6247a
Showing with 180 additions and 30 deletions
cms/static/sass/_base.scss
......@@ -8,7 +8,7 @@ $body-line-height: 20px;
$light-blue: #f0f7fd;
$dark-blue: #50545c;
$bright-blue: #3c8ebf;
$orange: #f96e5b;
$orange: #ea5155;
$yellow: #fff8af;
$cream: #F6EFD4;
$mit-red: #933;
......@@ -41,15 +41,17 @@ input {
}
button, input[type="submit"], .button {
background-color: $orange;
border: 0;
@include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%));
@include linear-gradient(lighten($bright-blue, 10%), $bright-blue);
border-left: 1px solid lighten($dark-blue, 10%);
text-shadow: 0 -1px 0 darken($bright-blue, 10%);
color: #fff;
font-weight: bold;
padding: 8px 10px;
-webkit-font-smoothing: antialiased;
@include border-radius(4px);
&:hover {
background-color: shade($orange, 10%);
&:hover, &:focus {
}
}
......
cms/static/sass/_content-types.scss
......@@ -53,3 +53,8 @@
@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');
}
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
......@@ -20,7 +20,7 @@ body {
color: #fff;
display: block;
float: none;
padding: 0 25px;
padding: 0 20px;
text-shadow: 0 -1px 0 darken($dark-blue, 15%);
width: 100%;
......@@ -117,7 +117,7 @@ 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,6 +53,8 @@ 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 {
......
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,55 @@ 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: 0 20px;
a {
display: block;
@include inline-block;
padding: 13px 20px;
&.cancel {
margin-right: 20px;
font-style: italic;
font-size: 12px;
}
&.cancel {
margin-right: 20px;
font-style: italic;
font-size: 12px;
}
&.save-update {
@extend .button;
margin: -6px -21px -6px 0;
}
&.save-update {
border-left: 1px solid lighten($dark-blue, 40%);
border-right: 1px solid lighten($dark-blue, 40%);
// @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%));
color: $bright-blue;
@include linear-gradient(lighten($dark-blue, 50%), lighten($bright-blue, 55%));
// &:hover, &:focus {
// color: $yellow;
// @include linear-gradient($bright-blue, darken($bright-blue, 10%));
// @include box-shadow(inset 0 0 3px 1px lighten($bright-blue, 10%));
// }
}
// &.save-update {
// border-left: 1px solid lighten($dark-blue, 10%);
// border-right: 1px solid lighten($dark-blue, 10%);
// @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%));
// color: #fff;
// @include linear-gradient(lighten($bright-blue, 10%), $bright-blue);
// text-shadow: 0 -1px 0 darken($bright-blue, 10%);
// &:hover, &:focus {
// color: $yellow;
// @include linear-gradient($bright-blue, darken($bright-blue, 10%));
// @include box-shadow(inset 0 0 3px 1px lighten($bright-blue, 10%));
// }
// }
}
}
}
......
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>
......
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