Merge branch 'master' into landing-page

app/assets/stylesheets/application.css.scss

@@ -25,6 +25,7 @@ $light: #fff;
 
 @import 'bulma/bulma';
 
+@import "checkmark-icon";
 @import './demo';
 
 .is-font-logo {
@@ -35,6 +36,10 @@ $light: #fff;
   height: 100%;
 }
 
+.is-vcentered {
+  height: 100vh;
+}
+
 .content {
   padding: 30px 60px 50px;
 
@@ -43,8 +48,6 @@ $light: #fff;
   }
 }
 
-
-
 body {
   min-height: 100vh;
 }
@@ -59,10 +62,11 @@ body {
 }
 
 .table-wrapper {
+  overflow: auto;
+  overflow-y: scroll;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
-
 /* 
 Colours 
 #FFFFFF - White
@@ -302,3 +306,16 @@ Footer
 #footer a {
     color: #FFFFFF !important;
 }
+.submission-table tbody {
+  font-size: 0.75em;
+}
+
+.inline-svg svg {
+  display: inline
+}
+
+.svg-icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}

app/assets/stylesheets/checkmark-icon.css.scss

@@ -0,0 +1,89 @@
+@-webkit-keyframes checkmark {
+  0% {
+    stroke-dashoffset: 100px
+  }
+
+  100% {
+    stroke-dashoffset: 200px
+  }
+}
+
+@-ms-keyframes checkmark {
+  0% {
+    stroke-dashoffset: 100px
+  }
+
+  100% {
+    stroke-dashoffset: 200px
+  }
+}
+
+@keyframes checkmark {
+  0% {
+    stroke-dashoffset: 100px
+  }
+
+  100% {
+    stroke-dashoffset: 0px
+  }
+}
+
+@-webkit-keyframes checkmark-circle {
+  0% {
+    stroke-dashoffset: 480px
+  }
+
+  100% {
+    stroke-dashoffset: 960px;
+
+  }
+}
+
+@-ms-keyframes checkmark-circle {
+  0% {
+    stroke-dashoffset: 240px
+  }
+
+  100% {
+    stroke-dashoffset: 480px
+  }
+}
+
+@keyframes checkmark-circle {
+  0% {
+    stroke-dashoffset: 480px
+  }
+
+  100% {
+    stroke-dashoffset: 960px
+  }
+}
+
+@keyframes colored-circle {
+  0% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: 100
+  }
+}
+
+.svg-icon-checkmark svg polyline {
+  -webkit-animation: checkmark 0.30s ease-in-out 0.9s backwards;
+  animation: checkmark 0.30s ease-in-out 0.9s backwards
+}
+
+.svg-icon-checkmark svg g {
+  stroke: $success;
+}
+.svg-icon-checkmark svg circle {
+  -webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
+  animation: checkmark-circle 0.8s ease-in-out backwards;
+}
+
+.svg-icon-checkmark svg circle#colored {
+  -webkit-animation: colored-circle 0.8s ease-in-out 0.9s backwards;
+  animation: colored-circle 0.8s ease-in-out 0.9s backwards;
+  fill: $success;
+}