Skip to content

E
edx-platform
Commit 4d7cef8d by Galen Frechette
Options

redesigns course item on home page and find courses page, refactors its… 

redesigns course item on home page and find courses page, refactors its implimentation and makes vrious other design improvements
parent 27e6c215
Showing with 2107 additions and 1185 deletions
lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png

21.9 KB | W: | H:

lms/static/images/harvard_bw.png

21.7 KB | W: | H:

lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/images/mit_bw.png
lms/static/images/mit_bw.png

1.89 KB | W: | H:

lms/static/images/mit_bw.png

1.81 KB | W: | H:

lms/static/images/mit_bw.png
lms/static/images/mit_bw.png
lms/static/images/mit_bw.png
lms/static/images/mit_bw.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/sass/_base.scss
...@@ -21,8 +21,9 @@ html, body { ...@@ -21,8 +21,9 @@ html, body {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: $base-font-color; color: $base-font-color;
font: normal 1.6rem/2rem $serif; font: normal 1.4rem/2rem $serif;
margin: 0px; margin: 0px;
-webkit-font-smoothing: antialiased;
} }
p { p {
...@@ -39,9 +40,10 @@ a:link, a:visited { ...@@ -39,9 +40,10 @@ a:link, a:visited {
color: $blue; color: $blue;
font: normal 1rem/1.8rem $sans-serif; font: normal 1rem/1.8rem $sans-serif;
text-decoration: none; text-decoration: none;
@include transition(all, 0.1s, linear);
&:hover { &:hover {
color: lighten($blue, 10%); color: $base-font-color;
} }
} }
......
lms/static/sass/_base_extends.scss
...@@ -6,6 +6,14 @@ ...@@ -6,6 +6,14 @@
width: 100%; width: 100%;
} }
.faded-hr-divider-medium {
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
rgba(240,240,240, 1) 50%,
rgba(240,240,240, 0)));
height: 1px;
width: 100%;
}
.faded-hr-divider-light { .faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0.8) 50%,
......
lms/static/sass/_dashboard.scss
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
} }
} }
.courses { .my-courses {
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0px; margin: 0px;
padding-left: 270px; padding-left: 270px;
...@@ -164,8 +164,287 @@ ...@@ -164,8 +164,287 @@
} }
} }
.course { .my-course {
background: rgb(250,250,250);
border: 1px solid rgb(220,220,220);
@include border-radius(3px);
@include box-sizing(border-box);
float: left;
font-size: 0em;
margin-right: flex-gutter();
min-height: 120px;
margin-bottom: 25px;
overflow: hidden;
position: relative;
width: flex-grid(12); width: flex-grid(12);
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
}
&:last-child {
margin-bottom: none;
}
> a {
@include clearfix;
display: block;
padding: 10px;
position: relative;
}
.cover {
background: rgb(225,225,225);
border: 1px solid rgb(150,150,150);
@include border-radius(4px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
@include transition(all, 0.15s, linear);
width: 100px;
@media only screen and (max-width: 320px) {
display: none;
}
.shade {
background: rgba(0,0,0, 0.3);
@include border-radius(4px);
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
@include transition(all, 0.15s, linear);
right: 0px;
}
.arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: rgb(255,255,255);
@include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
@include transform(rotate(-45deg));
@include transition(all, 0.15s, linear);
width: 55px;
}
img {
@include border-radius(4px);
display: block;
min-height: 100%;
min-width: 100%;
width: 100%;
}
}
.info {
left: 130px;
position: absolute;
right: 10px;
top: 10px;
z-index: 2;
@media only screen and (max-width: 320px) {
margin: 0px;
}
> hgroup {
width: 100%;
@media only screen and (max-width: 320px) {
margin: 0px;
}
h2 {
font: bold 1.2rem/1.6rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(color, 0.15s, linear);
text-overflow: ellipsis;
white-space: nowrap;
}
p {
color: $base-font-color;
font: normal 1rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
}
}
.edit, .register {
border: 1px solid rgb(220,220,220);
background: rgb(230,230,230);
color: $lighter-base-font-color;
display: block;
font: normal 12px/14px $sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 320px) {
display: none;
}
&:hover {
background: rgb(255,255,255);
color: $blue;
}
}
.meta {
border-top: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6));
font-size: 1rem;
height: 34px;
margin-top: 10px;
opacity: 0.9;
position: relative;
@include transition(opacity, 0.15s, linear);
width: 100%;
&:hover {
opacity: 0.9;
}
> * {
height: 18px;
position: absolute;
top: 15px;
}
p + p {
margin-top: 0px;
}
.complete {
left: 0px;
p {
font: normal 1rem/1.6rem $serif;
span {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.dates {
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
@include inline-block;
text-align: right;
&:first-child {
border-right: 1px solid rgb(200,200,200);
margin-right: 10px;
padding-right: 10px;
}
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.end-date {
border-left: 1px solid rgb(200,200,200);
right: 0px;
padding-left: 15px;
@media only screen and (max-width: 320px) {
display: none;
}
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
text-align: right;
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.progress {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
left: 90px;
right: 140px;
@media only screen and (max-width: 320px) {
right: 0px;
}
.meter {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-sizing(border-box);
height: 100%;
padding: 2px;
.meter-fill {
@include border-radius(3px);
background: rgb(210,210,210);
height: 100%;
width: 60%;
}
}
}
}
}
&:hover {
background: rgb(245,245,245);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
.edit {
background: rgb(220,220,220);
border-color: rgb(190,190,190);
}
.cover {
opacity: 1;
.shade, .arrow {
opacity: 1;
}
}
.meta {
opacity: 0.9;
}
}
} }
} }
} }
lms/static/sass/_find_courses.scss
.find-courses { .find-courses {
header { header.search-intro {
background: rgb(240,240,240); background: rgb(240,240,240);
border-bottom: 1px solid rgb(200,200,200); border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
......
lms/static/sass/_index.scss
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
width: flex-grid(12); width: flex-grid(12);
.video-wrapper { .video-wrapper {
left: 0px; right: 0px;
position: absolute; position: absolute;
top: 0px; top: 0px;
...@@ -36,15 +36,15 @@ ...@@ -36,15 +36,15 @@
.welcome { .welcome {
@include box-sizing(border-box); @include box-sizing(border-box);
float: right; float: left;
font-size: 0em; font-size: 0em;
width: flex-grid(12); width: flex-grid(12);
padding-left: 600px; padding-right: 600px;
padding-top: 20px; padding-top: 20px;
h1 { h1 {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 2.4rem/3rem $sans-serif; font: 300 2.4rem/3rem $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
...@@ -99,109 +99,181 @@ ...@@ -99,109 +99,181 @@
} }
} }
.university-partners { .university-partners {
background: rgb(245,245,245); @include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
//@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(250,250,250, 0.8) 15%, rgb(250,250,250) 50%, rgba(250,250,250, 0.8) 85%, rgba(255,255,255, 0))); rgba(245,245,245, 1) 50%,
border: 1px solid rgb(210,210,210); rgba(245,245,245, 0) 100%));
@include border-radius(4px); border-top: 1px solid rgb(210,210,210);
margin-bottom: 60px; border-bottom: 1px solid rgb(210,210,210);
margin-bottom: 0px;
overflow: hidden; overflow: hidden;
padding: 10px 0px;
position: relative; position: relative;
width: flex-grid(12); width: flex-grid(12);
&::before {
@extend .faded-hr-divider-medium;
content: "";
display: block;
}
&::after {
@extend .faded-hr-divider-medium;
content: "";
display: block;
}
.partners { .partners {
font-size: 0em; font-size: 0em;
margin: 0 auto; margin: 0 auto;
width: 420px; padding: 15px 0px;
text-align: center;
a { li.partner {
@include inline-block; @include inline-block;
margin-right: 40px; margin-right: 20px;
opacity: 0.7; padding-right: 20px;
position: relative; position: relative;
vertical-align: middle;
&::before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 100px;
right: 0px;
position: absolute;
top: 0px;
width: 1px;
}
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 100px;
right: 1px;
position: absolute;
top: 0px;
width: 1px;
}
&.mit {
padding: 0 35px 0 20px;
}
&:last-child { &:last-child {
margin-right: 0px; margin-right: 0px;
padding-right: 0px;
&::before {
display: none;
}
&::after {
display: none;
}
}
}
a {
opacity: 0.7;
@include transition(all, 0.25s, ease-in-out);
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 200px;
left: 50%;
margin-left: -100px;
margin-top: -100px;
opacity: 0;
width: 200px;
position: absolute;
@include transition(all, 0.25s, ease-in-out);
top: 50%;
z-index: 1;
}
.name {
color: $base-font-color;
font: 800 italic 2rem/2.2rem $sans-serif;
left: 0px;
position: absolute;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
bottom: -60px;
@include transition(all, 0.25s, ease-in-out);
vertical-align: middle;
width: 100%;
z-index: 2;
}
img {
max-width: 140px;
position: relative;
@include transition(all, 0.25s, ease-in-out);
vertical-align: middle;
z-index: 2;
} }
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
&::before { &::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%)); opacity: 1;
content: "";
display: block;
height: 200px;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
position: absolute;
top: 50%;
z-index: 1;
} }
}
}
.name { .name {
@include inline-block; bottom: 30px;
color: $base-font-color; }
font: 800 italic 2rem/2.2rem $sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
position: relative;
z-index: 2;
vertical-align: middle;
}
img { img {
@include inline-block; top: -120px;
max-width: 100px; }
vertical-align: middle; }
position: relative;
z-index: 2;
} }
} }
} }
.highlighted-courses { .highlighted-courses {
@include border-radius(4px); border-bottom: 1px solid rgb(210,210,210);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; margin-bottom: 60px;
margin-bottom: 40px;
width: flex-grid(12); width: flex-grid(12);
.course { > h2 {
@include box-sizing(border-box); background: rgb(245,245,245);
float: left; border: 1px solid rgb(220,220,220);
width: flex-grid(6); border-top: none;
@include border-bottom-radius(4px);
@media only screen and (max-width: 768px) { @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
float: none; color: $lighter-base-font-color;
margin-right: 0px; letter-spacing: 1px;
width: flex-grid(12); padding: 15px 10px;
} text-align: center;
text-transform: uppercase;
}
&:nth-child(odd) { .courses {
margin-right: flex-gutter(); background: rgb(245,245,245);
} @include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%,
rgba(255,255,255, 0.5) 20%,
rgba(255,255,255, 0) 50%,
rgba(255,255,255, 0.5) 80%,
rgba(255,255,255, 1) 100%));
} }
} }
.more-info { .more-info {
margin-bottom: 60px; margin-bottom: 60px;
width: flex-grid(12); width: flex-grid(12);
h2 { h2 {
border-bottom: 1px solid rgb(200,200,200);
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.4rem/1.8rem $serif; font: normal 1.4rem/1.8rem $serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 30px; margin-bottom: 20px;
padding-bottom: 10px;
} }
.news { .news {
...@@ -211,9 +283,9 @@ ...@@ -211,9 +283,9 @@
> article { > article {
background: rgb(240,240,240); background: rgb(240,240,240);
@include inline-block; @include inline-block;
height: 300px; height: 150px;
margin-right: flex-gutter(); margin-right: flex-gutter();
width: flex-grid(4); width: flex-grid(3);
&:last-child { &:last-child {
margin-right: 0px; margin-right: 0px;
......
lms/static/sass/_shared_footer.scss
footer { footer {
background: rgb(240,240,240); max-width: 1200px;
padding: 20px 0px 0px; margin: 0 auto;
padding: 0 0 40px;
width: flex-grid(12); width: flex-grid(12);
&.fixed-bottom { &.fixed-bottom {
position: absolute;
bottom: 0px; bottom: 0px;
max-width: 100%;
position: absolute;
} }
nav { nav {
border-top: 1px solid rgb(200,200,200);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 10px; padding: 20px 10px 0;
width: flex-grid(12); width: flex-grid(12);
a.logo { .copyright {
@include box-sizing(border-box);
display: block;
float: left; float: left;
height: 100%; padding-top: 2px;
margin: 3px 15px 0px 0px;
}
ol { a.logo {
float: left; @include box-sizing(border-box);
font-size: 0em; @include inline-block;
margin-top: 6px; float: left;
height: 100%;
margin-right: 14px;
margin-top: 1px;
padding-right: 15px;
position: relative;
vertical-align: middle;
&.social { &::after {
float: right; @extend .faded-vertical-divider;
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -2px;
width: 1px;
}
li { img {
border: none; position: relative;
padding: 0px 5px; z-index: 2;
}
}
a:hover { p {
opacity: 0.7; color: $lighter-base-font-color;
} font: normal 1.2rem/1.6rem $serif;
@include inline-block;
margin: 0 auto;
padding-top: 4px;
text-align: center;
vertical-align: middle;
a {
color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif;
margin-left: 5px;
text-decoration: underline;
} }
} }
}
ol {
float: right;
font-size: 0em;
li { li {
border-left: 1px solid rgb(200,200,200); //border-right: 1px solid rgb(200,200,200);
@include inline-block; @include inline-block;
list-style: none; list-style: none;
padding: 0px 15px; padding: 0px 15px;
position: relative;
vertical-align: middle;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -5px;
width: 1px;
}
a:link, a:visited { a:link, a:visited {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif; font: normal 1.2rem/1.6rem $serif;
padding: 5px 0px; padding: 6px 0px;
} }
}
}
}
.copyright {
height: 50px;
margin-top: 80px;
width: 100%;
hr { &.social {
@extend .faded-hr-divider-light; border: none;
border: none; margin: 0 0 0 5px;
margin: 0px; padding: 0;
position: relative;
z-index: 2;
&::after {
@extend .faded-hr-divider;
bottom: 0px;
content: "";
display: block;
position: absolute;
top: -1px;
}
}
p { &::after {
color: $lighter-base-font-color; display: none;
font: normal 1rem/1.6rem $sans-serif; }
margin: 0 auto;
padding-top: 15px;
text-align: center;
max-width: 1200px;
a { a {
border-bottom: 1px solid rgb(200,200,200); padding: 0 0 0 10px;
color: $lighter-base-font-color; @include transition(all, 0.1s, linear);
font: normal 1rem/1.6rem $sans-serif; &:hover {
margin-left: 5px; opacity: 0.7;
}
}
}
} }
} }
} }
......
lms/static/sass/_shared_list_of_courses.scss
.courses { .highlighted-courses, .find-courses {
@include box-sizing(border-box); .courses {
@include clearfix; @include clearfix;
margin: 40px 0px; padding: 40px 15px 15px;
padding: 0px 10px;
width: flex-grid(12); .course {
background: rgb(250,250,250);
.course { border: 1px solid rgb(220,220,220);
background: rgb(240,240,240); @include border-radius(2px);
border: 1px solid rgb(220,220,220); @include box-sizing(border-box);
@include border-radius(4px); @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
@include box-sizing(border-box);
float: left;
font-size: 0em;
min-height: 100px;
margin-bottom: 25px;
padding: 10px;
width: flex-grid(6);
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
}
&:nth-child(odd) {
margin-right: flex-gutter();
}
&:last-child {
margin-bottom: none;
}
> a {
@include clearfix;
display: block;
position: relative;
}
.cover {
background: rgb(225,225,225);
border: 1px solid rgb(150,150,150);
@include border-radius(4px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
float: left; float: left;
height: 100px; font-size: 0em;
margin: 0px; margin-right: flex-gutter();
opacity: 0.8; margin-bottom: 25px;
overflow: hidden; width: flex-grid(4);
position: relative;
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
width: 100px;
@media only screen and (max-width: 320px) { &:nth-child(3n+3) {
display: none; margin-right: 0;
} }
.shade { .inner-wrapper {
background: rgba(0,0,0, 0.3); border: 1px solid rgba(255,255,255, 1);
@include border-radius(4px); height: 100%;
bottom: 0px; height: 180px;
content: ""; overflow: hidden;
display: block; position: relative;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
@include transition(all, 0.15s, linear);
right: 0px;
} }
.arrow { header.course-preview {
border-top: 1px solid; left: 0px;
border-left: 1px solid;
border-color: rgb(255,255,255);
@include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute; position: absolute;
top: 23px; top: 0px;
@include transform(rotate(-45deg));
@include transition(all, 0.15s, linear);
width: 55px;
}
img {
@include border-radius(4px);
display: block;
min-height: 100%;
min-width: 100%;
width: 100%; width: 100%;
} z-index: 3;
}
> a {
.info { @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.95), rgba(255,255,255, 0.75)));
margin-left: 115px; //@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.6), rgba(0,0,0, 0.8)));
@include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2));
@media only screen and (max-width: 320px) { border-bottom: 1px solid rgba(150,150,150, 0.7);
margin: 0px; display: block;
} height: 50px;
hgroup {
left: 0px;
padding: 5px 10px;
position: absolute;
right: 60px;
top: 0px;
h2 {
font: bold 1.2rem/1.6rem $sans-serif;
padding-top: 10px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
}
> hgroup { p {
margin-right: 80px; color: $base-font-color;
display: none;
font: normal 1rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media only screen and (max-width: 320px) { .info-link {
margin: 0px; border-left: 1px solid rgba(150,150,150, 0.5);
} @include box-sizing(border-box);
color: $base-font-color;
display: block;
font: bold 2rem/2.2rem $sans-serif;
height: 100%;
opacity: 0.6;
padding-top: 10px;
position: absolute;
right: 0px;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
top: 0px;
width: 60px;
}
h2 { &:hover {
font: bold 1.8rem/2.5rem $sans-serif; @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(color, 0.15s, linear);
text-overflow: ellipsis;
white-space: nowrap;
}
p { h2, p, .info-link {
color: $base-font-color; color: $blue;
font: normal 1rem/1.6rem $sans-serif; opacity: 1;
overflow: hidden; }
text-shadow: 0 1px rgba(255,255,255, 0.6); }
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.edit, .register { .info {
border: 1px solid rgb(220,220,220); height: 180px + 130px;
background: rgb(230,230,230); left: 0px;
color: $lighter-base-font-color;
display: block;
font: normal 12px/14px $sans-serif;
padding: 6px 10px;
position: absolute; position: absolute;
right: 0px;
top: 0px; top: 0px;
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
@media only screen and (max-width: 320px) {
display: none;
}
&:hover {
background: rgb(255,255,255);
color: $blue;
}
}
.meta {
border-top: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6));
font-size: 1rem;
height: 34px;
margin-top: 10px;
opacity: 0.9;
position: relative;
@include transition(opacity, 0.15s, linear);
width: 100%; width: 100%;
&:hover { .meta-info {
opacity: 0.9; background: rgba(0,0,0, 0.6);
} bottom: 130px;
border-top: 1px solid rgba(0,0,0, 0.5);
> * { @include clearfix;
height: 18px;
position: absolute; position: absolute;
top: 15px; @include transition(all, 0.15s, linear);
} width: 100%;
p + p {
margin-top: 0px;
}
.complete {
left: 0px;
p { p {
font: normal 1rem/1.6rem $serif; color: rgb(255,255,255);
font: 300 1.2rem/1.4rem $sans-serif;
padding: 5px 10px;
span { &.university {
color: $base-font-color; float: left;
font-family: $sans-serif;
margin-left: 3px;
} }
}
}
.dates { &.dates {
p { float: right;
color: $lighter-base-font-color; margin-top: 0px;
font: normal 1rem/1.6rem $serif;
@include inline-block;
text-align: right;
&:first-child {
border-right: 1px solid rgb(200,200,200);
margin-right: 10px;
padding-right: 10px;
}
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
} }
} }
} }
.end-date { .cover-image {
border-left: 1px solid rgb(200,200,200); height: 180px;
right: 0px; overflow: hidden;
padding-left: 15px; width: 100%;
@media only screen and (max-width: 320px) {
display: none;
}
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
text-align: right;
time { img {
color: $base-font-color; display: block;
font-family: $sans-serif; min-width: 100%;
margin-left: 3px;
}
} }
} }
.progress { .desc {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); background: rgb(255,255,255);
left: 90px; @include box-sizing(border-box);
right: 140px; height: 130px;
overflow: hidden;
@media only screen and (max-width: 320px) { padding: 10px;
right: 0px; width: 100%;
}
.meter {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-sizing(border-box);
height: 100%;
padding: 2px;
.meter-fill {
@include border-radius(3px);
background: rgb(210,210,210);
height: 100%;
width: 60%;
}
}
} }
} }
}
&:hover {
background: rgb(245,245,245);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
cursor: pointer;
.edit { &:hover {
background: rgb(220,220,220); background: rgb(245,245,245);
border-color: rgb(190,190,190); border-color: rgb(190,190,190);
} @include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
.cover { .info {
opacity: 1; top: -130px;
.shade, .arrow { .meta-info {
opacity: 1; opacity: 0;
}
} }
} }
h2 {
//color: $blue;
//text-decoration: underline;
}
.meta {
opacity: 0.9;
}
} }
} }
} }
lms/static/sass/application.css
...@@ -311,8 +311,9 @@ html, body { ...@@ -311,8 +311,9 @@ html, body {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #3c3c3c; color: #3c3c3c;
font: normal 1.6rem/2rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal 1.4rem/2rem Georgia, Cambria, "Times New Roman", Times, serif;
margin: 0px; } margin: 0px;
-webkit-font-smoothing: antialiased; }
p { p {
color: #3c3c3c; color: #3c3c3c;
...@@ -325,9 +326,29 @@ p + p { ...@@ -325,9 +326,29 @@ p + p {
a:link, a:visited { a:link, a:visited {
color: #1d9dd9; color: #1d9dd9;
font: normal 1rem/1.8rem "Open Sans", Verdana, Geneva, sans-serif; font: normal 1rem/1.8rem "Open Sans", Verdana, Geneva, sans-serif;
text-decoration: none; } text-decoration: none;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-ms-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
a:link:hover, a:visited:hover { a:link:hover, a:visited:hover {
color: #43b2e6; } color: #3c3c3c; }
.container { .container {
zoom: 1; zoom: 1;
...@@ -340,7 +361,7 @@ a:link, a:visited { ...@@ -340,7 +361,7 @@ a:link, a:visited {
.container:after { .container:after {
clear: both; } clear: both; }
.faded-hr-divider, .horizontal-divider, footer .copyright hr::after, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after { .faded-hr-divider, .horizontal-divider, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after {
background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
...@@ -349,7 +370,16 @@ a:link, a:visited { ...@@ -349,7 +370,16 @@ a:link, a:visited {
height: 1px; height: 1px;
width: 100%; } width: 100%; }
.faded-hr-divider-light, .horizontal-divider::after, footer .copyright hr, .modal .inner-wrapper header hr, .modal .inner-wrapper form .honor-code-summary hr { .faded-hr-divider-medium, .home .university-partners::before, .home .university-partners::after {
background-image: -webkit-linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
background-image: -moz-linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
background-image: -ms-linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
background-image: -o-linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
background-image: linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
height: 1px;
width: 100%; }
.faded-hr-divider-light, .horizontal-divider::after, .modal .inner-wrapper header hr, .modal .inner-wrapper form .honor-code-summary hr {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
...@@ -358,7 +388,7 @@ a:link, a:visited { ...@@ -358,7 +388,7 @@ a:link, a:visited {
height: 1px; height: 1px;
width: 100%; } width: 100%; }
.faded-vertical-divider, .vertical-divider, header.app .divider { .faded-vertical-divider, .vertical-divider, header.app .divider, footer nav .copyright a.logo::after, footer nav ol li::after, .home .university-partners .partners li.partner::before {
background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
...@@ -367,7 +397,7 @@ a:link, a:visited { ...@@ -367,7 +397,7 @@ a:link, a:visited {
height: 100%; height: 100%;
width: 1px; } width: 1px; }
.faded-vertical-divider-light, .vertical-divider::after, header.app .divider::after { .faded-vertical-divider-light, .vertical-divider::after, header.app .divider::after, .home .university-partners .partners li.partner::after {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
...@@ -848,6 +878,8 @@ form { ...@@ -848,6 +878,8 @@ form {
border: 1px solid #d2d2d2; border: 1px solid #d2d2d2;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
...@@ -857,6 +889,8 @@ form { ...@@ -857,6 +889,8 @@ form {
box-sizing: border-box; box-sizing: border-box;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 35px; height: 35px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
...@@ -881,12 +915,14 @@ form { ...@@ -881,12 +915,14 @@ form {
border-bottom: 1px solid #001e5f; border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #42bae5; -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #42bae5; -moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #42bae5; box-shadow: inset 0 1px 0 0 #42bae5;
color: white; color: white;
display: inline-block; display: inline;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
background-color: #1d9dd9; background-color: #1d9dd9;
...@@ -896,15 +932,19 @@ form { ...@@ -896,15 +932,19 @@ form {
background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 8px 20px; padding: 7px 20px 8px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 1px #001067; text-shadow: 0 -1px 1px #001067;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 35px; height: 35px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
...@@ -912,7 +952,7 @@ form { ...@@ -912,7 +952,7 @@ form {
*vertical-align: auto; *vertical-align: auto;
text-transform: uppercase; text-transform: uppercase;
vertical-align: top; } vertical-align: top; }
form input[type="submit"]:hover:not(:disabled) { form input[type="submit"]:hover {
cursor: pointer; cursor: pointer;
background-color: #108ec7; background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
...@@ -921,94 +961,143 @@ form { ...@@ -921,94 +961,143 @@ form {
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); } background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
form input[type="submit"]:active:not(:disabled) { form input[type="submit"]:active {
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; } box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
form input[type="submit"]:disabled {
opacity: 0.5;
cursor: not-allowed; }
footer { footer {
background: #f0f0f0; max-width: 1200px;
padding: 20px 0px 0px; margin: 0 auto;
padding: 0 0 40px;
width: 100%; } width: 100%; }
footer.fixed-bottom { footer.fixed-bottom {
position: absolute; bottom: 0px;
bottom: 0px; } max-width: 100%;
position: absolute; }
footer nav { footer nav {
border-top: 1px solid #c8c8c8;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
zoom: 1; zoom: 1;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 10px; padding: 20px 10px 0;
width: 100%; } width: 100%; }
footer nav:before, footer nav:after { footer nav:before, footer nav:after {
content: ""; content: "";
display: table; } display: table; }
footer nav:after { footer nav:after {
clear: both; } clear: both; }
footer nav a.logo { footer nav .copyright {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
float: left; float: left;
height: 100%; padding-top: 2px; }
margin: 3px 15px 0px 0px; } footer nav .copyright a.logo {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
float: left;
height: 100%;
margin-right: 14px;
margin-top: 1px;
padding-right: 15px;
position: relative;
vertical-align: middle; }
footer nav .copyright a.logo::after {
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -2px;
width: 1px; }
footer nav .copyright a.logo img {
position: relative;
z-index: 2; }
footer nav .copyright p {
color: #a0a0a0;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 0 auto;
padding-top: 4px;
text-align: center;
vertical-align: middle; }
footer nav .copyright p a {
color: #a0a0a0;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin-left: 5px;
text-decoration: underline; }
footer nav ol { footer nav ol {
float: left; float: right;
font-size: 0em; font-size: 0em; }
margin-top: 6px; }
footer nav ol.social {
float: right; }
footer nav ol.social li {
border: none;
padding: 0px 5px; }
footer nav ol.social li a:hover {
opacity: 0.7; }
footer nav ol li { footer nav ol li {
border-left: 1px solid #c8c8c8; display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
list-style: none; list-style: none;
padding: 0px 15px; } padding: 0px 15px;
position: relative;
vertical-align: middle; }
footer nav ol li::after {
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -5px;
width: 1px; }
footer nav ol li a:link, footer nav ol li a:visited { footer nav ol li a:link, footer nav ol li a:visited {
color: #a0a0a0; color: #a0a0a0;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 5px 0px; } padding: 6px 0px; }
footer .copyright { footer nav ol li.social {
height: 50px; border: none;
margin-top: 80px; margin: 0 0 0 5px;
width: 100%; } padding: 0; }
footer .copyright hr { footer nav ol li.social::after {
border: none; display: none; }
margin: 0px; footer nav ol li.social a {
position: relative; padding: 0 0 0 10px;
z-index: 2; } -webkit-transition-property: all;
footer .copyright hr::after { -moz-transition-property: all;
bottom: 0px; -ms-transition-property: all;
content: ""; -o-transition-property: all;
display: block; transition-property: all;
position: absolute; -webkit-transition-duration: 0.1s;
top: -1px; } -moz-transition-duration: 0.1s;
footer .copyright p { -ms-transition-duration: 0.1s;
color: #a0a0a0; -o-transition-duration: 0.1s;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; transition-duration: 0.1s;
margin: 0 auto; -webkit-transition-timing-function: linear;
padding-top: 15px; -moz-transition-timing-function: linear;
text-align: center; -ms-transition-timing-function: linear;
max-width: 1200px; } -o-transition-timing-function: linear;
footer .copyright p a { transition-timing-function: linear;
border-bottom: 1px solid #c8c8c8; -webkit-transition-delay: 0;
color: #a0a0a0; -moz-transition-delay: 0;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; -ms-transition-delay: 0;
margin-left: 5px; } -o-transition-delay: 0;
transition-delay: 0; }
footer nav ol li.social a:hover {
opacity: 0.7; }
header.app { header.app {
border-bottom: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8;
...@@ -1046,6 +1135,8 @@ header.app { ...@@ -1046,6 +1135,8 @@ header.app {
position: relative; position: relative;
z-index: 2; } z-index: 2; }
header.app .divider { header.app .divider {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
...@@ -1063,6 +1154,8 @@ header.app { ...@@ -1063,6 +1154,8 @@ header.app {
header.app nav ol { header.app nav ol {
font-size: 0em; } font-size: 0em; }
header.app nav ol li { header.app nav ol li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
...@@ -1074,6 +1167,8 @@ header.app { ...@@ -1074,6 +1167,8 @@ header.app {
header.app nav ol li.secondary a { header.app nav ol li.secondary a {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
border: 1px solid transparent; border: 1px solid transparent;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -1083,6 +1178,8 @@ header.app { ...@@ -1083,6 +1178,8 @@ header.app {
display: block; display: block;
font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 30px; height: 30px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
...@@ -1104,6 +1201,8 @@ header.app { ...@@ -1104,6 +1201,8 @@ header.app {
border: 1px solid transparent; border: 1px solid transparent;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -1112,6 +1211,8 @@ header.app { ...@@ -1112,6 +1211,8 @@ header.app {
display: block; display: block;
font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif; font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
height: 38px; height: 38px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
...@@ -1148,12 +1249,16 @@ header.app { ...@@ -1148,12 +1249,16 @@ header.app {
background: #dcdcdc; background: #dcdcdc;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #b4b4b4; border: 1px solid #b4b4b4;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
height: 22px; height: 22px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
...@@ -1180,6 +1285,8 @@ header.app { ...@@ -1180,6 +1285,8 @@ header.app {
header.app nav.user a.user-link .avatar img { header.app nav.user a.user-link .avatar img {
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
display: block; display: block;
min-height: 100%; min-height: 100%;
...@@ -1188,6 +1295,8 @@ header.app { ...@@ -1188,6 +1295,8 @@ header.app {
header.app nav.user ol.user-options { header.app nav.user ol.user-options {
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
...@@ -1253,11 +1362,26 @@ header.app { ...@@ -1253,11 +1362,26 @@ header.app {
text-shadow: none; text-shadow: none;
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: none; text-transform: none;
-webkit-transition: padding, 0.1s, linear; -webkit-transition-property: padding;
-moz-transition: padding, 0.1s, linear; -moz-transition-property: padding;
-ms-transition: padding, 0.1s, linear; -ms-transition-property: padding;
-o-transition: padding, 0.1s, linear; -o-transition-property: padding;
transition: padding, 0.1s, linear; transition-property: padding;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-ms-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
white-space: nowrap; white-space: nowrap;
width: 100%; } width: 100%; }
header.app nav.user ol.user-options li > a:hover { header.app nav.user ol.user-options li > a:hover {
...@@ -1274,288 +1398,218 @@ header.app { ...@@ -1274,288 +1398,218 @@ header.app {
padding-left: 8px; padding-left: 8px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.2); } text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
.courses { .highlighted-courses .courses, .find-courses .courses {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1; zoom: 1;
margin: 40px 0px; padding: 40px 15px 15px; }
padding: 0px 10px; .highlighted-courses .courses:before, .highlighted-courses .courses:after, .find-courses .courses:before, .find-courses .courses:after {
width: 100%; }
.courses:before, .courses:after {
content: ""; content: "";
display: table; } display: table; }
.courses:after { .highlighted-courses .courses:after, .find-courses .courses:after {
clear: both; } clear: both; }
.courses .course { .highlighted-courses .courses .course, .find-courses .courses .course {
background: #f0f0f0; background: #fafafa;
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
-webkit-border-radius: 4px; -webkit-border-radius: 2px;
-moz-border-radius: 4px; -moz-border-radius: 2px;
border-radius: 4px; -ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
float: left; float: left;
font-size: 0em; font-size: 0em;
min-height: 100px; margin-right: 2.513%;
margin-bottom: 25px; margin-bottom: 25px;
padding: 10px; width: 31.658%;
width: 48.744%; -webkit-transition-property: all;
-webkit-transition: all, 0.15s, linear; -moz-transition-property: all;
-moz-transition: all, 0.15s, linear; -ms-transition-property: all;
-ms-transition: all, 0.15s, linear; -o-transition-property: all;
-o-transition: all, 0.15s, linear; transition-property: all;
transition: all, 0.15s, linear; } -webkit-transition-duration: 0.15s;
@media only screen and (max-width: 768px) { -moz-transition-duration: 0.15s;
.courses .course { -ms-transition-duration: 0.15s;
float: none; -o-transition-duration: 0.15s;
margin-right: 0px; transition-duration: 0.15s;
width: 100%; } } -webkit-transition-timing-function: linear;
.courses .course:nth-child(odd) { -moz-transition-timing-function: linear;
margin-right: 2.513%; } -ms-transition-timing-function: linear;
.courses .course:last-child { -o-transition-timing-function: linear;
margin-bottom: none; } transition-timing-function: linear;
.courses .course > a { -webkit-transition-delay: 0;
zoom: 1; -moz-transition-delay: 0;
display: block; -ms-transition-delay: 0;
position: relative; } -o-transition-delay: 0;
.courses .course > a:before, .courses .course > a:after { transition-delay: 0; }
content: ""; .highlighted-courses .courses .course:nth-child(3n+3), .find-courses .courses .course:nth-child(3n+3) {
display: table; } margin-right: 0; }
.courses .course > a:after { .highlighted-courses .courses .course .inner-wrapper, .find-courses .courses .course .inner-wrapper {
clear: both; } border: 1px solid white;
.courses .course .cover { height: 100%;
background: #e1e1e1; height: 180px;
border: 1px solid #969696;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden; overflow: hidden;
position: relative; position: relative; }
-webkit-transition: all, 0.15s, linear; .highlighted-courses .courses .course header.course-preview, .find-courses .courses .course header.course-preview {
-moz-transition: all, 0.15s, linear; left: 0px;
-ms-transition: all, 0.15s, linear; position: absolute;
-o-transition: all, 0.15s, linear; top: 0px;
transition: all, 0.15s, linear; width: 100%;
width: 100px; } z-index: 3; }
@media only screen and (max-width: 320px) { .highlighted-courses .courses .course header.course-preview > a, .find-courses .courses .course header.course-preview > a {
.courses .course .cover { background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
display: none; } } background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
.courses .course .cover .shade { background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
background: rgba(0, 0, 0, 0.3); background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
-webkit-border-radius: 4px; background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
-moz-border-radius: 4px; -webkit-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
border-radius: 4px; -moz-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
bottom: 0px; box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
content: ""; border-bottom: 1px solid rgba(150, 150, 150, 0.7);
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
-webkit-transition: all, 0.15s, linear;
-moz-transition: all, 0.15s, linear;
-ms-transition: all, 0.15s, linear;
-o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear;
right: 0px; }
.courses .course .cover .arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: white;
-webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all, 0.15s, linear;
-moz-transition: all, 0.15s, linear;
-ms-transition: all, 0.15s, linear;
-o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear;
width: 55px; }
.courses .course .cover img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: block; display: block;
min-height: 100%; height: 50px; }
min-width: 100%; .highlighted-courses .courses .course header.course-preview > a hgroup, .find-courses .courses .course header.course-preview > a hgroup {
width: 100%; } left: 0px;
.courses .course .info { padding: 5px 10px;
margin-left: 115px; } position: absolute;
@media only screen and (max-width: 320px) { right: 60px;
.courses .course .info { top: 0px; }
margin: 0px; } } .highlighted-courses .courses .course header.course-preview > a hgroup h2, .find-courses .courses .course header.course-preview > a hgroup h2 {
.courses .course .info > hgroup { font: bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-right: 80px; } padding-top: 10px;
@media only screen and (max-width: 320px) { text-shadow: 0 1px rgba(255, 255, 255, 0.6);
.courses .course .info > hgroup { text-overflow: ellipsis;
margin: 0px; } } white-space: nowrap; }
.courses .course .info > hgroup h2 { .highlighted-courses .courses .course header.course-preview > a hgroup p, .find-courses .courses .course header.course-preview > a hgroup p {
font: bold 1.8rem/2.5rem "Open Sans", Verdana, Geneva, sans-serif; color: #3c3c3c;
margin-bottom: 2px; display: none;
overflow: hidden; font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); overflow: hidden;
-webkit-transition: color, 0.15s, linear; text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-moz-transition: color, 0.15s, linear; text-overflow: ellipsis;
-ms-transition: color, 0.15s, linear; white-space: nowrap; }
-o-transition: color, 0.15s, linear; .highlighted-courses .courses .course header.course-preview > a .info-link, .find-courses .courses .course header.course-preview > a .info-link {
transition: color, 0.15s, linear; border-left: 1px solid rgba(150, 150, 150, 0.5);
text-overflow: ellipsis; -webkit-box-sizing: border-box;
white-space: nowrap; } -moz-box-sizing: border-box;
.courses .course .info > hgroup p { box-sizing: border-box;
color: #3c3c3c; color: #3c3c3c;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; display: block;
overflow: hidden; font: bold 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif;
height: 100%;
opacity: 0.6;
padding-top: 10px;
position: absolute;
right: 0px;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); text-shadow: 0 1px rgba(255, 255, 255, 0.6);
text-overflow: ellipsis; top: 0px;
white-space: nowrap; } width: 60px; }
.courses .course .info .edit, .courses .course .info .register { .highlighted-courses .courses .course header.course-preview > a:hover, .find-courses .courses .course header.course-preview > a:hover {
border: 1px solid #dcdcdc; background-image: -webkit-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8));
background: #e6e6e6; background-image: -moz-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8));
color: #a0a0a0; background-image: -ms-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8));
display: block; background-image: -o-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8));
font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif; background-image: linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8)); }
padding: 6px 10px; .highlighted-courses .courses .course header.course-preview > a:hover h2, .highlighted-courses .courses .course header.course-preview > a:hover p, .highlighted-courses .courses .course header.course-preview > a:hover .info-link, .find-courses .courses .course header.course-preview > a:hover h2, .find-courses .courses .course header.course-preview > a:hover p, .find-courses .courses .course header.course-preview > a:hover .info-link {
color: #1d9dd9;
opacity: 1; }
.highlighted-courses .courses .course .info, .find-courses .courses .course .info {
height: 310px;
left: 0px;
position: absolute;
top: 0px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100%; }
.highlighted-courses .courses .course .info .meta-info, .find-courses .courses .course .info .meta-info {
background: rgba(0, 0, 0, 0.6);
bottom: 130px;
border-top: 1px solid rgba(0, 0, 0, 0.5);
zoom: 1;
position: absolute; position: absolute;
right: 0px; -webkit-transition-property: all;
top: 0px; -moz-transition-property: all;
-webkit-transition: all, 0.15s, linear; -ms-transition-property: all;
-moz-transition: all, 0.15s, linear; -o-transition-property: all;
-ms-transition: all, 0.15s, linear; transition-property: all;
-o-transition: all, 0.15s, linear; -webkit-transition-duration: 0.15s;
transition: all, 0.15s, linear; } -moz-transition-duration: 0.15s;
@media only screen and (max-width: 320px) { -ms-transition-duration: 0.15s;
.courses .course .info .edit, .courses .course .info .register { -o-transition-duration: 0.15s;
display: none; } } transition-duration: 0.15s;
.courses .course .info .edit:hover, .courses .course .info .register:hover { -webkit-transition-timing-function: linear;
background: white; -moz-transition-timing-function: linear;
color: #1d9dd9; } -ms-transition-timing-function: linear;
.courses .course .info .meta { -o-transition-timing-function: linear;
border-top: 1px solid #c8c8c8; transition-timing-function: linear;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); -webkit-transition-delay: 0;
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); -moz-transition-delay: 0;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); -ms-transition-delay: 0;
font-size: 1rem; -o-transition-delay: 0;
height: 34px; transition-delay: 0;
margin-top: 10px;
opacity: 0.9;
position: relative;
-webkit-transition: opacity, 0.15s, linear;
-moz-transition: opacity, 0.15s, linear;
-ms-transition: opacity, 0.15s, linear;
-o-transition: opacity, 0.15s, linear;
transition: opacity, 0.15s, linear;
width: 100%; } width: 100%; }
.courses .course .info .meta:hover { .highlighted-courses .courses .course .info .meta-info:before, .highlighted-courses .courses .course .info .meta-info:after, .find-courses .courses .course .info .meta-info:before, .find-courses .courses .course .info .meta-info:after {
opacity: 0.9; } content: "";
.courses .course .info .meta > * { display: table; }
height: 18px; .highlighted-courses .courses .course .info .meta-info:after, .find-courses .courses .course .info .meta-info:after {
position: absolute; clear: both; }
top: 15px; } .highlighted-courses .courses .course .info .meta-info p, .find-courses .courses .course .info .meta-info p {
.courses .course .info .meta p + p { color: white;
margin-top: 0px; } font: 300 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
.courses .course .info .meta .complete { padding: 5px 10px; }
left: 0px; } .highlighted-courses .courses .course .info .meta-info p.university, .find-courses .courses .course .info .meta-info p.university {
.courses .course .info .meta .complete p { float: left; }
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; } .highlighted-courses .courses .course .info .meta-info p.dates, .find-courses .courses .course .info .meta-info p.dates {
.courses .course .info .meta .complete p span { float: right;
color: #3c3c3c; margin-top: 0px; }
font-family: "Open Sans", Verdana, Geneva, sans-serif; .highlighted-courses .courses .course .info .cover-image, .find-courses .courses .course .info .cover-image {
margin-left: 3px; } height: 180px;
.courses .course .info .meta .dates p { overflow: hidden;
color: #a0a0a0; width: 100%; }
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; .highlighted-courses .courses .course .info .cover-image img, .find-courses .courses .course .info .cover-image img {
display: inline-block; display: block;
vertical-align: baseline; min-width: 100%; }
zoom: 1; .highlighted-courses .courses .course .info .desc, .find-courses .courses .course .info .desc {
*display: inline; background: white;
*vertical-align: auto; -webkit-box-sizing: border-box;
text-align: right; } -moz-box-sizing: border-box;
.courses .course .info .meta .dates p:first-child { box-sizing: border-box;
border-right: 1px solid #c8c8c8; height: 130px;
margin-right: 10px; overflow: hidden;
padding-right: 10px; } padding: 10px;
.courses .course .info .meta .dates p time { width: 100%; }
color: #3c3c3c; .highlighted-courses .courses .course:hover, .find-courses .courses .course:hover {
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.courses .course .info .meta .end-date {
border-left: 1px solid #c8c8c8;
right: 0px;
padding-left: 15px; }
@media only screen and (max-width: 320px) {
.courses .course .info .meta .end-date {
display: none; } }
.courses .course .info .meta .end-date p {
color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-align: right; }
.courses .course .info .meta .end-date p time {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.courses .course .info .meta .progress {
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
left: 90px;
right: 140px; }
@media only screen and (max-width: 320px) {
.courses .course .info .meta .progress {
right: 0px; } }
.courses .course .info .meta .progress .meter {
background: #e6e6e6;
border: 1px solid #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 2px; }
.courses .course .info .meta .progress .meter .meter-fill {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #d2d2d2;
height: 100%;
width: 60%; }
.courses .course:hover {
background: #f5f5f5; background: #f5f5f5;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); border-color: #bebebe;
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
cursor: pointer; } box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); }
.courses .course:hover .edit { .highlighted-courses .courses .course:hover .info, .find-courses .courses .course:hover .info {
background: #dcdcdc; top: -130px; }
border-color: #bebebe; } .highlighted-courses .courses .course:hover .info .meta-info, .find-courses .courses .course:hover .info .meta-info {
.courses .course:hover .cover { opacity: 0; }
opacity: 1; }
.courses .course:hover .cover .shade, .courses .course:hover .cover .arrow {
opacity: 1; }
.courses .course:hover .meta {
opacity: 0.9; }
.filter { .filter {
height: 60px; } height: 60px; }
...@@ -1573,12 +1627,17 @@ header.app { ...@@ -1573,12 +1627,17 @@ header.app {
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
border-top: none; border-top: none;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px; -moz-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px; -moz-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
zoom: 1; zoom: 1;
height: 60px; height: 60px;
...@@ -1610,6 +1669,8 @@ header.app { ...@@ -1610,6 +1669,8 @@ header.app {
background-image: linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%); background-image: linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%);
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -1632,6 +1693,8 @@ header.app { ...@@ -1632,6 +1693,8 @@ header.app {
background: white; background: white;
-webkit-border-radius: 0px 4px 4px 4px; -webkit-border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px; -moz-border-radius: 0px 4px 4px 4px;
-ms-border-radius: 0px 4px 4px 4px;
-o-border-radius: 0px 4px 4px 4px;
border-radius: 0px 4px 4px 4px; border-radius: 0px 4px 4px 4px;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
...@@ -1653,6 +1716,8 @@ header.app { ...@@ -1653,6 +1716,8 @@ header.app {
background-image: linear-gradient(-90deg, #fafafa, white); background-image: linear-gradient(-90deg, #fafafa, white);
-webkit-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px;
-ms-border-radius: 4px 4px 0px 0px;
-o-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px;
border-bottom: none; border-bottom: none;
-webkit-box-shadow: 0 2px 0 -1px white; -webkit-box-shadow: 0 2px 0 -1px white;
...@@ -1667,12 +1732,16 @@ header.app { ...@@ -1667,12 +1732,16 @@ header.app {
.filter nav form.search input[type="text"] { .filter nav form.search input[type="text"] {
-webkit-border-radius: 3px 0px 0px 3px; -webkit-border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px; -moz-border-radius: 3px 0px 0px 3px;
-ms-border-radius: 3px 0px 0px 3px;
-o-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px;
height: 36px; height: 36px;
width: 200px; } width: 200px; }
.filter nav form.search input[type="submit"] { .filter nav form.search input[type="submit"] {
-webkit-border-radius: 0px 3px 3px 0px; -webkit-border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px; -moz-border-radius: 0px 3px 3px 0px;
-ms-border-radius: 0px 3px 3px 0px;
-o-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;
height: 36px; } height: 36px; }
...@@ -1698,6 +1767,8 @@ header.app { ...@@ -1698,6 +1767,8 @@ header.app {
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-border-radius: 0px; -webkit-border-radius: 0px;
-moz-border-radius: 0px; -moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px; border-radius: 0px;
-webkit-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
...@@ -1717,6 +1788,8 @@ header.app { ...@@ -1717,6 +1788,8 @@ header.app {
background: #f0f0f0; background: #f0f0f0;
-webkit-border-radius: 0px; -webkit-border-radius: 0px;
-moz-border-radius: 0px; -moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px; border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
...@@ -1791,6 +1864,8 @@ header.app { ...@@ -1791,6 +1864,8 @@ header.app {
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
...@@ -1863,8 +1938,12 @@ header.app { ...@@ -1863,8 +1938,12 @@ header.app {
.modal .inner-wrapper .close-modal { .modal .inner-wrapper .close-modal {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
...@@ -1880,11 +1959,26 @@ header.app { ...@@ -1880,11 +1959,26 @@ header.app {
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-align: center; text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.8); text-shadow: 0 1px rgba(255, 255, 255, 0.8);
-webkit-transition: all, 0.15s, ease-out; -webkit-transition-property: all;
-moz-transition: all, 0.15s, ease-out; -moz-transition-property: all;
-ms-transition: all, 0.15s, ease-out; -ms-transition-property: all;
-o-transition: all, 0.15s, ease-out; -o-transition-property: all;
transition: all, 0.15s, ease-out; } transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
.modal .inner-wrapper .close-modal:hover p { .modal .inner-wrapper .close-modal:hover p {
color: #3c3c3c; } color: #3c3c3c; }
...@@ -1902,7 +1996,7 @@ header.app { ...@@ -1902,7 +1996,7 @@ header.app {
.home > header:after { .home > header:after {
clear: both; } clear: both; }
.home > header .video-wrapper { .home > header .video-wrapper {
left: 0px; right: 0px;
position: absolute; position: absolute;
top: 0px; } top: 0px; }
.home > header .video-wrapper .video-player { .home > header .video-wrapper .video-player {
...@@ -1910,6 +2004,8 @@ header.app { ...@@ -1910,6 +2004,8 @@ header.app {
border: 1px solid black; border: 1px solid black;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
height: 315px; height: 315px;
padding: 5px; padding: 5px;
...@@ -1927,14 +2023,14 @@ header.app { ...@@ -1927,14 +2023,14 @@ header.app {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
float: right; float: left;
font-size: 0em; font-size: 0em;
width: 100%; width: 100%;
padding-left: 600px; padding-right: 600px;
padding-top: 20px; } padding-top: 20px; }
.home > header .welcome h1 { .home > header .welcome h1 {
color: #a0a0a0; color: #a0a0a0;
font: normal 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif; font: 300 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
...@@ -1964,6 +2060,8 @@ header.app { ...@@ -1964,6 +2060,8 @@ header.app {
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
...@@ -1973,11 +2071,26 @@ header.app { ...@@ -1973,11 +2071,26 @@ header.app {
box-sizing: border-box; box-sizing: border-box;
font-size: 0em; font-size: 0em;
padding: 12px; padding: 12px;
-webkit-transition: all, 0.15s, linear; -webkit-transition-property: all;
-moz-transition: all, 0.15s, linear; -moz-transition-property: all;
-ms-transition: all, 0.15s, linear; -ms-transition-property: all;
-o-transition: all, 0.15s, linear; -o-transition-property: all;
transition: all, 0.15s, linear; transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100%; } width: 100%; }
.home > header .welcome .signup-wrapper .sign-up:hover { .home > header .welcome .signup-wrapper .sign-up:hover {
-webkit-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); -webkit-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35);
...@@ -1988,12 +2101,14 @@ header.app { ...@@ -1988,12 +2101,14 @@ header.app {
border-bottom: 1px solid #001e5f; border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #42bae5; -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #42bae5; -moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #42bae5; box-shadow: inset 0 1px 0 0 #42bae5;
color: white; color: white;
display: inline-block; display: inline;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
background-color: #1d9dd9; background-color: #1d9dd9;
...@@ -2003,7 +2118,7 @@ header.app { ...@@ -2003,7 +2118,7 @@ header.app {
background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 8px 20px; padding: 7px 20px 8px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 1px #001067; text-shadow: 0 -1px 1px #001067;
...@@ -2012,7 +2127,11 @@ header.app { ...@@ -2012,7 +2127,11 @@ header.app {
box-sizing: border-box; box-sizing: border-box;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
...@@ -2023,7 +2142,7 @@ header.app { ...@@ -2023,7 +2142,7 @@ header.app {
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
width: 100%; } width: 100%; }
.home > header .welcome .signup-wrapper .sign-up a:hover:not(:disabled) { .home > header .welcome .signup-wrapper .sign-up a:hover {
cursor: pointer; cursor: pointer;
background-color: #108ec7; background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
...@@ -2032,131 +2151,254 @@ header.app { ...@@ -2032,131 +2151,254 @@ header.app {
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); } background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
.home > header .welcome .signup-wrapper .sign-up a:active:not(:disabled) { .home > header .welcome .signup-wrapper .sign-up a:active {
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; } box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header .welcome .signup-wrapper .sign-up a:disabled {
opacity: 0.5;
cursor: not-allowed; }
.home .university-partners { .home .university-partners {
background: #f5f5f5; background-image: -webkit-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
border: 1px solid #d2d2d2; background-image: -moz-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
-webkit-border-radius: 4px; background-image: -ms-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
-moz-border-radius: 4px; background-image: -o-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
border-radius: 4px; background-image: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
margin-bottom: 60px; border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
margin-bottom: 0px;
overflow: hidden; overflow: hidden;
padding: 10px 0px;
position: relative; position: relative;
width: 100%; } width: 100%; }
.home .university-partners::before {
content: "";
display: block; }
.home .university-partners::after {
content: "";
display: block; }
.home .university-partners .partners { .home .university-partners .partners {
font-size: 0em; font-size: 0em;
margin: 0 auto; margin: 0 auto;
width: 420px; } padding: 15px 0px;
.home .university-partners .partners a { text-align: center; }
.home .university-partners .partners li.partner {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
margin-right: 40px; margin-right: 20px;
padding-right: 20px;
position: relative;
vertical-align: middle; }
.home .university-partners .partners li.partner::before {
content: "";
display: block;
height: 100px;
right: 0px;
position: absolute;
top: 0px;
width: 1px; }
.home .university-partners .partners li.partner::after {
content: "";
display: block;
height: 100px;
right: 1px;
position: absolute;
top: 0px;
width: 1px; }
.home .university-partners .partners li.partner.mit {
padding: 0 35px 0 20px; }
.home .university-partners .partners li.partner:last-child {
margin-right: 0px;
padding-right: 0px; }
.home .university-partners .partners li.partner:last-child::before {
display: none; }
.home .university-partners .partners li.partner:last-child::after {
display: none; }
.home .university-partners .partners a {
opacity: 0.7; opacity: 0.7;
position: relative; } -webkit-transition-property: all;
.home .university-partners .partners a:last-child { -moz-transition-property: all;
margin-right: 0px; } -ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
.home .university-partners .partners a::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
display: block;
height: 200px;
left: 50%;
margin-left: -100px;
margin-top: -100px;
opacity: 0;
width: 200px;
position: absolute;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
top: 50%;
z-index: 1; }
.home .university-partners .partners a .name {
color: #3c3c3c;
font: 800 italic 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif;
left: 0px;
position: absolute;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
bottom: -60px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
vertical-align: middle;
width: 100%;
z-index: 2; }
.home .university-partners .partners a img {
max-width: 140px;
position: relative;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
vertical-align: middle;
z-index: 2; }
.home .university-partners .partners a:hover { .home .university-partners .partners a:hover {
opacity: 0.9; } opacity: 0.9; }
.home .university-partners .partners a:hover::before { .home .university-partners .partners a:hover::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); opacity: 1; }
background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); .home .university-partners .partners a:hover .name {
background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); bottom: 30px; }
background-image: -o-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); .home .university-partners .partners a:hover img {
background-image: radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); top: -120px; }
content: "";
display: block;
height: 200px;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
position: absolute;
top: 50%;
z-index: 1; }
.home .university-partners .partners .name {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
color: #3c3c3c;
font: 800 italic 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
position: relative;
z-index: 2;
vertical-align: middle; }
.home .university-partners .partners img {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
max-width: 100px;
vertical-align: middle;
position: relative;
z-index: 2; }
.home .highlighted-courses { .home .highlighted-courses {
-webkit-border-radius: 4px; border-bottom: 1px solid #d2d2d2;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
zoom: 1; margin-bottom: 60px;
margin-bottom: 40px;
width: 100%; } width: 100%; }
.home .highlighted-courses:before, .home .highlighted-courses:after { .home .highlighted-courses > h2 {
content: ""; background: #f5f5f5;
display: table; } border: 1px solid #dcdcdc;
.home .highlighted-courses:after { border-top: none;
clear: both; } -webkit-border-bottom-left-radius: 4px;
.home .highlighted-courses .course { -moz-border-bottom-left-radius: 4px;
-webkit-box-sizing: border-box; -moz-border-radius-bottomleft: 4px;
-moz-box-sizing: border-box; -ms-border-bottom-left-radius: 4px;
box-sizing: border-box; -o-border-bottom-left-radius: 4px;
float: left; border-bottom-left-radius: 4px;
width: 48.744%; } -webkit-border-bottom-right-radius: 4px;
@media only screen and (max-width: 768px) { -moz-border-bottom-right-radius: 4px;
.home .highlighted-courses .course { -moz-border-radius-bottomright: 4px;
float: none; -ms-border-bottom-right-radius: 4px;
margin-right: 0px; -o-border-bottom-right-radius: 4px;
width: 100%; } } border-bottom-right-radius: 4px;
.home .highlighted-courses .course:nth-child(odd) { -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
margin-right: 2.513%; } -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
color: #a0a0a0;
letter-spacing: 1px;
padding: 15px 10px;
text-align: center;
text-transform: uppercase; }
.home .highlighted-courses .courses {
background: #f5f5f5;
background-image: -webkit-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: -moz-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: -ms-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: -o-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%); }
.home .more-info { .home .more-info {
margin-bottom: 60px; margin-bottom: 60px;
width: 100%; } width: 100%; }
.home .more-info h2 { .home .more-info h2 {
border-bottom: 1px solid #c8c8c8;
color: #a0a0a0; color: #a0a0a0;
font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 30px; margin-bottom: 20px; }
padding-bottom: 10px; }
.home .more-info .news { .home .more-info .news {
font-size: 0em; font-size: 0em;
width: 100%; } width: 100%; }
.home .more-info .news > article { .home .more-info .news > article {
background: #f0f0f0; background: #f0f0f0;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
height: 300px; height: 150px;
margin-right: 2.513%; margin-right: 2.513%;
width: 31.658%; } width: 23.116%; }
.home .more-info .news > article:last-child { .home .more-info .news > article:last-child {
margin-right: 0px; } margin-right: 0px; }
.home .social-media { .home .social-media {
...@@ -2164,6 +2406,8 @@ header.app { ...@@ -2164,6 +2406,8 @@ header.app {
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
...@@ -2208,6 +2452,8 @@ header.app { ...@@ -2208,6 +2452,8 @@ header.app {
border: 1px solid #b4b4b4; border: 1px solid #b4b4b4;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -2224,6 +2470,8 @@ header.app { ...@@ -2224,6 +2470,8 @@ header.app {
.dashboard .sidebar header.profile .user-info .avatar img { .dashboard .sidebar header.profile .user-info .avatar img {
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
display: block; display: block;
max-width: 100%; } max-width: 100%; }
...@@ -2279,31 +2527,31 @@ header.app { ...@@ -2279,31 +2527,31 @@ header.app {
.dashboard .sidebar header.profile .user-info .info > ul li h3 span { .dashboard .sidebar header.profile .user-info .info > ul li h3 span {
font-weight: normal; font-weight: normal;
text-transform: none; } text-transform: none; }
.dashboard .courses { .dashboard .my-courses {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 0px; margin: 0px;
padding-left: 270px; } padding-left: 270px; }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.dashboard .courses { .dashboard .my-courses {
padding: 0px; } } padding: 0px; } }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.dashboard .courses { .dashboard .my-courses {
float: none; float: none;
width: 100%; } } width: 100%; } }
.dashboard .courses nav.course-toggle { .dashboard .my-courses nav.course-toggle {
background: #e6e6e6; background: #e6e6e6;
margin-bottom: 30px; margin-bottom: 30px;
position: relative; } position: relative; }
.dashboard .courses nav.course-toggle ol.filters { .dashboard .my-courses nav.course-toggle ol.filters {
zoom: 1; } zoom: 1; }
.dashboard .courses nav.course-toggle ol.filters:before, .dashboard .courses nav.course-toggle ol.filters:after { .dashboard .my-courses nav.course-toggle ol.filters:before, .dashboard .my-courses nav.course-toggle ol.filters:after {
content: ""; content: "";
display: table; } display: table; }
.dashboard .courses nav.course-toggle ol.filters:after { .dashboard .my-courses nav.course-toggle ol.filters:after {
clear: both; } clear: both; }
.dashboard .courses nav.course-toggle ol.filters li { .dashboard .my-courses nav.course-toggle ol.filters li {
border-right: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -2313,21 +2561,411 @@ header.app { ...@@ -2313,21 +2561,411 @@ header.app {
padding: 15px 10px; padding: 15px 10px;
width: 25%; width: 25%;
text-align: center; } text-align: center; }
.dashboard .courses nav.course-toggle ol.filters li:last-child { .dashboard .my-courses nav.course-toggle ol.filters li:last-child {
border: none; } border: none; }
.dashboard .courses nav.course-toggle ol.filters li:hover { .dashboard .my-courses nav.course-toggle ol.filters li:hover {
background: #dcdcdc; background: #dcdcdc;
cursor: pointer; } cursor: pointer; }
.dashboard .courses nav.course-toggle ol.filters li.selected { .dashboard .my-courses nav.course-toggle ol.filters li.selected {
background: #dcdcdc; } background: #dcdcdc; }
.dashboard .courses nav.course-toggle ol.filters li h2 { .dashboard .my-courses nav.course-toggle ol.filters li h2 {
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-transform: none; } text-transform: none; }
.dashboard .courses nav.course-toggle ol.filters li span.count { .dashboard .my-courses nav.course-toggle ol.filters li span.count {
margin: 5px 0 0 0; margin: 5px 0 0 0;
display: block; } display: block; }
.dashboard .courses .course { .dashboard .my-courses .my-course {
width: 100%; } background: #fafafa;
border: 1px solid #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
font-size: 0em;
margin-right: 2.513%;
min-height: 120px;
margin-bottom: 25px;
overflow: hidden;
position: relative;
width: 100%;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
@media only screen and (max-width: 768px) {
.dashboard .my-courses .my-course {
float: none;
margin-right: 0px;
width: 100%; } }
.dashboard .my-courses .my-course:last-child {
margin-bottom: none; }
.dashboard .my-courses .my-course > a {
zoom: 1;
display: block;
padding: 10px;
position: relative; }
.dashboard .my-courses .my-course > a:before, .dashboard .my-courses .my-course > a:after {
content: "";
display: table; }
.dashboard .my-courses .my-course > a:after {
clear: both; }
.dashboard .my-courses .my-course .cover {
background: #e1e1e1;
border: 1px solid #969696;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100px; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .cover {
display: none; } }
.dashboard .my-courses .my-course .cover .shade {
background: rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
right: 0px; }
.dashboard .my-courses .my-course .cover .arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: white;
-webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 55px; }
.dashboard .my-courses .my-course .cover img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
display: block;
min-height: 100%;
min-width: 100%;
width: 100%; }
.dashboard .my-courses .my-course .info {
left: 130px;
position: absolute;
right: 10px;
top: 10px;
z-index: 2; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info {
margin: 0px; } }
.dashboard .my-courses .my-course .info > hgroup {
width: 100%; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info > hgroup {
margin: 0px; } }
.dashboard .my-courses .my-course .info > hgroup h2 {
font: bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-webkit-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
text-overflow: ellipsis;
white-space: nowrap; }
.dashboard .my-courses .my-course .info > hgroup p {
color: #3c3c3c;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
text-overflow: ellipsis;
white-space: nowrap; }
.dashboard .my-courses .my-course .info .edit, .dashboard .my-courses .my-course .info .register {
border: 1px solid #dcdcdc;
background: #e6e6e6;
color: #a0a0a0;
display: block;
font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info .edit, .dashboard .my-courses .my-course .info .register {
display: none; } }
.dashboard .my-courses .my-course .info .edit:hover, .dashboard .my-courses .my-course .info .register:hover {
background: white;
color: #1d9dd9; }
.dashboard .my-courses .my-course .info .meta {
border-top: 1px solid #c8c8c8;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
font-size: 1rem;
height: 34px;
margin-top: 10px;
opacity: 0.9;
position: relative;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100%; }
.dashboard .my-courses .my-course .info .meta:hover {
opacity: 0.9; }
.dashboard .my-courses .my-course .info .meta > * {
height: 18px;
position: absolute;
top: 15px; }
.dashboard .my-courses .my-course .info .meta p + p {
margin-top: 0px; }
.dashboard .my-courses .my-course .info .meta .complete {
left: 0px; }
.dashboard .my-courses .my-course .info .meta .complete p {
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; }
.dashboard .my-courses .my-course .info .meta .complete p span {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.dashboard .my-courses .my-course .info .meta .dates p {
color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
text-align: right; }
.dashboard .my-courses .my-course .info .meta .dates p:first-child {
border-right: 1px solid #c8c8c8;
margin-right: 10px;
padding-right: 10px; }
.dashboard .my-courses .my-course .info .meta .dates p time {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.dashboard .my-courses .my-course .info .meta .end-date {
border-left: 1px solid #c8c8c8;
right: 0px;
padding-left: 15px; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info .meta .end-date {
display: none; } }
.dashboard .my-courses .my-course .info .meta .end-date p {
color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-align: right; }
.dashboard .my-courses .my-course .info .meta .end-date p time {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.dashboard .my-courses .my-course .info .meta .progress {
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
left: 90px;
right: 140px; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info .meta .progress {
right: 0px; } }
.dashboard .my-courses .my-course .info .meta .progress .meter {
background: #e6e6e6;
border: 1px solid #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 2px; }
.dashboard .my-courses .my-course .info .meta .progress .meter .meter-fill {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: #d2d2d2;
height: 100%;
width: 60%; }
.dashboard .my-courses .my-course:hover {
background: #f5f5f5;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); }
.dashboard .my-courses .my-course:hover .edit {
background: #dcdcdc;
border-color: #bebebe; }
.dashboard .my-courses .my-course:hover .cover {
opacity: 1; }
.dashboard .my-courses .my-course:hover .cover .shade, .dashboard .my-courses .my-course:hover .cover .arrow {
opacity: 1; }
.dashboard .my-courses .my-course:hover .meta {
opacity: 0.9; }
nav.course-material { nav.course-material {
background: #d2d2d2; background: #d2d2d2;
...@@ -2352,13 +2990,17 @@ nav.course-material { ...@@ -2352,13 +2990,17 @@ nav.course-material {
max-width: 1200px; max-width: 1200px;
width: 100%; } width: 100%; }
nav.course-material ol.course-tabs { nav.course-material ol.course-tabs {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px; -webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px; -moz-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-ms-border-top-left-radius: 4px;
-o-border-top-left-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px; -moz-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
-ms-border-top-right-radius: 4px;
-o-border-top-right-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
zoom: 1; zoom: 1;
padding: 10px 0 0 0; } padding: 10px 0 0 0; }
...@@ -2383,13 +3025,17 @@ nav.course-material { ...@@ -2383,13 +3025,17 @@ nav.course-material {
background: white; background: white;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
border-bottom: 0px; border-bottom: 0px;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px; -webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px; -moz-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-ms-border-top-left-radius: 4px;
-o-border-top-left-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px; -moz-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
-ms-border-top-right-radius: 4px;
-o-border-top-right-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
-webkit-box-shadow: 0 2px 0 0 white; -webkit-box-shadow: 0 2px 0 0 white;
-moz-box-shadow: 0 2px 0 0 white; -moz-box-shadow: 0 2px 0 0 white;
...@@ -2402,14 +3048,14 @@ nav.course-material { ...@@ -2402,14 +3048,14 @@ nav.course-material {
background: #f0f0f0; background: #f0f0f0;
height: 600px; } height: 600px; }
.find-courses header { .find-courses header.search-intro {
background: #f0f0f0; background: #f0f0f0;
border-bottom: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8;
-webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
width: 100%; } width: 100%; }
.find-courses header .inner-wrapper { .find-courses header.search-intro .inner-wrapper {
height: 120px; height: 120px;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
...@@ -2417,7 +3063,7 @@ nav.course-material { ...@@ -2417,7 +3063,7 @@ nav.course-material {
padding: 40px 0px 30px; padding: 40px 0px 30px;
position: relative; position: relative;
width: 100%; } width: 100%; }
.find-courses header .inner-wrapper::before { .find-courses header.search-intro .inner-wrapper::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
...@@ -2431,13 +3077,13 @@ nav.course-material { ...@@ -2431,13 +3077,13 @@ nav.course-material {
position: absolute; position: absolute;
width: 100%; width: 100%;
z-index: 1; } z-index: 1; }
.find-courses header .inner-wrapper img { .find-courses header.search-intro .inner-wrapper img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
width: 100px; width: 100px;
z-index: 2; } z-index: 2; }
.find-courses header .inner-wrapper h1 { .find-courses header.search-intro .inner-wrapper h1 {
color: #a0a0a0; color: #a0a0a0;
font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
letter-spacing: 1px; letter-spacing: 1px;
...@@ -2484,6 +3130,8 @@ nav.course-material { ...@@ -2484,6 +3130,8 @@ nav.course-material {
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 0 1px 1px white; -webkit-box-shadow: inset 0 0 1px 1px white;
-moz-box-shadow: inset 0 0 1px 1px white; -moz-box-shadow: inset 0 0 1px 1px white;
...@@ -2511,12 +3159,14 @@ nav.course-material { ...@@ -2511,12 +3159,14 @@ nav.course-material {
border: 1px solid #0d72a2; border: 1px solid #0d72a2;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #61b8e1; -webkit-box-shadow: inset 0 1px 0 0 #61b8e1;
-moz-box-shadow: inset 0 1px 0 0 #61b8e1; -moz-box-shadow: inset 0 1px 0 0 #61b8e1;
box-shadow: inset 0 1px 0 0 #61b8e1; box-shadow: inset 0 1px 0 0 #61b8e1;
color: white; color: white;
display: inline-block; display: inline;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
background-color: #1d9dd9; background-color: #1d9dd9;
...@@ -2526,20 +3176,23 @@ nav.course-material { ...@@ -2526,20 +3176,23 @@ nav.course-material {
background-image: -ms-linear-gradient(top, #1d9dd9, #0e7cb0); background-image: -ms-linear-gradient(top, #1d9dd9, #0e7cb0);
background-image: -o-linear-gradient(top, #1d9dd9, #0e7cb0); background-image: -o-linear-gradient(top, #1d9dd9, #0e7cb0);
background-image: linear-gradient(top, #1d9dd9, #0e7cb0); background-image: linear-gradient(top, #1d9dd9, #0e7cb0);
padding: 7px 18px; padding: 6px 18px 7px;
text-decoration: none;
text-shadow: 0 1px 0 #076794; text-shadow: 0 1px 0 #076794;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px;
-moz-border-bottom-left-radius: 0px; -moz-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-ms-border-bottom-left-radius: 0px;
-o-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px; -webkit-border-top-left-radius: 0px;
-moz-border-top-left-radius: 0px; -moz-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-ms-border-top-left-radius: 0px;
-o-border-top-left-radius: 0px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
display: block; display: block;
font-size: 1.6em; font-size: 1.6em;
...@@ -2551,7 +3204,7 @@ nav.course-material { ...@@ -2551,7 +3204,7 @@ nav.course-material {
bottom: -1px; bottom: -1px;
text-align: center; text-align: center;
vertical-align: middle; } vertical-align: middle; }
.course-info header .button:hover:not(:disabled) { .course-info header .button:hover {
-webkit-box-shadow: inset 0 1px 0 0 #35a6db; -webkit-box-shadow: inset 0 1px 0 0 #35a6db;
-moz-box-shadow: inset 0 1px 0 0 #35a6db; -moz-box-shadow: inset 0 1px 0 0 #35a6db;
box-shadow: inset 0 1px 0 0 #35a6db; box-shadow: inset 0 1px 0 0 #35a6db;
...@@ -2563,14 +3216,11 @@ nav.course-material { ...@@ -2563,14 +3216,11 @@ nav.course-material {
background-image: -ms-linear-gradient(top, #1e8bbe, #0e72a1); background-image: -ms-linear-gradient(top, #1e8bbe, #0e72a1);
background-image: -o-linear-gradient(top, #1e8bbe, #0e72a1); background-image: -o-linear-gradient(top, #1e8bbe, #0e72a1);
background-image: linear-gradient(top, #1e8bbe, #0e72a1); } background-image: linear-gradient(top, #1e8bbe, #0e72a1); }
.course-info header .button:active:not(:disabled) { .course-info header .button:active {
border: 1px solid #0d72a2; border: 1px solid #0d72a2;
-webkit-box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee; -webkit-box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee;
-moz-box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee; -moz-box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee; } box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee; }
.course-info header .button:disabled {
opacity: 0.5;
cursor: not-allowed; }
.course-info .sidebar { .course-info .sidebar {
background: white; background: white;
float: right; float: right;
...@@ -2579,7 +3229,7 @@ nav.course-material { ...@@ -2579,7 +3229,7 @@ nav.course-material {
padding-bottom: 20px; padding-bottom: 20px;
position: relative; position: relative;
width: 31.658%; } width: 31.658%; }
.course-info .sidebar .faded-vertical-divider, .course-info .sidebar .vertical-divider, .course-info .sidebar header.app .divider, header.app .course-info .sidebar .divider { .course-info .sidebar .faded-vertical-divider, .course-info .sidebar .vertical-divider, .course-info .sidebar header.app .divider, header.app .course-info .sidebar .divider, .course-info .sidebar footer nav .copyright a.logo::after, footer nav .copyright .course-info .sidebar a.logo::after, .course-info .sidebar footer nav ol li::after, footer nav ol .course-info .sidebar li::after, .course-info .sidebar .home .university-partners .partners li.partner::before, .home .university-partners .partners .course-info .sidebar li.partner::before {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
...@@ -2615,6 +3265,8 @@ nav.course-material { ...@@ -2615,6 +3265,8 @@ nav.course-material {
border: 10px solid #6a6a6a; border: 10px solid #6a6a6a;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; -moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
display: block; display: block;
margin: 0 auto 20px; } margin: 0 auto 20px; }
...@@ -2632,6 +3284,8 @@ nav.course-material { ...@@ -2632,6 +3284,8 @@ nav.course-material {
background: #F0F0F0; background: #F0F0F0;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
color: #7A7A7A; color: #7A7A7A;
font-size: .8em; font-size: .8em;
...@@ -2656,6 +3310,8 @@ nav.course-material { ...@@ -2656,6 +3310,8 @@ nav.course-material {
background: #eee; background: #eee;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
color: #444; color: #444;
......
lms/static/sass/bourbon/_bourbon.scss
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
@import "functions/radial-gradient"; @import "functions/radial-gradient";
@import "functions/render-gradients"; @import "functions/render-gradients";
@import "functions/tint-shade"; @import "functions/tint-shade";
@import "functions/transition-property-name";
// CSS3 Mixins // CSS3 Mixins
@import "css3/animation"; @import "css3/animation";
...@@ -22,7 +21,6 @@ ...@@ -22,7 +21,6 @@
@import "css3/flex-box"; @import "css3/flex-box";
@import "css3/inline-block"; @import "css3/inline-block";
@import "css3/linear-gradient"; @import "css3/linear-gradient";
@import "css3/prefixer";
@import "css3/radial-gradient"; @import "css3/radial-gradient";
@import "css3/transform"; @import "css3/transform";
@import "css3/transition"; @import "css3/transition";
...@@ -31,9 +29,7 @@ ...@@ -31,9 +29,7 @@
// Addons & other mixins // Addons & other mixins
@import "addons/button"; @import "addons/button";
@import "addons/clearfix"; @import "addons/clearfix";
@import "addons/font-face";
@import "addons/font-family"; @import "addons/font-family";
@import "addons/hide-text";
@import "addons/html5-input-types"; @import "addons/html5-input-types";
@import "addons/position"; @import "addons/position";
@import "addons/timing-functions"; @import "addons/timing-functions";
lms/static/sass/bourbon/addons/_button.scss
...@@ -34,11 +34,6 @@ ...@@ -34,11 +34,6 @@
@include pill($base-color); @include pill($base-color);
} }
} }
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
} }
...@@ -67,16 +62,15 @@ ...@@ -67,16 +62,15 @@
@include border-radius (3px); @include border-radius (3px);
@include box-shadow (inset 0 1px 0 0 $inset-shadow); @include box-shadow (inset 0 1px 0 0 $inset-shadow);
color: $color; color: $color;
display: inline-block; display: inline;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient); @include linear-gradient ($base-color, $stop-gradient);
padding: 7px 18px; padding: 6px 18px 7px;
text-decoration: none;
text-shadow: 0 1px 0 $text-shadow; text-shadow: 0 1px 0 $text-shadow;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
&:hover:not(:disabled) { &:hover {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
...@@ -92,7 +86,7 @@ ...@@ -92,7 +86,7 @@
@include linear-gradient ($base-color-hover, $stop-gradient-hover); @include linear-gradient ($base-color-hover, $stop-gradient-hover);
} }
&:active:not(:disabled) { &:active {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
...@@ -139,16 +133,16 @@ ...@@ -139,16 +133,16 @@
@include border-radius(5px); @include border-radius(5px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow); @include box-shadow(inset 0 1px 0 0 $inset-shadow);
color: $color; color: $color;
display: inline-block; display: inline;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
padding: 8px 20px; padding: 7px 20px 8px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow; text-shadow: 0 -1px 1px $text-shadow;
&:hover:not(:disabled) { &:hover {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
...@@ -168,7 +162,7 @@ ...@@ -168,7 +162,7 @@
$fourth-stop-hover 100%); $fourth-stop-hover 100%);
} }
&:active:not(:disabled) { &:active {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
@if $grayscale == true { @if $grayscale == true {
...@@ -210,18 +204,17 @@ ...@@ -210,18 +204,17 @@
@include border-radius(16px); @include border-radius(16px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3); @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
color: $color; color: $color;
display: inline-block; display: inline;
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
@include linear-gradient ($base-color, $stop-gradient); @include linear-gradient ($base-color, $stop-gradient);
padding: 5px 16px; padding: 3px 16px 5px;
text-align: center; text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow; text-shadow: 0 -1px 1px $text-shadow;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
&:hover:not(:disabled) { &:hover {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%); $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
...@@ -249,7 +242,7 @@ ...@@ -249,7 +242,7 @@
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
} }
&:active:not(:disabled) { &:active {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
...@@ -271,3 +264,4 @@ ...@@ -271,3 +264,4 @@
text-shadow: 0 -1px 1px $text-shadow-active; text-shadow: 0 -1px 1px $text-shadow-active;
} }
} }
lms/static/sass/bourbon/addons/_font-face.scss deleted 100644 → 0
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
@font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
font-weight: $weight;
font-style: $style;
}
}
\ No newline at end of file
lms/static/sass/bourbon/addons/_hide-text.scss deleted 100644 → 0
@mixin hide-text {
background-color: transparent;
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none;
}
// A CSS image replacement method that does not require the use of text-indent.
//
// Examples
//
// .ir {
// @include hide-text;
// }
lms/static/sass/bourbon/addons/_position.scss
...@@ -12,31 +12,19 @@ ...@@ -12,31 +12,19 @@
position: $position; position: $position;
@if $top == auto { @if not(unitless($top)) {
top: $top;
}
@else if not(unitless($top)) {
top: $top; top: $top;
} }
@if $right == auto { @if not(unitless($right)) {
right: $right;
}
@else if not(unitless($right)) {
right: $right; right: $right;
} }
@if $bottom == auto { @if not(unitless($bottom)) {
bottom: $bottom;
}
@else if not(unitless($bottom)) {
bottom: $bottom; bottom: $bottom;
} }
@if $left == auto { @if not(unitless($left)) {
left: $left;
}
@else if not(unitless($left)) {
left: $left; left: $left;
} }
} }
lms/static/sass/bourbon/css3/_animation.scss
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
$full: compact($animation-1, $animation-2, $animation-3, $animation-4, $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
$animation-5, $animation-6, $animation-7, $animation-8, $animation-9); $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
@include prefixer(animation, $full); -webkit-animation: $full;
-moz-animation: $full;
animation: $full;
} }
// Individual Animation Properties // Individual Animation Properties
...@@ -24,7 +26,9 @@ ...@@ -24,7 +26,9 @@
$full: compact($name-1, $name-2, $name-3, $name-4, $full: compact($name-1, $name-2, $name-3, $name-4,
$name-5, $name-6, $name-7, $name-8, $name-9); $name-5, $name-6, $name-7, $name-8, $name-9);
@include prefixer(animation-name, $full); -webkit-animation-name: $full;
-moz-animation-name: $full;
animation-name: $full;
} }
...@@ -37,7 +41,9 @@ ...@@ -37,7 +41,9 @@
$full: compact($time-1, $time-2, $time-3, $time-4, $full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9); $time-5, $time-6, $time-7, $time-8, $time-9);
@include prefixer(animation-duration, $full); -webkit-animation-duration: $full;
-moz-animation-duration: $full;
animation-duration: $full;
} }
...@@ -51,7 +57,9 @@ ...@@ -51,7 +57,9 @@
$full: compact($motion-1, $motion-2, $motion-3, $motion-4, $full: compact($motion-1, $motion-2, $motion-3, $motion-4,
$motion-5, $motion-6, $motion-7, $motion-8, $motion-9); $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
@include prefixer(animation-timing-function, $full); -webkit-animation-timing-function: $full;
-moz-animation-timing-function: $full;
animation-timing-function: $full;
} }
...@@ -65,7 +73,9 @@ ...@@ -65,7 +73,9 @@
$full: compact($value-1, $value-2, $value-3, $value-4, $full: compact($value-1, $value-2, $value-3, $value-4,
$value-5, $value-6, $value-7, $value-8, $value-9); $value-5, $value-6, $value-7, $value-8, $value-9);
@include prefixer(animation-iteration-count, $full); -webkit-animation-iteration-count: $full;
-moz-animation-iteration-count: $full;
animation-iteration-count: $full;
} }
...@@ -79,7 +89,9 @@ ...@@ -79,7 +89,9 @@
$full: compact($direction-1, $direction-2, $direction-3, $direction-4, $full: compact($direction-1, $direction-2, $direction-3, $direction-4,
$direction-5, $direction-6, $direction-7, $direction-8, $direction-9); $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
@include prefixer(animation-direction, $full); -webkit-animation-direction: $full;
-moz-animation-direction: $full;
animation-direction: $full;
} }
...@@ -93,7 +105,9 @@ ...@@ -93,7 +105,9 @@
$full: compact($state-1, $state-2, $state-3, $state-4, $full: compact($state-1, $state-2, $state-3, $state-4,
$state-5, $state-6, $state-7, $state-8, $state-9); $state-5, $state-6, $state-7, $state-8, $state-9);
@include prefixer(animation-play-state, $full); -webkit-animation-play-state: $full;
-moz-animation-play-state: $full;
animation-play-state: $full;
} }
...@@ -106,7 +120,9 @@ ...@@ -106,7 +120,9 @@
$full: compact($time-1, $time-2, $time-3, $time-4, $full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9); $time-5, $time-6, $time-7, $time-8, $time-9);
@include prefixer(animation-delay, $full); -webkit-animation-delay: $full;
-moz-animation-delay: $full;
animation-delay: $full;
} }
...@@ -121,5 +137,35 @@ ...@@ -121,5 +137,35 @@
$full: compact($mode-1, $mode-2, $mode-3, $mode-4, $full: compact($mode-1, $mode-2, $mode-3, $mode-4,
$mode-5, $mode-6, $mode-7, $mode-8, $mode-9); $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
@include prefixer(animation-fill-mode, $full); -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.";
}
lms/static/sass/bourbon/css3/_appearance.scss
@mixin appearance ($value) { @mixin appearance ($value) {
@include prefixer(appearance, $value, webkit, moz, ms, o); -webkit-appearance: $value;
-moz-appearance: $value;
-ms-appearance: $value;
-o-appearance: $value;
appearance: $value;
} }
lms/static/sass/bourbon/css3/_background-size.scss
...@@ -7,5 +7,9 @@ ...@@ -7,5 +7,9 @@
$full: compact($length-1, $length-2, $length-3, $length-4, $full: compact($length-1, $length-2, $length-3, $length-4,
$length-5, $length-6, $length-7, $length-8, $length-9); $length-5, $length-6, $length-7, $length-8, $length-9);
@include prefixer(background-size, $full, webkit, moz, ms, o); -webkit-background-size: $full;
-moz-background-size: $full;
-ms-background-size: $full;
-o-background-size: $full;
background-size: $full;
} }
lms/static/sass/bourbon/css3/_border-radius.scss
@mixin border-radius ($radii) { @mixin border-radius ($radii) {
@include prefixer(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) { @mixin border-top-left-radius($radii) {
-moz-border-radius-topleft: $radii; -webkit-border-top-left-radius: $radii;
@include prefixer(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;
} }
@mixin border-top-right-radius($radii) { @mixin border-top-right-radius($radii) {
-moz-border-radius-topright: $radii; -webkit-border-top-right-radius: $radii;
@include prefixer(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;
} }
@mixin border-bottom-left-radius($radii) { @mixin border-bottom-left-radius($radii) {
-moz-border-radius-bottomleft: $radii; -webkit-border-bottom-left-radius: $radii;
@include prefixer(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;
} }
@mixin border-bottom-right-radius($radii) { @mixin border-bottom-right-radius($radii) {
@include prefixer(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;
} }
@mixin border-top-radius($radii) { @mixin border-top-radius($radii) {
......
lms/static/sass/bourbon/css3/_box-shadow.scss
...@@ -8,5 +8,7 @@ ...@@ -8,5 +8,7 @@
$full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
$shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9); $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
@include prefixer(box-shadow, $full); -webkit-box-shadow: $full;
-moz-box-shadow: $full;
box-shadow: $full;
} }
lms/static/sass/bourbon/css3/_box-sizing.scss
@mixin box-sizing ($box) { @mixin box-sizing ($box) {
// content-box | border-box | inherit // content-box | border-box | inherit
@include prefixer(box-sizing, $box); -webkit-box-sizing: $box;
-moz-box-sizing: $box;
box-sizing: $box;
} }
lms/static/sass/bourbon/css3/_columns.scss
@mixin columns($arg: auto) { @mixin columns($arg: auto) {
// <column-count> || <column-width> // <column-count> || <column-width>
@include prefixer(columns, $arg); -webkit-columns: $arg;
-moz-columns: $arg;
columns: $arg;
} }
@mixin column-count($int: auto) { @mixin column-count($int: auto) {
// auto || integer // auto || integer
@include prefixer(column-count, $int); -webkit-column-count: $int;
-moz-column-count: $int;
column-count: $int;
} }
@mixin column-gap($length: normal) { @mixin column-gap($length: normal) {
// normal || length // normal || length
@include prefixer(column-gap, $length); -webkit-column-gap: $length;
-moz-column-gap: $length;
column-gap: $length;
} }
@mixin column-fill($arg: auto) { @mixin column-fill($arg: auto) {
// auto || length // auto || length
@include prefixer(columns-fill, $arg); -webkit-columns-fill: $arg;
-moz-columns-fill: $arg;
columns-fill: $arg;
} }
@mixin column-rule($arg) { @mixin column-rule($arg) {
// <border-width> || <border-style> || <color> // <border-width> || <border-style> || <color>
@include prefixer(column-rule, $arg); -webkit-column-rule: $arg;
-moz-column-rule: $arg;
column-rule: $arg;
} }
@mixin column-rule-color($color) { @mixin column-rule-color($color) {
@include prefixer(column-rule-color, $color); -webkit-column-rule-color: $color;
-moz-column-rule-color: $color;
column-rule-color: $color;
} }
@mixin column-rule-style($style: none) { @mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
@include prefixer(column-rule-style, $style); -webkit-column-rule-style: $style;
-moz-column-rule-style: $style;
column-rule-style: $style;
} }
@mixin column-rule-width ($width: none) { @mixin column-rule-width ($width: none) {
@include prefixer(column-rule-width, $width); -webkit-column-rule-width: $width;
-moz-column-rule-width: $width;
column-rule-width: $width;
} }
@mixin column-span($arg: none) { @mixin column-span($arg: none) {
// none || all // none || all
@include prefixer(column-span, $arg); -webkit-column-span: $arg;
-moz-column-span: $arg;
column-span: $arg;
} }
@mixin column-width($length: auto) { @mixin column-width($length: auto) {
// auto || length // auto || length
@include prefixer(column-width, $length); -webkit-column-width: $length;
-moz-column-width: $length;
column-width: $length;
} }
lms/static/sass/bourbon/css3/_flex-box.scss
...@@ -16,37 +16,52 @@ ...@@ -16,37 +16,52 @@
@mixin box-orient($orient: inline-axis) { @mixin box-orient($orient: inline-axis) {
// horizontal|vertical|inline-axis|block-axis|inherit // horizontal|vertical|inline-axis|block-axis|inherit
@include prefixer(box-orient, $orient); -webkit-box-orient: $orient;
-moz-box-orient: $orient;
box-orient: $orient;
} }
@mixin box-pack($pack: start) { @mixin box-pack($pack: start) {
// start|end|center|justify // start|end|center|justify
@include prefixer(box-pack, $pack); -webkit-box-pack: $pack;
-moz-box-pack: $pack;
box-pack: $pack;
} }
@mixin box-align($align: stretch) { @mixin box-align($align: stretch) {
// start|end|center|baseline|stretch // start|end|center|baseline|stretch
@include prefixer(box-align, $align); -webkit-box-align: $align;
-moz-box-align: $align;
box-align: $align;
} }
@mixin box-direction($direction: normal) { @mixin box-direction($direction: normal) {
// normal|reverse|inherit // normal|reverse|inherit
@include prefixer(box-direction, $direction); -webkit-box-direction: $direction;
-moz-box-direction: $direction;
box-direction: $direction;
} }
@mixin box-lines($lines: single) { @mixin box-lines($lines: single) {
// single|multiple // single|multiple
@include prefixer(box-lines, $lines); -webkit-box-lines: $lines;
-moz-box-lines: $lines;
box-lines: $lines;
} }
@mixin box-ordinal-group($int: 1) { @mixin box-ordinal-group($integer: 1) {
@include prefixer(box-ordinal-group, $int); -webkit-box-ordinal-group: $integer;
-moz-box-ordinal-group: $integer;
box-ordinal-group: $integer;
} }
@mixin box-flex($value: 0.0) { @mixin box-flex($value: 0.0) {
@include prefixer(box-flex, $value); -webkit-box-flex: $value;
-moz-box-flex: $value;
box-flex: $value;
} }
@mixin box-flex-group($int: 1) { @mixin box-flex-group($integer: 1) {
@include prefixer(box-flex-group, $int); -webkit-box-flex-group: $integer;
-moz-box-flex-group: $integer;
box-flex-group: $integer;
} }
lms/static/sass/bourbon/css3/_inline-block.scss
// Legacy support for inline-block in IE7 (maybe IE6) // Legacy support for inline-block in IE7 (maybe IE6)
@mixin inline-block { @mixin inline-block {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
......
lms/static/sass/bourbon/css3/_linear-gradient.scss
...@@ -3,8 +3,6 @@ ...@@ -3,8 +3,6 @@
$G5: false, $G6: false, $G5: false, $G6: false,
$G7: false, $G8: false, $G7: false, $G8: false,
$G9: false, $G10: false, $G9: false, $G10: false,
$deprecated-pos1: left top,
$deprecated-pos2: left bottom,
$fallback: false) { $fallback: false) {
// Detect what type of value exists in $pos // Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1)); $pos-type: type-of(nth($pos, 1));
...@@ -27,7 +25,7 @@ ...@@ -27,7 +25,7 @@
} }
background-color: $fallback-color; background-color: $fallback-color;
background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0 background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full); background-image: -moz-linear-gradient($pos, $full);
background-image: -ms-linear-gradient($pos, $full); background-image: -ms-linear-gradient($pos, $full);
......
lms/static/sass/bourbon/css3/_prefixer.scss deleted 100644 → 0
@mixin prefixer ($property, $value,
$webkit: true,
$moz: true,
$ms: false,
$o: false,
$spec: true) {
@if $webkit { -webkit-#{$property}: $value; }
@if $moz { -moz-#{$property}: $value; }
@if $ms { -ms-#{$property}: $value; }
@if $o { -o-#{$property}: $value; }
@if $spec { #{$property}: $value; }
}
lms/static/sass/bourbon/css3/_radial-gradient.scss
// Requires Sass 3.1+ // Requires Sass 3.1+
@mixin radial-gradient($G1, $G2, @mixin radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false, $G3: false, $G4: false,
$G5: false, $G6: false, $G5: false, $G6: false,
$G7: false, $G8: false, $G7: false, $G8: false,
$G9: false, $G10: false, $G9: false, $G10: false,
$pos: 50% 50%,
$shape-size: ellipse cover,
$deprecated-pos1: center center,
$deprecated-pos2: center center,
$deprecated-radius1: 0,
$deprecated-radius2: 460,
$fallback: false) { $fallback: false) {
@each $value in $G1, $G2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
@if ($pos-type != color) or ($first-val != "transparent") {
@if ($pos-type == number)
or ($first-val == "center")
or ($first-val == "top")
or ($first-val == "right")
or ($first-val == "bottom")
or ($first-val == "left") {
$pos: $value;
@if $pos == $G1 {
$G1: false;
}
}
@else if
($first-val == "ellipse")
or ($first-val == "circle")
or ($first-val == "closest-side")
or ($first-val == "closest-corner")
or ($first-val == "farthest-side")
or ($first-val == "farthest-corner")
or ($first-val == "contain")
or ($first-val == "cover") {
$shape-size: $value;
@if $value == $G1 {
$G1: false;
}
@else if $value == $G2 {
$G2: false;
}
}
}
}
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1); $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") { @if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback; $fallback-color: $fallback;
} }
background-color: $fallback-color; background-color: $fallback-color;
background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
background-image: -webkit-radial-gradient($pos, $shape-size, $full); background-image: -webkit-radial-gradient($pos, $shape-size, $full);
background-image: -moz-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: -ms-radial-gradient($pos, $shape-size, $full);
......
lms/static/sass/bourbon/css3/_transform.scss
@mixin transform($property: none) { @mixin transform($property: none) {
// none | <transform-function> // none | <transform-function>
@include prefixer(transform, $property, webkit, moz, ms, o); -webkit-transform: $property;
-moz-transform: $property;
-ms-transform: $property;
-o-transform: $property;
transform: $property;
} }
@mixin transform-origin($axes: 50%) { @mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | % // x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | % // y-axis - top | center | bottom | length | %
// z-axis - length // z-axis - length
@include prefixer(transform-origin, $axes, webkit, moz, ms, o); -webkit-transform-origin: $axes;
-moz-transform-origin: $axes;
-ms-transform-origin: $axes;
-o-transform-origin: $axes;
transform-origin: $axes;
} }
lms/static/sass/bourbon/css3/_transition.scss
...@@ -3,18 +3,38 @@ ...@@ -3,18 +3,38 @@
// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
@mixin transition ($prop-1: all 0.15s ease-out 0, @mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
$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);
@include prefixer(transition, $full, webkit, moz, ms, o); // 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, @mixin transition-property ($prop-1: all,
...@@ -26,11 +46,11 @@ ...@@ -26,11 +46,11 @@
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5, $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
$prop-6, $prop-7, $prop-8, $prop-9); $prop-6, $prop-7, $prop-8, $prop-9);
-webkit-transition-property: transition-property-names($full, 'webkit'); -webkit-transition-property: $full;
-moz-transition-property: transition-property-names($full, 'moz'); -moz-transition-property: $full;
-ms-transition-property: transition-property-names($full, 'ms'); -ms-transition-property: $full;
-o-transition-property: transition-property-names($full, 'o'); -o-transition-property: $full;
transition-property: transition-property-names($full, false); transition-property: $full;
} }
@mixin transition-duration ($time-1: 0, @mixin transition-duration ($time-1: 0,
...@@ -42,7 +62,11 @@ ...@@ -42,7 +62,11 @@
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9); $time-6, $time-7, $time-8, $time-9);
@include prefixer(transition-duration, $full, webkit, moz, ms, o); -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, @mixin transition-timing-function ($motion-1: ease,
...@@ -55,7 +79,11 @@ ...@@ -55,7 +79,11 @@
$motion-6, $motion-7, $motion-8, $motion-9); $motion-6, $motion-7, $motion-8, $motion-9);
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@include prefixer(transition-timing-function, $full, webkit, moz, ms, o); -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, @mixin transition-delay ($time-1: 0,
...@@ -67,6 +95,10 @@ ...@@ -67,6 +95,10 @@
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9); $time-6, $time-7, $time-8, $time-9);
@include prefixer(transition-transition-delay, $full, webkit, moz, ms, o); -webkit-transition-delay: $full;
-moz-transition-delay: $full;
-ms-transition-delay: $full;
-o-transition-delay: $full;
transition-delay: $full;
} }
lms/static/sass/bourbon/css3/_user-select.scss
@mixin user-select($arg: none) { @mixin user-select($arg: none) {
@include prefixer(user-select, $arg, webkit, moz, ms); -webkit-user-select: $arg;
-moz-user-select: $arg;
-ms-user-select: $arg;
user-select: $arg;
} }
lms/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss
// Render Deprecated Webkit Gradient - Linear || Radial // Render Deprecated Webkit Gradient - Linear || Radial
//************************************************************************// //************************************************************************//
@function deprecated-webkit-gradient($type, @function deprecated-webkit-gradient($type, $full) {
$deprecated-pos1, $deprecated-pos2,
$full,
$deprecated-radius1: false, $deprecated-radius2: false) {
$gradient-list: (); $gradient-list: ();
$gradient: false; $gradient: false;
$full-length: length($full); $full-length: length($full);
...@@ -17,28 +14,23 @@ ...@@ -17,28 +14,23 @@
$color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
$gradient-list: join($gradient-list, $color-stop, comma); $gradient-list: join($gradient-list, $color-stop, comma);
} }
@else { @else {
@if $i == $full-length { @if $i == $full-length {
$percentage: 100%; $percentage: 100%;
} }
@else { @else {
$percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
} }
$color-stop: color-stop(unquote($percentage), $gradient); $color-stop: color-stop(unquote($percentage), $gradient);
$gradient-list: join($gradient-list, $color-stop, comma); $gradient-list: join($gradient-list, $color-stop, comma);
} }
} }
@if $type == radial { @if $type == radial {
$gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list); $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
} }
@else if $type == linear { @else if $type == linear {
$gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list); $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
} }
@return $gradient; @return $gradient;
} }
lms/static/sass/bourbon/functions/_radial-gradient.scss
// This function is required and used by the background-image mixin. // This function is required and used by the background-image mixin.
@function radial-gradient($G1, $G2, @function radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false, $G3: false, $G4: false,
$G5: false, $G6: false, $G5: false, $G6: false,
$G7: false, $G8: false, $G7: false, $G8: false,
$G9: false, $G10: false, $G9: false, $G10: false) {
$pos: 50% 50%,
$shape-size: ellipse cover,
$deprecated-pos1: center center,
$deprecated-pos2: center center,
$deprecated-radius1: 0,
$deprecated-radius2: 50,
$fallback: false) {
@each $value in $G1, $G2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
@if ($pos-type != color) or ($first-val != "transparent") {
@if ($pos-type == number)
or ($first-val == "center")
or ($first-val == "top")
or ($first-val == "right")
or ($first-val == "bottom")
or ($first-val == "left") {
$pos: $value;
@if $pos == $G1 {
$G1: false;
}
}
@else if
($first-val == "ellipse")
or ($first-val == "circle")
or ($first-val == "closest-side")
or ($first-val == "closest-corner")
or ($first-val == "farthest-side")
or ($first-val == "farthest-corner")
or ($first-val == "contain")
or ($first-val == "cover") {
$shape-size: $value;
@if $value == $G1 {
$G1: false;
}
@else if $value == $G2 {
$G2: false;
}
}
}
}
$type: radial; $type: radial;
$gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
...@@ -60,3 +12,4 @@ ...@@ -60,3 +12,4 @@
@return $type-gradient; @return $type-gradient;
} }
lms/static/sass/bourbon/functions/_transition-property-name.scss deleted 100644 → 0
// Return vendor-prefixed property names if appropriate
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
//************************************************************************//
@function transition-property-names($props, $vendor: false) {
$new-props: ();
@each $prop in $props {
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
}
@return $new-props;
}
@function transition-property-name($prop, $vendor: false) {
// put other properties that need to be prefixed here aswell
@if $vendor and $prop == transform {
@return unquote('-'+$vendor+'-'+$prop);
}
@else {
@return $prop;
}
}
\ No newline at end of file
lms/static/sass/bourbon/lib/bourbon.rb
require "bourbon/generator" require "bourbon/generator"
module Bourbon module Bourbon
if defined?(Rails) && defined?(Rails::Engine) if defined?(Rails)
class Engine < ::Rails::Engine class Engine < ::Rails::Engine
require 'bourbon/engine' require 'bourbon/engine'
end end
......
lms/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
...@@ -4,9 +4,8 @@ module Bourbon::SassExtensions::Functions::Compact ...@@ -4,9 +4,8 @@ module Bourbon::SassExtensions::Functions::Compact
def compact(*args) def compact(*args)
sep = :comma sep = :comma
if args.size == 1 && args.first.is_a?(Sass::Script::List) if args.size == 1 && args.first.is_a?(Sass::Script::List)
list = args.first args = args.first.value
args = list.value sep = args.first.separator
sep = list.separator
end end
Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep) Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
end end
......
lms/templates/course.html
...@@ -2,27 +2,55 @@ ...@@ -2,27 +2,55 @@
%for course in courses: %for course in courses:
<article class="course"> <article class="course">
<a href="/course_info"> <div class="inner-wrapper">
<div class="cover"> <header class="course-preview">
<div class="shade"></div> <a href="#">
<div class="arrow"></div> <hgroup>
<img src="${static.url('images/history.png')}" /> <h2>${course.title}</h2>
</div> <p>${course.institution}</p>
</hgroup>
<div href="" class="info-link">&#x2794;</div>
</a>
</header>
<section class="info"> <section class="info">
<hgroup> <div class="meta-info">
<h2>${course.title}</h2> <p class="university">HarvardX</p>
<p>${",".join(course.instructors)} &mdash; ${course.institution}</p> <p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
<p>${course.id}</p> </div>
</hgroup> <div class="cover-image">
<div class="edit">Register</div> <img src="${static.url('images/history.png')}">
<section class="meta"> </div>
<div class="dates"> <div class="desc">
<p>Starts: <time>6/10/12</time></p> <p>An advanced intorduction to analog circuits.</p>
<p>Ends: <time>9/23/12</time></p> </div>
</div>
</section>
</section> </section>
</a> </div>
<p><a href="courses/${course.id}/info">Hackish temp link to courseware</a></p>
</article> </article>
%endfor %endfor
<!--
-<article class="course">
- <a href="/course_info">
- <div class="cover">
- <div class="shade"></div>
- <div class="arrow"></div>
- <img src="${static.url('images/history.png')}" />
- </div>
- <section class="info">
- <hgroup>
- <h2>${course.title}</h2>
- <p>${",".join(course.instructors)} &mdash; ${course.institution}</p>
- <p>${course.id}</p>
- <p><a href="courses/${course.id}/info">courseware</a></p>
- </hgroup>
- <div class="edit">Register</div>
- <section class="meta">
- <div class="dates">
- <p>Starts: <time>6/10/12</time></p>
- <p>Ends: <time>9/23/12</time></p>
- </div>
- </section>
- </section>
- </a>
-</article>
-->
lms/templates/courses.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<section class="find-courses"> <section class="find-courses">
<header> <header class="search-intro">
<div class="inner-wrapper"> <div class="inner-wrapper">
<img src="${static.url('images/edx_bw.png')}" /> <img src="${static.url('images/edx_bw.png')}" />
<h1>Explore courses from universities around the world.</h1> <h1>Explore courses from universities around the world.</h1>
......
lms/templates/dashboard.html
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</header> </header>
</section> </section>
<section class="courses"> <section class="my-courses">
<nav class="course-toggle"> <nav class="course-toggle">
<ol class="filters"> <ol class="filters">
<li class="selected"> <li class="selected">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
</ol> </ol>
</nav> </nav>
<article class="course"> <article class="my-course">
<a href="/info"> <a href="/info">
<div class="cover"> <div class="cover">
<div class="shade"></div> <div class="shade"></div>
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
</a> </a>
</article> </article>
<article class="course"> <article class="my-course">
<a href="/info"> <a href="/info">
<div class="cover"> <div class="cover">
<div class="shade"></div> <div class="shade"></div>
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
</a> </a>
</article> </article>
<article class="course"> <article class="my-course">
<a href="/info"> <a href="/info">
<div class="cover"> <div class="cover">
<div class="shade"></div> <div class="shade"></div>
......
lms/templates/footer.html
...@@ -2,9 +2,12 @@ ...@@ -2,9 +2,12 @@
<footer> <footer>
<nav> <nav>
<a href="/" class="logo"> <section class="copyright">
<img src="${static.url('images/logo.png')}" /> <a href="${ MITX_ROOT_URL }" class="logo">
</a> <img src="${static.url('images/logo.png')}" />
</a>
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section>
<ol> <ol>
<li> <li>
<a href="/courses">Find Courses</a> <a href="/courses">Find Courses</a>
...@@ -18,22 +21,11 @@ ...@@ -18,22 +21,11 @@
<li> <li>
<a href="#">Jobs</a> <a href="#">Jobs</a>
</li> </li>
</ol> <li class="social">
<ol class="social">
<li>
<a href="#"><img src="${static.url('images/linkedin.png')}" /></a> <a href="#"><img src="${static.url('images/linkedin.png')}" /></a>
</li>
<li>
<a href="#"><img src="${static.url('images/facebook.png')}" /></a> <a href="#"><img src="${static.url('images/facebook.png')}" /></a>
</li>
<li>
<a href="#"><img src="${static.url('images/twitter.png')}" /></a> <a href="#"><img src="${static.url('images/twitter.png')}" /></a>
</li> </li>
</ol> </ol>
</nav> </nav>
<section class="copyright">
<hr>
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section>
</footer> </footer>
lms/templates/index.html
...@@ -28,20 +28,33 @@ ...@@ -28,20 +28,33 @@
</header> </header>
<section class="university-partners"> <section class="university-partners">
<section class="partners"> <ol class="partners">
<a href="/university_profile.html"> <li class="partner">
<img src="${static.url('images/mit_bw.png')}" /> <a href="/university_profile.html">
<div class="name">MITx</div> <img src="${static.url('images/berkeley_bw.png')}" />
</a> <div class="name">BerkeleyX</div>
<a href="/university_profile.html"> </a>
<img src="${static.url('images/harvard_bw.png')}" /> </li>
<div class="name">HarvardX</div> <li class="partner mit">
</a> <a href="/university_profile.html">
</section> <img src="${static.url('images/mit_bw.png')}" />
<div class="name">MITx</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/harvard_bw.png')}" />
<div class="name">HarvardX</div>
</a>
</li>
</ol>
</section> </section>
<section class="courses"> <section class="highlighted-courses">
<%include file="course.html" /> <h2>Explore courses from edX universities</h2>
<section class="courses">
<%include file="course.html" />
</section>
</section> </section>
<section class="more-info"> <section class="more-info">
...@@ -50,6 +63,7 @@ ...@@ -50,6 +63,7 @@
<article></article> <article></article>
<article></article> <article></article>
<article></article> <article></article>
<article></article>
</section> </section>
</section> </section>
</section> </section>
......
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