Skip to content
Snippets Groups Projects
Commit d53e4bd3 authored by Kyle Fiedler's avatar Kyle Fiedler
Browse files

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

parent 9d638d2a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 180 additions and 30 deletions
cms/static/img/content-types/module.png 0 → 100644
+ 0
− 0
View file @ d53e4bd3
cms/static/img/content-types/module.png

1.11 KiB

cms/static/sass/_base.scss
+ 7
− 5
View file @ d53e4bd3
......@@ -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
+ 5
− 0
View file @ d53e4bd3
......@@ -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
+ 80
− 0
View file @ d53e4bd3
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
+ 27
− 0
View file @ d53e4bd3
@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
− 2
View file @ d53e4bd3
......@@ -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
+ 3
− 0
View file @ d53e4bd3
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
+ 44
− 21
View file @ d53e4bd3
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
+ 2
− 1
View file @ d53e4bd3
@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
+ 1
− 1
View file @ d53e4bd3
......@@ -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
+ 1
− 0
View file @ d53e4bd3
<%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
+ 8
− 0
View file @ d53e4bd3
<%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>
......
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