Skip to content

E
edx-platform
Commit d6b96ae1 by Kyle Fiedler
Options

Major refactor of scss 

--HG--
branch : kf-refactor-scss
parent 7e0d9b0d
Showing with 828 additions and 2092 deletions
bourbon/_bourbon.scss deleted 100644 → 0
// Custom Functions
@import "functions/deprecated-webkit-gradient";
@import "functions/grid-width";
@import "functions/modular-scale";
@import "functions/tint-shade";
// CSS3 Mixins
@import "css3/animation";
@import "css3/appearance";
@import "css3/background-image";
@import "css3/background-size";
@import "css3/border-image";
@import "css3/border-radius";
@import "css3/box-shadow";
@import "css3/box-sizing";
@import "css3/columns";
@import "css3/flex-box";
@import "css3/inline-block";
@import "css3/linear-gradient";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";
// Addons & other mixins
@import "addons/button";
@import "addons/font-family";
@import "addons/html5-input-types";
@import "addons/position";
@import "addons/timing-functions";
bourbon/addons/_font-family.scss deleted 100644 → 0
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
$verdana: Verdana, Geneva, sans-serif;
bourbon/addons/_html5-input-types.scss deleted 100644 → 0
//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="url"]',
// Webkit & Gecko may change the display of these in the future
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="time"]',
'input[type="week"]';
$unquoted-inputs-list: ();
@each $input-type in $inputs-list {
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}
$all-text-inputs: $unquoted-inputs-list;
// You must use interpolation on the variable:
// #{$all-text-inputs}
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid red;
// }
bourbon/addons/_position.scss deleted 100644 → 0
@mixin position ($position: relative, $coordinates: 0 0 0 0) {
@if type-of($position) == list {
$coordinates: $position;
$position: relative;
}
$top: nth($coordinates, 1);
$right: nth($coordinates, 2);
$bottom: nth($coordinates, 3);
$left: nth($coordinates, 4);
position: $position;
@if not(unitless($top)) {
top: $top;
}
@if not(unitless($right)) {
right: $right;
}
@if not(unitless($bottom)) {
bottom: $bottom;
}
@if not(unitless($left)) {
left: $left;
}
}
bourbon/addons/_timing-functions.scss deleted 100644 → 0
// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
// EASE IN
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
// EASE OUT
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
// EASE IN OUT
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
bourbon/css3/_animation.scss deleted 100644 → 0
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
// Official animation shorthand property.
@mixin animation ($animation-1,
$animation-2: false, $animation-3: false,
$animation-4: false, $animation-5: false,
$animation-6: false, $animation-7: false,
$animation-8: false, $animation-9: false)
{
$full: compact($animation-1, $animation-2, $animation-3, $animation-4,
$animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
-webkit-animation: $full;
-moz-animation: $full;
animation: $full;
}
// Individual Animation Properties
@mixin animation-name ($name-1,
$name-2: false, $name-3: false,
$name-4: false, $name-5: false,
$name-6: false, $name-7: false,
$name-8: false, $name-9: false)
{
$full: compact($name-1, $name-2, $name-3, $name-4,
$name-5, $name-6, $name-7, $name-8, $name-9);
-webkit-animation-name: $full;
-moz-animation-name: $full;
animation-name: $full;
}
@mixin animation-duration ($time-1: 0,
$time-2: false, $time-3: false,
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
-webkit-animation-duration: $full;
-moz-animation-duration: $full;
animation-duration: $full;
}
@mixin animation-timing-function ($motion-1: ease,
// ease | linear | ease-in | ease-out | ease-in-out
$motion-2: false, $motion-3: false,
$motion-4: false, $motion-5: false,
$motion-6: false, $motion-7: false,
$motion-8: false, $motion-9: false)
{
$full: compact($motion-1, $motion-2, $motion-3, $motion-4,
$motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
-webkit-animation-timing-function: $full;
-moz-animation-timing-function: $full;
animation-timing-function: $full;
}
@mixin animation-iteration-count ($value-1: 1,
// infinite | <number>
$value-2: false, $value-3: false,
$value-4: false, $value-5: false,
$value-6: false, $value-7: false,
$value-8: false, $value-9: false)
{
$full: compact($value-1, $value-2, $value-3, $value-4,
$value-5, $value-6, $value-7, $value-8, $value-9);
-webkit-animation-iteration-count: $full;
-moz-animation-iteration-count: $full;
animation-iteration-count: $full;
}
@mixin animation-direction ($direction-1: normal,
// normal | alternate
$direction-2: false, $direction-3: false,
$direction-4: false, $direction-5: false,
$direction-6: false, $direction-7: false,
$direction-8: false, $direction-9: false)
{
$full: compact($direction-1, $direction-2, $direction-3, $direction-4,
$direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
-webkit-animation-direction: $full;
-moz-animation-direction: $full;
animation-direction: $full;
}
@mixin animation-play-state ($state-1: running,
// running | paused
$state-2: false, $state-3: false,
$state-4: false, $state-5: false,
$state-6: false, $state-7: false,
$state-8: false, $state-9: false)
{
$full: compact($state-1, $state-2, $state-3, $state-4,
$state-5, $state-6, $state-7, $state-8, $state-9);
-webkit-animation-play-state: $full;
-moz-animation-play-state: $full;
animation-play-state: $full;
}
@mixin animation-delay ($time-1: 0,
$time-2: false, $time-3: false,
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
-webkit-animation-delay: $full;
-moz-animation-delay: $full;
animation-delay: $full;
}
@mixin animation-fill-mode ($mode-1: none,
// http://goo.gl/l6ckm
// none | forwards | backwards | both
$mode-2: false, $mode-3: false,
$mode-4: false, $mode-5: false,
$mode-6: false, $mode-7: false,
$mode-8: false, $mode-9: false)
{
$full: compact($mode-1, $mode-2, $mode-3, $mode-4,
$mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
-webkit-animation-fill-mode: $full;
-moz-animation-fill-mode: $full;
animation-fill-mode: $full;
}
// Deprecated
@mixin animation-basic ($name, $time: 0, $motion: ease) {
$length-of-name: length($name);
$length-of-time: length($time);
$length-of-motion: length($motion);
@if $length-of-name > 1 {
@include animation-name(zip($name));
} @else {
@include animation-name( $name);
}
@if $length-of-time > 1 {
@include animation-duration(zip($time));
} @else {
@include animation-duration( $time);
}
@if $length-of-motion > 1 {
@include animation-timing-function(zip($motion));
} @else {
@include animation-timing-function( $motion);
}
@warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
}
bourbon/css3/_appearance.scss deleted 100644 → 0
@mixin appearance ($value) {
-webkit-appearance: $value;
-moz-appearance: $value;
-ms-appearance: $value;
-o-appearance: $value;
appearance: $value;
}
bourbon/css3/_background-image.scss deleted 100644 → 0
//************************************************************************//
// 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,
$image-3: false, $image-4: false,
$image-5: false, $image-6: false,
$image-7: false, $image-8: false,
$image-9: false, $image-10: false
) {
$images: compact($image-1, $image-2,
$image-3, $image-4,
$image-5, $image-6,
$image-7, $image-8,
$image-9, $image-10);
background-image: add-prefix($images, webkit);
background-image: add-prefix($images, moz);
background-image: add-prefix($images, ms);
background-image: add-prefix($images, o);
background-image: add-prefix($images);
}
@function add-prefix($images, $vendor: false) {
$images-prefixed: ();
@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)
$gradient: render-gradients($gradient-args, $gradient-type, $vendor);
$images-prefixed: append($images-prefixed, $gradient, comma);
}
// If variable is a string - Image
@else if $type == string {
$images-prefixed: join($images-prefixed, nth($images, $i), comma);
}
}
@return $images-prefixed;
}
@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));
//@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
//@include background-image(url("/images/a.png"), linear-gradient(orange, red));
//@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
//@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
bourbon/css3/_background-size.scss deleted 100644 → 0
@mixin background-size ($length-1,
$length-2: false, $length-3: false,
$length-4: false, $length-5: false,
$length-6: false, $length-7: false,
$length-8: false, $length-9: false)
{
$full: compact($length-1, $length-2, $length-3, $length-4,
$length-5, $length-6, $length-7, $length-8, $length-9);
-webkit-background-size: $full;
-moz-background-size: $full;
-ms-background-size: $full;
-o-background-size: $full;
background-size: $full;
}
bourbon/css3/_border-image.scss deleted 100644 → 0
@mixin border-image ($image) {
-webkit-border-image: $image;
-moz-border-image: $image;
-ms-border-image: $image;
-o-border-image: $image;
border-image: $image;
}
bourbon/css3/_border-radius.scss deleted 100644 → 0
@mixin border-radius ($radii) {
-webkit-border-radius: $radii;
-moz-border-radius: $radii;
-ms-border-radius: $radii;
-o-border-radius: $radii;
border-radius: $radii;
}
@mixin border-top-left-radius($radii) {
-webkit-border-top-left-radius: $radii;
-moz-border-top-left-radius: $radii;
-ms-border-top-left-radius: $radii;
-o-border-top-left-radius: $radii;
border-top-left-radius: $radii;
}
@mixin border-top-right-radius($radii) {
-webkit-border-top-right-radius: $radii;
-moz-border-top-right-radius: $radii;
-ms-border-top-right-radius: $radii;
-o-border-top-right-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-bottom-left-radius($radii) {
-webkit-border-bottom-left-radius: $radii;
-moz-border-bottom-left-radius: $radii;
-ms-border-bottom-left-radius: $radii;
-o-border-bottom-left-radius: $radii;
border-bottom-left-radius: $radii;
}
@mixin border-bottom-right-radius($radii) {
-webkit-border-bottom-right-radius: $radii;
-moz-border-bottom-right-radius: $radii;
-ms-border-bottom-right-radius: $radii;
-o-border-bottom-right-radius: $radii;
border-bottom-right-radius: $radii;
}
@mixin border-top-radius($radii) {
@include border-top-left-radius($radii);
@include border-top-right-radius($radii);
}
@mixin border-right-radius($radii) {
@include border-top-right-radius($radii);
@include border-bottom-right-radius($radii);
}
@mixin border-bottom-radius($radii) {
@include border-bottom-left-radius($radii);
@include border-bottom-right-radius($radii);
}
@mixin border-left-radius($radii) {
@include border-top-left-radius($radii);
@include border-bottom-left-radius($radii);
}
bourbon/css3/_box-shadow.scss deleted 100644 → 0
// Box-Shadow Mixin Requires Sass v3.1.1+
@mixin box-shadow ($shadow-1,
$shadow-2: false, $shadow-3: false,
$shadow-4: false, $shadow-5: false,
$shadow-6: false, $shadow-7: false,
$shadow-8: false, $shadow-9: false)
{
$full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
$shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
-webkit-box-shadow: $full;
-moz-box-shadow: $full;
-ms-box-shadow: $full;
-o-box-shadow: $full;
box-shadow: $full;
}
bourbon/css3/_box-sizing.scss deleted 100644 → 0
@mixin box-sizing ($box) {
// content-box | border-box | inherit
-webkit-box-sizing: $box;
-moz-box-sizing: $box;
-ms-box-sizing: $box;
-o-box-sizing: $box;
box-sizing: $box;
}
bourbon/css3/_columns.scss deleted 100644 → 0
@mixin columns($arg: auto) {
// <column-count> || <column-width>
-webkit-columns: $arg;
-moz-columns: $arg;
columns: $arg;
}
@mixin column-count($int: auto) {
// auto || integer
-webkit-column-count: $int;
-moz-column-count: $int;
column-count: $int;
}
@mixin column-gap($length: normal) {
// normal || length
-webkit-column-gap: $length;
-moz-column-gap: $length;
column-gap: $length;
}
@mixin column-fill($arg: auto) {
// auto || length
-webkit-columns-fill: $arg;
-moz-columns-fill: $arg;
columns-fill: $arg;
}
@mixin column-rule($arg) {
// <border-width> || <border-style> || <color>
-webkit-column-rule: $arg;
-moz-column-rule: $arg;
column-rule: $arg;
}
@mixin column-rule-color($color) {
-webkit-column-rule-color: $color;
-moz-column-rule-color: $color;
column-rule-color: $color;
}
@mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
-webkit-column-rule-style: $style;
-moz-column-rule-style: $style;
column-rule-style: $style;
}
@mixin column-rule-width ($width: none) {
-webkit-column-rule-width: $width;
-moz-column-rule-width: $width;
column-rule-width: $width;
}
@mixin column-span($arg: none) {
// none || all
-webkit-column-span: $arg;
-moz-column-span: $arg;
column-span: $arg;
}
@mixin column-width($length: auto) {
// auto || length
-webkit-column-width: $length;
-moz-column-width: $length;
column-width: $length;
}
bourbon/css3/_flex-box.scss deleted 100644 → 0
// CSS3 Flexible Box Model and property defaults
// Custom shorthand notation for flexbox
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
@include display-box;
@include box-orient($orient);
@include box-pack($pack);
@include box-align($align);
}
@mixin display-box {
display: -webkit-box;
display: -moz-box;
display: box;
}
@mixin box-orient($orient: inline-axis) {
// horizontal|vertical|inline-axis|block-axis|inherit
-webkit-box-orient: $orient;
-moz-box-orient: $orient;
box-orient: $orient;
}
@mixin box-pack($pack: start) {
// start|end|center|justify
-webkit-box-pack: $pack;
-moz-box-pack: $pack;
box-pack: $pack;
}
@mixin box-align($align: stretch) {
// start|end|center|baseline|stretch
-webkit-box-align: $align;
-moz-box-align: $align;
box-align: $align;
}
@mixin box-direction($direction: normal) {
// normal|reverse|inherit
-webkit-box-direction: $direction;
-moz-box-direction: $direction;
box-direction: $direction;
}
@mixin box-lines($lines: single) {
// single|multiple
-webkit-box-lines: $lines;
-moz-box-lines: $lines;
box-lines: $lines;
}
@mixin box-ordinal-group($integer: 1) {
-webkit-box-ordinal-group: $integer;
-moz-box-ordinal-group: $integer;
box-ordinal-group: $integer;
}
@mixin box-flex($value: 0.0) {
-webkit-box-flex: $value;
-moz-box-flex: $value;
box-flex: $value;
}
@mixin box-flex-group($integer: 1) {
-webkit-box-flex-group: $integer;
-moz-box-flex-group: $integer;
box-flex-group: $integer;
}
bourbon/css3/_inline-block.scss deleted 100644 → 0
// Legacy support for inline-block in IE7 (maybe IE6)
@mixin inline-block {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
}
bourbon/css3/_linear-gradient.scss deleted 100644 → 0
@mixin linear-gradient($pos, $G1, $G2: false,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
$fallback: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: top; // Default position
}
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
// 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 {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full);
background-image: -ms-linear-gradient($pos, $full);
background-image: -o-linear-gradient($pos, $full);
background-image: unquote("linear-gradient(#{$pos}, #{$full})");
}
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
// @include linear-gradient(#1e5799, #2989d8);
// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
bourbon/css3/_radial-gradient.scss deleted 100644 → 0
// Requires Sass 3.1+
@mixin radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
background-color: nth($G1, 1);
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);
background-image: -ms-radial-gradient($pos, $shape-size, $full);
background-image: -o-radial-gradient($pos, $shape-size, $full);
background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
}
// Usage: Gradient position and shape-size are required. Color stops are optional.
// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
bourbon/css3/_transform.scss deleted 100644 → 0
@mixin transform($property: none) {
// none | <transform-function>
-webkit-transform: $property;
-moz-transform: $property;
-ms-transform: $property;
-o-transform: $property;
transform: $property;
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
-webkit-transform-origin: $axes;
-moz-transform-origin: $axes;
-ms-transform-origin: $axes;
-o-transform-origin: $axes;
transform-origin: $axes;
}
bourbon/css3/_transition.scss deleted 100644 → 0
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all, 2.0s, ease-in-out);
// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
// Detect # of args passed into each variable
$length-of-property: length($property);
$length-of-duration: length($duration);
$length-of-timing-function: length($timing-function);
$length-of-delay: length($delay);
@if $length-of-property > 1 {
@include transition-property(zip($property)); }
@else {
@include transition-property( $property);
}
@if $length-of-duration > 1 {
@include transition-duration(zip($duration)); }
@else {
@include transition-duration( $duration);
}
@if $length-of-timing-function > 1 {
@include transition-timing-function(zip($timing-function)); }
@else {
@include transition-timing-function( $timing-function);
}
@if $length-of-delay > 1 {
@include transition-delay(zip($delay)); }
@else {
@include transition-delay( $delay);
}
}
@mixin transition-property ($prop-1: all,
$prop-2: false, $prop-3: false,
$prop-4: false, $prop-5: false,
$prop-6: false, $prop-7: false,
$prop-8: false, $prop-9: false)
{
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
$prop-6, $prop-7, $prop-8, $prop-9);
-webkit-transition-property: $full;
-moz-transition-property: $full;
-ms-transition-property: $full;
-o-transition-property: $full;
transition-property: $full;
}
@mixin transition-duration ($time-1: 0,
$time-2: false, $time-3: false,
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
-webkit-transition-duration: $full;
-moz-transition-duration: $full;
-ms-transition-duration: $full;
-o-transition-duration: $full;
transition-duration: $full;
}
@mixin transition-timing-function ($motion-1: ease,
$motion-2: false, $motion-3: false,
$motion-4: false, $motion-5: false,
$motion-6: false, $motion-7: false,
$motion-8: false, $motion-9: false)
{
$full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
$motion-6, $motion-7, $motion-8, $motion-9);
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-webkit-transition-timing-function: $full;
-moz-transition-timing-function: $full;
-ms-transition-timing-function: $full;
-o-transition-timing-function: $full;
transition-timing-function: $full;
}
@mixin transition-delay ($time-1: 0,
$time-2: false, $time-3: false,
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
-webkit-transition-delay: $full;
-moz-transition-delay: $full;
-ms-transition-delay: $full;
-o-transition-delay: $full;
transition-delay: $full;
}
bourbon/functions/_deprecated-webkit-gradient.scss deleted 100644 → 0
// Render Deprecated Webkit Gradient - Linear || Radial
//************************************************************************//
@function deprecated-webkit-gradient($type, $full) {
$gradient-list: ();
$gradient: false;
$full-length: length($full);
$percentage: false;
$gradient-type: $type;
@for $i from 1 through $full-length {
$gradient: nth($full, $i);
@if length($gradient) == 2 {
$color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
$gradient-list: join($gradient-list, $color-stop, comma);
}
@else {
@if $i == $full-length {
$percentage: 100%;
}
@else {
$percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
}
$color-stop: color-stop(unquote($percentage), $gradient);
$gradient-list: join($gradient-list, $color-stop, comma);
}
}
@if $type == radial {
$gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
}
@else if $type == linear {
$gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
}
@return $gradient;
}
bourbon/functions/_grid-width.scss deleted 100644 → 0
@function grid-width($n) {
@return $n * $gw-column + ($n - 1) * $gw-gutter;
}
// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
//
// $gw-column: 100px; // Column Width
// $gw-gutter: 40px; // Gutter Width
//
// div {
// width: grid-width(4); // returns 520px;
// margin-left: $gw-gutter; // returns 40px;
// }
bourbon/functions/_linear-gradient.scss deleted 100644 → 0
@function linear-gradient($pos: top, $G1: false, $G2: false,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: top; // Default position
}
$type: linear;
$gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
$type-gradient: append($type, $gradient, comma);
@return $type-gradient;
}
bourbon/functions/_radial-gradient.scss deleted 100644 → 0
// This function is required and used by the background-image mixin.
@function radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
$type: radial;
$gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
$type-gradient: append($type, $gradient, comma);
@return $type-gradient;
}
bourbon/functions/_tint-shade.scss deleted 100644 → 0
// Add percentage of white to a color
@function tint($color, $percent){
@return mix(white, $color, $percent);
}
// Add percentage of black to a color
@function shade($color, $percent){
@return mix(black, $color, $percent);
}
bourbon/lib/bourbon.rb deleted 100644 → 0
require "bourbon/generator"
module Bourbon
if defined?(Rails)
class Engine < ::Rails::Engine
require 'bourbon/engine'
end
module Rails
class Railtie < ::Rails::Railtie
rake_tasks do
load "tasks/install.rake"
end
end
end
end
end
require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")
bourbon/lib/bourbon/sass_extensions.rb deleted 100644 → 0
module Bourbon::SassExtensions
end
require "sass"
require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
bourbon/lib/bourbon/sass_extensions/functions.rb deleted 100644 → 0
module Bourbon::SassExtensions::Functions
end
require File.join(File.dirname(__FILE__), "/functions/compact")
module Sass::Script::Functions
include Bourbon::SassExtensions::Functions::Compact
end
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
class Sass::Script::Functions::EvaluationContext
include Sass::Script::Functions
end
bourbon/lib/bourbon/sass_extensions/functions/compact.rb deleted 100644 → 0
# Compact function pulled from compass
module Bourbon::SassExtensions::Functions::Compact
def compact(*args)
sep = :comma
if args.size == 1 && args.first.is_a?(Sass::Script::List)
args = args.first.value
sep = args.first.separator
end
Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
end
end
main.html
......@@ -5,7 +5,6 @@
<link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" />
<link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" />
<link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<link href="/static/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
......
sass/_activation.scss deleted 100644 → 0
body.activation {
footer {
max-width: 600px;
text-align: center;
p {
float: none;
}
ul {
display: none;
}
}
}
section.activation {
@extend .wrapper;
@include box-shadow(0 1px 0 #fff);
@include box-sizing(border-box);
background: #fff;
border-top: 0;
border: 1px solid #ccc;
max-width: 600px;
padding: lh();
margin-top: lh();
}
sass/_index.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;
}
}
}
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);
//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);
}
}
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;
@include inline-block();
background: $mit-red;
margin-left: flex-grid(4) + flex-gutter();
padding: lh() lh(1.5);
h1 {
@include inline-block();
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
line-height: 1.2em;
margin: 0 lh() 0 0;
}
h2 {
@include inline-block();
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
line-height: 1.2em;
}
&.course {
section {
width: flex-grid(4, 8);
margin-right: flex-gutter(8);
float: left;
margin-left: 0;
padding: 0;
a {
@extend .button;
@include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
background-color: darken($mit-red, 20%);
display: block;
padding: lh(.5) lh();
border-color: darken($mit-red, 30%);
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;
}
}
}
}
}
section.index-content {
@extend .wrapper;
@extend .clearfix;
section {
@extend .clearfix;
float: left;
h1 {
font-size: 24px;
font-weight: 800;
font-family: "Open Sans";
margin-bottom: lh();
}
p {
line-height: lh();
margin-bottom: lh();
}
ul {
margin: 0;
// list-style: disc outside none;
// li {
// list-style: disc outside none;
// }
}
&.about {
@include box-sizing(border-box);
border-right: 1px solid #e5e5e5;
margin-right: flex-gutter();
padding-right: flex-gutter() / 2;
width: flex-grid(8);
section {
@extend .clearfix;
margin-bottom: lh();
p {
width: flex-grid(4, 8);
float: left;
&:nth-child(odd) {
margin-right: flex-gutter(8);
}
}
&.intro {
section {
margin-bottom: 0;
&.intro-text {
margin-right: flex-gutter(8);
width: flex-grid(4, 8);
p {
margin-right: 0;
width: auto;
float: none;
}
}
&.intro-video {
width: flex-grid(4, 8);
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: #666;
margin-bottom: lh();
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);
&:nth-child(odd) {
margin-right: flex-gutter(8);
}
}
}
}
}
}
&.course, &.staff {
width: flex-grid(4);
h1 {
font: normal $body-font-size $body-font-family;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: lh();
}
h2 {
font: 800 24px $header-font-family;
}
h3 {
font: 400 18px $header-font-family;
}
a {
@extend .button;
}
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) {
background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
}
}
}
// 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);
section {
width: flex-grid(4, 8);
&.about-info {
margin-right: flex-gutter(8);
}
&.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);
&: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;
}
}
}
}
}
}
section.copyright, section.tos, section.privacy-policy, section.honor-code {
@extend .subpage;
}
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;
a {
color: #888;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: #666;
}
}
p {
@include inline-block();
margin-right: lh();
}
ul {
@include inline-block();
li {
@include inline-block();
&:after {
content: ' |';
display: inline;
color: #ccc;
}
&:last-child {
&:after {
content: none;
}
}
}
}
}
}
sass/_local.scss deleted 100644 → 0
#hide_acc {
min-height:600;
}
#mainblock {
border: 0;
padding: 0;
margin: 0;
width: 200;
min-height:600px;
margin-left: 276px;
margin-right: 0px;
}
.bordered { border: 1px solid #AAAAAA; border-style : dotted; }
.seq_problem_visited { background-color: #ccccaa;}
.seq_video_visited { background-color: #ccaacc;}
.seq_html_visited { background-color: #caaccc;}
.seq_tab_visited { background-color: #aacccc;}
.seq_vertical_visited { background-color: #acaccc;}
.seq_sequential_visited { background-color: #cacacc;}
.seq_problem_visited { background-color: #ccacac;}
.seq_schematic_visited { background-color: #cccaca;}
.seq_problem_inactive { background-color: #aaaa99;}
.seq_video_inactive { background-color: #aa99aa;}
.seq_video_inactive { background-color: #aaa99a;}
.seq_html_inactive { background-color: #a99aaa;}
.seq_tab_inactive { background-color: #99aaaa;}
.seq_vertical_inactive { background-color: #9a9aab;}
.seq_sequential_inactive { background-color: #a9a9aa;}
.seq_problem_inactive { background-color: #aa9a9a;}
.seq_schematic_inactive { background-color: #aaa9a9;}
.seq_active { background-color: red;}
sass/_theme.scss deleted 100644 → 0
/*
----------------------------------------------------------------------------------------
Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved.
THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER
TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate
pmitros donated $10
Colors:
Light blue: bddeff
Blue: 7fbcfd
Very dark blue: #031634
Dark blue: #023063;
Dark Greenish: #7a994c;
Greenish: #adcc80;
Very light greenish: #dae5c9;
Bright orange: #fa720a;
----------------------------------------------------------------------------------------
*/
h1 {
clear:both;
}
h2 {
clear:both;
}
h3 {
font-size:1em;
margin:20px 0 5px 0;
clear:both;
}
#wrapper {
background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
margin:0 auto ;
width:100%;
}
// marketing pages
#topWrapper {
width:100%;
height:100px;
background-image:url(images/css/topWrapper-bg.jpg);
background-position:center top ;
background-repeat:repeat-x;
}
#topBanner {
width:800px;
margin:0 auto;
height:100px;
background-image:url(images/css/topBanner.jpg);
background-repeat:no-repeat;
}
#topnav {
background:transparent url('images/css/hmenu.jpg') repeat-x top left;
height:20px;
margin:0 auto ;
text-align:center;
width:800px;
ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:20px;
text-transform:uppercase;
font-size:0.9em;
font-family:Arial,sans-serif;
li {
display:block;
float:left;
margin:0;
padding:0;
background:transparent url('images/css/hmenu.jpg') repeat-x top left;
a {
display:block;
float:left;
color:#031634;
text-decoration:none;
padding:0px 50px ;
line-height:20px;
font-weight:bold;
}
}
}
}
#topnav ul li a:hover, #topnav li#current a {
color:#7a994c;
background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
}
#bg {
margin:0 auto;
padding:0;
background:transparent ;
background-image:url(images/css/hat.jpg);
background-repeat:no-repeat;
background-position: center top ;
}
#header {
margin: 0 auto;
min-height:0px;
height: 0px;
width: 800px;
}
#page {
background: transparent url( images/css/page-bg.jpg ) no-repeat center top;
}
#container {
margin:0 auto;
width:800px;
}
#content {
width:780px;
margin:0 auto ;
text-align:left;
min-height:800px;
}
#content p {
text-align:justify;
}
#footerWrapper {
margin:0 auto;
height:10px;
padding:0;
background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top;
}
#footer {
margin:0 auto;
padding:0;
width:800px;
height:10px;
}
#sidebar ul.vmenu {
list-style: none;
text-align: left;
margin: 7px 0px 8px 0px;
padding: 0;
text-decoration: none;
border-top: 1px solid #eeeeee;
}
#sidebar ul.vmenu li {
list-style: none;
padding: 4px 0 4px 0px;
margin: 0 2px;
border-bottom: 1px solid #eeeeee;
}
#sidebar ul.vmenu li a {
text-decoration: none;
color:#023063;
}
#sidebar ul.vmenu li a:hover {
color:#adcc80;
}
#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.vmenu ul li { border: none; }
sass/application.scss
@import "bourbon/bourbon";
@import "reset";
@import "font-face";
// Base layout
@import "base-variables", "base-extends", "base";
@import "layout";
@import "leanmodal";
@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 "jquery-ui-1.8.16.custom";
// pages
@import "courseware", "courseware-video", "courseware-sequence-nav";
@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav";
@import "textbook";
@import "info";
@import "profile";
@import "wiki-basic-html", "wiki-create", "wiki";
@import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki";
@import "help";
@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar";
// left over
// @import "theme";
// @import "local";
@import "discussion/askbot-original", "discussion/discussion", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar";
sass/_base.scss → sass/base/_base.scss
......@@ -29,6 +29,11 @@ em {
font-style: italic;
}
img {
max-width: 100%;
height: auto;
}
#{$all-text-inputs}, textarea {
@include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff);
......
sass/_index-functions.scss → sass/base/_functions.scss
// Functions
//---------------------------------------- //
// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
......@@ -14,8 +11,13 @@
@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 $lh * $amount;
@return $body-line-height * $amount;
}
sass/_base-variables.scss → sass/base/_variables.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;
}
// Variables
// ---------------------------------------- //
......
sass/bourbon/_bourbon.scss
// Custom Functions
@import "functions/deprecated-webkit-gradient";
@import "functions/golden-ratio";
@import "functions/grid-width";
@import "functions/modular-scale";
@import "functions/tint-shade";
// CSS3 Mixins
......
sass/bourbon/addons/_font-family.scss
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
$verdana: Verdana, Geneva, sans-serif;
sass/bourbon/css3/_animation.scss
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
// Official animation shorthand property.
@mixin animation ($animation-1,
$animation-2: false, $animation-3: false,
$animation-4: false, $animation-5: false,
$animation-6: false, $animation-7: false,
$animation-8: false, $animation-9: false)
{
$full: compact($animation-1, $animation-2, $animation-3, $animation-4,
$animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
-webkit-animation: $full;
-moz-animation: $full;
animation: $full;
}
// Individual Animation Properties
@mixin animation-name ($name-1,
$name-2: false, $name-3: false,
$name-4: false, $name-5: false,
......@@ -127,8 +143,7 @@
}
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
// Deprecated
@mixin animation-basic ($name, $time: 0, $motion: ease) {
$length-of-name: length($name);
$length-of-time: length($time);
......@@ -151,11 +166,6 @@
} @else {
@include animation-timing-function( $motion);
}
@warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
}
// Official animation shorthand property. Needs more work to actually be useful.
@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
-webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
-moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
animation: $name $duration $timing-function $delay $iteration-count $direction;
}
sass/bourbon/css3/_linear-gradient.scss
......@@ -2,7 +2,8 @@
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
$G9: false, $G10: false,
$fallback: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
......@@ -15,7 +16,15 @@
$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 {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full);
......@@ -27,5 +36,6 @@
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
// @include linear-gradient(#1e5799, #2989d8);
// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
sass/bourbon/functions/_golden-ratio.scss deleted 100644 → 0
@function golden-ratio($value, $increment) {
@if $increment > 0 {
@for $i from 1 through $increment {
$value: ($value * 1.618);
}
}
@if $increment < 0 {
$increment: abs($increment);
@for $i from 1 through $increment {
$value: ($value / 1.618);
}
}
@return $value;
}
// div {
// Increment Up GR with positive value
// font-size: golden-ratio(14px, 1); // returns: 22.652px
//
// Increment Down GR with negative value
// font-size: golden-ratio(14px, -1); // returns: 8.653px
//
// Can be used with ceil(round up) or floor(round down)
// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px
// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px
// }
//
// modularscale.com
// goldenratiocalculator.com
sass/bourbon/lib/bourbon.rb
require "bourbon/generator"
module Bourbon
if defined?(Rails)
class Engine < ::Rails::Engine
......
sass/_courseware.scss → sass/courseware/_courseware.scss
......@@ -5,84 +5,6 @@ div.course-wrapper {
list-style: none;
}
div#accordion {
@extend .sidebar;
div#open_close_accordion {
position: absolute;
right: 0px;
width: 20px;
height: 20px;
background: #ccc;
border: 1px solid black;
right: -22px;
top: 5px;
}
h3 {
overflow: hidden;
margin: 0;
&:last-child {
@include box-shadow(none);
}
&.ui-accordion-header {
color: #000;
a {
font-size: $body-font-size;
color: lighten($text-color, 10%);
}
&.ui-state-hover {
border: none;
border-bottom: 1px solid #d3d3d3;
}
&.ui-state-active {
@extend .active;
}
}
}
ul.ui-accordion-content {
@include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6;
border: none;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
overflow: hidden;
li {
&.active {
font-weight: bold;
}
a {
text-decoration: none;
margin-bottom: lh(.5);
display: block;
color: #000;
&:hover {
color: #666;
}
p {
margin-bottom: 0;
&.subtitle {
color: #666;
}
}
}
}
}
}
section.course-content {
@extend .content;
......
sass/courseware/_sidebar.scss 0 → 100644
div#accordion {
@extend .sidebar;
div#open_close_accordion {
position: absolute;
right: 0px;
width: 20px;
height: 20px;
background: #ccc;
border: 1px solid black;
right: -22px;
top: 5px;
}
h3 {
overflow: hidden;
margin: 0;
&:last-child {
@include box-shadow(none);
}
&.ui-accordion-header {
color: #000;
a {
font-size: $body-font-size;
color: lighten($text-color, 10%);
}
&.ui-state-hover {
border: none;
border-bottom: 1px solid #d3d3d3;
}
&.ui-state-active {
@extend .active;
}
}
}
ul.ui-accordion-content {
@include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6;
border: none;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
overflow: hidden;
li {
&.active {
font-weight: bold;
}
a {
text-decoration: none;
margin-bottom: lh(.5);
display: block;
color: #000;
&:hover {
color: #666;
}
p {
margin-bottom: 0;
&.subtitle {
color: #666;
}
}
}
}
}
}
sass/index/_base.scss 0 → 100644
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;
}
}
}
sass/index/_footer.scss 0 → 100644
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;
a {
color: #888;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: #666;
}
}
p {
@include inline-block();
margin-right: lh();
}
ul {
@include inline-block();
li {
@include inline-block();
&:after {
content: ' |';
display: inline;
color: #ccc;
}
&:last-child {
&:after {
content: none;
}
}
}
}
}
}
sass/index/_header.scss 0 → 100644
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);
//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);
}
}
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;
@include inline-block();
background: $mit-red;
margin-left: flex-grid(4) + flex-gutter();
padding: lh() lh(1.5);
h1 {
@include inline-block();
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
line-height: 1.2em;
margin: 0 lh() 0 0;
}
h2 {
@include inline-block();
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
line-height: 1.2em;
}
&.course {
section {
width: flex-grid(4, 8);
margin-right: flex-gutter(8);
float: left;
margin-left: 0;
padding: 0;
a {
@extend .button;
@include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
background-color: darken($mit-red, 20%);
display: block;
padding: lh(.5) lh();
border-color: darken($mit-red, 30%);
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;
}
}
}
}
}
sass/index/_index.scss 0 → 100644
section.index-content {
@extend .wrapper;
@extend .clearfix;
section {
@extend .clearfix;
float: left;
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);
section {
@extend .clearfix;
margin-bottom: lh();
p {
width: flex-grid(4, 8);
float: left;
&:nth-child(odd) {
margin-right: flex-gutter(8);
}
}
&.intro {
section {
margin-bottom: 0;
&.intro-text {
margin-right: flex-gutter(8);
width: flex-grid(4, 8);
p {
margin-right: 0;
width: auto;
float: none;
}
}
&.intro-video {
width: flex-grid(4, 8);
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: #666;
margin-bottom: lh();
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);
&:nth-child(odd) {
margin-right: flex-gutter(8);
}
}
}
}
}
}
&.course, &.staff {
width: flex-grid(4);
h1 {
font: normal $body-font-size $body-font-family;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: lh();
}
h2 {
font: 800 24px $header-font-family;
}
h3 {
font: 400 18px $header-font-family;
}
a {
@extend .button;
}
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) {
background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
}
}
}
// 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);
section {
width: flex-grid(4, 8);
&.about-info {
margin-right: flex-gutter(8);
}
&.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);
&: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;
}
}
}
}
}
}
section.copyright, section.tos, section.privacy-policy, section.honor-code {
@extend .subpage;
}
sass/_index-variables.scss → sass/index/_variables.scss
......@@ -13,15 +13,17 @@ $gw-gutter: 25px;
$body-font-family: Georgia, serif;
$header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
// @media screen and (min-width: 940px) {
$body-font-size: 16px;
// }
$body-font-size: 16px;
// @media screen and (min-width:1200px) {
// $body-font-size: 18px;
// }
// @media screen and (max-width: 939px) {
// @media screen and (max-width:890px) {
// $body-font-size: 14px;
// }
$body-line-height: golden-ratio($body-font-size, 1);
$lh: golden-ratio($body-font-size, 1);
// Colors
......
sass/layout/_footer.scss 0 → 100644
footer {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
color: #777;
margin-top: $body-line-height;
padding: 0 $body-line-height;
p {
float: left;
a {
color: #444;
&:link, &:visited {
color: #444;
}
&:hover, &:focus {
color: #000;
}
}
}
ul {
float: right;
li {
display: inline-block;
margin-right: 20px;
a {
color: #444;
&:link, &:visited {
color: #444;
}
&:hover, &:focus {
color: #000;
}
}
}
}
}
sass/_layout.scss → sass/layout/_header.scss
html {
margin-top: 0;
body {
color: $dark-gray;
font: $body-font-size $body-font-family;
text-align: center;
margin: 0;
background: #f4f4f4; //#f3f1e5
div.header-wrapper {
// @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
@include box-shadow(inset 0 -1px 2px darken($mit-red, 10%));
background: $mit-red;
border-bottom: 1px solid #fff;
header {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
padding: 0 $body-line-height;
hgroup {
@extend .clearfix;
float: left;
h1 {
border-right: 1px solid darken($mit-red, 5%);
color: darken($mit-red, 25%);
font-size: 20px;
font-weight: 800;
margin: 0 lh() 0 0;
padding: 17px lh() 14px 0;
text-shadow: 0 1px 0 lighten($mit-red, 10%);
line-height: lh();
@include inline-block();
}
div.header-wrapper {
// @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
@include box-shadow(inset 0 -1px 2px darken($mit-red, 10%));
background: $mit-red;
border-bottom: 1px solid #fff;
header {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
padding: 0 $body-line-height;
hgroup {
@extend .clearfix;
float: left;
h1 {
border-right: 1px solid darken($mit-red, 5%);
color: darken($mit-red, 25%);
font-size: 20px;
font-weight: 800;
margin: 0 lh() 0 0;
padding: 17px lh() 14px 0;
text-shadow: 0 1px 0 lighten($mit-red, 10%);
line-height: lh();
@include inline-block();
}
h2 {
@include inline-block();
margin: 0 lh() 0 0;
padding: 19px lh() 9px 0;
line-height: lh();
border-right: 1px solid darken($mit-red, 5%);
-webkit-font-smoothing: antialiased;
h2 {
@include inline-block();
margin: 0 lh() 0 0;
padding: 19px lh() 9px 0;
line-height: lh();
border-right: 1px solid darken($mit-red, 5%);
-webkit-font-smoothing: antialiased;
a {
color: #fff;
text-decoration: none;
a {
color: #fff;
text-decoration: none;
&:hover {
color: rgba(#fff, .7);
}
}
&:hover {
color: rgba(#fff, .7);
}
}
}
@media screen and (max-width: 920px) {
border-bottom: 1px solid darken($mit-red, 5%);
display: block;
float: none;
h1 {
float: right;
border: 0;
margin-right: 0;
padding-right: 0;
}
@media screen and (max-width: 920px) {
border-bottom: 1px solid darken($mit-red, 5%);
display: block;
float: none;
h2 {
float: left;
border: 0;
margin-right: 0;
padding-right: 0;
}
}
h1 {
float: right;
border: 0;
margin-right: 0;
padding-right: 0;
}
nav {
h2 {
float: left;
display: block;
margin: 0;
padding: 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
-webkit-font-smoothing: antialiased;
ul {
@extend .clearfix;
display: inline-block;
padding: 19px 0 9px;
margin: 0;
li {
margin-right: lh();
display: inline-block;
margin-bottom: 0;
line-height: lh();
a {
color: #fff;
text-decoration: none;
&:hover {
color: rgba(#fff, .7);
background-color: none;
text-decoration: none;
}
}
}
}
border: 0;
margin-right: 0;
padding-right: 0;
}
}
}
section.main-content {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
@include border-radius(4px);
overflow: hidden;
background: #fff;
border-bottom: 1px solid #bbb;
@media screen and (min-width: 1400px) {
// @include border-radius(3px);
@include box-shadow(0 0 4px #dfdfdf);
border: 1px solid #bbb;
margin-top: lh(.5);
}
}
img {
max-width: 100%;
height: auto;
}
nav {
float: left;
display: block;
margin: 0;
padding: 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
-webkit-font-smoothing: antialiased;
footer {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
color: #777;
margin-top: $body-line-height;
padding: 0 $body-line-height;
p {
float: left;
a {
color: #444;
&:link, &:visited {
color: #444;
}
&:hover, &:focus {
color: #000;
}
}
}
ul {
float: right;
@extend .clearfix;
display: inline-block;
padding: 19px 0 9px;
margin: 0;
li {
margin-right: lh();
display: inline-block;
margin-right: 20px;
margin-bottom: 0;
line-height: lh();
a {
color: #444;
&:link, &:visited {
color: #444;
}
color: #fff;
text-decoration: none;
&:hover, &:focus {
color: #000;
&:hover {
color: rgba(#fff, .7);
background-color: none;
text-decoration: none;
}
}
}
}
}
&.activation {
footer {
ul {
display: none;
}
}
}
}
}
sass/layout/_layout.scss 0 → 100644
html {
margin-top: 0;
body {
color: $dark-gray;
font: $body-font-size $body-font-family;
text-align: center;
margin: 0;
background: #f4f4f4; //#f3f1e5
section.main-content {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
@include border-radius(4px);
overflow: hidden;
background: #fff;
border-bottom: 1px solid #bbb;
@media screen and (min-width: 1400px) {
// @include border-radius(3px);
@include box-shadow(0 0 4px #dfdfdf);
border: 1px solid #bbb;
margin-top: lh(.5);
}
}
}
}
sass/marketing.scss
@import "bourbon/bourbon";
@import "reset";
@import "font-face";
@import "base/reset", "base/font-face", "base/functions";
// pages
@import "index-functions", "index-variables", "index-extends", "index";
@import "leanmodal";
@import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index";
@import "layout/leanmodal";
sass/print.scss 0 → 100644
.header-wrapper {display:none;}
#accordion {display:none;}
.ui-accordion {display:none;
visibility:hidden;
width:0%;
}
sass/wiki/_sidebar.scss 0 → 100644
div#wiki_panel {
@extend .sidebar;
overflow: auto;
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;
width: 100%;
&:hover {
@include box-shadow(0 1px 0 #fff);
background: #efefef;
}
}
ul {
li {
&.search {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
padding: 7px lh();
label {
display: none;
}
}
&.create-article {
h3 {
a {
padding: 7px lh();
}
}
}
}
}
div#wiki_create_form {
@extend .clearfix;
padding: 15px;
background: #d6d6d6;
border-bottom: 1px solid #bbb;
input[type="text"] {
margin-bottom: 6px;
display: block;
width: 100%;
@include box-sizing(border-box);
}
ul {
list-style: none;
li {
float: left;
&#cancel {
float: right;
margin-top: 10px;
}
}
}
}
}
sass/_wiki.scss → sass/wiki/_wiki.scss
......@@ -2,76 +2,6 @@ div.wiki-wrapper {
display: table;
width: 100%;
div#wiki_panel {
@extend .sidebar;
overflow: auto;
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;
width: 100%;
&:hover {
@include box-shadow(0 1px 0 #fff);
background: #efefef;
}
}
ul {
li {
&.search {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
padding: 7px lh();
label {
display: none;
}
}
&.create-article {
h3 {
a {
padding: 7px lh();
}
}
}
}
}
div#wiki_create_form {
@extend .clearfix;
padding: 15px;
background: #d6d6d6;
border-bottom: 1px solid #bbb;
input[type="text"] {
margin-bottom: 6px;
display: block;
width: 100%;
@include box-sizing(border-box);
}
ul {
list-style: none;
li {
float: left;
&#cancel {
float: right;
margin-top: 10px;
}
}
}
}
}
section.wiki-body {
@extend .content;
......
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