Lightbox for new US

app/backlog.jade

@@ -24,3 +24,5 @@ block content
         include views/modules/backlog-table
     sidebar.menu-secondary.sidebar
         include views/modules/sprints
+    div.lightbox.lightbox_add-new-us
+        include views/modules/lightbox_add-new-us

app/styles/components/buttons.scss

@@ -14,8 +14,7 @@
 .button{
     font-family: 'ostrichSans';
     @extend .large;
-    padding: 5px 40px;
-    height: 32px;
+    padding: 8px 40px;
     display: inline-block;
     .icon {
         margin-right: .3rem;

app/styles/dependencies/forms.scss

@@ -11,11 +11,11 @@ fieldset{
     }
 }
 
-input[type="text"], input[type="email"], textarea{
+input[type="text"], input[type="email"], select, textarea{
     font-family: 'ostrichSans';
     @extend .large;
-    padding: 5px;
-    height: 32px;
+    padding: 8px;
+    height: 40px;
     background: $grayLight;
     width: 100%;
     border: 0;

app/styles/dependencies/mixins.scss

@@ -4,3 +4,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+@mixin background-opacity($color: $white, $opacity: 0.3) {
+    background: $color; /* The Fallback */
+    background: rgba($color, $opacity);
+}

app/styles/dependencies/typography.scss

@@ -38,6 +38,12 @@ h1 {
     }
 }
 
+h2 {
+    @extend .xlarge;
+    font-family: 'ostrichSans';
+    margin-bottom: 1rem;
+}
+
 p { margin: 0 0 20px 0;
     img {
         margin: 0;

app/styles/main.scss

@@ -37,6 +37,7 @@ $prefix-for-spec:      true;
 @import 'modules/burndown';
 @import 'modules/backlog-table';
 @import 'modules/filters';
+@import 'modules/lightbox';
 
 // Responsive
 @import 'responsive/mobile';

app/styles/modules/lightbox.scss

@@ -0,0 +1,107 @@
+.lightbox {
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    @include background-opacity( $white, .9);
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    .close {
+        position: absolute;
+        top: 2rem;
+        right: 2rem;
+        @extend .large;
+    }
+    .title {
+        text-align: center;
+    }
+    input, select {
+        margin-bottom: 1rem;
+    }
+    textarea {
+        resize:vertical;
+    }
+    .button-green {
+        display: block;
+        text-align: center;
+        padding: 12px;
+    }
+}
+
+.lightbox_add-new-us{
+    form {
+        width: 600px;
+        min-width: 600px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: 0;
+    }
+    textarea {
+        min-height: 7rem;
+        max-height: 9rem;
+        margin-bottom: 1rem;
+    }
+    .new-us-settings {
+        display:flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-content: flex-start;
+        align-items: stretch;
+        margin-bottom: 1rem;
+        fieldset {
+            flex-grow: 1;
+            flex-shrink: 0;
+            flex-basis: 30%;
+            text-align: center;
+            margin-right: .5rem;
+            &:last-child {
+                margin: 0;
+            }
+        }
+        label{
+            @extend .button;
+            border: 1px solid $grayLight;
+            display: block;
+            cursor: pointer;
+            @include transition( all .2s ease-in );
+        }
+        .requirement{
+            &:hover {
+                background: $freshTaiga;
+                color: $white;
+                border: 1px solid $freshTaiga;
+                @include transition( all .2s ease-in );
+            }
+        }
+        .requirement-selected {
+            background: $greenTaiga;
+            color: $white;
+            border: 1px solid $greenTaiga;
+            @include transition( all .2s ease-in );
+        }
+        .blocked {
+            &:hover {
+                background: $redLight;
+                color: $white;
+                border: 1px solid $redLight;
+                @include transition( all .2s ease-in );
+            }
+        }
+        .blocked-selected {
+            background: $red;
+            color: $white;
+            border: 1px solid $red;
+            @include transition( all .2s ease-in );
+        }
+        input[type="checkbox"] {
+            display: none;
+        }
+    }
+}

app/views/modules/lightbox_add-new-us.jade

@@ -0,0 +1,26 @@
+a.close(href="", title="close")
+    span.icon.icon-delete
+form
+    h2.title New User Story
+    fieldset
+        input(type="text", placeholder="Subject")
+    fieldset
+        select
+            option(selected, value="open") Open
+            option(selected, value="closed") Closed
+    fieldset
+        input(type="text", placeholder="Tags")
+    fieldset
+        textarea
+    div.new-us-settings
+        fieldset
+            label.requirement(for="team-requirement") Team Requirement
+            input(type="checkbox", name="team-requirement", id="team-requirement")
+        fieldset
+            label.requirement(for="client-requirement") Team Requirement
+            input(type="checkbox", name="client-requirement", id="client-requirement")
+        fieldset
+            label.blocked(for="blocked-us") Blocked
+            input(type="checkbox", name="blocked-us", id="blocked-us")
+    a.button.button-green(href="", title="Save")
+        span Save