💫 Updating animations and transitions

assets/css/styles.scss

@@ -71,10 +71,7 @@ body {
 
 // Make theme transition smoother.
 body.afterLoad {
-  &,
-  & * {
-    transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
-  }
+  transition: all 0.2s ease-in-out;
 }
 
 body.sticky-footer footer {
@@ -450,7 +447,7 @@ fieldset {
   margin: 16px 0;
   border: 1px solid var(--brd-color);
   border-radius: 8px;
-  background-color: var(--bg-color);
+  transition: all 0.2s ease-in-out;
 }
 
 legend {
@@ -813,10 +810,6 @@ input[type="radio"]:checked + label + .tab {
   margin-left: 16px;
 }
 
-.bg-color {
-  background-color: var(--bg-color);
-}
-
 @media (max-width: $responsiveWidth) {
   .content {
     flex-flow: column;
@@ -832,6 +825,7 @@ input[type="radio"]:checked + label + .tab {
     bottom: 0;
     width: 100%;
     background-color: var(--bg-color);
+    transition: all 0.2s ease-in-out;
   }
 
   nav.primary-nav {

components/history.vue

@@ -311,6 +311,10 @@ ol li {
   padding: 16px 0;
 }
 
+.bg-color {
+  background-color: var(--bg-color);
+}
+
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;

components/modal.vue

@@ -45,11 +45,11 @@
   flex-grow: 1;
   flex-direction: column;
   margin: 8px;
-  padding: 12px;
+  padding: 16px;
   transition: all 0.2s ease;
   background-color: var(--bg-color);
   border-radius: 8px;
-  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+  box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
 }
 
 /*

components/settings/swatch.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="color" :data-color="color" :class="{ active: active }" v-tooltip="{ content: name || color }">
+  <div
+    class="color"
+    :data-color="color"
+    :class="{ active: active }"
+    v-tooltip="{ content: name || color }"
+  >
     <span :style="{ backgroundColor: color }" class="preview">
       <i v-if="active" class="material-icons activeTick">done</i>
     </span>
@@ -15,6 +20,7 @@
   border-radius: 100%;
   border: 3px solid var(--bg-dark-color);
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
 
   &.fg {
     color: var(--act-color);

nuxt.config.js

@@ -34,7 +34,7 @@ export default {
   render: {
     bundleRenderer: {
       shouldPreload: (file, type) => {
-        return ['script', 'style', 'font'].includes(type)
+        return ["script", "style", "font"].includes(type);
       }
     }
   },

pages/graphql.vue

@@ -410,6 +410,7 @@ export default {
       const startTime = Date.now();
 
       this.$nuxt.$loading.start();
+      this.scrollInto("response");
 
       try {
         let headers = {};
@@ -462,6 +463,7 @@ export default {
     async getSchema() {
       const startTime = Date.now();
       this.schemaString = "Loading...";
+      this.scrollInto("schema");
 
       // Start showing the loading bar as soon as possible.
       // The nuxt axios module will hide it when the request is made.
@@ -628,6 +630,11 @@ export default {
         }
       });
       console.log(oldHeaders);
+    },
+    scrollInto(view) {
+      this.$refs[view].$el.scrollIntoView({
+        behavior: "smooth"
+      });
     }
   }
 };