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

edx.org: adds in variables/mixins to support edx.org visual changes

Browse Source
This commit is contained in:
Brian Talbot
2013-07-24 10:47:43 -04:00
parent 166aea62bb
commit 71c3f5e5a7
2 changed files with 44 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
lms/static/sass/base/_mixins.scss
View File

@@ -1,10 +1,13 @@
@function em($pxval, $base: 16) {
@return #{$pxval / $base}em;
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem;
}
// Line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
// mixins - line height
@mixin line-height($fontSize: auto){
line-height: ($fontSize*1.48) + px;
line-height: (($fontSize/10)*1.48) + rem;
}
// image-replacement hidden text
@@ -31,6 +34,15 @@
display: block;
}
@function em($pxval, $base: 16) {
@return #{$pxval / $base}em;
}
// Line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
//-----------------
// Theme Mixin Styles

40
lms/static/sass/base/_variables.scss
View File

@@ -39,19 +39,33 @@ $outer-border-color: rgb(170, 170, 170);
$light-gray: #ddd;
$dark-gray: #333;
// edx.org-related
$m-gray-l1: rgb(203,203,203);
$m-gray-l2: rgb(246,246,246);
$m-gray: rgb(153,153,153);
$m-gray-d1: rgb(102,102,102);
$m-gray-d2: rgb(51,51,51);
$m-gray-a1: rgb(80,80,80);
$m-blue: rgb(65, 116, 170);
// $m-blue: rgb(85, 151, 221); (used in marketing redesign)
$m-blue-l1: rgb(85, 151, 221);
$m-blue-d1: shade($m-blue,15%);
$m-blue-s1: saturate($m-blue,15%);
$m-pink: rgb(204,51,102);
// edx.org marketing site variables
$m-gray: #8A8C8F;
$m-gray-l1: #97999B;
$m-gray-l2: #A4A6A8;
$m-gray-l3: #B1B2B4;
$m-gray-l4: #F5F5F5;
$m-gray-d1: #7D7F83;
$m-gray-d2: #707276;
$m-gray-d3: #646668;
$m-gray-d4: #050505;
$m-blue: #1AA1DE;
$m-blue-l1: #2BACE6;
$m-blue-l2: #42B5E9;
$m-blue-l3: #59BEEC;
$m-blue-d1: #1790C7;
$m-blue-d2: #1580B0;
$m-blue-d3: #126F9A;
$m-blue-d4: #0A4A67;
$m-pink: #B52A67;
$m-pink-l1: #CA2F73;
$m-pink-l2: #D33F80;
$m-pink-l3: #D7548E;
$m-pink-d1: #A0255B;
$m-pink-d2: #8C204F;
$m-pink-d3: #771C44;
$m-base-font-size: em(15);