Added in Modals

This commit is contained in:
Matthew Harrison-Jones 2013-07-22 16:31:44 +01:00
parent c2ac06cf0c
commit 7111960fac
4 changed files with 96 additions and 1 deletions

View File

@ -26,4 +26,14 @@
@keyframes off-canvas {
0% { opacity: 0; }
100% { opacity: 1; }
}
}
@include keyframes(fadeIn) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

View File

@ -889,6 +889,83 @@ nav {
background: $blue;
}
/* ==========================================================================
Modals
========================================================================== */
#modal-container {
&.active {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
&.dark {
background: rgba(0,0,0,0.4);
}
}
}
body.blur > *:not(#modal-container) {
-webkit-filter: blur(2px);
filter: blur(2px); // Not used yet
}
%modal, .modal {
@include box-sizing(border-box);
position: fixed;
top: 10%;
left: 50%;
width: 450px;
padding: 0px;
margin-left: -225px;
background: #FFFFFF;
border: 6px solid rgba(0,0,0,0.5);
border-radius: $rounded;
&.fadeIn {
@include animation(fadeIn 0.3s linear 1);
}
}
.modal-header {
position: relative;
padding: 20px;
border-bottom: 1px solid $lightgrey;
h1 {
display: inline-block;
margin: 0;
font-size: 1.5em;
font-weight: bold;
}
.close {
@include box-sizing(border-box);
position: absolute;
top: 10px;
right: 20px;
width: 16px;
min-height: 16px;
padding: 0;
margin: 0;
border: none;
opacity: 0.4;
@include icon($i-close, 1em, $midgrey);
@include transition(opacity 0.3s linear);
&:hover{
opacity: 1;
}
}
}
.modal-content {
padding: 20px;
}
/* ==========================================================================
Main Elements
========================================================================== */

View File

@ -0,0 +1,6 @@
<article class="modal{{#if type}}-{{type}}{{/if}} {{animation}} js-modal">
<header class="modal-header"><h1>{{title}}</h1><a class="close" href="#"><span class="hidden">Close</span></a></header>
<section class="modal-content">
{{{content}}}
</section>
</article>

View File

@ -34,6 +34,8 @@
{{{body}}}
</main>
<aside id="modal-container">
</aside>
<script src="/public/vendor/jquery/jquery.min.js"></script>
<script src="/public/vendor/icheck/jquery.icheck.min.js"></script>
<script src="/public/vendor/underscore.js"></script>