Skip to content

E
edx-platform
Commit 07f27e36 by Kyle Fiedler
Options

Added styles for new calc and updated bourbon

parent e01a3d77
Showing with 311 additions and 162 deletions
static/css/marketing.css
......@@ -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; }
templates/main.html
......@@ -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")},
......
templates/sass/application.scss
......@@ -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
......
templates/sass/base/_functions.scss
......@@ -20,3 +20,9 @@
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
@mixin hide-text(){
text-indent: -9999px;
overflow: hidden;
display: block;
}
templates/sass/bourbon/_bourbon.scss
// 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";
......
templates/sass/bourbon/addons/_clearfix.scss 0 → 100644
// 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/)
templates/sass/bourbon/css3/_background-image.scss
......@@ -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));
......
templates/sass/bourbon/css3/_border-image.scss
@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));
templates/sass/bourbon/css3/_border-radius.scss
......@@ -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;
......
templates/sass/bourbon/css3/_box-shadow.scss
......@@ -10,7 +10,5 @@
-webkit-box-shadow: $full;
-moz-box-shadow: $full;
-ms-box-shadow: $full;
-o-box-shadow: $full;
box-shadow: $full;
}
templates/sass/bourbon/css3/_box-sizing.scss
......@@ -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;
}
templates/sass/bourbon/css3/_linear-gradient.scss
......@@ -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;
}
......
templates/sass/bourbon/css3/_radial-gradient.scss
......@@ -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);
......
templates/sass/bourbon/css3/_user-select.scss 0 → 100644
@mixin user-select($arg: none) {
-webkit-user-select: $arg;
-moz-user-select: $arg;
-ms-user-select: $arg;
user-select: $arg;
}
templates/sass/bourbon/functions/_flex-grid.scss 0 → 100644
// 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%;
// }
// }
templates/sass/bourbon/functions/_render-gradients.scss 0 → 100644
// 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;
}
templates/sass/discussion/_modals.scss
......@@ -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;
}
}
templates/sass/layout/_calculator.scss 0 → 100644
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;
}
}
}
}
templates/sass/layout/_leanmodal.scss
......@@ -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;
}
}
}
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