Skip to content

E
edx-platform
Commit 72a3c0f7 by kylefiedler
Options

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

Kf cms style
parents 5ee29807 6f40b464
Showing with 889 additions and 385 deletions
cms/static/sass/_base.scss
...@@ -32,11 +32,11 @@ input { ...@@ -32,11 +32,11 @@ input {
button, input[type="submit"], .button { button, input[type="submit"], .button {
background-color: $orange; background-color: $orange;
color: #fff;
-webkit-font-smoothing: antialiased;
padding: 8px 10px;
border: 0; border: 0;
color: #fff;
font-weight: bold; font-weight: bold;
padding: 8px 10px;
-webkit-font-smoothing: antialiased;
&:hover { &:hover {
background-color: shade($orange, 10%); background-color: shade($orange, 10%);
...@@ -45,9 +45,22 @@ button, input[type="submit"], .button { ...@@ -45,9 +45,22 @@ button, input[type="submit"], .button {
#{$all-text-inputs}, textarea { #{$all-text-inputs}, textarea {
border: 1px solid $dark-blue; border: 1px solid $dark-blue;
@include box-shadow(inset 0 3px 6px $light-blue);
color: lighten($dark-blue, 30%);
font: $body-font-size $body-font-family; font: $body-font-size $body-font-family;
outline: none;
padding: 4px 6px; padding: 4px 6px;
@include box-shadow(inset 0 3px 6px $light-blue);
&:hover {
background: lighten($yellow, 13%);
color: $dark-blue;
}
&:focus {
@include box-shadow(inset 0 3px 6px $light-blue, 0 0 3px lighten($bright-blue, 10%));
color: $dark-blue;
background: lighten($yellow, 13%);
}
} }
textarea { textarea {
...@@ -56,7 +69,6 @@ textarea { ...@@ -56,7 +69,6 @@ textarea {
line-height: lh(); line-height: lh();
padding: 15px; padding: 15px;
width: 100%; width: 100%;
} }
// Extends // Extends
...@@ -87,18 +99,22 @@ textarea { ...@@ -87,18 +99,22 @@ textarea {
} }
.draggable { .draggable {
width: 7px;
min-height: 14px;
background: url('../img/drag-handle.png') no-repeat center; background: url('../img/drag-handle.png') no-repeat center;
text-indent: -9999px; text-indent: -9999px;
display: block; display: block;
float: right; cursor: move;
height: 100%;
padding: 0;
@include position(absolute, 0px 0px 0 0);
width: 30px;
z-index: 99;
} }
.editable { .editable {
&:hover { &:hover {
background: lighten($yellow, 10%); background: lighten($yellow, 10%);
} }
button { button {
padding: 4px 10px; padding: 4px 10px;
} }
...@@ -107,13 +123,8 @@ textarea { ...@@ -107,13 +123,8 @@ textarea {
.wip { .wip {
outline: 1px solid #f00 !important; outline: 1px solid #f00 !important;
position: relative; position: relative;
}
&:after { .hidden {
content: "WIP"; display: none;
font-size: 8px;
padding: 2px;
background: #f00;
color: #fff;
@include position(absolute, 0px 0px 0 0);
}
} }
cms/static/sass/_calendar.scss
section.cal { section.cal {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 25px;
@include clearfix; @include clearfix;
padding: 25px;
> header { > header {
@include clearfix; @include clearfix;
...@@ -18,25 +18,44 @@ section.cal { ...@@ -18,25 +18,44 @@ section.cal {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 14px; font-size: 14px;
padding: 6px; padding: 6px 6px 6px 0;
font-size: 12px; font-size: 12px;
margin: 0;
} }
ul { ul {
@include inline-block; @include inline-block;
float: right;
margin: 0;
padding: 0;
&.actions {
float: left;
}
li { li {
@include inline-block; @include inline-block;
margin-left: 6px; margin-right: 6px;
border-left: 1px solid #ddd; border-right: 1px solid #ddd;
padding: 0 6px; padding: 0 6px 0 0;
&:last-child {
border-right: 0;
margin-right: 0;
padding-right: 0;
}
a { a {
@include inline-block(); @include inline-block();
font-size: 12px;
@include inline-block;
margin: 0 6px;
font-style: italic;
} }
ul { ul {
@include inline-block(); @include inline-block();
margin: 0;
li { li {
@include inline-block(); @include inline-block();
...@@ -55,6 +74,8 @@ section.cal { ...@@ -55,6 +74,8 @@ section.cal {
border-top: 1px solid lighten($dark-blue, 40%); border-top: 1px solid lighten($dark-blue, 40%);
width: 100%; width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0;
padding: 0;
> li { > li {
border-right: 1px solid lighten($dark-blue, 40%); border-right: 1px solid lighten($dark-blue, 40%);
...@@ -62,8 +83,13 @@ section.cal { ...@@ -62,8 +83,13 @@ section.cal {
@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%); background-color: $light-blue;
&:hover {
li.create-module {
opacity: 1;
}
}
header { header {
border-bottom: 1px solid lighten($dark-blue, 40%); border-bottom: 1px solid lighten($dark-blue, 40%);
...@@ -77,103 +103,133 @@ section.cal { ...@@ -77,103 +103,133 @@ section.cal {
text-transform: uppercase; text-transform: uppercase;
border-bottom: 1px solid lighten($dark-blue, 60%); border-bottom: 1px solid lighten($dark-blue, 60%);
padding: 6px; padding: 6px;
color: $bright-blue;
margin: 0;
a { a {
color: $bright-blue; color: $bright-blue;
display: block; display: block;
padding: 6px;
margin: -6px;
&:hover {
color: darken($bright-blue, 10%);
background: lighten($yellow, 10%);
}
} }
} }
ul { ul {
margin: 0;
padding: 0;
li { li {
background: #fff; background: #fff;
color: #888; color: #888;
border-bottom: 0; border-bottom: 0;
font-size: 12px; font-size: 12px;
&:hover {
background: #fff;
}
} }
} }
} }
ul { ul {
list-style: none; list-style: none;
margin-bottom: 1px; margin: 0 0 1px 0;
padding: 0;
li { li {
border-bottom: 1px solid darken($light-blue, 8%); border-bottom: 1px solid darken($light-blue, 8%);
padding: 6px; position: relative;
overflow: hidden;
&:hover { &:hover {
background: lighten($yellow, 10%); background-color: lighten($yellow, 14%);
a.draggable {
background-color: lighten($yellow, 14%);
opacity: 1;
}
}
&.editable {
padding: 3px 6px;
} }
a { a {
color: lighten($dark-blue, 10%); color: lighten($dark-blue, 10%);
display: block;
padding: 6px 35px 6px 6px;
&:hover {
background-color: lighten($yellow, 10%);
}
&.draggable {
background-color: $light-blue;
opacity: .3;
padding: 0;
&:hover {
background-color: lighten($yellow, 10%);
}
}
} }
&.create-module { &.create-module {
position: relative; position: relative;
opacity: 0;
@include transition(all 3s ease-in-out);
background: darken($light-blue, 2%);
> div { > div {
background: $dark-blue;
@include box-shadow(0 0 5px darken($light-blue, 60%));
@include box-sizing(border-box);
display: none; display: none;
margin-left: 3%;
padding: 10px;
@include position(absolute, 30px 0 0 0); @include position(absolute, 30px 0 0 0);
width: 90%; width: 90%;
background: rgba(#000, .9);
padding: 10px;
@include box-sizing(border-box);
@include border-radius(3px);
z-index: 99; z-index: 99;
&:before {
content: " ";
display: block;
background: rgba(#000, .8);
width: 10px;
height: 10px;
@include position(absolute, -5px 0 0 50%);
@include transform(rotate(45deg));
}
ul { ul {
li { li {
border-bottom: 0; border-bottom: 0;
background: none; background: none;
input { input {
width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
border-color: #000; width: 100%;
padding: 6px;
} }
select { select {
width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
width: 100%;
option { option {
font-size: 14px; font-size: 14px;
} }
} }
div {
margin-top: 10px;
}
a { a {
color: $light-blue;
float: right; float: right;
&:first-child { &:first-child {
float: left; float: left;
} }
&:hover {
color: #fff;
}
} }
} }
} }
} }
&:hover {
div {
display: block;
}
}
} }
} }
} }
...@@ -181,7 +237,7 @@ section.cal { ...@@ -181,7 +237,7 @@ section.cal {
} }
section.new-section { section.new-section {
margin-top: 10px; margin: 10px 0 40px;
@include inline-block(); @include inline-block();
position: relative; position: relative;
...@@ -247,30 +303,48 @@ section.cal { ...@@ -247,30 +303,48 @@ section.cal {
} }
} }
} }
&:hover {
section {
display: block;
}
}
} }
} }
body.content body.content
section.cal { section.cal {
width: flex-grid(3) + flex-gutter(); width: flex-grid(3);
float: left; float: left;
overflow: scroll; overflow: scroll;
@include box-sizing(border-box); @include box-sizing(border-box);
opacity: .4; opacity: .4;
@include transition(); @include transition();
background: darken($light-blue, 2%);
> header ul {
display: none;
}
&:hover { &:hover {
opacity: 1; opacity: 1;
width: flex-grid(5) + flex-gutter();
background-color: transparent;
+ section.main-content {
width: flex-grid(7);
opacity: .6;
}
}
> header {
@include transition;
overflow: hidden;
> a {
display: none;
}
ul {
float: none;
display: block;
li {
ul {
display: inline;
}
}
}
} }
ol { ol {
......
cms/static/sass/_content-types.scss 0 → 100644
.content-type {
padding-left: 34px;
background-position: 8px center;
background-repeat: no-repeat;
}
.videosequence a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/videosequence.png');
}
.video a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/video.png');
}
.problemset a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/problemset.png');
}
.problem a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/problem.png');
}
.lab a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/lab.png');
}
.tab a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/lab.png');
}
.html a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/html.png');
}
.vertical a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/vertical.png');
}
.sequential a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/sequential.png');
}
.chapter a:first-child {
@extend .content-type;
background-image: url('/static/img/content-types/chapter.png');
}
cms/static/sass/_layout.scss
...@@ -5,6 +5,7 @@ body { ...@@ -5,6 +5,7 @@ body {
> section { > section {
display: table; display: table;
table-layout: fixed;
width: 100%; width: 100%;
} }
...@@ -25,7 +26,7 @@ body { ...@@ -25,7 +26,7 @@ body {
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
float: left; float: left;
margin-right: 15px; margin: 0 15px 0 0;
a { a {
color: #fff; color: #fff;
...@@ -46,6 +47,7 @@ body { ...@@ -46,6 +47,7 @@ body {
ul { ul {
float: left; float: left;
margin: 0;
&.user-nav { &.user-nav {
float: right; float: right;
...@@ -72,9 +74,10 @@ body { ...@@ -72,9 +74,10 @@ body {
section.main-content { section.main-content {
border-left: 2px solid $dark-blue; border-left: 2px solid $dark-blue;
@include box-sizing(border-box); @include box-sizing(border-box);
width: flex-grid(9); 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 darken($light-blue, 3%));
@include transition();
} }
} }
} }
cms/static/sass/_reset.scss deleted 100644 → 0
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
background:transparent;
}
html,body {
font-size: 100%;
}
// Corrects block display not defined in IE8/9 & FF3
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
// Corrects inline-block display not defined in IE8/9 & FF3
audio, canvas, video {
display: inline-block;
}
// Prevents modern browsers from displaying 'audio' without controls
audio:not([controls]) {
display: none;
}
// Addresses styling for 'hidden' attribute not present in IE8/9, FF3, S4
[hidden] {
display: none;
}
// Prevents iOS text size adjust after orientation change, without disabling user zoom
// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
// Addresses font-family inconsistency between 'textarea' and other form elements.
html, button, input, select, textarea {
font-family: sans-serif;
}
a {
// Addresses outline displayed oddly in Chrome
&:focus {
outline: thin dotted;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Improves readability when focused and also mouse hovered in all browsers
// people.opera.com/patrickl/experiments/keyboard/test
&:hover, &:active {
outline: 0;
}
}
// Addresses styling not present in IE8/9, S5, Chrome
abbr[title] {
border-bottom: 1px dotted;
}
// Addresses style set to 'bolder' in FF3+, S4/5, Chrome
b, strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
// Addresses styling not present in S5, Chrome
dfn {
font-style: italic;
}
// Addresses styling not present in IE8/9
mark {
background: #ff0;
color: #000;
}
// Corrects font family set oddly in S4/5, Chrome
// en.wikipedia.org/wiki/User:Davidgothberg/Test59
pre, code, kbd, samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
// Improves readability of pre-formatted text in all browsers
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
// Addresses quote property not supported in S4
blockquote, q {
quotes: none;
&:before, &:after {
content: '';
content: none;
}
}
small {
font-size: 75%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
nav {
ul, ol {
list-style: none;
list-style-image: none;
}
}
// Removes border when inside 'a' element in IE8/9, FF3
img {
border: 0;
height: auto;
max-width: 100%;
-ms-interpolation-mode: bicubic;
}
// Corrects overflow displayed oddly in IE9
svg:not(:root) {
overflow: hidden;
}
// Define consistent border, margin, and padding
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0; // Corrects color not being inherited in IE8/9
padding: 0;
white-space: normal; // Corrects text not wrapping in FF3
}
button, input, select, textarea {
font-size: 100%; // Corrects font size not being inherited in all browsers
margin: 0; // Addresses margins set differently in FF3+, S5, Chrome
vertical-align: baseline; // Improves appearance and consistency in all browsers
}
// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
button, input {
line-height: normal;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer; // Improves usability and consistency of cursor style between image-type 'input' and others
-webkit-appearance: button; // Corrects inability to style clickable 'input' types in iOS
}
// Re-set default cursor for disabled elements
button[disabled], input[disabled] {
cursor: default;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box; // Addresses box sizing set to content-box in IE8/9
padding: 0; //Removes excess padding in IE8/9
}
input[type="search"] {
-webkit-appearance: textfield; // Addresses appearance set to searchfield in S5, Chrome
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // Addresses box-sizing set to border-box in S5, Chrome (-moz to future-proof)
box-sizing: content-box;
}
// Removes inner padding and search cancel button in S5, Chrome on OS X
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
// Removes inner padding and border in FF3+
// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto; // Removes default vertical scrollbar in IE8/9
vertical-align: top; // Improves readability and alignment in all browsers
}
// Remove most spacing between table cells
table {
border-collapse: collapse;
border-spacing: 0;
}
cms/static/sass/_section.scss
section#unit-wrapper { section#unit-wrapper {
section.filters { section.filters {
@include clearfix; @include clearfix;
margin-bottom: 10px;
opacity: .4; opacity: .4;
margin-bottom: 10px;
@include transition; @include transition;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
h2 {
@include inline-block();
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 6px 6px 6px 0;
font-size: 12px;
margin: 0;
}
ul { ul {
@include clearfix(); @include clearfix();
list-style: none; list-style: none;
padding: 6px; margin: 0;
padding: 0;
li { li {
@include inline-block(); @include inline-block;
margin-right: 6px;
border-right: 1px solid #ddd;
padding-right: 6px;
&.advanced { &.search {
float: right; float: right;
border: 0;
}
a {
&.more {
font-size: 12px;
@include inline-block;
margin: 0 6px;
font-style: italic;
}
} }
} }
} }
...@@ -39,11 +63,13 @@ section#unit-wrapper { ...@@ -39,11 +63,13 @@ section#unit-wrapper {
@include clearfix; @include clearfix;
h2 { h2 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
float: left;
color: $bright-blue; color: $bright-blue;
float: left;
font-size: 12px;
letter-spacing: 1px;
line-height: 19px;
text-transform: uppercase;
margin: 0;
} }
} }
...@@ -66,6 +92,8 @@ section#unit-wrapper { ...@@ -66,6 +92,8 @@ section#unit-wrapper {
ol { ol {
list-style: none; list-style: none;
margin: 0;
padding: 0;
li { li {
border-bottom: 1px solid lighten($dark-blue, 60%); border-bottom: 1px solid lighten($dark-blue, 60%);
...@@ -76,15 +104,20 @@ section#unit-wrapper { ...@@ -76,15 +104,20 @@ section#unit-wrapper {
ol { ol {
list-style: none; list-style: none;
margin: 0;
padding: 0;
li { li {
padding: 6px; padding: 6px;
position: relative;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&:hover { &:hover {
background-color: lighten($yellow, 10%);
a.draggable { a.draggable {
opacity: 1; opacity: 1;
} }
...@@ -92,7 +125,7 @@ section#unit-wrapper { ...@@ -92,7 +125,7 @@ section#unit-wrapper {
a.draggable { a.draggable {
float: right; float: right;
opacity: .5; opacity: .4;
} }
&.group { &.group {
...@@ -104,13 +137,15 @@ section#unit-wrapper { ...@@ -104,13 +137,15 @@ section#unit-wrapper {
h3 { h3 {
font-size: 14px; font-size: 14px;
margin: 0;
} }
} }
ol { ol {
border-left: 4px solid #999; border-left: 4px solid #999;
border-bottom: 0; border-bottom: 0;
margin: 0;
padding: 0;
li { li {
&:last-child { &:last-child {
...@@ -133,31 +168,52 @@ section#unit-wrapper { ...@@ -133,31 +168,52 @@ section#unit-wrapper {
ol { ol {
list-style: none; list-style: none;
margin: 0;
padding: 0;
li { li {
border-bottom: 1px solid darken($light-blue, 8%); border-bottom: 1px solid darken($light-blue, 8%);
background: lighten($light-blue, 2%); background: $light-blue;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&.new-module a {
background-color: darken($light-blue, 2%);
&:hover {
background-color: lighten($yellow, 10%);
}
}
a {
color: $dark-blue;
}
ul { ul {
list-style: none; list-style: none;
margin: 0;
padding: 0;
li { li {
padding: 6px; padding: 6px;
border-collapse: collapse;
position: relative;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 1px solid darken($light-blue, 8%);
} }
&:hover { &:hover {
background-color: lighten($yellow, 10%);
a.draggable { a.draggable {
opacity: 1; opacity: 1;
} }
} }
&.empty { &.empty {
padding: 12px; padding: 12px;
...@@ -169,16 +225,10 @@ section#unit-wrapper { ...@@ -169,16 +225,10 @@ section#unit-wrapper {
} }
a.draggable { a.draggable {
float: right;
opacity: .3; opacity: .3;
} }
a {
color: #000;
}
} }
} }
} }
} }
} }
......
cms/static/sass/_unit.scss
...@@ -14,14 +14,19 @@ section#unit-wrapper { ...@@ -14,14 +14,19 @@ section#unit-wrapper {
letter-spacing: 1px; letter-spacing: 1px;
@include inline-block(); @include inline-block();
color: $bright-blue; color: $bright-blue;
margin: 0;
} }
p { p {
@include inline-block(); @include inline-block();
margin-left: 10px; margin: 0;
color: #999;
font-size: 12px; a {
font-style: italic; text-indent: -9999px;
@include inline-block();
width: 1px;
height: 100%;
}
} }
} }
...@@ -41,7 +46,7 @@ section#unit-wrapper { ...@@ -41,7 +46,7 @@ section#unit-wrapper {
&.save-update { &.save-update {
@extend .button; @extend .button;
margin: -6px -25px -6px 0; margin: -6px -21px -6px 0;
} }
} }
} }
...@@ -51,42 +56,68 @@ section#unit-wrapper { ...@@ -51,42 +56,68 @@ section#unit-wrapper {
padding: 20px; padding: 20px;
section.meta { section.meta {
background: $light-blue;
border-bottom: 1px solid lighten($dark-blue, 40%);
padding: 10px 20px;
margin: -20px -20px 10px;
opacity: .7;
@include transition;
&:hover {
opacity: 1;
padding: 20px;
margin: -20px -20px 10px;
}
section { section {
&.status-settings { &.status-settings {
float: left; float: left;
margin-bottom: 10px; margin-bottom: 10px;
color: $dark-blue; color: $dark-blue;
@include clearfix;
ul { ul {
border: 1px solid darken($light-blue, 15%);
@include clearfix();
float: left;
list-style: none; list-style: none;
border: 1px solid lighten($dark-blue, 40%); margin: 0;
@include inline-block(); padding: 0;
li { li {
@include inline-block(); border-right: 1px solid darken($light-blue, 15%);
border-right: 1px solid lighten($dark-blue, 40%); float: left;
padding: 6px;
&:last-child { &:last-child {
border-right: 0; border-right: 0;
} }
&.current {
background: #eee;
}
a { a {
color: $dark-blue; color: $dark-blue;
padding: 6px;
display: block;
&.current {
background: darken($light-blue, 5%);
}
&:hover {
background-color: lighten($yellow, 13%);
}
} }
} }
} }
a.settings { a.settings {
@include inline-block(); float: left;
margin: 0 20px; margin: 0 20px;
padding: 6px; padding: 6px;
border: 1px solid lighten($dark-blue, 40%); border: 1px solid darken($light-blue, 15%);
color: $dark-blue; color: $dark-blue;
&:hover {
background-color: lighten($yellow, 13%);
}
} }
select { select {
...@@ -110,10 +141,7 @@ section#unit-wrapper { ...@@ -110,10 +141,7 @@ section#unit-wrapper {
} }
&.tags { &.tags {
background: $light-blue;
color: lighten($dark-blue, 6%); color: lighten($dark-blue, 6%);
padding: 10px;
margin: 0 0 20px;
@include clearfix(); @include clearfix();
clear: both; clear: both;
...@@ -124,10 +152,12 @@ section#unit-wrapper { ...@@ -124,10 +152,12 @@ section#unit-wrapper {
h2 { h2 {
font-size: 14px; font-size: 14px;
@include inline-block(); @include inline-block();
margin: 0;
} }
p { p {
@include inline-block(); @include inline-block();
margin: 0;
} }
} }
} }
...@@ -192,6 +222,8 @@ section#unit-wrapper { ...@@ -192,6 +222,8 @@ section#unit-wrapper {
ul { ul {
list-style: none; list-style: none;
margin: 0;
padding: 0;
li { li {
margin-bottom: 20px; margin-bottom: 20px;
......
cms/static/sass/base-style.scss
@import 'bourbon/bourbon'; @import 'bourbon/bourbon';
@import 'reset'; @import 'vendor/normalize';
@import 'base', 'layout'; @import 'base', 'layout', 'content-types';
@import 'calendar'; @import 'calendar';
@import 'section', 'unit'; @import 'section', 'unit';
cms/static/sass/vendor/_normalize.scss 0 → 100644
/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects block display not defined in IE6/7/8/9 & FF3
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects inline-block display not defined in IE6/7/8/9 & FF3
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/*
* Prevents modern browsers from displaying 'audio' without controls
* Remove excess height in iOS5 devices
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
* Known issue: no IE6 support
*/
[hidden] {
display: none;
}
/* =============================================================================
Base
========================================================================== */
/*
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
* http://clagnut.com/blog/348/#c790
* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
*/
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/*
* Addresses font-family inconsistency between 'textarea' and other form elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/*
* Addresses margins handled incorrectly in IE6/7
*/
body {
margin: 0;
}
/* =============================================================================
Links
========================================================================== */
/*
* Addresses outline displayed oddly in Chrome
*/
a:focus {
outline: thin dotted;
}
/*
* Improves readability when focused and also mouse hovered in all browsers
* people.opera.com/patrickl/experiments/keyboard/test
*/
a:hover,
a:active {
outline: 0;
}
/* =============================================================================
Typography
========================================================================== */
/*
* Addresses font sizes and margins set differently in IE6/7
* Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
/*
* Addresses styling not present in IE7/8/9, S5, Chrome
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/*
* Addresses styling not present in S5, Chrome
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE6/7/8/9
*/
mark {
background: #ff0;
color: #000;
}
/*
* Addresses margins set differently in IE6/7
*/
p,
pre {
margin: 1em 0;
}
/*
* Corrects font family set oddly in IE6, S4/5, Chrome
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
*/
pre,
code,
kbd,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* 1. Addresses CSS quotes not supported in IE6/7
* 2. Addresses quote property not supported in S4
*/
/* 1 */
q {
quotes: none;
}
/* 2 */
q:before,
q:after {
content: '';
content: none;
}
small {
font-size: 75%;
}
/*
* Prevents sub and sup affecting line-height in all browsers
* gist.github.com/413930
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* =============================================================================
Lists
========================================================================== */
/*
* Addresses margins set differently in IE6/7
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/*
* Addresses paddings set differently in IE6/7
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/*
* Corrects list images handled incorrectly in IE7
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
* 2. Improves image quality when scaled in IE7
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/*
* Corrects overflow displayed oddly in IE9
*/
svg:not(:root) {
overflow: hidden;
}
/* =============================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE6/7/8/9, S5, O11
*/
figure {
margin: 0;
}
/* =============================================================================
Forms
========================================================================== */
/*
* Corrects margin displayed oddly in IE6/7
*/
form {
margin: 0;
}
/*
* Define consistent border, margin, and padding
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*
* 1. Corrects color not being inherited in IE6/7/8/9
* 2. Corrects text not wrapping in FF3
* 3. Corrects alignment displayed oddly in IE6/7
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/*
* 1. Corrects font size not being inherited in all browsers
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
* 3. Improves appearance and consistency in all browsers
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/*
* Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
*/
button,
input {
line-height: normal; /* 1 */
}
/*
* 1. Improves usability and consistency of cursor style between image-type 'input' and others
* 2. Corrects inability to style clickable 'input' types in iOS
* 3. Removes inner spacing in IE7 without affecting normal text inputs
* Known issue: inner spacing remains in IE6
*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer; /* 1 */
-webkit-appearance: button; /* 2 */
*overflow: visible; /* 3 */
}
/*
* Re-set default cursor for disabled elements
*/
button[disabled],
input[disabled] {
cursor: default;
}
/*
* 1. Addresses box sizing set to content-box in IE8/9
* 2. Removes excess padding in IE8/9
* 3. Removes excess padding in IE7
Known issue: excess padding remains in IE6
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/*
* 1. Addresses appearance set to searchfield in S5, Chrome
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in S5, Chrome on OS X
*/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/*
* Removes inner padding and border in FF3+
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Removes default vertical scrollbar in IE6/7/8/9
* 2. Improves readability and alignment in all browsers
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* =============================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
cms/templates/unit.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<header> <header>
<section> <section>
<h1 class="editable">${name}</h1> <h1 class="editable">${name}</h1>
<p>${category}</p> <p class="${category}"><a href="#">${category}</a></p>
</section> </section>
<div class="actions"> <div class="actions">
......
cms/templates/widgets/header.html
...@@ -3,16 +3,16 @@ ...@@ -3,16 +3,16 @@
<h2><a href="/">6.002x circuits and electronics</a></h2> <h2><a href="/">6.002x circuits and electronics</a></h2>
<ul> <ul>
<li> <li>
<a href="#" class="new-module">New Section</a> <a href="#" class="new-module wip">New Module</a>
</li> </li>
<li> <li>
<a href="#" class="new-module">New Unit</a> <a href="#" class="new-module wip">New Unit</a>
</li> </li>
</ul> </ul>
<ul class="user-nav"> <ul class="user-nav">
<li><a href="#">Tasks</a></li> <li><a href="#" class="wip">Tasks</a></li>
<li><a href="#">Settings</a></li> <li><a href="#" class="wip">Settings</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
cms/templates/widgets/html-edit.html
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<textarea name="" class="edit-box" rows="8" cols="40">${data}</textarea> <textarea name="" class="edit-box" rows="8" cols="40">${data}</textarea>
<div class="preview">${data}</div> <div class="preview">${data}</div>
<div class="actions wip"> <div class="actions">
<a href="" class="save-update">Save &amp; Update</a> <a href="" class="save-update">Save &amp; Update</a>
<a href="#" class="cancel">Cancel</a> <a href="#" class="cancel">Cancel</a>
</div> </div>
......
cms/templates/widgets/module-dropdown.html
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
<a href="#" class="new-module"> <a href="#" class="new-module">
+ Add new module + Add new module
</a> </a>
<div>
<div class="hidden">
<form> <form>
<ul> <ul>
<li> <li>
......
cms/templates/widgets/navigation.html
<section class="cal"> <section class="cal">
<header class="wip"> <header class="wip">
<h2>Filter content:</h2> <ul class="actions">
<li><a href="#">Timeline view</a></li>
<li><a href="#">Multi-Module edit</a></li>
</ul>
<ul> <ul>
<li> <li>
<a href="#">Sequences</a> <h2>Sort:</h2>
<select>
<ul> <option value="">Linear Order</option>
<li>Hide all</li> <option value="">Recently Modified</option>
<li>Lectures</li> <option value="">Type</option>
<li>Labs</li> <option value="">Alphabetically</option>
<li>Homeworks</li> </select>
<li>Exams</li>
</ul>
</li> </li>
<li> <li>
<a href="#">Deadlines</a> <h2>Filter:</h2>
<select>
<ul> <option value="">All content</option>
<li>Today</li> <option value="">Videos</option>
<li>Tomorrow</li> <option value="">Problems</option>
<li>This week</li> <option value="">Labs</option>
<li>In 2 weeks</li> <option value="">Tutorials</option>
<li>This month</li> <option value="">HTML</option>
</ul> </select>
<a href="#" class="more">More</a>
</li> </li>
<li> <li>
<a href="#">Goals</a> <a href="#">Hide goals</a>
<ul> </li>
<li>Hide</li> <li class="search">
</ul> <input type="search" name="" id="" value="" placeholder="Search" />
</li> </li>
</ul> </ul>
</header> </header>
...@@ -61,7 +64,7 @@ ...@@ -61,7 +64,7 @@
</ul> </ul>
</li> </li>
%endfor %endfor
<li> <li class="wip">
<header> <header>
<h1>Course Scratch Pad</h1> <h1>Course Scratch Pad</h1>
</header> </header>
...@@ -83,14 +86,15 @@ ...@@ -83,14 +86,15 @@
<a href="" class="video-edit">Video 3</a> <a href="" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a> <a href="#" class="draggable">handle</a>
</li> </li>
<%include file="module-dropdown.html"/>
</ul> </ul>
</li> </li>
</ol> </ol>
<section class="new-section"> <section class="new-section">
<a href="#" >+ Add New Section</a> <a href="#" class="wip" >+ Add New Section</a>
<section> <section class="hidden">
<form> <form>
<ul> <ul>
<li> <li>
......
cms/templates/widgets/sequence-edit.html
<section class="sequence-edit"> <section class="sequence-edit">
<section class="filters"> <section class="filters wip">
<ul> <ul>
<li> <li>
<label for="">Sort by</label> <h2>Sort:</h2>
<select> <select>
<option value="">Linear Order</option>
<option value="">Recently Modified</option> <option value="">Recently Modified</option>
<option value="">Type</option>
<option value="">Alphabetically</option>
</select> </select>
</li> </li>
<li> <li>
<label for="">Display</label> <h2>Filter:</h2>
<select> <select>
<option value="">All content</option> <option value="">All content</option>
<option value="">Videos</option>
<option value="">Problems</option>
<option value="">Labs</option>
<option value="">Tutorials</option>
<option value="">HTML</option>
</select> </select>
<a href="#" class="more">More</a>
</li> </li>
<li> <li class="search">
<select> <input type="search" name="" id="" value="" placeholder="Search" />
<option value="">Internal Only</option>
</select>
</li>
<li class="advanced">
<a href="#">Advanced filters</a>
</li>
<li>
<input type="search" name="" id="" value="" />
</li> </li>
</ul> </ul>
</section> </section>
...@@ -36,7 +35,7 @@ ...@@ -36,7 +35,7 @@
<li> <li>
<ol> <ol>
% for child in module.get_children(): % for child in module.get_children():
<li> <li class="${module.category}">
<a href="#" class="module-edit" id="${child.location.url()}">${child.name}</a> <a href="#" class="module-edit" id="${child.location.url()}">${child.name}</a>
<a href="#" class="draggable">handle</a> <a href="#" class="draggable">handle</a>
</li> </li>
...@@ -47,7 +46,7 @@ ...@@ -47,7 +46,7 @@
</ol> </ol>
</section> </section>
<section class="scratch-pad"> <section class="scratch-pad wip">
<ol> <ol>
<li class="new-module"> <li class="new-module">
<%include file="new-module.html"/> <%include file="new-module.html"/>
......
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