🌞 bulma table & loading container fix

kodadot · Aug 14, 2022 · 7bd5f97 · 7bd5f97
1 parent 18ea812
commit 7bd5f97
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
diff --git a/components/shared/Loader.vue b/components/shared/Loader.vue
@@ -9,7 +9,10 @@
         </div>
         <br />
         <div class="pl-4 pr-4">
-          <b-icon size="is-large" icon="lightbulb" class="funfact-icon" />
+          <b-icon
+            size="is-large"
+            icon="lightbulb"
+            class="has-text-primary-light" />
           <div class="question">{{ randomFunFactQuestion }}</div>
         </div>
       </div>
@@ -106,9 +109,6 @@ export default class Loader extends Vue {
   border-bottom: 1px solid #fff;
   padding: 0.5rem 1rem;
 }
-.funfact-icon {
-  color: $primary-light;
-}
 .question {
   min-height: 70px;
 }

diff --git a/styles/derived-variables.scss b/styles/derived-variables.scss
@@ -19,8 +19,7 @@ $success: $green;
 // $light: $white-ter;
 $dark: $black;
 
-// // Invert colors
-
+// Invert colors
 // $orange-invert: findColorInvert($orange);
 // $yellow-invert: findColorInvert($yellow);
 // $green-invert: findColorInvert($green);
@@ -48,9 +47,8 @@ $dark: $black;
 // $light-invert: findColorInvert($light);
 // $dark-invert: findColorInvert($dark);
 
-// // General colors
+// General colors
 $scheme-main: #181717;
-// $scheme-main: $black;
 $scheme-main-bis: $black-bis;
 $scheme-main-ter: $black-ter;
 $scheme-invert: $white;
@@ -67,23 +65,20 @@ $text-light-theme: #1f1f1f;
 // $border-light: $grey-lightest;
 // $border-light-hover: $grey-light;
 
-// // Text colors
-
+// Text colors
 $text: #f8f4f6;
 // $text-invert: findColorInvert($text);
 // $text-light: $grey;
 // $text-strong: $grey-darker;
 
-// // Code colors
-
+// Code colors
 // $code: darken($red, 15%);
 // $code-background: $background;
 
 // $pre: $text;
 // $pre-background: $background;
 
-// // Link colors
-
+// Link colors
 $link: #fff;
 // $link: $primary;
 // $link-invert: findColorInvert($link);
@@ -100,8 +95,7 @@ $link-hover: $primary;
 // $link-active: $grey-darker;
 // $link-active-border: $grey-dark;
 
-// // Typography
-
+// Typography
 $family-primary: $family-monospace;
 // $family-secondary: $family-sans-serif;
 // $family-code: $family-monospace;
@@ -111,7 +105,7 @@ $family-primary: $family-monospace;
 // $size-medium: $size-5;
 // $size-large: $size-4;
 
-// // Lists and maps
+// Lists and maps
 // $custom-colors: null;
 // $custom-shades: null;
 

diff --git a/styles/themes/light.scss b/styles/themes/light.scss
@@ -159,4 +159,29 @@ html.light-mode {
 			color: $primary;
 		}
 	}
+
+	.table {
+		color: $text-light-theme;
+		background-color: #fff;
+
+		&.is-hoverable tbody tr:not(.is-selected):hover {
+			background-color: hsl(0deg, 0%, 92%);
+		}
+
+		th {
+			color: hsl(0deg, 0%, 8%);
+		}
+	}
+
+	.b-table .table-wrapper.has-sticky-header tr:first-child th {
+		background-color: #fff;
+	}
+
+	.loading-container {
+		background: rgba(243, 243, 243, 0.88);
+
+		.funfact-text {
+			color: $text-light-theme;
+		}
+	}
 }