Skip to content

E
edx-platform
Commit 9c567846 by Galen Frechette Committed by Matthew Mongeau
Options

wip course info/profile page

parent 33e2b0a6
Showing with 133 additions and 46 deletions
lms/static/sass/_course_info.scss
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
} }
header.course-profile { header.course-profile {
background: rgb(240,240,240); background: rgb(245,245,245);
@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245))); //@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245)));
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
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));
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
@include clearfix; @include clearfix;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
padding: 40px 0px 40px; padding: 50px 0px 40px;
position: relative; position: relative;
width: flex-grid(12); width: flex-grid(12);
...@@ -41,8 +41,6 @@ ...@@ -41,8 +41,6 @@
z-index: 2; z-index: 2;
> hgroup { > hgroup {
//@include inline-block;
//padding: 0 30px;
position: relative; position: relative;
hr { hr {
...@@ -69,9 +67,9 @@ ...@@ -69,9 +67,9 @@
h1 { h1 {
font: bold 2.8rem/3.2rem $sans-serif; font: bold 2.8rem/3.2rem $sans-serif;
margin-bottom: 0px; @include inline-block;
margin-right: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
//text-align: center;
span { span {
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -81,7 +79,7 @@ ...@@ -81,7 +79,7 @@
} }
h2 { h2 {
//text-align: center; @include inline-block;
a { a {
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -94,31 +92,92 @@ ...@@ -94,31 +92,92 @@
} }
} }
} }
.course-dates {
p {
color: $lighter-base-font-color;
@include inline-block;
font: 300 1.2rem/1.6rem $sans-serif;
margin-top: 0px;
margin-right: 20px;
text-transform: uppercase;
&:last-child {
margin: 0;
}
> span {
color: $base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
margin-left: 5px;
}
}
}
} }
.actions { .actions {
float: left; float: left;
padding-top: 5px;
position: relative; position: relative;
width: flex-grid(4); width: flex-grid(4);
z-index: 2; z-index: 2;
a.register { &:hover {
@include button(shiny, $blue); .register-wrapper {
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
border-color: rgb(180,180,180);
}
}
.register-wrapper {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
display: block; border: 1px solid rgb(210,210,210);
font: italic 1.2rem/1.6rem $serif; @include border-radius(4px);
margin-bottom: 10px; @include transition(all, 0.15s, linear);
padding: 10px 0px; padding: 10px;
text-transform: uppercase;
text-align: center; a.register {
width: flex-grid(12); @include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
display: block;
font: italic 1.2rem/1.6rem $serif;
padding: 10px 0px;
position: relative;
text-transform: uppercase;
text-align: center;
width: flex-grid(12);
z-index: 1;
}
} }
.social-sharing { .social-sharing {
background: rgb(230,230,230); padding: 0px 20px;
height: 40px;
p {
background: rgb(245,245,245);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.075), inset 0 0 0 1px rgba(255,255,255, 0.9));
border: 1px solid rgb(210,210,210);
border-top: 0;
@include border-bottom-radius(4px);
padding: 5px 10px;
margin: 0 auto;
color: $lighter-base-font-color;
font: italic 300 1.2rem/1.6rem $serif;
margin: 0 0 5px 0;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:last-child {
margin: 0;
}
> span {
font: normal 1.2rem/1.6rem $sans-serif;
margin-right: 5px;
}
}
} }
} }
} }
...@@ -131,8 +190,7 @@ ...@@ -131,8 +190,7 @@
border-bottom: 1px solid rgb(220,220,220); border-bottom: 1px solid rgb(220,220,220);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
margin-bottom: 40px; margin: 40px 0;
//text-align: center;
width: flex-grid(12); width: flex-grid(12);
&::after { &::after {
...@@ -142,14 +200,22 @@ ...@@ -142,14 +200,22 @@
} }
a { a {
border-bottom: 3px solid transparent;
color: $lighter-base-font-color; color: $lighter-base-font-color;
@include inline-block; @include inline-block;
font: normal 1.2rem/1.6rem $sans-serif; font: normal 1.2rem/1.6rem $sans-serif;
padding: 30px 20px; margin: 0 15px;
padding: 0px 5px 15px;
text-align: center; text-align: center;
text-transform: uppercase;
&:first-child {
margin-left: 0px;
}
&:hover, &.active { &:hover, &.active {
background: rgb(240,240,240); border-color: $pink;
//background: rgb(240,240,240);
color: $base-font-color; color: $base-font-color;
} }
} }
...@@ -175,8 +241,6 @@ ...@@ -175,8 +241,6 @@
width: flex-grid(8); width: flex-grid(8);
.inner-wrapper { .inner-wrapper {
//padding: 0 60px;
> section { > section {
&::after { &::after {
...@@ -242,25 +306,6 @@ ...@@ -242,25 +306,6 @@
background: rgb(245,245,245); background: rgb(245,245,245);
margin-bottom: 20px; margin-bottom: 20px;
padding: 15px; padding: 15px;
&.dates {
p {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 15px;
margin-top: 0px;
padding-bottom: 5px;
&:last-child {
border: none;
margin: 0;
padding: 0;
}
> span {
margin-left: 20px;
}
}
}
} }
.media { .media {
...@@ -273,11 +318,53 @@ ...@@ -273,11 +318,53 @@
.hero { .hero {
height: 180px; height: 180px;
overflow: hidden; overflow: hidden;
position: relative;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4)));
@include border-radius(4px);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.3);
height: 80px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
width: 80px;
&::after {
color: $base-font-color;
content: "\25B6";
display: block;
font: normal 3.2rem/3.2rem $sans-serif;
left: 50%;
margin-left: -12px;
margin-top: -17px;
position: absolute;
text-shadow: 0 1px rgba(255,255,255, 0.8);
top: 50%;
}
}
img { img {
min-width: 100%; min-width: 100%;
} }
} }
&:hover {
cursor: pointer;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5)));
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.4);
&::after {
color: $pink;
}
}
}
} }
} }
} }
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