Travis GCC option + UI enhancements

client/scss/app.scss

@@ -1,5 +1,6 @@
 //@import './layout/_fonts';
 @import './layout/_base';
+@import './layout/_mixins';
 
 $red: #E53935;
 $orange: #FB8C00;

client/scss/layout/_content.scss

@@ -110,6 +110,15 @@ p code {
 
 .card-header {
 	background-color: $turquoise;
+
+	&.is-warning {
+		background-color: $orange;
+	}
+
+	&.is-danger {
+		background-color: $red;
+	}
+
 }
 
 .card-header-title {
@@ -121,4 +130,8 @@ p code {
 
 .modal-content .card-footer-item {
 	font-weight: 500;
+}
+
+.modal-content .card-footer-item.featured {
+	animation: flash 4s ease 0 infinite;
 }

client/scss/layout/_header.scss

@@ -2,4 +2,23 @@
 h2.nav-item {
 	font-size: 150%;
 	color: $orange;
+}
+
+#notifload {
+	width: 42px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	opacity: 0;
+	transition: opacity .5s ease;
+
+	&::before {
+		content: " ";
+		@include spinner($orange,0.5s,24px);
+	}
+
+	&.active {
+		opacity: 1;
+	}
+
 }

client/scss/layout/_mixins.scss

@@ -0,0 +1,85 @@
+/**
+ * Clearfix
+ *
+ * @return     {string}  Clearfix attribute
+ */
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+/**
+ * Placeholder attribute for inputs
+ *
+ * @return     {string}  Placeholder attributes
+ */
+@mixin placeholder {
+	&::-webkit-input-placeholder {@content};
+	&::-moz-placeholder {@content}
+	&:-ms-input-placeholder {@content}
+	&:placeholder-shown {@content};
+}
+
+/**
+ * Spinner element
+ *
+ * @param      {string}  $color             - Color
+ * @param      {string}  $dur               - Animation Duration
+ * @param      {int}     $width             - Width
+ * @param      {int}     $height  [$width]  - height
+ *
+ * @return     {string}  Spinner element
+ */
+@mixin spinner($color,$dur,$width,$height:$width) {
+	width: $width;
+	height: $height;
+	border-radius: 50%;
+	box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
+	@include prefix(animation, spin $dur linear infinite);
+	@include keyframes(spin) {
+		100%{
+		 @include prefix(transform, rotate(360deg));
+		}
+	};
+}
+
+/**
+ * Prefixes for keyframes
+ *
+ * @param      {string}  $animation-name          - The animation name
+ *
+ * @return     {string}  Prefixed keyframes attributes
+ */
+@mixin keyframes($animation-name) {
+    @-webkit-keyframes #{$animation-name} {
+        @content;
+    }
+    @-moz-keyframes #{$animation-name} {
+        @content;
+    }
+    @-o-keyframes #{$animation-name} {
+        @content;
+    }  
+    @keyframes #{$animation-name} {
+        @content;
+    }
+}
+
+/**
+ * Prefix function for browser compatibility
+ *
+ * @param      {string}  $property          - Property name
+ * @param      {any}     $value             - Property value
+ *
+ * @return     {string}  Prefixed attributes
+ */
+@mixin prefix($property, $value) {
+  -webkit-#{$property}: #{$value};
+     -moz-#{$property}: #{$value};
+      -ms-#{$property}: #{$value};
+       -o-#{$property}: #{$value};
+          #{$property}: #{$value};
+}