diff --git a/cms/static/img/content-types/chapter.png b/cms/static/img/content-types/chapter.png new file mode 100644 index 0000000000..2903f668d0 Binary files /dev/null and b/cms/static/img/content-types/chapter.png differ diff --git a/cms/static/img/content-types/html.png b/cms/static/img/content-types/html.png new file mode 100644 index 0000000000..566d0a232e Binary files /dev/null and b/cms/static/img/content-types/html.png differ diff --git a/cms/static/img/content-types/lab.png b/cms/static/img/content-types/lab.png new file mode 100644 index 0000000000..f5b457b8f2 Binary files /dev/null and b/cms/static/img/content-types/lab.png differ diff --git a/cms/static/img/content-types/problem.png b/cms/static/img/content-types/problem.png new file mode 100644 index 0000000000..198e57d629 Binary files /dev/null and b/cms/static/img/content-types/problem.png differ diff --git a/cms/static/img/content-types/problemset.png b/cms/static/img/content-types/problemset.png new file mode 100644 index 0000000000..85576db2ac Binary files /dev/null and b/cms/static/img/content-types/problemset.png differ diff --git a/cms/static/img/content-types/sequential.png b/cms/static/img/content-types/sequential.png new file mode 100644 index 0000000000..f0fda6d490 Binary files /dev/null and b/cms/static/img/content-types/sequential.png differ diff --git a/cms/static/img/content-types/vertical.png b/cms/static/img/content-types/vertical.png new file mode 100644 index 0000000000..17e4833f8b Binary files /dev/null and b/cms/static/img/content-types/vertical.png differ diff --git a/cms/static/img/content-types/video.png b/cms/static/img/content-types/video.png new file mode 100644 index 0000000000..1c9f0176bc Binary files /dev/null and b/cms/static/img/content-types/video.png differ diff --git a/cms/static/img/content-types/videosequence.png b/cms/static/img/content-types/videosequence.png new file mode 100644 index 0000000000..3a6c85843b Binary files /dev/null and b/cms/static/img/content-types/videosequence.png differ diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index b5156c0ec0..9cbc4ed048 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -32,11 +32,11 @@ input { button, input[type="submit"], .button { background-color: $orange; - color: #fff; - -webkit-font-smoothing: antialiased; - padding: 8px 10px; border: 0; + color: #fff; font-weight: bold; + padding: 8px 10px; + -webkit-font-smoothing: antialiased; &:hover { background-color: shade($orange, 10%); @@ -45,9 +45,22 @@ button, input[type="submit"], .button { #{$all-text-inputs}, textarea { border: 1px solid $dark-blue; - font: $body-font-size $body-font-family; - padding: 4px 6px; @include box-shadow(inset 0 3px 6px $light-blue); + color: lighten($dark-blue, 30%); + font: $body-font-size $body-font-family; + outline: none; + padding: 4px 6px; + + &: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 { @@ -56,7 +69,6 @@ textarea { line-height: lh(); padding: 15px; width: 100%; - } // Extends @@ -87,18 +99,22 @@ textarea { } .draggable { - width: 7px; - min-height: 14px; background: url('../img/drag-handle.png') no-repeat center; text-indent: -9999px; display: block; - float: right; + cursor: move; + height: 100%; + padding: 0; + @include position(absolute, 0px 0px 0 0); + width: 30px; + z-index: 99; } .editable { &:hover { background: lighten($yellow, 10%); } + button { padding: 4px 10px; } @@ -107,13 +123,8 @@ textarea { .wip { outline: 1px solid #f00 !important; position: relative; - - &:after { - content: "WIP"; - font-size: 8px; - padding: 2px; - background: #f00; - color: #fff; - @include position(absolute, 0px 0px 0 0); - } +} + +.hidden { + display: none; } diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 3dfda9c3d6..4070766617 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -1,7 +1,7 @@ section.cal { @include box-sizing(border-box); - padding: 25px; @include clearfix; + padding: 25px; > header { @include clearfix; @@ -18,25 +18,44 @@ section.cal { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; - padding: 6px; + padding: 6px 6px 6px 0; font-size: 12px; + margin: 0; } ul { @include inline-block; + float: right; + margin: 0; + padding: 0; + + &.actions { + float: left; + } li { @include inline-block; - margin-left: 6px; - border-left: 1px solid #ddd; - padding: 0 6px; + margin-right: 6px; + border-right: 1px solid #ddd; + padding: 0 6px 0 0; + + &:last-child { + border-right: 0; + margin-right: 0; + padding-right: 0; + } a { @include inline-block(); + font-size: 12px; + @include inline-block; + margin: 0 6px; + font-style: italic; } ul { @include inline-block(); + margin: 0; li { @include inline-block(); @@ -55,6 +74,8 @@ section.cal { border-top: 1px solid lighten($dark-blue, 40%); width: 100%; @include box-sizing(border-box); + margin: 0; + padding: 0; > li { border-right: 1px solid lighten($dark-blue, 40%); @@ -62,8 +83,13 @@ section.cal { @include box-sizing(border-box); float: left; 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 { border-bottom: 1px solid lighten($dark-blue, 40%); @@ -77,103 +103,133 @@ section.cal { text-transform: uppercase; border-bottom: 1px solid lighten($dark-blue, 60%); padding: 6px; + color: $bright-blue; + margin: 0; a { color: $bright-blue; display: block; + padding: 6px; + margin: -6px; + + &:hover { + color: darken($bright-blue, 10%); + background: lighten($yellow, 10%); + } } } ul { + margin: 0; + padding: 0; + li { background: #fff; color: #888; border-bottom: 0; font-size: 12px; - - &:hover { - background: #fff; - } } } } ul { list-style: none; - margin-bottom: 1px; + margin: 0 0 1px 0; + padding: 0; li { border-bottom: 1px solid darken($light-blue, 8%); - padding: 6px; + position: relative; + overflow: hidden; &:hover { - background: lighten($yellow, 10%); + background-color: lighten($yellow, 14%); + + a.draggable { + background-color: lighten($yellow, 14%); + opacity: 1; + } + } + + &.editable { + padding: 3px 6px; } a { 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 { position: relative; + opacity: 0; + @include transition(all 3s ease-in-out); + background: darken($light-blue, 2%); > div { + background: $dark-blue; + @include box-shadow(0 0 5px darken($light-blue, 60%)); + @include box-sizing(border-box); display: none; + margin-left: 3%; + padding: 10px; @include position(absolute, 30px 0 0 0); width: 90%; - background: rgba(#000, .9); - padding: 10px; - @include box-sizing(border-box); - @include border-radius(3px); 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 { li { border-bottom: 0; background: none; input { - width: 100%; @include box-sizing(border-box); - border-color: #000; - padding: 6px; + width: 100%; } select { - width: 100%; @include box-sizing(border-box); + width: 100%; option { font-size: 14px; } } + div { + margin-top: 10px; + } + a { + color: $light-blue; float: right; &:first-child { float: left; } + + &:hover { + color: #fff; + } } } } } - - &:hover { - div { - display: block; - } - } } } } @@ -181,7 +237,7 @@ section.cal { } section.new-section { - margin-top: 10px; + margin: 10px 0 40px; @include inline-block(); position: relative; @@ -247,30 +303,48 @@ section.cal { } } } - - &:hover { - section { - display: block; - } - } } } body.content section.cal { - width: flex-grid(3) + flex-gutter(); + width: flex-grid(3); float: left; overflow: scroll; @include box-sizing(border-box); opacity: .4; @include transition(); - - > header ul { - display: none; - } + 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; + } + } + + > header { + @include transition; + overflow: hidden; + + > a { + display: none; + } + + ul { + float: none; + display: block; + + li { + ul { + display: inline; + } + } + } } ol { diff --git a/cms/static/sass/_content-types.scss b/cms/static/sass/_content-types.scss new file mode 100644 index 0000000000..6df113df78 --- /dev/null +++ b/cms/static/sass/_content-types.scss @@ -0,0 +1,55 @@ +.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'); +} diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss index eb30d55f5c..f4c9f63ea6 100644 --- a/cms/static/sass/_layout.scss +++ b/cms/static/sass/_layout.scss @@ -5,6 +5,7 @@ body { > section { display: table; + table-layout: fixed; width: 100%; } @@ -25,7 +26,7 @@ body { font-size: 14px; text-transform: uppercase; float: left; - margin-right: 15px; + margin: 0 15px 0 0; a { color: #fff; @@ -46,6 +47,7 @@ body { ul { float: left; + margin: 0; &.user-nav { float: right; @@ -72,9 +74,10 @@ body { section.main-content { border-left: 2px solid $dark-blue; @include box-sizing(border-box); - width: flex-grid(9); + width: flex-grid(9) + flex-gutter(); float: left; @include box-shadow( -2px 0 0 darken($light-blue, 3%)); + @include transition(); } } } diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss deleted file mode 100644 index bfe619c1b0..0000000000 --- a/cms/static/sass/_reset.scss +++ /dev/null @@ -1,229 +0,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; -} diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss index f0ac33ba53..fa08e02901 100644 --- a/cms/static/sass/_section.scss +++ b/cms/static/sass/_section.scss @@ -1,24 +1,48 @@ section#unit-wrapper { section.filters { @include clearfix; - margin-bottom: 10px; opacity: .4; + margin-bottom: 10px; @include transition; &:hover { 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 { @include clearfix(); list-style: none; - padding: 6px; + margin: 0; + padding: 0; li { - @include inline-block(); + @include inline-block; + margin-right: 6px; + border-right: 1px solid #ddd; + padding-right: 6px; - &.advanced { + &.search { 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 { @include clearfix; h2 { - text-transform: uppercase; - letter-spacing: 1px; - font-size: 12px; - float: left; 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 { ol { list-style: none; + margin: 0; + padding: 0; li { border-bottom: 1px solid lighten($dark-blue, 60%); @@ -76,15 +104,20 @@ section#unit-wrapper { ol { list-style: none; + margin: 0; + padding: 0; li { padding: 6px; + position: relative; &:last-child { border-bottom: 0; } &:hover { + background-color: lighten($yellow, 10%); + a.draggable { opacity: 1; } @@ -92,7 +125,7 @@ section#unit-wrapper { a.draggable { float: right; - opacity: .5; + opacity: .4; } &.group { @@ -104,13 +137,15 @@ section#unit-wrapper { h3 { font-size: 14px; + margin: 0; } } - ol { border-left: 4px solid #999; border-bottom: 0; + margin: 0; + padding: 0; li { &:last-child { @@ -133,31 +168,52 @@ section#unit-wrapper { ol { list-style: none; + margin: 0; + padding: 0; li { border-bottom: 1px solid darken($light-blue, 8%); - background: lighten($light-blue, 2%); + background: $light-blue; &:last-child { border-bottom: 0; } + &.new-module a { + background-color: darken($light-blue, 2%); + + &:hover { + background-color: lighten($yellow, 10%); + } + } + + a { + color: $dark-blue; + } + ul { list-style: none; + margin: 0; + padding: 0; li { padding: 6px; + border-collapse: collapse; + position: relative; &:last-child { - border-bottom: 0; + border-bottom: 1px solid darken($light-blue, 8%); } &:hover { + background-color: lighten($yellow, 10%); + a.draggable { opacity: 1; } } + &.empty { padding: 12px; @@ -169,16 +225,10 @@ section#unit-wrapper { } a.draggable { - float: right; opacity: .3; } - - a { - color: #000; - } } } - } } } diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index a21a4bf7a2..d8613be3c2 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -14,14 +14,19 @@ section#unit-wrapper { letter-spacing: 1px; @include inline-block(); color: $bright-blue; + margin: 0; } p { @include inline-block(); - margin-left: 10px; - color: #999; - font-size: 12px; - font-style: italic; + margin: 0; + + a { + text-indent: -9999px; + @include inline-block(); + width: 1px; + height: 100%; + } } } @@ -41,7 +46,7 @@ section#unit-wrapper { &.save-update { @extend .button; - margin: -6px -25px -6px 0; + margin: -6px -21px -6px 0; } } } @@ -51,42 +56,68 @@ section#unit-wrapper { padding: 20px; 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 { &.status-settings { float: left; margin-bottom: 10px; color: $dark-blue; + @include clearfix; ul { + border: 1px solid darken($light-blue, 15%); + @include clearfix(); + float: left; list-style: none; - border: 1px solid lighten($dark-blue, 40%); - @include inline-block(); + margin: 0; + padding: 0; li { - @include inline-block(); - border-right: 1px solid lighten($dark-blue, 40%); - padding: 6px; + border-right: 1px solid darken($light-blue, 15%); + float: left; &:last-child { border-right: 0; } - &.current { - background: #eee; - } - a { color: $dark-blue; + padding: 6px; + display: block; + + &.current { + background: darken($light-blue, 5%); + } + + &:hover { + background-color: lighten($yellow, 13%); + } } } } a.settings { - @include inline-block(); + float: left; margin: 0 20px; padding: 6px; - border: 1px solid lighten($dark-blue, 40%); + border: 1px solid darken($light-blue, 15%); color: $dark-blue; + + &:hover { + background-color: lighten($yellow, 13%); + } } select { @@ -110,10 +141,7 @@ section#unit-wrapper { } &.tags { - background: $light-blue; color: lighten($dark-blue, 6%); - padding: 10px; - margin: 0 0 20px; @include clearfix(); clear: both; @@ -124,10 +152,12 @@ section#unit-wrapper { h2 { font-size: 14px; @include inline-block(); + margin: 0; } p { @include inline-block(); + margin: 0; } } } @@ -192,6 +222,8 @@ section#unit-wrapper { ul { list-style: none; + margin: 0; + padding: 0; li { margin-bottom: 20px; diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 3a6c6e0cea..6d45331576 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -1,6 +1,6 @@ @import 'bourbon/bourbon'; -@import 'reset'; +@import 'vendor/normalize'; -@import 'base', 'layout'; +@import 'base', 'layout', 'content-types'; @import 'calendar'; @import 'section', 'unit'; diff --git a/cms/static/sass/vendor/_normalize.scss b/cms/static/sass/vendor/_normalize.scss new file mode 100644 index 0000000000..4474dee25a --- /dev/null +++ b/cms/static/sass/vendor/_normalize.scss @@ -0,0 +1,504 @@ +/*! 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; +} diff --git a/cms/templates/unit.html b/cms/templates/unit.html index 34e21ca049..cd921d2be2 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -2,7 +2,7 @@

${name}

-

${category}

+

${category}

diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 4577ac64d8..bad314560b 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -3,16 +3,16 @@

6.002x circuits and electronics

diff --git a/cms/templates/widgets/html-edit.html b/cms/templates/widgets/html-edit.html index f0f63ea905..47a6a55cba 100644 --- a/cms/templates/widgets/html-edit.html +++ b/cms/templates/widgets/html-edit.html @@ -36,7 +36,7 @@
${data}
-
+
Save & Update Cancel
diff --git a/cms/templates/widgets/module-dropdown.html b/cms/templates/widgets/module-dropdown.html index 6edb142e40..2fdd327cdd 100644 --- a/cms/templates/widgets/module-dropdown.html +++ b/cms/templates/widgets/module-dropdown.html @@ -2,7 +2,8 @@ + Add new module -
+ +