From ec1510ca520836deb0084384f951563a7a8dbf56 Mon Sep 17 00:00:00 2001
From: Galen Frechette <galen@thoughtbot.com>
Date: Wed, 20 Jun 2012 16:20:31 -0400
Subject: [PATCH] adds login modal

---
 lms/static/sass/_base_mixins.scss        |   9 ++
 lms/static/sass/_shared_forms.scss       |   7 +
 lms/static/sass/_shared_login_modal.scss | 185 ++++++++++++++++++++++
 lms/static/sass/application.css          | 191 ++++++++++++++++++++++-
 lms/static/sass/application.scss         |   2 +
 lms/templates/index.html                 |   2 +
 lms/templates/login_modal.html           |  36 +++++
 7 files changed, 431 insertions(+), 1 deletion(-)
 create mode 100644 lms/static/sass/_base_mixins.scss
 create mode 100644 lms/static/sass/_shared_login_modal.scss
 create mode 100644 lms/templates/login_modal.html

diff --git a/lms/static/sass/_base_mixins.scss b/lms/static/sass/_base_mixins.scss
new file mode 100644
index 0000000000..7fd69b62be
--- /dev/null
+++ b/lms/static/sass/_base_mixins.scss
@@ -0,0 +1,9 @@
+@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%;
+}
diff --git a/lms/static/sass/_shared_forms.scss b/lms/static/sass/_shared_forms.scss
index 42af7ceb98..2e2c68e7c6 100644
--- a/lms/static/sass/_shared_forms.scss
+++ b/lms/static/sass/_shared_forms.scss
@@ -1,6 +1,13 @@
 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"] {
diff --git a/lms/static/sass/_shared_login_modal.scss b/lms/static/sass/_shared_login_modal.scss
new file mode 100644
index 0000000000..9155464a57
--- /dev/null
+++ b/lms/static/sass/_shared_login_modal.scss
@@ -0,0 +1,185 @@
+.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%);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css
index f045dcb3cf..26f4300492 100755
--- a/lms/static/sass/application.css
+++ b/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 {
diff --git a/lms/static/sass/application.scss b/lms/static/sass/application.scss
index 28bb5bda83..836f461195 100644
--- a/lms/static/sass/application.scss
+++ b/lms/static/sass/application.scss
@@ -1,6 +1,7 @@
 @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';
diff --git a/lms/templates/index.html b/lms/templates/index.html
index 13799f47f0..3ed8f1326c 100644
--- a/lms/templates/index.html
+++ b/lms/templates/index.html
@@ -54,5 +54,7 @@
       </section>
     </section>
 
+    <%include file="login_modal.html" />
+
   </section>
 </section>
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
new file mode 100644
index 0000000000..3bb9801435
--- /dev/null
+++ b/lms/templates/login_modal.html
@@ -0,0 +1,36 @@
+<%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>