adding actions partial and related styles

opentech/apply/funds/templates/funds/applicationsubmission_detail.html

@@ -17,6 +17,7 @@
 
 <div class="wrapper wrapper--medium wrapper--inner-space-medium">
     <div class="wrapper wrapper--sidebar">
+        {% include "funds/includes/actions.html" with mobile="true" %}
         <section class="section section--has-sidebar">
             <h6 class="heading heading--submission-meta">
                 <span>Submitted: </span>{{ object.submit_time.date }} by {{ object.user.get_full_name }}
@@ -52,6 +53,8 @@
         <aside class="sidebar">
             {% include "funds/includes/progress_form.html" %}
             {% include "funds/includes/update_lead_form.html" %}
+            {% include "funds/includes/actions.html" %}
+
             {% if other_submissions %}
                 <div class="sidebar__inner">
                 <h6 class="heading heading--light-grey heading--small heading--uppercase">Past Submissions</h6>

opentech/apply/funds/templates/funds/includes/actions.html

+{% if mobile %}
+    <a class="js-actions-toggle button button--white button--full-width button--actions">Actions to take</a>
+{% endif %}
+
+<div class="js-actions-sidebar sidebar__inner sidebar__inner--light-blue sidebar__inner--actions {% if mobile %}sidebar__inner--mobile{% endif %}">
+    <h5>Actions to take</h5>
+    <a class="button button--primary button--full-width" href="#">Update status</a>
+    <p class="sidebar__separator">Assign</p>
+
+    <div class="wrapper wrapper--button-container">
+        <a class="button button--half-width button--white" href="#">Placeholder</a>
+        <a class="button button--half-width button--white" href="#">Lead</a>
+    </div>
+
+    <a class="button button--white button--full-width button--bottom-space" href="#">Placeholder</a>
+</div>

opentech/static_src/src/sass/apply/abstracts/_variables.scss

@@ -32,6 +32,8 @@ $color--black-40: rgba(0, 0, 0, 0.4);
 $color--black-20: rgba(0, 0, 0, 0.2);
 $color--black-10: rgba(0, 0, 0, 0.1);
 
+$color--light-blue-90: transparentize($color--light-blue, 0.9);
+
 // Assignment
 $color--default: $color--dark-grey;
 $color--primary: $color--light-blue;

opentech/static_src/src/sass/apply/components/_button.scss

@@ -111,5 +111,37 @@
             margin-bottom: 0;
         }
     }
+
+    &--actions {
+        position: relative;
+        display: block;
+        background-color: $color--white;
+
+        &:active {
+            background: $color--light-blue-90;
+        }
+
+        &::after {
+            position: absolute;
+            top: 0;
+            right: 15px;
+            font-size: 30px;
+            content: '+';
+        }
+
+        &.is-active {
+            color: $color--dark-blue;
+            background: $color--light-blue-90;
+
+            &::after {
+                top: -12px;
+                content: '_';
+            }
+        }
+
+        @include media-query(tablet-portrait) {
+            display: none;
+        }
+    }
 }
 

opentech/static_src/src/sass/apply/components/_sidebar.scss

 .sidebar {
-    margin-top: 20px;
-
     @include media-query(tablet-portrait) {
-        flex-basis: 345px;
-        margin: 0 20px 0 0;
+        width: 345px;
+        margin: 20px 0 0;
     }
 
     &__inner {
         padding: 20px;
+        margin-bottom: 20px;
         border: 1px solid $color--mid-grey;
+
+        &--light-blue {
+            background-color: $color--light-blue-90;
+        }
+
+        &--actions {
+            display: none;
+
+            @include media-query(tablet-portrait) {
+                display: block;
+            }
+        }
+
+        &--mobile {
+            display: none;
+
+            &.is-visible {
+                display: block;
+                border-top: 0;
+            }
+        }
+    }
+
+    &__separator {
+        position: relative;
+        font-size: 12px;
+        font-weight: $weight--bold;
+        color: $color--black-40;
+        text-transform: uppercase;
+
+        &::after {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            width: calc(100% - 60px);
+            height: 1px;
+            background-color: $color--black-20;
+            content: '';
+        }
     }
 }

opentech/static_src/src/sass/apply/components/_wrapper.scss

@@ -232,4 +232,10 @@
             flex-direction: row;
         }
     }
+
+    &--button-container {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
 }