Added fadeIn animation to non-build mode

mattttt · mattttt · commit d9f99eb50177 · 2016-10-28T17:09:33.000-04:00
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
@@ -219,6 +219,8 @@ div.flot-text {
   &:hover {
     .dash-row-header-actions {
       display: block;
+      opacity: 0;
+      animation: fadeIn 150ms linear 100ms forwards;
     }
   }
 
@@ -387,7 +389,7 @@ div.flot-text {
   border-left: $panel-border;
   border-bottom: $panel-border;
   border-right: $panel-border;
-  margin: 0;
+  margin: 0 0 $panel-margin*2 0;
   padding: $panel-margin*2;
   box-shadow: 0px 3px 7px -3px $black;
 }
@@ -396,14 +398,23 @@ div.flot-text {
   border-left: $panel-border;
   border-bottom: $panel-border;
   border-right: $panel-border;
-  margin: 0;
+  margin: 0 0 $panel-margin*2 0;
   padding: $panel-margin*2;
   // display: flex;
   // align-items: flex-start;
   // position: relative;
   box-shadow: 0px 3px 7px -3px $black;
 }
 
+.dash-edit-mode {
+  .dash-row-options {
+    margin-bottom: 0;
+  }
+  .dash-row-add-panel {
+    margin-bottom: 0;
+  }
+}
+
 .add-panel-panels-scroll {
   width: 100%;
   overflow: hidden;
@@ -440,3 +451,16 @@ div.flot-text {
 .add-panel-item-img {
   width: 2rem;
 }
+
+// Animations
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
