1 files changed, 39 insertions, 19 deletions

diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 31a239387..df10da77c 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -4,11 +4,17 @@
   &.is-active {
     background: $dark-theme-gray;
 
-    .tab-item__icon { margin-left: -4px; }
+    .tab-item__icon {
+      margin-left: -4px;
+    }
   }
 
-  &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); }
-  .tab-item__icon { width: 34px; }
+  &.is-disabled .tab-item__icon {
+    filter: grayscale(100%) opacity(0.2);
+  }
+  .tab-item__icon {
+    width: 34px;
+  }
 }
 
 .tabs {
@@ -29,22 +35,34 @@
   justify-content: center;
   min-height: 50px;
   position: relative;
-  transition: background $theme-transition-time;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background $theme-transition-time;
+  }
   width: $theme-sidebar-width;
 
   &.is-active {
-    background: change-color($theme-brand-primary,
-                             $lightness: min(lightness($theme-brand-primary) * 1.35, 100));
+    background: change-color(
+      $theme-brand-primary,
+      $lightness: min(lightness($theme-brand-primary) * 1.35, 100)
+    );
     border-left-width: 4px;
     border-left-style: solid;
     color: $theme-brand-primary;
 
-    .tab-item__icon { margin-left: -4px; }
+    .tab-item__icon {
+      margin-left: -4px;
+    }
   }
 
-  &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); }
-  &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; }
-  &:active .tab-item__icon { opacity: .7; }
+  &.is-disabled .tab-item__icon {
+    filter: grayscale(100%) opacity(0.2);
+  }
+  &.has-custom-icon .tab-item__icon {
+    border-radius: $theme-border-radius;
+  }
+  &:active .tab-item__icon {
+    opacity: 0.7;
+  }
 
   .tab-item__icon {
     height: auto;
@@ -56,7 +74,7 @@
     background: $theme-brand-danger;
     border-radius: 20px;
     bottom: 8px;
-    color: #FFF;
+    color: #fff;
     display: flex;
     font-size: 11px;
     justify-content: center;
@@ -66,13 +84,13 @@
     position: absolute;
     right: 8px;
 
-    &.is-indirect { 
+    &.is-indirect {
       padding-top: 0;
       background: #0088cc;
-        }
-    &.hibernating { 
-      padding-top: 0; 
-      background: $theme-gray; 
+    }
+    &.hibernating {
+      padding-top: 0;
+      background: $theme-gray;
       font-size: 0px;
       min-height: 10px;
       min-width: 10px;
@@ -96,11 +114,13 @@
     right: 8px;
     width: 17px;
 
-    &.is-indirect { 
+    &.is-indirect {
       padding-top: 0;
       background: #0088cc;
-        }
+    }
   }
 
-  &.is-reordering { z-index: 99999; }
+  &.is-reordering {
+    z-index: 99999;
+  }
 }