Forráskód Böngészése

Added fadeIn animation to non-build mode

Matt 9 éve
szülő
commit
d9f99eb501
1 módosított fájl, 26 hozzáadás és 2 törlés
  1. 26 2
      public/sass/pages/_dashboard.scss

+ 26 - 2
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,7 +398,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;
   // display: flex;
   // align-items: flex-start;
@@ -404,6 +406,15 @@ div.flot-text {
   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;
+  }
+}
+