Update stylesheets and added darkMode variable and toggle.

1 files changed, 12 insertions, 22 deletions

diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss
index 47dfea2c4..ca3820fb4 100644
--- a/src/styles/content-tabs.scss
+++ b/src/styles/content-tabs.scss
@@ -2,53 +2,43 @@
 
 .content-tabs {
   .content-tabs__tabs {
-    display: flex;
     border-top-left-radius: $theme-border-radius-small;
     border-top-right-radius: $theme-border-radius-small;
+    display: flex;
     overflow: hidden;
 
     .content-tabs__item {
-      padding: 10px;
-      flex: 1;
-      // border: 1px solid $theme-gray-lightest;
-      color: $theme-gray-dark;
       background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%));
       border-right: 1px solid $theme-gray-lighter;
+      color: $theme-gray-dark;
+      flex: 1;
+      padding: 10px;
       transition: background $theme-transition-time;
 
-      &:last-of-type {
-        border-right: 0;
-      }
+      &:last-of-type { border-right: 0; }
 
       &.is-active {
         background: $theme-brand-primary;
-        color: #FFF;
         box-shadow: none;
+        color: #FFF;
       }
     }
   }
 
   .content-tabs__content {
-    padding: 20px 20px;
+    background: $theme-gray-lightest;
     border-bottom-left-radius: $theme-border-radius-small;
     border-bottom-right-radius: $theme-border-radius-small;
-    background: $theme-gray-lightest;
+    padding: 20px 20px;
 
     .content-tabs__item {
-      top: 0;
       display: none;
+      top: 0;
 
-      &.is-active {
-        display: block;
-      }
-    }
-
-    .franz-form__input-wrapper {
-      background: #FFF;
+      &.is-active { display: block; }
     }
 
-    .franz-form__field:last-of-type {
-      margin-bottom: 0;
-    }
+    .franz-form__input-wrapper { background: #FFF; }
+    .franz-form__field:last-of-type { margin-bottom: 0; }
   }
 }