Tweak itables appearance in dashboards

quarto-dev · Nov 15, 2023 · af15c24 · af15c24
1 parent 329a806
commit af15c24
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/src/resources/formats/dashboard/quarto-dashboard.scss b/src/resources/formats/dashboard/quarto-dashboard.scss
@@ -165,6 +165,24 @@ $dashboard-card-toolbar-top-margin: 6px !default;
   }
 }
 
+@mixin itables {
+  .itables {
+    .dataTables_info {
+      font-size: 0.9em;
+      padding-top: 0;
+      margin-bottom: 0.7em;
+    }
+    .dataTables_filter {
+      label {
+        font-size: 0.9em;
+      }
+      input[type="search"] {
+        padding: 1px;
+      }
+    }
+  }
+}
+
 /*-- scss:rules --*/
 
 // Value Boxes
@@ -786,6 +804,9 @@ $valuebox-colors: (
     // appear above the elements inside of it (notably itables, which cause issues)
     .card-body {
       z-index: 1000;
+
+      // Customize appearance of elements within cards
+      @include itables();
     }
 
     .card-footer {