Skip to content

E
edx-platform
Commit ea87d82c by Galen Frechette
Options

Merge pull request #47 from MITx/kf-scss-cleanup 

Kf scss cleanup
parents ff366ad6 b17d83a4
Showing with 236 additions and 1038 deletions
static/css/marketing.css
......@@ -735,14 +735,14 @@ section.index-content section.staff h1 {
margin-top: 25.888px; }
#lean_overlay {
background: #000;
display: none;
height: 100%;
left: 0px;
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none; }
z-index: 100; }
div.leanModal_box {
background: #fff;
......@@ -772,8 +772,8 @@ div.leanModal_box a.modal_close {
width: 14px;
z-index: 2; }
div.leanModal_box a.modal_close:hover {
text-decoration: none;
color: #993333; }
color: #993333;
text-decoration: none; }
div.leanModal_box h1 {
border-bottom: 1px solid #eee;
font-size: 24px;
......@@ -786,8 +786,8 @@ div.leanModal_box#enroll {
div.leanModal_box#enroll ol {
padding-top: 25.888px; }
div.leanModal_box#enroll ol li.terms, div.leanModal_box#enroll ol li.honor-code {
width: auto;
float: none; }
float: none;
width: auto; }
div.leanModal_box#enroll ol li div.tip {
display: none; }
div.leanModal_box#enroll ol li:hover div.tip {
......@@ -828,16 +828,16 @@ div.leanModal_box form ol li.terms, div.leanModal_box form ol li.remember {
padding-top: 25.888px;
width: auto; }
div.leanModal_box form ol li.honor-code {
width: auto;
float: none; }
float: none;
width: auto; }
div.leanModal_box form ol li label {
display: block;
font-weight: bold; }
div.leanModal_box form ol li input[type="email"], div.leanModal_box form ol li input[type="number"], div.leanModal_box form ol li input[type="password"], div.leanModal_box form ol li input[type="search"], div.leanModal_box form ol li input[type="tel"], div.leanModal_box form ol li input[type="text"], div.leanModal_box form ol li input[type="url"], div.leanModal_box form ol li input[type="color"], div.leanModal_box form ol li input[type="date"], div.leanModal_box form ol li input[type="datetime"], div.leanModal_box form ol li input[type="datetime-local"], div.leanModal_box form ol li input[type="month"], div.leanModal_box form ol li input[type="time"], div.leanModal_box form ol li input[type="week"], div.leanModal_box form ol li textarea {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box;
width: 100%; }
div.leanModal_box form ol li input[type="checkbox"] {
margin-right: 10px; }
div.leanModal_box form ol li ul {
......@@ -904,12 +904,12 @@ div#login header h1 {
padding-bottom: 0;
margin-bottom: 6.472px; }
div#login ol li {
width: auto;
float: none; }
float: none;
width: auto; }
div.lost-password {
text-align: left;
margin-top: 25.888px; }
margin-top: 25.888px;
text-align: left; }
div.lost-password a {
color: #999; }
div.lost-password a:hover {
......@@ -927,11 +927,11 @@ div#apply_name_change ul, div#change_email ul, div#unenroll ul, div#deactivate-a
div#apply_name_change ul li, div#change_email ul li, div#unenroll ul li, div#deactivate-account ul li {
margin-bottom: 12.944px; }
div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll ul li textarea, div#unenroll ul li input[type="email"], div#unenroll ul li input[type="number"], div#unenroll ul li input[type="password"], div#unenroll ul li input[type="search"], div#unenroll ul li input[type="tel"], div#unenroll ul li input[type="text"], div#unenroll ul li input[type="url"], div#unenroll ul li input[type="color"], div#unenroll ul li input[type="date"], div#unenroll ul li input[type="datetime"], div#unenroll ul li input[type="datetime-local"], div#unenroll ul li input[type="month"], div#unenroll ul li input[type="time"], div#unenroll ul li input[type="week"], div#deactivate-account ul li textarea, div#deactivate-account ul li input[type="email"], div#deactivate-account ul li input[type="number"], div#deactivate-account ul li input[type="password"], div#deactivate-account ul li input[type="search"], div#deactivate-account ul li input[type="tel"], div#deactivate-account ul li input[type="text"], div#deactivate-account ul li input[type="url"], div#deactivate-account ul li input[type="color"], div#deactivate-account ul li input[type="date"], div#deactivate-account ul li input[type="datetime"], div#deactivate-account ul li input[type="datetime-local"], div#deactivate-account ul li input[type="month"], div#deactivate-account ul li input[type="time"], div#deactivate-account ul li input[type="week"] {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box;
display: block;
width: 100%; }
div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll ul li textarea, div#deactivate-account ul li textarea {
height: 60px; }
div#apply_name_change ul li input[type="submit"], div#change_email ul li input[type="submit"], div#unenroll ul li input[type="submit"], div#deactivate-account ul li input[type="submit"] {
......
templates/sass/_help.scss
......@@ -2,10 +2,10 @@ section.help.main-content {
padding: lh();
h1 {
margin-top: 0;
border-bottom: 1px solid #ddd;
margin-bottom: lh();
margin-top: 0;
padding-bottom: lh();
border-bottom: 1px solid #ddd;
}
p {
......@@ -17,9 +17,9 @@ section.help.main-content {
}
section.self-help {
float: left;
margin-bottom: lh();
margin-right: flex-gutter();
float: left;
width: flex-grid(6);
ul {
......@@ -36,17 +36,17 @@ section.help.main-content {
width: flex-grid(6);
dl {
margin-bottom: lh();
display: block;
margin-bottom: lh();
dd {
margin-bottom: lh();
}
dt {
font-weight: bold;
float: left;
clear: left;
float: left;
font-weight: bold;
width: flex-grid(2, 6);
}
}
......
templates/sass/_info.scss
......@@ -16,28 +16,28 @@ div.info-wrapper {
list-style: none;
> li {
padding-bottom: lh(.5);
margin-bottom: lh(.5);
@extend .clearfix;
border-bottom: 1px solid #e3e3e3;
margin-bottom: lh(.5);
padding-bottom: lh(.5);
&:first-child {
padding: lh(.5);
margin: 0 (-(lh(.5))) lh();
background: $cream;
border-bottom: 1px solid darken($cream, 10%);
margin: 0 (-(lh(.5))) lh();
padding: lh(.5);
}
h2 {
float: left;
width: flex-grid(2, 9);
margin: 0 flex-gutter() 0 0;
width: flex-grid(2, 9);
}
section.update-description {
float: left;
width: flex-grid(7, 9);
margin-bottom: 0;
width: flex-grid(7, 9);
li {
margin-bottom: lh(.5);
......@@ -55,9 +55,9 @@ div.info-wrapper {
section.handouts {
@extend .sidebar;
border-left: 1px solid #d3d3d3;
@include border-radius(0 4px 4px 0);
border-right: 0;
border-left: 1px solid #d3d3d3;
header {
@extend .bottom-border;
......@@ -69,32 +69,32 @@ div.info-wrapper {
}
p {
color: #666;
font-size: 12px;
margin-bottom: 0;
margin-top: 4px;
font-size: 12px;
color: #666;
}
}
ol {
list-style: none;
background: none;
list-style: none;
li {
@include box-shadow(0 1px 0 #eee);
@extend .clearfix;
background: none;
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
@include box-sizing(border-box);
@extend .clearfix;
padding: 7px lh(.75);
background: none;
position: relative;
&.expandable,
&.collapsable {
h4 {
padding-left: 18px;
font-style: $body-font-size;
font-weight: normal;
padding-left: 18px;
}
}
......@@ -103,10 +103,10 @@ div.info-wrapper {
margin: 7px (-(lh(.75))) 0;
li {
padding-left: 18px + lh(.75);
@include box-shadow(inset 0 1px 0 #eee);
border-top: 1px solid #d3d3d3;
border-bottom: 0;
border-top: 1px solid #d3d3d3;
@include box-shadow(inset 0 1px 0 #eee);
padding-left: 18px + lh(.75);
}
}
......@@ -116,13 +116,13 @@ div.info-wrapper {
div.hitarea {
background-image: url('/static/images/treeview-default.gif');
width: 100%;
height: 100%;
max-height: 20px;
display: block;
position: absolute;
height: 100%;
left: lh(.75);
margin-left: 0;
max-height: 20px;
position: absolute;
width: 100%;
&:hover {
opacity: 0.6;
......@@ -140,27 +140,27 @@ div.info-wrapper {
h3 {
border-bottom: 0;
text-transform: uppercase;
font-weight: bold;
color: #999;
@include box-shadow(none);
color: #999;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
p {
font-size: $body-font-size;
letter-spacing: 0;
margin: 0;
text-transform: none;
letter-spacing: 0;
font-size: $body-font-size;
a {
padding-right: 8px;
&:before {
color: #ccc;
content: "•";
@include inline-block();
padding-right: 8px;
color: #ccc;
}
&:first-child {
......@@ -173,10 +173,10 @@ div.info-wrapper {
}
a {
@include transition();
color: lighten($text-color, 10%);
text-decoration: none;
@include inline-block();
text-decoration: none;
@include transition();
&:hover {
color: $mit-red;
......
templates/sass/_profile.scss
......@@ -4,14 +4,14 @@ div.profile-wrapper {
section.user-info {
@extend .sidebar;
@include border-radius(0px 4px 4px 0);
border-left: 1px solid #d3d3d3;
@include border-radius(0px 4px 4px 0);
border-right: 0;
header {
padding: lh(.5) lh();
margin: 0 ;
@extend .bottom-border;
margin: 0 ;
padding: lh(.5) lh();
h1 {
font-size: 18px;
......@@ -20,12 +20,12 @@ div.profile-wrapper {
}
a {
color: #999;
font-size: 12px;
position: absolute;
top: 13px;
right: lh(.5);
text-transform: uppercase;
font-size: 12px;
color: #999;
top: 13px;
&:hover {
color: #555;
......@@ -37,14 +37,14 @@ div.profile-wrapper {
list-style: none;
li {
@include transition();
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
color: lighten($text-color, 10%);
display: block;
text-decoration: none;
@include box-shadow(0 1px 0 #eee);
padding: 7px lh();
border-bottom: 1px solid #d3d3d3;
position: relative;
text-decoration: none;
@include transition();
div#location_sub, div#language_sub {
font-weight: bold;
......@@ -57,9 +57,9 @@ div.profile-wrapper {
input {
&[type="text"] {
@include box-sizing(border-box);
margin: lh(.5) 0;
width: 100%;
@include box-sizing(border-box);
}
&[type="input"]{
......@@ -80,12 +80,12 @@ div.profile-wrapper {
a.edit-email,
a.name-edit,
a.email-edit {
color: #999;
font-size: 12px;
position: absolute;
top: 9px;
right: lh(.5);
text-transform: uppercase;
font-size: 12px;
color: #999;
top: 9px;
&:hover {
color: #555;
......@@ -93,10 +93,10 @@ div.profile-wrapper {
}
p {
color: #999;
font-size: 12px;
margin-bottom: 0;
margin-top: 4px;
color: #999;
}
a.deactivate {
......@@ -132,10 +132,10 @@ div.profile-wrapper {
padding: 7px lh();
h2 {
margin-top: 0;
font-size: $body-font-size;
font-weight: bold;
margin-top: 0;
text-transform: uppercase;
font-size: $body-font-size;
}
}
}
......@@ -148,14 +148,14 @@ div.profile-wrapper {
@extend .clearfix;
h1 {
margin: 0;
float: left;
margin: 0;
}
}
div#grade-detail-graph {
width: 100%;
min-height: 300px;
width: 100%;
}
> ol {
......
templates/sass/_textbook.scss
......@@ -3,8 +3,8 @@ div.book-wrapper {
section.book-sidebar {
@extend .sidebar;
@include box-sizing(border-box);
@extend .tran;
@include box-sizing(border-box);
ul#booknav {
font-size: 12px;
......@@ -22,14 +22,14 @@ div.book-wrapper {
padding-left: 30px;
div.hitarea {
margin-left: -22px;
background-image: url('/static/images/treeview-default.gif');
margin-left: -22px;
position: relative;
top: 4px;
&:hover {
opacity: 0.6;
filter: alpha(opacity=60);
opacity: 0.6;
}
}
......@@ -63,13 +63,13 @@ div.book-wrapper {
li {
&.last {
float: left;
display: block;
float: left;
a {
@include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
border-right: 1px solid darken(#f6efd4, 20%);
border-left: 0;
border-right: 1px solid darken(#f6efd4, 20%);
@include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
}
}
......@@ -81,10 +81,10 @@ div.book-wrapper {
}
&.bottom-nav {
margin-top: lh();
margin-bottom: -(lh());
border-bottom: 0;
border-top: 1px solid #EDDFAA;
margin-bottom: -(lh());
margin-top: lh();
}
}
......@@ -110,18 +110,18 @@ div.book-wrapper {
}
h2 {
padding: 0;
visibility: hidden;
width: 10px;
padding: 0;
}
}
ul#booknav {
max-height: 100px;
overflow: hidden;
padding: 0;
visibility: hidden;
width: 10px;
padding: 0;
overflow: hidden;
max-height: 100px;
}
}
......
templates/sass/base/_base.scss
......@@ -35,10 +35,10 @@ img {
}
#{$all-text-inputs}, textarea {
@include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff);
border: 1px solid #999;
@include box-shadow(0 -1px 0 #fff);
font: $body-font-size $body-font-family;
@include linear-gradient(#eee, #fff);
padding: 4px;
&:focus {
......
templates/sass/base/_extends.scss
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
......@@ -40,27 +40,27 @@ h1.top-header {
-webkit-font-smoothing: antialiased;
&:hover, &:focus {
border: 1px solid darken(#888, 20%);
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
@include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
border: 1px solid darken(#888, 20%);
}
}
.light-button, a.light-button {
@include box-shadow(inset 0 1px 0 #fff);
@include linear-gradient(#fff, lighten(#888, 40%));
@include border-radius(3px);
border: 1px solid #ccc;
padding: 4px 8px;
@include border-radius(3px);
@include box-shadow(inset 0 1px 0 #fff);
color: #666;
cursor: pointer;
font: normal $body-font-size $body-font-family;
@include linear-gradient(#fff, lighten(#888, 40%));
padding: 4px 8px;
text-decoration: none;
cursor: pointer;
-webkit-font-smoothing: antialiased;
&:hover, &:focus {
@include linear-gradient(#fff, lighten(#888, 37%));
border: 1px solid #ccc;
@include linear-gradient(#fff, lighten(#888, 37%));
text-decoration: none;
}
}
......@@ -70,8 +70,8 @@ h1.top-header {
color: $mit-red;
&:hover {
text-decoration: none;
color: darken($mit-red, 20%);
text-decoration: none;
}
}
}
......@@ -110,13 +110,13 @@ h1.top-header {
}
a {
font-style: normal;
border: none;
font-style: normal;
}
.bottom-border {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
}
@media print {
......@@ -124,10 +124,10 @@ h1.top-header {
}
h3 {
border: none;
border-bottom: 1px solid #d3d3d3;
@extend .bottom-border;
background: none;
border: none;
border-bottom: 1px solid #d3d3d3;
color: #000;
font-weight: normal;
margin: 0;
......@@ -172,8 +172,8 @@ h1.top-header {
position: relative;
h2 {
padding-right: 20px;
margin: 0;
padding-right: 20px;
}
a {
......@@ -205,10 +205,10 @@ h1.top-header {
border-bottom: 1px solid darken($cream, 10%);
@include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
font-size: 12px;
height:46px;
line-height: 46px;
margin: (-$body-line-height) (-$body-line-height) $body-line-height;
text-shadow: 0 1px 0 #fff;
line-height: 46px;
height:46px;
@media print {
display: none;
......@@ -242,10 +242,10 @@ h1.top-header {
}
p.ie-warning {
background: yellow;
display: block !important;
line-height: 1.3em;
background: yellow;
margin-bottom: 0;
padding: lh();
text-align: left;
margin-bottom: 0;
}
templates/sass/base/_functions.scss
// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width);
}
// Flexible grid gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width);
}
// Percentage of container calculator
@function perc($width, $container-width: $max-width) {
@return percentage($width / $container-width);
}
// Line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
......
templates/sass/base/_variables.scss
// Variables
// ---------------------------------------- //
// fonts
// Type
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$body-font-size: 14px;
// grid
$columns: 12;
$column-width: 80px;
$gutter-width: 25px;
$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
$gw-column: perc($column-width);
$gw-gutter: perc($gutter-width);
$body-line-height: golden-ratio($body-font-size, 1);
//Flexible grid
$fg-column: $column-width;
$fg-gutter: $gutter-width;
$fg-max-columns: $columns;
// Grid
$fg-column: 80px;
$fg-gutter: 25px;
$fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 810px;
// color
// Color
$light-gray: #ddd;
$dark-gray: #333;
$mit-red: #993333;
$cream: #F6EFD4;
$text-color: $dark-gray;
$border-color: $light-gray;
templates/sass/courseware/_amplifier.scss
// JM MOSFET AMPLIFIER
section.tool-wrapper {
@extend .clearfix;
background: #073642;
border-top: 1px solid darken(#002b36, 10%);
border-bottom: 1px solid darken(#002b36, 10%);
border-top: 1px solid darken(#002b36, 10%);
@include box-shadow(inset 0 0 0 4px darken(#094959, 2%));
margin: lh() (-(lh())) 0;
color: #839496;
@extend .clearfix;
display: table;
margin: lh() (-(lh())) 0;
div#graph-container {
background: none;
......@@ -29,24 +29,24 @@ section.tool-wrapper {
ul.ui-tabs-nav {
background: darken(#073642, 2%);
border-bottom: 1px solid darken(#073642, 8%);
@include border-radius(0);
margin: (-(lh())) (-(lh())) 0;
padding: 0;
position: relative;
width: 110%;
@include border-radius(0);
border-bottom: 1px solid darken(#073642, 8%);
li {
margin-bottom: 0;
background: none;
color: #fff;
border: none;
@include border-radius(0);
color: #fff;
margin-bottom: 0;
&.ui-tabs-selected {
border-right: 1px solid darken(#073642, 8%);
border-left: 1px solid darken(#073642, 8%);
background-color: #073642;
border-left: 1px solid darken(#073642, 8%);
border-right: 1px solid darken(#073642, 8%);
&:first-child {
border-left: none;
......@@ -59,10 +59,10 @@ section.tool-wrapper {
a {
border: none;
color: #839496;
font: bold 12px $body-font-family;
text-transform: uppercase;
letter-spacing: 1px;
color: #839496;
text-transform: uppercase;
&:hover {
color: #eee8d5;
......@@ -86,18 +86,18 @@ section.tool-wrapper {
div.graph-controls {
div.music-wrapper {
padding: 0 0 lh();
margin-bottom: lh();
@extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%);
@include box-shadow(0 1px 0 lighten(#073642, 2%));
@extend .clearfix;
margin-bottom: lh();
padding: 0 0 lh();
input#playButton {
display: block;
@include button(simple, lighten( #586e75, 5% ));
font: bold 14px $body-font-family;
border-color: darken(#002b36, 6%);
@include button(simple, lighten( #586e75, 5% ));
display: block;
float: right;
font: bold 14px $body-font-family;
&:active {
@include box-shadow(none);
......@@ -115,21 +115,21 @@ section.tool-wrapper {
}
div.inputs-wrapper {
@extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%);
@include box-shadow(0 1px 0 lighten(#073642, 2%));
@include clearfix;
margin-bottom: lh();
padding: 0 0 lh();
margin-bottom: lh();
border-bottom: 1px solid darken(#073642, 10%);
@include box-shadow(0 1px 0 lighten(#073642, 2%));
@extend .clearfix;
padding: 0 0 lh();
}
p {
font-weight: bold;
@include inline-block();
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-shadow: 0 -1px 0 darken(#073642, 10%);
-webkit-font-smoothing: antialiased;
}
ul {
......@@ -147,19 +147,19 @@ section.tool-wrapper {
}
div#graph-listen {
margin-top: 8px;
margin-right: 20px;
display: block;
text-align: right;
float: left;
margin-bottom: 0;
margin-right: 20px;
margin-top: 8px;
text-align: right;
}
}
label {
@include border-radius(2px);
font-weight: bold;
color: #fff;
font-weight: bold;
padding: 3px;
-webkit-font-smoothing: antialiased;
}
......@@ -188,33 +188,31 @@ section.tool-wrapper {
}
div.schematic-sliders {
div.top-sliders {
padding: 0 0 lh();
margin-bottom: lh();
@extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%);
@include box-shadow(0 1px 0 lighten(#073642, 2%));
@extend .clearfix;
select#musicTypeSelect {
@include inline-block();
font: 16px $body-font-family;
margin-bottom: 0;
}
margin-bottom: lh();
padding: 0 0 lh();
p {
@include inline-block();
-webkit-font-smoothing: antialiased;
text-shadow: 0 -1px 0 darken(#073642, 10%);
margin: 0 lh(.5) lh() 0;
font-weight: bold;
}
select#musicTypeSelect {
font: 16px $body-font-family;
@include inline-block();
margin-bottom: 0;
}
p {
font-weight: bold;
@include inline-block();
margin: 0 lh(.5) lh() 0;
text-shadow: 0 -1px 0 darken(#073642, 10%);
-webkit-font-smoothing: antialiased;
}
}
div.slider-label {
margin-bottom: lh(0.5);
font-weight: bold;
margin-bottom: lh(0.5);
text-shadow: 0 -1px 0 darken(#073642, 10%);
-webkit-font-smoothing: antialiased;
}
......@@ -223,10 +221,10 @@ section.tool-wrapper {
margin-bottom: lh(1);
&.ui-slider-horizontal {
height: 0.4em;
background: darken(#002b36, 2%);
border: 1px solid darken(#002b36, 8%);
@include box-shadow(none);
height: 0.4em;
}
.ui-slider-handle {
......@@ -243,5 +241,3 @@ section.tool-wrapper {
}
}
}
templates/sass/index/_base.scss deleted 100644 → 0
body {
background-color: #fff;
color: #444;
font: $body-font-size $body-font-family;
:focus {
outline-color: #ccc;
}
h1 {
font: 800 24px $header-font-family;
}
li {
margin-bottom: lh();
}
em {
font-style: italic;
}
a {
color: $mit-red;
font-style: italic;
text-decoration: none;
&:hover, &:focus {
color: darken($mit-red, 10%);
}
}
#{$all-text-inputs}, textarea {
@include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff);
border: 1px solid #999;
font: $body-font-size $body-font-family;
padding: 4px;
width: 100%;
&:focus {
border-color: $mit-red;
}
}
}
templates/sass/index/_extends.scss deleted 100644 → 0
.wrapper {
@include box-sizing(border-box);
margin: 0 auto;
max-width: $fg-max-width;
// min-width: $fg-min-width;
padding: lh();
width: flex-grid(12);
}
.subpage {
@extend .clearfix;
@extend .wrapper;
> div {
padding-left: flex-grid(4) + flex-gutter();
@media screen and (max-width: 940px) {
padding-left: 0;
}
p {
margin-bottom: lh();
line-height: lh();
}
h1 {
margin-bottom: lh(.5);
}
h2 {
font: 18px $header-font-family;
color: #000;
margin-bottom: lh(.5);
}
ul {
list-style: disc outside none;
li {
list-style: disc outside none;
line-height: lh();
}
}
dl {
margin-bottom: lh();
dd {
margin-bottom: lh(.5);
}
}
}
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.button {
@include border-radius(3px);
@include inline-block();
@include transition();
background-color: $mit-red;
border: 1px solid darken($mit-red, 10%);
color: #fff;
margin: lh() 0 lh(.5);
padding: lh(.25) lh(.5);
text-decoration: none;
font-style: normal;
@include box-shadow(inset 0 1px 0 lighten($mit-red, 8%));
-webkit-font-smoothing: antialiased;
&:hover {
background-color: darken($mit-red, 10%);
border-color: darken($mit-red, 20%);
}
span {
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
font-style: italic;
}
}
p.ie-warning {
display: block !important;
line-height: 1.3em;
background: yellow;
margin-bottom: lh();
padding: lh();
}
templates/sass/index/_footer.scss deleted 100644 → 0
footer {
@extend .wrapper;
@extend .clearfix;
padding-top: 0;
div.footer-wrapper {
border-top: 1px solid #e5e5e5;
padding: lh() 0;
background: url('/static/images/marketing/mit-logo.png') right center no-repeat;
@media screen and (max-width: 780px) {
background-position: left bottom;
padding-bottom: lh(3);
}
a {
color: #888;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: #666;
}
}
p {
@include inline-block();
margin-right: lh();
}
ul {
@include inline-block();
@media screen and (max-width: 780px) {
margin-top: lh();
}
li {
@include inline-block();
margin-bottom: 0;
&:after {
content: ' |';
display: inline;
color: #ccc;
}
&:last-child {
&:after {
content: none;
}
}
}
&.social {
float: right;
margin-right: 60px;
position: relative;
top: -5px;
@media screen and (max-width: 780px) {
float: none;
}
li {
float: left;
margin-right: lh(.5);
&:after {
content: none;
display: none;
}
a {
display: block;
height: 29px;
width: 28px;
text-indent: -9999px;
&:hover {
opacity: .8;
}
}
&.twitter a {
background: url('/static/images/marketing/twitter.png') 0 0 no-repeat;
}
&.facebook a {
background: url('/static/images/marketing/facebook.png') 0 0 no-repeat;
}
&.linkedin a {
background: url('/static/images/marketing/linkedin.png') 0 0 no-repeat;
}
}
}
}
}
}
templates/sass/index/_header.scss deleted 100644 → 0
header.announcement {
@include background-size(cover);
background: #333;
border-bottom: 1px solid #000;
color: #fff;
-webkit-font-smoothing: antialiased;
&.home {
background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");
@media screen and (min-width: 1200px) {
background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
}
div {
padding: lh(10) lh() lh(3);
@media screen and (max-width:780px) {
padding: lh(2.5) lh() lh(2);
}
//hide login link for homepage
nav {
h1 {
margin-right: 0;
}
a.login {
display: none;
}
}
}
}
&.course {
background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
@media screen and (min-width: 1200px) {
background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
}
@media screen and (max-width: 1199px) and (min-width: 700px) {
background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
}
div {
padding: lh(4) lh() lh(2);
@media screen and (max-width:780px) {
padding: lh(2.5) lh() lh(2);
}
}
}
div {
@extend .wrapper;
position: relative;
nav {
position: absolute;
top: 0;
right: lh();
@include border-radius(0 0 3px 3px);
background: #333;
background: rgba(#000, .7);
padding: lh(.5) lh();
h1 {
@include inline-block();
margin-right: lh(.5);
a {
font: italic 800 18px $header-font-family;
color: #fff;
text-decoration: none;
&:hover, &:focus {
color: #999;
}
}
}
a.login {
text-decoration: none;
color: #fff;
font-size: 12px;
font-style: normal;
font-family: $header-font-family;
&:hover, &:focus {
color: #999;
}
}
}
section {
@extend .clearfix;
background: $mit-red;
@include inline-block();
margin-left: flex-grid(4) + flex-gutter();
padding: lh() lh(1.5);
@media screen and (max-width: 780px) {
margin-left: 0;
}
h1 {
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
@include inline-block();
line-height: 1.2em;
margin: 0 lh() 0 0;
}
h2 {
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
@include inline-block();
line-height: 1.2em;
}
&.course {
section {
float: left;
margin-left: 0;
margin-right: flex-gutter(8);
padding: 0;
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
float: none;
width: 100%;
margin-right: 0;
}
a {
@extend .button;
background-color: darken($mit-red, 20%);
border-color: darken($mit-red, 30%);
@include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
display: block;
padding: lh(.5) lh();
text-align: center;
&:hover {
background-color: darken($mit-red, 10%);
border-color: darken($mit-red, 20%);
}
}
}
p {
width: flex-grid(4, 8);
line-height: lh();
float: left;
@media screen and (max-width: 780px) {
float: none;
width: 100%;
}
}
}
}
}
}
templates/sass/index/_index.scss deleted 100644 → 0
section.index-content {
@extend .wrapper;
@extend .clearfix;
section {
@extend .clearfix;
float: left;
@media screen and (max-width: 780px) {
float: none;
width: auto;
margin-right: 0;
}
h1 {
font-size: 800 24px "Open Sans";
margin-bottom: lh();
}
p {
line-height: lh();
margin-bottom: lh();
}
ul {
margin: 0;
}
&.about {
@include box-sizing(border-box);
border-right: 1px solid #e5e5e5;
margin-right: flex-gutter();
padding-right: flex-gutter() / 2;
width: flex-grid(8);
@media screen and (max-width: 780px) {
width: 100%;
border-right: 0;
margin-right: 0;
padding-right: 0;
}
section {
@extend .clearfix;
margin-bottom: lh();
p {
width: flex-grid(4, 8);
float: left;
@media screen and (max-width: 780px) {
float: none;
width: auto;
}
&:nth-child(odd) {
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
}
}
}
&.intro {
section {
margin-bottom: 0;
&.intro-text {
margin-right: flex-gutter(8);
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
margin-right: 0;
width: auto;
}
p {
margin-right: 0;
width: auto;
float: none;
}
}
&.intro-video {
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
width: auto;
}
a {
display: block;
width: 100%;
img {
width: 100%;
}
span {
display: none;
}
}
}
}
}
&.features {
border-top: 1px solid #E5E5E5;
padding-top: lh();
margin-bottom: 0;
h2 {
text-transform: uppercase;
letter-spacing: 1px;
color: #888;
margin-bottom: lh();
font-weight: normal;
font-size: 14px;
span {
text-transform: none;
}
}
p {
width: auto;
clear: both;
strong {
font-family: "Open sans";
font-weight: 800;
}
a {
color: $mit-red;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: darken($mit-red, 15%);
}
}
}
ul {
margin-bottom: 0;
li {
line-height: lh();
width: flex-grid(4, 8);
float: left;
margin-bottom: lh(.5);
@media screen and (max-width: 780px) {
width: auto;
float: none;
}
&:nth-child(odd) {
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
}
}
}
}
}
}
}
&.course, &.staff {
width: flex-grid(4);
@media screen and (max-width: 780px) {
width: auto;
}
h1 {
color: #888;
font: normal $body-font-size $body-font-family;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: lh();
text-transform: uppercase;
}
h2 {
font: 800 24px $header-font-family;
}
h3 {
font: 400 18px $header-font-family;
}
a {
@extend .button;
span.arrow {
color: rgba(#fff, .6);
font-style: normal;
@include inline-block();
padding-left: 10px;
}
}
ul {
list-style: none;
li {
img {
float: left;
margin-right: lh(.5);
}
}
}
}
&.course {
h2 {
padding-top: lh(5);
background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
@include background-size(contain);
@media screen and (max-width: 998px) and (min-width: 781px){
background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
}
@media screen and (max-width: 780px) {
padding-top: lh(5);
background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
}
@media screen and (min-width: 500px) and (max-width: 781px) {
padding-top: lh(8);
}
}
div.announcement {
p.announcement-button {
a {
margin-top: 0;
}
}
img {
max-width: 100%;
margin-bottom: lh();
}
}
}
// index
//---------------------------------------- //
&.about-course {
@include box-sizing(border-box);
border-right: 1px solid #e5e5e5;
margin-right: flex-gutter();
padding-right: flex-gutter() / 2;
width: flex-grid(8);
@media screen and (max-width: 780px) {
width: auto;
border-right: 0;
margin-right: 0;
padding-right: 0;
}
section {
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
width: auto;
}
&.about-info {
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
}
}
&.requirements {
clear: both;
width: 100%;
border-top: 1px solid #E5E5E5;
padding-top: lh();
margin-bottom: 0;
p {
float: left;
width: flex-grid(4, 8);
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
float: none;
width: auto;
}
&:nth-child(odd) {
margin-right: 0;
}
}
}
&.cta {
width: 100%;
text-align: center;
a.enroll {
@extend .button;
padding: lh(.5) lh(2);
@include inline-block();
text-align: center;
font: 800 18px $header-font-family;
}
}
}
}
&.staff {
h1 {
margin-top: lh(1);
}
}
}
}
section.copyright, section.tos, section.privacy-policy, section.honor-code {
@extend .subpage;
}
templates/sass/index/_variables.scss deleted 100644 → 0
// Variables
//---------------------------------------- //
// // grid
$fg-column: 60px;
$fg-gutter: 25px;
$fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 781px;
$gw-column: 60px;
$gw-gutter: 25px;
$body-font-family: Georgia, serif;
$header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
$body-font-size: 16px;
$body-line-height: golden-ratio($body-font-size, 1);
// Colors
$mit-red: #933;
$cream: #F6EFD4;
templates/sass/layout/_calculator.scss
......@@ -2,10 +2,10 @@ li.calc-main {
bottom: -126px;
left: 0;
position: fixed;
width: 100%;
@include transition(bottom);
z-index: 99;
-webkit-appearance: none;
width: 100%;
z-index: 99;
&.open {
bottom: -36px;
......@@ -16,19 +16,19 @@ li.calc-main {
}
a.calc {
@include hide-text;
background: url("/static/images/calc-icon.png") rgba(#111, .9) no-repeat center;
border-bottom: 0;
@include border-radius(3px 3px 0 0);
color: #fff;
float: right;
margin-right: 10px;
@include border-radius(3px 3px 0 0);
height: 20px;
@include hide-text;
@include inline-block;
margin-right: 10px;
padding: 8px 12px;
width: 16px;
height: 20px;
position: relative;
top: -36px;
width: 16px;
&:hover {
opacity: .8;
......@@ -41,15 +41,15 @@ li.calc-main {
div#calculator_wrapper {
background: rgba(#111, .9);
position: relative;
top: -36px;
clear: both;
max-height: 90px;
position: relative;
top: -36px;
form {
padding: lh();
@extend .clearfix;
@include box-sizing(border-box);
padding: lh();
input#calculator_button {
background: #111;
......@@ -94,20 +94,20 @@ li.calc-main {
position: relative;
width: flex-grid(7.5);
input#calculator_input {
border: none;
@include box-shadow(none);
@include box-sizing(border-box);
font-size: 16px;
padding: 10px;
-webkit-appearance: none;
width: 100%;
&:focus {
outline: none;
input#calculator_input {
border: none;
@include box-shadow(none);
@include box-sizing(border-box);
font-size: 16px;
padding: 10px;
-webkit-appearance: none;
width: 100%;
&:focus {
outline: none;
border: none;
}
}
}
div.help-wrapper {
position: absolute;
......@@ -115,10 +115,10 @@ li.calc-main {
top: 15px;
a {
background: url("/static/images/info-icon.png") center center no-repeat;
height: 17px;
@include hide-text;
width: 17px;
height: 17px;
background: url("/static/images/info-icon.png") center center no-repeat;
}
dl {
......@@ -126,14 +126,14 @@ li.calc-main {
@include border-radius(3px);
@include box-shadow(0 0 3px #999);
color: #333;
display: none;
opacity: 0;
padding: 10px;
position: absolute;
right: -40px;
top: -110px;
width: 500px;
display: none;
@include transition();
width: 500px;
&.shown {
opacity: 1;
......
templates/sass/layout/_footer.scss
......@@ -68,11 +68,11 @@ footer {
}
a {
border-bottom: 0;
display: block;
height: 29px;
width: 28px;
text-indent: -9999px;
border-bottom: 0;
width: 28px;
&:hover {
opacity: .8;
......
templates/sass/layout/_header.scss
......@@ -100,12 +100,12 @@ div.header-wrapper {
float: left;
a {
border: none;
color: #fff;
display: block;
font-style: normal;
font-weight: bold;
padding: 10px lh() 8px;
border: none;
font-style: normal;
@media screen and (max-width: 1020px) {
padding: 10px lh(.7) 8px;
......@@ -125,10 +125,10 @@ div.header-wrapper {
ul {
li {
padding: auto;
display: table-cell;
width: 16.6666666667%;
padding: auto;
text-align: center;
width: 16.6666666667%;
}
}
}
......
templates/sass/layout/_layout.scss
......@@ -2,11 +2,11 @@ html {
margin-top: 0;
body {
background: #f4f4f4; //#f3f1e5
color: $dark-gray;
font: $body-font-size $body-font-family;
text-align: center;
margin: 0;
background: #f4f4f4; //#f3f1e5
text-align: center;
section.main-content {
@extend .clearfix;
......@@ -17,7 +17,6 @@ html {
@include box-shadow(0 0 4px #dfdfdf);
@include box-sizing(border-box);
margin-top: 3px;
// overflow: hidden;
@media print {
border-bottom: 0;
......@@ -32,12 +31,12 @@ html {
div.qtip {
div.ui-tooltip-content {
border: none;
background: rgba(#000, .8);
border: none;
color: #fff;
font: 12px $body-font-family;
margin-top: -30px;
margin-right: -20px;
margin-top: -30px;
}
}
......
templates/sass/layout/_leanmodal.scss
#lean_overlay {
background: #000;
display: none;
height:100%;
left: 0px;
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
z-index:100;
}
div.leanModal_box {
......@@ -31,8 +31,8 @@ div.leanModal_box {
z-index: 2;
&:hover{
text-decoration: none;
color: $mit-red;
text-decoration: none;
}
}
......@@ -55,8 +55,8 @@ div.leanModal_box {
li {
&.terms, &.honor-code {
width: auto;
float: none;
width: auto;
}
div.tip {
......@@ -118,8 +118,8 @@ div.leanModal_box {
}
&.honor-code {
width: auto;
float: none;
width: auto;
}
label {
......@@ -128,8 +128,8 @@ div.leanModal_box {
}
#{$all-text-inputs}, textarea {
width: 100%;
@include box-sizing(border-box);
width: 100%;
}
input[type="checkbox"] {
......@@ -176,15 +176,15 @@ div#login {
ol {
li {
width: auto;
float: none;
width: auto;
}
}
}
div.lost-password {
text-align: left;
margin-top: lh();
text-align: left;
a {
color: #999;
......@@ -218,9 +218,9 @@ div#deactivate-account {
margin-bottom: lh(.5);
textarea, #{$all-text-inputs} {
@include box-sizing(border-box);
display: block;
width: 100%;
@include box-sizing(border-box);
}
textarea {
......
templates/sass/marketing.scss
......@@ -2,5 +2,5 @@
@import "base/reset", "base/font-face", "base/functions";
// pages
@import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index";
@import "marketing/variables", "marketing/extends", "marketing/base", "marketing/header", "marketing/footer", "marketing/index";
@import "layout/leanmodal";
templates/sass/wiki/_create.scss
form#wiki_revision {
float: left;
width: flex-grid(6, 9);
margin-right: flex-gutter(9);
width: flex-grid(6, 9);
label {
display: block;
margin-bottom: 7px ;
}
.CodeMirror-scroll {
min-height: 550px;
width: 100%;
}
.CodeMirror {
@extend textarea;
@include box-sizing(border-box);
font-family: monospace;
margin-bottom: 20px;
}
textarea {
@include box-sizing(border-box);
margin-bottom: 20px;
......@@ -32,25 +33,25 @@ form#wiki_revision {
}
#submit_delete {
@include box-shadow(none);
background: none;
border: none;
@include box-shadow(none);
color: #999;
float: right;
text-decoration: underline;
font-weight: normal;
text-decoration: underline;
}
input[type="submit"] {
margin-top: 20px;
}
}
#wiki_edit_instructions {
color: #666;
float: left;
width: flex-grid(3, 9);
margin-top: lh();
color: #666;
width: flex-grid(3, 9);
&:hover {
color: #333;
......@@ -58,16 +59,14 @@ form#wiki_revision {
.markdown-example {
background-color: #e3e3e3;
text-shadow: 0 1px 0 #fff;
line-height: 1.0;
margin: 5px 0 7px;
padding: {
top: 5px;
right: 2px;
bottom: 5px;
left: 5px;
}
margin: 5px 0 7px;
line-height: 1.0;
text-shadow: 0 1px 0 #fff;
}
}
templates/sass/wiki/_sidebar.scss
......@@ -3,20 +3,20 @@ div#wiki_panel {
overflow: auto;
h2 {
padding: lh(.5) lh();
@extend .bottom-border;
font-size: 18px;
margin: 0 ;
@extend .bottom-border;
padding: lh(.5) lh();
}
input[type="button"] {
@extend h3;
@include transition();
color: lighten($text-color, 10%);
font-size: $body-font-size;
margin: 0 !important;
padding: 7px lh();
text-align: left;
@include transition();
width: 100%;
&:hover {
......@@ -28,8 +28,8 @@ div#wiki_panel {
ul {
li {
&.search {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: 7px lh();
label {
......@@ -49,15 +49,15 @@ div#wiki_panel {
div#wiki_create_form {
@extend .clearfix;
padding: 15px;
background: #d6d6d6;
border-bottom: 1px solid #bbb;
padding: 15px;
input[type="text"] {
margin-bottom: 6px;
@include box-sizing(border-box);
display: block;
margin-bottom: 6px;
width: 100%;
@include box-sizing(border-box);
}
ul {
......
templates/sass/wiki/_wiki.scss
......@@ -7,15 +7,14 @@ div.wiki-wrapper {
@extend .content;
position: relative;
header {
@extend .topbar;
height:46px;
@include box-shadow(inset 0 1px 0 white);
height:46px;
&:empty {
display: none !important;
border-bottom: 0;
display: none !important;
}
a {
......@@ -23,10 +22,10 @@ div.wiki-wrapper {
}
p {
float: left;
margin-bottom: 0;
color: darken($cream, 55%);
float: left;
line-height: 46px;
margin-bottom: 0;
padding-left: lh();
}
......@@ -48,8 +47,8 @@ div.wiki-wrapper {
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
color: darken($cream, 80%);
display: block;
font-weight: normal;
font-size: 12px;
font-weight: normal;
letter-spacing: 1px;
line-height: 46px;
margin: 0;
......@@ -89,15 +88,15 @@ div.wiki-wrapper {
width: flex-grid(2.5, 9);
@media screen and (max-width:900px) {
border-right: 0;
display: block;
width: auto;
border-right: 0;
}
@media print {
border-right: 0;
display: block;
width: auto;
border-right: 0;
}
}
......@@ -106,9 +105,9 @@ div.wiki-wrapper {
}
section.results {
border-left: 1px dashed #ddd;
@include box-sizing(border-box);
display: inline-block;
border-left: 1px dashed #ddd;
float: left;
padding-left: 10px;
width: flex-grid(6.5, 9);
......@@ -123,8 +122,8 @@ div.wiki-wrapper {
@media print {
display: block;
width: auto;
padding: 0;
width: auto;
canvas, img {
page-break-inside: avoid;
......@@ -140,14 +139,15 @@ div.wiki-wrapper {
}
li {
border-bottom: 1px solid #eee;
list-style: none;
margin: 0;
padding: 10px 0;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: 0;
}
h3 {
font-size: 18px;
font-weight: normal;
......@@ -155,6 +155,5 @@ div.wiki-wrapper {
}
}
}
}
}
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