@cdc/core 4.23.8 → 4.23.10-alpha

package/styles/_data-table.scss

@@ -30,6 +30,17 @@ div.data-table-heading {
   }
 }
 
+table.horizontal {
+  tr {
+    display: flex;
+  }
+
+  th,
+  td {
+    min-width: 200px;
+  }
+}
+
 table.data-table {
   width: 100%;
   background: #fff;
@@ -108,14 +119,14 @@ table.data-table {
 
     // format the white triangle sort icon in data table headers
     .sort-icon {
-    fill: white;
-    width: 30px;
-    float: right;
-    align-self: center;
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
+      fill: white;
+      width: 30px;
+      float: right;
+      align-self: center;
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
     }
 
     th:last-child,
@@ -155,7 +166,12 @@ table.data-table {
       border-right: 0 !important;
     }
   }
-
+  tr {
+    display: flex;
+    & > * {
+      width: 100%;
+    }
+  }
   th {
     flex-grow: 1;
   }

package/styles/_reset.scss

@@ -141,6 +141,12 @@
     top: -0.5em;
   }
 
+  header sup {
+    /* Allow line breaks using html in the header. */
+    top: initial;
+    line-height: initial;
+  }
+
   sub {
     /* Move the subscripted text down, but only
       half as far down as the superscript moved up */

package/styles/_typography.scss

@@ -0,0 +1,20 @@
+&.font-small {
+  .chart-container {
+    font-size: 0.9em !important;
+  }
+}
+
+&.font-medium {
+  font-size: 1em !important;
+}
+
+&.font-large {
+  .chart-container {
+    font-size: 1.1em !important;
+  }
+}
+
+.subtext {
+  font-style: italic;
+  font-size: 0.9em !important;
+}

package/styles/base.scss

@@ -70,6 +70,7 @@ body.post-type-cdc_visualization .visx-tooltip {
   @import 'global';
   @import 'button-section';
   @import 'series-list';
+  @import 'typography';
 }
 
 $theme: (

package/styles/v2/layout/_component.scss

@@ -24,9 +24,9 @@
     border: none !important;
   }
 
-  .cdc-data-bite-inner-container:not(.component--has-title) .cove-component__content:not(.no-borders) {
-    border-top: 1px solid #ccc;
-  }
+  // .cdc-data-bite-inner-container:not(.component--has-title) .cove-component__content:not(.no-borders) {
+  //   border-top: 1px solid #ccc;
+  // }
 
   .cove-component__content:not(.component--hideBackgroundColor) {
     background: $lightestGray;

package/styles/v2/themes/_color-definitions.scss

@@ -1,4 +1,5 @@
 @use 'sass:string';
+@import './../../variables';
 
 $theme: (
   'amber': (
@@ -87,62 +88,43 @@ $theme: (
     }
 
     &.theme-#{$theme-name} {
-      .cove-component__content:not(.no-borders).component--has-borderColorTheme {
-        border-left: 1px solid string.unquote(nth($theme-colors, 1));
-        border-right: 1px solid string.unquote(nth($theme-colors, 1));
-        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
-      }
-
-      // when component doesn't have a title add border top
-      .cove-component__inner:not(.component--has-title) .cove-component__content.component--has-borderColorTheme:not(.no-borders) {
-        border-top: 1px solid string.unquote(nth($theme-colors, 1));
-      }
-
-      .cove-component__inner:not(.component--has-title) .cove-component__content {
-        border-top: 1px solid #ccc;
+      /// area that appears underneath the title of the component.
+      .cove-component__content {
+        /// when there are borders on a component
+        &:not(.no-borders) {
+          /// borders are the theme color
+          &.component--has-borderColorTheme {
+            border: 1px solid string.unquote(nth($theme-colors, 1));
+          }
+          /// using default border color to draw borders
+          &:not(.component--has-borderColorTheme) {
+            border: 1px solid $lightGray;
+          }
+          &.component--has-title {
+            border-top: none !important;
+          }
+        }
+
+        /// left accent bar
+        &.component--has-accent {
+          border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
+        }
+
+        /// Apply a background color
+        &.component--has-background:not(.component--hideBackgroundColor) {
+          background: string.unquote(nth($theme-colors, 3));
+        }
       }
 
       .cove-component__header {
         border-color: string.unquote(nth($theme-colors, 2));
       }
-
-      .cove-component__content.component--has-accent {
-        border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
-      }
-
-      .cove-component__content.component--has-background:not(.component--hideBackgroundColor) {
-        background: string.unquote(nth($theme-colors, 3));
-      }
     }
 
     &.theme-#{$theme-name} {
-      .cove-component__content:not(.no-borders).component--has-borderColorTheme {
-        border-left: 1px solid string.unquote(nth($theme-colors, 1));
-        border-right: 1px solid string.unquote(nth($theme-colors, 1));
-        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
-      }
-
-      // when component doesn't have a title add border top
-      .cove-component__inner:not(.component--has-title) .cove-component__content.component--has-borderColorTheme:not(.no-borders) {
-        border-top: 1px solid string.unquote(nth($theme-colors, 1));
-      }
-
-      // should probably be in color definitions but logically makes sense here.
-      .cove-component__inner:not(.component--has-title) .cove-component__content {
-        border-top: 1px solid #ccc;
-      }
-
       .cove-component__header {
         border-color: string.unquote(nth($theme-colors, 2));
       }
-
-      .cove-component__content.component--has-accent {
-        border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
-      }
-
-      .cove-component__content.component--has-background:not(.component--hideBackgroundColor) {
-        background: string.unquote(nth($theme-colors, 3));
-      }
     }
   }
 }