Skip to content

E
edx-platform
Commit ec1510ca by Galen Frechette
Options

adds login modal

parent 94886643
Showing with 431 additions and 1 deletions
lms/static/sass/_base_mixins.scss 0 → 100644
@mixin vertically-and-horizontally-centered ( $height, $width ) {
left: 50%;
margin-left: -$width / 2;
margin-top: -$height / 2;
min-height: $height;
min-width: $width;
position: fixed;
top: 35%;
}
lms/static/sass/_shared_forms.scss
form {
font-size: 0em;
label {
color: $base-font-color;
font: normal 1.2rem/1.6rem $serif;
margin-bottom: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.4);
}
input[type="text"],
input[type="email"],
input[type="password"] {
......
lms/static/sass/_shared_login_modal.scss 0 → 100644
.modal-wrapper {
@include background-image(radial-gradient(50% 50%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.7)));
bottom: 0;
content: "";
//display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 5;
&.visible {
display: block;
}
.login-modal {
background: rgba(200, 200, 200, 1);
@include border-radius(4px);
@include box-shadow(0 5px 35px 0px rgba(0,0,0, 0.2));
color: #fff;
padding: 6px;
width: grid-width(8);
@include vertically-and-horizontally-centered(430px, grid-width(8));
z-index: 10;
.inner-wrapper {
background: rgba(235, 235, 235, 1);
border: 1px solid rgba(180, 180, 180, 1);
@include border-radius(4px);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 1px 0 0 rgba(255, 255, 255, 0.3));
height: 410px;
padding: 30px;
position: relative;
header {
margin-bottom: 30px;
position: relative;
&::after {
@extend .faded-hr-divider;
bottom: 0px;
content: "";
display: block;
position: absolute;
}
h3 {
color: $base-font-color;
font: normal 2.2rem/2.4rem $sans-serif;
padding-bottom: 20px;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4);
text-transform: uppercase;
vertical-align: middle;
img {
@include inline-block;
display: none;
height: 60px;
margin-right: 10px;
vertical-align: middle;
}
}
}
form {
@include clearfix;
label {
display: none;
}
label.remember-me {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
display: block;
margin-bottom: 40px;
padding: 6px 10px;
}
input[type="checkbox"] {
margin-right: 5px;
}
input[type="email"],
input[type="password"] {
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%;
}
input[type="submit"] {
display: block;
height: 45px;
margin: 0 auto;
width: 50%;
}
}
.login-extra {
margin-top: 40px;
padding: 20px 0px;
position: relative;
@include transition(opacity 0.15s linear);
&:hover {
p {
opacity: 1;
}
}
&::before {
@extend .faded-hr-divider;
content: "";
display: block;
position: absolute;
top: 0px;
}
p {
color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif;
opacity: 0.7;
text-align: center;
a {
color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif;
text-decoration: underline;
}
span + a {
border-left: 1px solid rgb(200,200,200);
margin-left: 10px;
padding-left: 10px;
}
}
}
.close-modal {
background: rgba(200,200,200, 0.7);
border: 1px solid rgba(180,180,180, 0.7);
@include border-radius(50px);
@include inline-block;
padding: 4px;
position: absolute;
right: -16px;
top: -16px;
@include transition(all, 0.15s, ease-out);
.inner {
background: rgb(255,255,255);
border: 1px solid rgb(180,180,180);
@include border-radius(50px);
@include box-shadow(0 1px 0 0 rgba(255, 255, 255, 0.3));
height: 26px;
width: 26px;
p {
color: rgb(210,210,210);
font: normal 15px/17px $sans-serif;
padding-top: 4px;
text-align: center;
text-shadow: 0 -1px rgba(0,0,0, 0.3);
@include transition(all, 0.15s, ease-out);
}
}
&:hover {
background: rgba(200,200,200, 1);
border: 1px solid rgba(180,180,180, 1);
cursor: pointer;
@include box-shadow(0 1px 3px 0 rgba(0,0,0, 0.15));
p {
color: lighten(red, 15%);
}
}
}
}
}
}
lms/static/sass/application.css
......@@ -340,7 +340,7 @@ a:link, a:visited {
.container:after {
clear: both; }
.faded-hr-divider, .home .university-partners:before, .home .university-partners:after {
.faded-hr-divider, .modal-wrapper .login-modal .inner-wrapper header::after, .modal-wrapper .login-modal .inner-wrapper .login-extra::before, .home .university-partners:before, .home .university-partners:after {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
......@@ -802,6 +802,11 @@ a:link, a:visited {
form {
font-size: 0em; }
form label {
color: #3c3c3c;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin-bottom: 5px;
text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
form input[type="text"],
form input[type="email"],
form input[type="password"] {
......@@ -1624,6 +1629,190 @@ header.app {
border-radius: 0px 3px 3px 0px;
height: 36px; }
.modal-wrapper {
background-image: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
background-image: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
background-image: -ms-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
background-image: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
background-image: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
bottom: 0;
content: "";
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 5; }
.modal-wrapper.visible {
display: block; }
.modal-wrapper .login-modal {
background: #c8c8c8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 5px 35px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 35px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 35px 0px rgba(0, 0, 0, 0.2);
color: #fff;
padding: 6px;
width: 655px;
left: 50%;
margin-left: -327.5px;
margin-top: -215px;
min-height: 430px;
min-width: 655px;
position: fixed;
top: 35%;
z-index: 10; }
.modal-wrapper .login-modal .inner-wrapper {
background: #ebebeb;
border: 1px solid #b4b4b4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 1px 0 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 1px 0 0 rgba(255, 255, 255, 0.3);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 1px 0 0 rgba(255, 255, 255, 0.3);
height: 410px;
padding: 30px;
position: relative; }
.modal-wrapper .login-modal .inner-wrapper header {
margin-bottom: 30px;
position: relative; }
.modal-wrapper .login-modal .inner-wrapper header::after {
bottom: 0px;
content: "";
display: block;
position: absolute; }
.modal-wrapper .login-modal .inner-wrapper header h3 {
color: #3c3c3c;
font: normal 2.2rem/2.4rem "Open Sans", Verdana, Geneva, sans-serif;
padding-bottom: 20px;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
text-transform: uppercase;
vertical-align: middle; }
.modal-wrapper .login-modal .inner-wrapper header h3 img {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
display: none;
height: 60px;
margin-right: 10px;
vertical-align: middle; }
.modal-wrapper .login-modal .inner-wrapper form {
zoom: 1; }
.modal-wrapper .login-modal .inner-wrapper form:before, .modal-wrapper .login-modal .inner-wrapper form:after {
content: "";
display: table; }
.modal-wrapper .login-modal .inner-wrapper form:after {
clear: both; }
.modal-wrapper .login-modal .inner-wrapper form label {
display: none; }
.modal-wrapper .login-modal .inner-wrapper form label.remember-me {
background: #e6e6e6;
border: 1px solid #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: block;
margin-bottom: 40px;
padding: 6px 10px; }
.modal-wrapper .login-modal .inner-wrapper form input[type="checkbox"] {
margin-right: 5px; }
.modal-wrapper .login-modal .inner-wrapper form input[type="email"],
.modal-wrapper .login-modal .inner-wrapper form input[type="password"] {
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%; }
.modal-wrapper .login-modal .inner-wrapper form input[type="submit"] {
display: block;
height: 45px;
margin: 0 auto;
width: 50%; }
.modal-wrapper .login-modal .inner-wrapper .login-extra {
margin-top: 40px;
padding: 20px 0px;
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; }
.modal-wrapper .login-modal .inner-wrapper .login-extra:hover p {
opacity: 1; }
.modal-wrapper .login-modal .inner-wrapper .login-extra::before {
content: "";
display: block;
position: absolute;
top: 0px; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p {
color: #a0a0a0;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
opacity: 0.7;
text-align: center; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p a {
color: #a0a0a0;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-decoration: underline; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p span + a {
border-left: 1px solid #c8c8c8;
margin-left: 10px;
padding-left: 10px; }
.modal-wrapper .login-modal .inner-wrapper .close-modal {
background: rgba(200, 200, 200, 0.7);
border: 1px solid rgba(180, 180, 180, 0.7);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
padding: 4px;
position: absolute;
right: -16px;
top: -16px;
-webkit-transition: all, 0.15s, ease-out;
-moz-transition: all, 0.15s, ease-out;
-ms-transition: all, 0.15s, ease-out;
-o-transition: all, 0.15s, ease-out;
transition: all, 0.15s, ease-out; }
.modal-wrapper .login-modal .inner-wrapper .close-modal .inner {
background: white;
border: 1px solid #b4b4b4;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
height: 26px;
width: 26px; }
.modal-wrapper .login-modal .inner-wrapper .close-modal .inner p {
color: #d2d2d2;
font: normal 15px/17px "Open Sans", Verdana, Geneva, sans-serif;
padding-top: 4px;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
-webkit-transition: all, 0.15s, ease-out;
-moz-transition: all, 0.15s, ease-out;
-ms-transition: all, 0.15s, ease-out;
-o-transition: all, 0.15s, ease-out;
transition: all, 0.15s, ease-out; }
.modal-wrapper .login-modal .inner-wrapper .close-modal:hover {
background: #c8c8c8;
border: 1px solid #b4b4b4;
cursor: pointer;
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15); }
.modal-wrapper .login-modal .inner-wrapper .close-modal:hover p {
color: #ff4d4d; }
.home {
margin: 50px 10px 100px; }
.home > header {
......
lms/static/sass/application.scss
@import 'bourbon/bourbon';
@import 'reset';
@import 'base';
@import 'base_mixins';
@import 'base_extends';
@import 'base_animations';
......@@ -9,6 +10,7 @@
@import 'shared_header';
@import 'shared_list_of_courses';
@import 'shared_course_filter';
@import 'shared_login_modal';
@import 'index';
@import 'dashboard';
......
lms/templates/index.html
......@@ -54,5 +54,7 @@
</section>
</section>
<%include file="login_modal.html" />
</section>
</section>
lms/templates/login_modal.html 0 → 100644
<%namespace name='static' file='static_content.html'/>
<section class="modal-wrapper">
<section class="login-modal">
<div class="inner-wrapper">
<header>
<h3><img src="${static.url('images/edx_bw.png')}">Log In</h3>
</header>
<form id="login_form" method="post">
<label>E-mail</label>
<input name="email" type="email" placeholder="e-mail">
<label>Password</label>
<input name="password" type="password" placeholder="password">
<label class="remember-me">
<input name="remember" type="checkbox">
Remember me
</label>
<input name="submit" type="submit" value="Log In">
</form>
<section class="login-extra">
<p>
<span>Not enrolled? <a href="#">Sign up here.</a></span>
<a href="#" class="pwd-reset">Forgot your password?</a>
</p>
</section>
<div class="close-modal">
<div class="inner">
<p>✖</p>
</div>
</div>
</div>
</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