From 1fa82b9dea9954b08124bd3ab44869fef9070137 Mon Sep 17 00:00:00 2001
From: Thomas Ip <hkmp7tommy@gmail.com>
Date: Thu, 20 Jun 2019 17:47:08 +0800
Subject: [PATCH] refactor: Extract display and animation properties from alert
 styling.

---
 static/styles/alerts.scss | 44 +++++++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/static/styles/alerts.scss b/static/styles/alerts.scss
index 8b4ae6febf..dea20925d0 100644
--- a/static/styles/alerts.scss
+++ b/static/styles/alerts.scss
@@ -1,10 +1,32 @@
-/* general alert styling changes */
-.alert {
+.alert-display {
     display: none;
 
     &.show {
         display: block;
     }
+}
+
+.alert-animations {
+    &.show {
+        animation-name: fadeIn;
+        animation-duration: 0.3s;
+        animation-fill-mode: forwards;
+    }
+
+    &.fade-out {
+        animation-name: fadeOut;
+        animation-duration: 0.3s;
+        animation-fill-mode: forwards;
+    }
+
+    .faded {
+        opacity: 0.7;
+    }
+}
+
+/* general alert styling changes */
+.alert {
+    @extend .alert-display;
 
     &#organization-status {
         margin: 20px;
@@ -25,6 +47,8 @@
     z-index: 220;
 
     .alert {
+        @extend .alert-animations;
+
         font-size: 1rem;
         border-radius: 4px;
         background-color: hsl(0, 0%, 100%);
@@ -42,22 +66,6 @@
         border: 1px solid hsl(16, 60%, 45%);
         box-shadow: 0 0 2px hsl(16, 60%, 45%);
 
-        &.show {
-            animation-name: fadeIn;
-            animation-duration: 0.3s;
-            animation-fill-mode: forwards;
-        }
-
-        &.fade-out {
-            animation-name: fadeOut;
-            animation-duration: 0.3s;
-            animation-fill-mode: forwards;
-        }
-
-        .faded {
-            opacity: 0.7;
-        }
-
         &::before {
             position: absolute;
             top: 10px;