Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added styles for new calc and updated bourbon

Browse Source
This commit is contained in:
Kyle Fiedler
2012-03-20 14:10:32 -04:00
parent f1aea3d5e7
commit 3fadf0e16c
22 changed files with 416 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
static/css/application.css
View File

File diff suppressed because one or more lines are too long

61
static/css/marketing.css
View File

@@ -119,8 +119,6 @@ input, select {
.wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, footer, section.index-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
max-width: 1400px;
@@ -200,8 +198,6 @@ input, select {
font-style: normal;
-webkit-box-shadow: inset 0 1px 0 #b83d3d;
-moz-box-shadow: inset 0 1px 0 #b83d3d;
-ms-box-shadow: inset 0 1px 0 #b83d3d;
-o-box-shadow: inset 0 1px 0 #b83d3d;
box-shadow: inset 0 1px 0 #b83d3d;
-webkit-font-smoothing: antialiased; }
.button:hover, header.announcement div section.course section a:hover, section.index-content section.course a:hover, section.index-content section.staff a:hover, section.index-content section.about-course section.cta a.enroll:hover {
@@ -239,8 +235,6 @@ body a:hover, body a:focus {
body input[type="email"], body input[type="number"], body input[type="password"], body input[type="search"], body input[type="tel"], body input[type="text"], body input[type="url"], body input[type="color"], body input[type="date"], body input[type="datetime"], body input[type="datetime-local"], body input[type="month"], body input[type="time"], body input[type="week"], body textarea {
-webkit-box-shadow: 0 -1px 0 white;
-moz-box-shadow: 0 -1px 0 white;
-ms-box-shadow: 0 -1px 0 white;
-o-box-shadow: 0 -1px 0 white;
box-shadow: 0 -1px 0 white;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, white));
@@ -385,8 +379,6 @@ header.announcement div section.course section a {
border-color: #260d0d;
-webkit-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-moz-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-ms-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-o-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
display: block;
padding: 12.944px 25.888px;
@@ -519,8 +511,6 @@ section.index-content section ul {
section.index-content section.about {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #e5e5e5;
margin-right: 2.513%;
@@ -684,8 +674,6 @@ section.index-content section.course h2 {
section.index-content section.about-course {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #e5e5e5;
margin-right: 2.513%;
@@ -761,13 +749,9 @@ div.leanModal_box {
border-radius: 3px;
-webkit-box-shadow: 0 0 6px black;
-moz-box-shadow: 0 0 6px black;
-ms-box-shadow: 0 0 6px black;
-o-box-shadow: 0 0 6px black;
box-shadow: 0 0 6px black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display: none;
padding: 51.776px; }
@@ -847,8 +831,6 @@ div.leanModal_box form ol li input[type="email"], div.leanModal_box form ol li i
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
div.leanModal_box form ol li input[type="checkbox"] {
margin-right: 10px; }
@@ -870,8 +852,6 @@ div.leanModal_box form input[type="button"], div.leanModal_box form input[type="
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #bc5c5c;
-moz-box-shadow: inset 0 1px 0 0 #bc5c5c;
-ms-box-shadow: inset 0 1px 0 0 #bc5c5c;
-o-box-shadow: inset 0 1px 0 0 #bc5c5c;
box-shadow: inset 0 1px 0 0 #bc5c5c;
color: white;
display: inline;
@@ -892,8 +872,6 @@ div.leanModal_box form input[type="button"], div.leanModal_box form input[type="
div.leanModal_box form input[type="button"]:hover, div.leanModal_box form input[type="submit"]:hover {
-webkit-box-shadow: inset 0 1px 0 0 #a44141;
-moz-box-shadow: inset 0 1px 0 0 #a44141;
-ms-box-shadow: inset 0 1px 0 0 #a44141;
-o-box-shadow: inset 0 1px 0 0 #a44141;
box-shadow: inset 0 1px 0 0 #a44141;
cursor: pointer;
background-color: #823030;
@@ -907,8 +885,6 @@ div.leanModal_box form input[type="button"]:active, div.leanModal_box form input
border: 1px solid #691b1b;
-webkit-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
-moz-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
-ms-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
-o-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee; }
div#login {
@@ -943,40 +919,3 @@ div#feedback_div form ol li {
width: 100%; }
div#feedback_div form ol li textarea#feedback_message {
height: 100px; }
div#calculator_div {
max-width: 500px; }
div#calculator_div form {
padding-bottom: 25.888px;
margin-bottom: 25.888px;
border-bottom: 1px solid #ddd; }
div#calculator_div form input#calculator_input {
width: 400px; }
div#calculator_div form input#calculator_button {
background: 0;
color: #993333;
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
padding: 0;
text-shadow: none; }
div#calculator_div form input#calculator_button:hover {
color: #333; }
div#calculator_div form input#calculator_output {
border: 0;
background: none;
padding: 9.061px;
font-size: 24px;
width: 378px;
font-weight: bold;
margin-top: 4px; }
div#calculator_div dl dt {
float: left;
clear: both;
padding-right: 12.944px;
font-weight: bold; }
div#calculator_div dl dd {
float: left; }

BIN
static/images/calc-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 B

BIN
static/images/close-calc-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 B

59
templates/main.html
View File

@@ -52,7 +52,32 @@
</ul>
<ul>
<li><a href="#feedback_div" rel="leanModal">Feedback</a></li>
<li><a href="#calculator_div" rel="leanModal">Calculator</a></li>
<li class="calc-main">
<a href="#" class="calc">Calculator</a>
<div id="calculator_wrapper">
<form id="calculator">
<input type="text" id="calculator_input" />
<dl class="help">
<dt>Suffixes:</dt>
<dd> %kMGTcmunp</dd>
<dt>Operations:</dt>
<dd>^ * / + - ()</dd>
<dt>Functions:</dt>
<dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
<dt>Constants</dt>
<dd>e, pi</dd>
<!-- Students won't know what parallel means at this time. Complex numbers aren't well tested in the courseware, so we would prefer to not expose them. If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
<dt>Unsupported:</dt> <dd>||, j </dd> -->
</dl>
<input id="calculator_button" type="submit" value="="/>
<input type="text" id="calculator_output" readonly />
</form>
</div>
</li>
<li><a href="/s/help.html">Help</a></li>
<li><a href="/logout">Log out</a></li>
</ul>
@@ -60,6 +85,7 @@
</footer>
<div id="feedback_div" class="leanModal_box">
<h1>Feedback for MITx</h1>
<p>Found a bug? Got an idea for improving our system? Let us know.</p>
<form>
@@ -72,28 +98,6 @@
</div>
<div id="calculator_div" class="leanModal_box">
<form id="calculator">
<input type="text" id="calculator_input">
<input id="calculator_button" type="submit" value="=">
<input type="text" id="calculator_output" readonly>
</form>
<dl>
<dt>Suffixes:</dt>
<dd> %kMGTcmunp</dd>
<dt>Operations:</dt>
<dd>^ * / + - ()</dd>
<dt>Functions:</dt>
<dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
<dt>Constants</dt>
<dd>e, pi</dd>
<!-- Students won't know what parallel means at this time. Complex numbers aren't well tested in the courseware, so we would prefer to not expose them. If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
<dt>Unsupported:</dt> <dd>||, j </dd> -->
</dl>
</div>
<script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script>
<script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
@@ -120,6 +124,15 @@ $(function() {
// Calculator
$(function() {
$("#calculator_wrapper").hide();
$(".calc").click(function(){
$("#calculator_wrapper").slideToggle();
$("#calculator_wrapper #calculator_input").focus();
$(this).toggleClass("closed");
});
$("form#calculator").submit(function(e){
e.preventDefault();
$.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")},

2
templates/sass/application.scss
View File

@@ -3,7 +3,7 @@
// Base layout
@import "base/reset", "base/font-face";
@import "base/variables", "base/functions", "base/extends", "base/base";
@import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal";
@import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal";
@import "plugins/jquery-ui-1.8.16.custom";
// pages

6
templates/sass/base/_functions.scss
View File

@@ -20,3 +20,9 @@
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
@mixin hide-text(){
text-indent: -9999px;
overflow: hidden;
display: block;
}

6
templates/sass/bourbon/_bourbon.scss vendored
View File

@@ -1,7 +1,11 @@
// Custom Functions
@import "functions/deprecated-webkit-gradient";
@import "functions/flex-grid";
@import "functions/grid-width";
@import "functions/linear-gradient";
@import "functions/modular-scale";
@import "functions/radial-gradient";
@import "functions/render-gradients";
@import "functions/tint-shade";
// CSS3 Mixins
@@ -20,9 +24,11 @@
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";
@import "css3/user-select";
// Addons & other mixins
@import "addons/button";
@import "addons/clearfix";
@import "addons/font-family";
@import "addons/html5-input-types";
@import "addons/position";

29
templates/sass/bourbon/addons/_clearfix.scss vendored Normal file
View File

@@ -0,0 +1,29 @@
// Micro clearfix provides an easy way to contain floats without adding additional markup
//
// Example usage:
//
// // Contain all floats within .wrapper
// .wrapper {
// @include clearfix;
// .content,
// .sidebar {
// float : left;
// }
// }
@mixin clearfix {
zoom: 1;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
// Acknowledgements
// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)

14
templates/sass/bourbon/css3/_background-image.scss vendored
View File

@@ -2,8 +2,6 @@
// Background-image property for adding multiple background images with
// gradients, or for stringing multiple gradients together.
//************************************************************************//
@import "../functions/linear-gradient";
@import "../functions/radial-gradient";
@mixin background-image(
$image-1 , $image-2: false,
@@ -50,18 +48,6 @@
}
@function render-gradients($gradients, $gradient-type, $vendor: false) {
$vendor-gradients: false;
@if $vendor {
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
}
@else if $vendor == false {
$vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
}
//Examples:
//@include background-image(linear-gradient(top, orange, red));

61
templates/sass/bourbon/css3/_border-image.scss vendored
View File

@@ -1,7 +1,56 @@
@mixin border-image ($image) {
-webkit-border-image: $image;
-moz-border-image: $image;
-ms-border-image: $image;
-o-border-image: $image;
border-image: $image;
@mixin border-image($images) {
-webkit-border-image: border-add-prefix($images, webkit);
-moz-border-image: border-add-prefix($images, moz);
-o-border-image: border-add-prefix($images, o);
border-image: border-add-prefix($images);
}
@function border-add-prefix($images, $vendor: false) {
$border-image: ();
$images-type: type-of(nth($images, 1));
$first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial)
// If input is a gradient
@if $images-type == string {
@if ($first-var == "linear") or ($first-var == "radial") {
@for $i from 2 through length($images) {
$gradient-type: nth($images, 1); // Get type of gradient (linear || radial)
$gradient-args: nth($images, $i); // Get actual gradient (red, blue)
$border-image: render-gradients($gradient-args, $gradient-type, $vendor);
}
}
// If input is a URL
@else {
$border-image: $images;
}
}
// If input is gradient or url + additional args
@else if $images-type == list {
@for $i from 1 through length($images) {
$type: type-of(nth($images, $i)); // Get type of variable - List or String
// If variable is a list - Gradient
@if $type == list {
$gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
$gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
$border-image: render-gradients($gradient-args, $gradient-type, $vendor);
}
// If variable is a string - Image or number
@else if ($type == string) or ($type == number) {
$border-image: append($border-image, nth($images, $i));
}
}
}
@return $border-image;
}
//Examples:
// @include border-image(url("image.png"));
// @include border-image(url("image.png") 20 stretch);
// @include border-image(linear-gradient(45deg, orange, yellow));
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));

4
templates/sass/bourbon/css3/_border-radius.scss vendored
View File

@@ -9,6 +9,7 @@
@mixin border-top-left-radius($radii) {
-webkit-border-top-left-radius: $radii;
-moz-border-top-left-radius: $radii;
-moz-border-radius-topleft: $radii;
-ms-border-top-left-radius: $radii;
-o-border-top-left-radius: $radii;
border-top-left-radius: $radii;
@@ -17,6 +18,7 @@
@mixin border-top-right-radius($radii) {
-webkit-border-top-right-radius: $radii;
-moz-border-top-right-radius: $radii;
-moz-border-radius-topright: $radii;
-ms-border-top-right-radius: $radii;
-o-border-top-right-radius: $radii;
border-top-right-radius: $radii;
@@ -25,6 +27,7 @@
@mixin border-bottom-left-radius($radii) {
-webkit-border-bottom-left-radius: $radii;
-moz-border-bottom-left-radius: $radii;
-moz-border-radius-bottomleft: $radii;
-ms-border-bottom-left-radius: $radii;
-o-border-bottom-left-radius: $radii;
border-bottom-left-radius: $radii;
@@ -33,6 +36,7 @@
@mixin border-bottom-right-radius($radii) {
-webkit-border-bottom-right-radius: $radii;
-moz-border-bottom-right-radius: $radii;
-moz-border-radius-bottomright: $radii;
-ms-border-bottom-right-radius: $radii;
-o-border-bottom-right-radius: $radii;
border-bottom-right-radius: $radii;

2
templates/sass/bourbon/css3/_box-shadow.scss vendored
View File

@@ -10,7 +10,5 @@
-webkit-box-shadow: $full;
-moz-box-shadow: $full;
-ms-box-shadow: $full;
-o-box-shadow: $full;
box-shadow: $full;
}

2
templates/sass/bourbon/css3/_box-sizing.scss vendored
View File

@@ -2,7 +2,5 @@
// content-box | border-box | inherit
-webkit-box-sizing: $box;
-moz-box-sizing: $box;
-ms-box-sizing: $box;
-o-box-sizing: $box;
box-sizing: $box;
}

2
templates/sass/bourbon/css3/_linear-gradient.scss vendored
View File

@@ -20,7 +20,7 @@
$fallback-color: nth($G1, 1);
// If $fallback is a color use that color as the fallback color
@if type-of($fallback) == color {
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}

13
templates/sass/bourbon/css3/_radial-gradient.scss vendored
View File

@@ -4,11 +4,20 @@
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
$G9: false, $G10: false,
$fallback: false) {
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
background-color: nth($G1, 1);
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
background-image: -webkit-radial-gradient($pos, $shape-size, $full);
background-image: -moz-radial-gradient($pos, $shape-size, $full);

6
templates/sass/bourbon/css3/_user-select.scss vendored Normal file
View File

@@ -0,0 +1,6 @@
@mixin user-select($arg: none) {
-webkit-user-select: $arg;
-moz-user-select: $arg;
-ms-user-select: $arg;
user-select: $arg;
}

35
templates/sass/bourbon/functions/_flex-grid.scss vendored Normal file
View File

@@ -0,0 +1,35 @@
// 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 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);
}
// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
//
// $fg-column: 60px; // Column Width
// $fg-gutter: 25px; // Gutter Width
// $fg-max-columns: 12; // Total Columns For Main Container
//
// div {
// width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
// margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
//
// p {
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
// float: left;
// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
// }
//
// blockquote {
// float: left;
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
// }
// }

14
templates/sass/bourbon/functions/_render-gradients.scss vendored Normal file
View File

@@ -0,0 +1,14 @@
// User for linear and radial gradients within background-image or border-image properties
@function render-gradients($gradients, $gradient-type, $vendor: false) {
$vendor-gradients: false;
@if $vendor {
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
}
@else if $vendor == false {
$vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
}

5
templates/sass/discussion/_modals.scss
View File

@@ -23,7 +23,10 @@
font-weight: normal;
@include border-radius(4px 4px 0 0);
}
a {
color: #fb7321;
text-decoration: underline;
font-weight: bold; } }
font-weight: bold;
}
}

103
templates/sass/layout/_calculator.scss Normal file
View File

@@ -0,0 +1,103 @@
li.calc-main {
bottom: 0;
left: 0;
position: fixed;
width: 100%;
a.calc {
@include hide-text;
background: url("/static/images/calc-icon.png") rgba(#111, .9) no-repeat center;
border-bottom: 0;
color: #fff;
float: right;
margin-right: 10px;
@include border-radius(3px 3px 0 0);
@include inline-block;
padding: 8px 12px;
width: 16px;
height: 20px;
&:hover {
opacity: .8;
}
&.closed {
background-image: url("/static/images/close-calc-icon.png");
}
}
div#calculator_wrapper {
background: rgba(#111, .9);
clear: both;
form {
padding: lh();
@extend .clearfix;
input#calculator_input {
border: none;
@include box-shadow(none);
@include box-sizing(border-box);
font-size: 16px;
padding: 10px;
width: flex-grid(7.5);
margin: 0;
float: left;
&:focus {
outline: none;
border: none;
}
}
input#calculator_button {
background: #111;
border: 1px solid #000;
@include border-radius(0);
@include box-shadow(none);
@include box-sizing(border-box);
color: #fff;
font-size: 30px;
font-weight: bold;
padding: 0;
text-shadow: none;
width: flex-grid(.5) + flex-gutter();
float: left;
margin: 0 (flex-gutter() / 2);
&:hover {
color: #333;
}
}
input#calculator_output {
background: #222;
border: 0;
@include box-shadow(none);
@include box-sizing(border-box);
color: #fff;
float: left;
font-size: 16px;
font-weight: bold;
margin: 1px 0 0;
padding: 10px;
width: flex-grid(4);
}
}
dl {
display: none;
dt {
clear: both;
float: left;
font-weight: bold;
padding-right: lh(.5);
}
dd {
float: left;
}
}
}
}

49
templates/sass/layout/_leanmodal.scss
View File

@@ -219,52 +219,3 @@ div#feedback_div{
}
}
div#calculator_div {
max-width: 500px;
form {
padding-bottom: lh();
margin-bottom: lh();
border-bottom: 1px solid #ddd;
input#calculator_input {
width: 400px;
}
input#calculator_button {
background: 0;
color: $mit-red;
border: 0;
@include box-shadow(none);
padding: 0;
text-shadow: none;
&:hover {
color: #333;
}
}
input#calculator_output {
border: 0;
background: none;
padding: lh(.35);
font-size: 24px;
width: 378px;
font-weight: bold;
margin-top: 4px;
}
}
dl {
dt {
float: left;
clear: both;
padding-right: lh(.5);
font-weight: bold;
}
dd {
float: left;
}
}
}