Merge pull request #8271 from edx/sass-theming

Comprehensive Theming
This commit is contained in:
David Baumgold
2015-09-21 10:55:18 -04:00
105 changed files with 1820 additions and 831 deletions

View File

@@ -2,6 +2,7 @@
// ====================
// Table of Contents
// * +Paths
// * +Grid
// * +Fonts
// * +Colors - Utility
@@ -15,6 +16,10 @@
$baseline: 20px;
// +Paths
// ====================
$static-path: '..' !default;
// +Grid
// ====================
$gw-column: ($baseline*3);

View File

@@ -3,9 +3,9 @@
@font-face {
font-family: 'Open Sans';
src:
url('../fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
url('../fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
url('../fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
url('#{$static-path}/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@@ -13,9 +13,9 @@
@font-face {
font-family: 'Open Sans';
src:
url('../fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('../fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('../fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
url('#{$static-path}/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('#{$static-path}/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@@ -23,9 +23,9 @@
@font-face {
font-family: 'Open Sans';
src:
url('../fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
url('../fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
url('../fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
url('#{$static-path}/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@@ -33,9 +33,9 @@
@font-face {
font-family: 'Open Sans';
src:
url('../fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
url('../fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
url('../fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
url('#{$static-path}/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@@ -43,9 +43,9 @@
@font-face {
font-family: 'Open Sans';
src:
url('../fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('../fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
url('../fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
url('#{$static-path}/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@@ -53,9 +53,9 @@
@font-face {
font-family: 'Open Sans';
src:
url('../fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('../fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('../fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
url('#{$static-path}/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('#{$static-path}/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@@ -63,9 +63,9 @@
@font-face {
font-family: 'Open Sans';
src:
url('../fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
url('../fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
url('../fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
url('#{$static-path}/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
url('#{$static-path}/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@@ -73,9 +73,9 @@
@font-face {
font-family: 'Open Sans';
src:
url('../fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('../fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('../fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
url('#{$static-path}/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('#{$static-path}/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}

View File

@@ -7,7 +7,7 @@
width: 7px;
height: 22px;
margin-left: ($baseline/2);
background: url(../images/drag-handles.png) no-repeat;
background: url('#{$static-path}/images/drag-handles.png') no-repeat;
cursor: move;
}
@@ -15,33 +15,33 @@
display: inline-block;
width: ($baseline*3);
height: ($baseline*3);
background: url(../images/large-advanced-icon.png) center no-repeat;
background: url('#{$static-path}/images/large-advanced-icon.png') center no-repeat;
}
.large-discussion-icon {
display: inline-block;
width: ($baseline*3);
height: ($baseline*3);
background: url(../images/large-discussion-icon.png) center no-repeat;
background: url('#{$static-path}/images/large-discussion-icon.png') center no-repeat;
}
.large-html-icon {
display: inline-block;
width: ($baseline*3);
height: ($baseline*3);
background: url(../images/large-html-icon.png) center no-repeat;
background: url('#{$static-path}/images/large-html-icon.png') center no-repeat;
}
.large-problem-icon {
display: inline-block;
width: ($baseline*3);
height: ($baseline*3);
background: url(../images/large-problem-icon.png) center no-repeat;
background: url('#{$static-path}/images/large-problem-icon.png') center no-repeat;
}
.large-video-icon {
display: inline-block;
width: ($baseline*3);
height: ($baseline*3);
background: url(../images/large-video-icon.png) center no-repeat;
background: url('#{$static-path}/images/large-video-icon.png') center no-repeat;
}

View File

@@ -295,12 +295,12 @@
// CASE: right to left layout
@include rtl {
background: transparent url("../images/drag-handles.png") no-repeat left center;
background: transparent url("#{$static-path}/images/drag-handles.png") no-repeat left center;
}
// CASE: left to right layout
@include ltr {
background: transparent url("../images/drag-handles.png") no-repeat right center;
background: transparent url("#{$static-path}/images/drag-handles.png") no-repeat right center;
}
}

View File

@@ -1,10 +1,10 @@
@font-face {
font-family: 'CreativeCommons';
src: url('../fonts/CreativeCommons/cc.eot');
src: url('../fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'),
url('../fonts/CreativeCommons/cc.woff') format('woff'),
url('../fonts/CreativeCommons/cc.ttf') format('truetype'),
url('../fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
src: url('#{$static-path}/fonts/CreativeCommons/cc.eot');
src: url('#{$static-path}/fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'),
url('#{$static-path}/fonts/CreativeCommons/cc.woff') format('woff'),
url('#{$static-path}/fonts/CreativeCommons/cc.ttf') format('truetype'),
url('#{$static-path}/fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
font-weight: normal;
font-style: normal;
}

View File

@@ -456,7 +456,7 @@ input.search {
@include box-sizing(border-box);
border: 1px solid $darkGrey;
border-radius: 20px;
background: url(../images/search-icon.png) no-repeat 8px 7px #edf1f5;
background: url('#{$static-path}/images/search-icon.png') no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif;
color: $baseFontColor;
outline: 0;

View File

@@ -100,7 +100,7 @@
}
&.is-locked {
background-image: url('../images/bg-micro-stripes.png');
background-image: url('#{$static-path}/images/bg-micro-stripes.png');
background-position: 0 0;
background-repeat: repeat;
}

View File

@@ -299,7 +299,7 @@
}
&.is-locked {
background-image: url('../images/bg-micro-stripes.png');
background-image: url('#{$static-path}/images/bg-micro-stripes.png');
background-position: 0 0;
background-repeat: repeat;
}

View File

@@ -197,7 +197,7 @@
}
.drag-handle {
background: url(../images/drag-handles.png) center no-repeat #fff;
background: url('#{$static-path}/images/drag-handles.png') center no-repeat #fff;
}
}
@@ -210,10 +210,10 @@
width: 35px;
height: 100%;
border: none;
background: url(../images/drag-handles.png) center no-repeat #fff;
background: url('#{$static-path}/images/drag-handles.png') center no-repeat #fff;
&:hover {
background: url(../images/drag-handles.png) center no-repeat #fff;
background: url('#{$static-path}/images/drag-handles.png') center no-repeat #fff;
}
&.is-fixed {