From b5b339cdfde254367eccd49d296178314a159ba7 Mon Sep 17 00:00:00 2001
From: Gareth Coles <gdude2002@gmail.com>
Date: Tue, 12 Jun 2018 13:43:46 +0100
Subject: [Jams] Approvals interface

---
 scss/pysite/_uikit_shim.scss         | 24 +++++++++++
 scss/pysite/_variables.scss          |  8 ++++
 scss/pysite/pages/staff/_common.scss | 79 ++++++++++++++++++++++++++++++++++++
 scss/pysite/style.scss               | 12 +++---
 4 files changed, 117 insertions(+), 6 deletions(-)
 create mode 100644 scss/pysite/pages/staff/_common.scss

(limited to 'scss')

diff --git a/scss/pysite/_uikit_shim.scss b/scss/pysite/_uikit_shim.scss
index 74104288..312d717a 100644
--- a/scss/pysite/_uikit_shim.scss
+++ b/scss/pysite/_uikit_shim.scss
@@ -112,3 +112,27 @@ footer {
   padding-left: 40px;
   padding-right: 40px;
 }
+
+// Custom success button
+
+.uk-button-success {
+  background-color: $success_colour;
+  border: 1px solid transparent;
+  color: $white;
+}
+
+.uk-button-success:hover,
+.uk-button-success:focus {
+  background-color: darken($success_colour, 5%);
+}
+
+.uk-button-success:active,
+.uk-button-success.uk-active {
+  background-color: darken($success_colour, 10%);
+}
+
+.uk-button-success:disabled {
+  background-color: $white !important;
+  border: 1px solid $global_border;
+  color: $muted_colour !important;
+}
diff --git a/scss/pysite/_variables.scss b/scss/pysite/_variables.scss
index 4b249387..411444fc 100644
--- a/scss/pysite/_variables.scss
+++ b/scss/pysite/_variables.scss
@@ -4,5 +4,13 @@
 $white: #FFFFFF;
 $black: #000000;
 $red: #FF0000;
+$green: #00FF00;
+
+$success_colour: #32D296;
+$danger_colour: #F0506E;
+$muted_colour: #999999;
 
 $primary_background: #7289DA;
+$muted_background: #F8F8F8;
+
+$global_border: #E5E5E5;
diff --git a/scss/pysite/pages/staff/_common.scss b/scss/pysite/pages/staff/_common.scss
new file mode 100644
index 00000000..725f4197
--- /dev/null
+++ b/scss/pysite/pages/staff/_common.scss
@@ -0,0 +1,79 @@
+@import "variables";
+
+$quote_colour: #99AAB5;
+$sidebar_button_border_colour: rgba(0, 0, 0, .11);
+
+$page_classes: (
+  blueprint-staff,  // All wiki pages
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .approval-card {
+      border: 1px solid $global_border;
+      padding: 0;
+
+      h2 {
+        margin-bottom: 0;
+        vertical-align: central;
+      }
+
+      .expand-icon {
+        display: none;
+      }
+
+      .contract-icon {
+        display: inline-block;
+      }
+
+      .uk-button {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+
+      .uk-card-body {
+        border-top: 1px solid $global_border;
+        padding-top: 20px;
+      }
+
+      .status-icon.fa-check {
+        color: $success_colour;
+      }
+
+      .status-icon.fa-times {
+        color: $danger_colour;
+      }
+
+      .approved {
+        .status-icon.fa-times {
+          display: none;
+        }
+      }
+
+      .unapproved {
+        .status-icon.fa-check {
+          display: none;
+        }
+      }
+
+      &.collapsed {
+        .expand-icon {
+          display: inline-block;
+        }
+
+        .contract-icon {
+          display: none;
+        }
+
+        .uk-card-header {
+          border-bottom: 0;
+        }
+
+        .uk-card-body {
+          display: none;
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
diff --git a/scss/pysite/style.scss b/scss/pysite/style.scss
index 09396faf..bd0ed3bc 100644
--- a/scss/pysite/style.scss
+++ b/scss/pysite/style.scss
@@ -52,6 +52,8 @@
 @import "pages/main/jams/join";
 
 // Sectional: Staff Blueprint
+@import "pages/staff/common";
+
 @import "pages/staff/jams/edit_ending";
 @import "pages/staff/jams/edit_info";
 
@@ -73,8 +75,6 @@
   put it in the UIKit shim file instead.
 */
 
-$table_border_colour: rgb(229, 229, 229);
-
 html {
   height: 100%;
 
@@ -145,21 +145,21 @@ div.danger-input * {
 // Tables
 
 table.table-bordered {
-  border: 1px solid $table_border_colour !important;
+  border: 1px solid $global_border !important;
 }
 
 tr.thick-bottom-border {
-  border-bottom: 3px solid $table_border_colour !important;
+  border-bottom: 3px solid $global_border !important;
 }
 
 td.left-border,
 th.left-border {
-  border-left: 1px solid $table_border_colour !important;
+  border-left: 1px solid $global_border !important;
 }
 
 td.right-border,
 th.right-border {
-  border-right: 1px solid $table_border_colour !important;
+  border-right: 1px solid $global_border !important;
 }
 
 // Flash of Unstyled Content fixes
-- 
cgit v1.2.3