@cdc/core 4.22.10 → 4.22.11

package/styles/v2/layout/_data-table.scss

@@ -18,7 +18,7 @@
   //TODO find fix
   //background-image: url(~@cdc/core/assets/icon-minus.svg);
   background-size: 15px 15px; // Need to define both for IE11
-  background-position: right .7em center;
+  background-position: right 0.7em center;
   background-repeat: no-repeat;
   border: $lightGray 1px solid;
   border-bottom: 0;
@@ -46,7 +46,7 @@
   appearance: none;
 
   * {
-    box-sizing: border-box
+    box-sizing: border-box;
   }
 
   thead {
@@ -61,7 +61,7 @@
 
     th,
     td {
-      padding: .5em 1.3em .5em .7em;
+      padding: 0.5em 1.3em 0.5em 0.7em;
       line-height: normal;
       position: relative;
       text-align: left;
@@ -75,7 +75,7 @@
 
     th:last-child,
     td:last-child {
-      border-right: 0
+      border-right: 0;
     }
   }
 
@@ -84,7 +84,7 @@
       width: 100%;
 
       &:hover {
-        background: rgba(0, 0, 0, 0.05)
+        background: rgba(0, 0, 0, 0.05);
       }
     }
   }
@@ -94,17 +94,17 @@
     min-width: 100%; // Needed to fill content up
 
     &:last-child {
-      border-bottom: 0
+      border-bottom: 0;
     }
   }
 
   td {
     position: relative;
-    padding: .3em .7em;
+    padding: 0.3em 0.7em;
     border-right: 1px solid rgba(0, 0, 0, 0.1);
 
     a {
-      padding: .3em .7em;
+      padding: 0.3em 0.7em;
       position: absolute;
       top: 0;
       bottom: 0;
@@ -146,7 +146,7 @@
   .sort {
     background-color: darken($mediumGray, 10%);
     background-repeat: no-repeat;
-    background-position: right .5em center;
+    background-position: right 0.5em center;
     background-size: 10px 5px;
   }
 
@@ -185,11 +185,12 @@
   position: relative;
   user-select: none;
 
-  th, td {
+  th,
+  td {
     width: 50%;
 
     &::before {
-      content: "\00a0";
+      content: '\00a0';
     }
   }
 }

package/styles/v2/layout/_progression.scss

@@ -14,7 +14,7 @@
   h3 {
     font-size: 1.3rem;
     font-weight: 600;
-    margin-bottom: .3rem;
+    margin-bottom: 0.3rem;
   }
 
   p {
@@ -35,7 +35,7 @@
   left: 0;
   min-height: 30%;
   text-align: center;
-  background: rgba(255, 255, 255, .5);
+  background: rgba(255, 255, 255, 0.5);
   z-index: 3;
 
   span {
@@ -56,8 +56,10 @@
     transform: scale(1.3);
     color: #777;
 
-    &.sm, &.xs, &.xxs {
-      transform: scale(0.7)
+    &.sm,
+    &.xs,
+    &.xxs {
+      transform: scale(0.7);
     }
 
     div + div {
@@ -72,10 +74,10 @@
       background-color: currentColor;
       border: 0 solid currentColor;
       border-radius: 100%;
-      animation: ball-beat .7s -.15s infinite linear;
+      animation: ball-beat 0.7s -0.15s infinite linear;
 
       &:nth-child(2n-1) {
-        animation-delay: -.5s;
+        animation-delay: -0.5s;
       }
     }
   }

package/styles/v2/layout/index.scss

@@ -1,5 +1,5 @@
-@import "alert";
-@import "component";
-@import "data-table";
-@import "progression";
-@import "tooltip";
+@import 'alert';
+@import 'component';
+@import 'data-table';
+@import 'progression';
+@import 'tooltip';

package/styles/v2/main.scss

@@ -9,7 +9,7 @@
 
   :focus,
   [tabindex]:focus-visible {
-    outline: 2px solid rgba(255,102,1,.9);
+    outline: 2px solid rgba(255, 102, 1, 0.9);
   }
 
   margin: 0;
@@ -29,13 +29,13 @@
   }
 
   .warning {
-    padding: .75em 1em;
+    padding: 0.75em 1em;
     margin: 1em 0;
-    background-color: #FFD2D2;
-    color: #D8000C;
-    font-size: .8em;
-    border: #D8000C 1px solid;
-    border-radius: .4em;
+    background-color: #ffd2d2;
+    color: #d8000c;
+    font-size: 0.8em;
+    border: #d8000c 1px solid;
+    border-radius: 0.4em;
 
     strong {
       font-weight: 600;

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

@@ -1,17 +1,72 @@
-@use "sass:string";
+@use 'sass:string';
 
 $theme: (
-        'amber':  ('#fbab18', '#ffd54f', '#ffecb3', '#fff7e1'),
-        'blue':   ('#005eaa', '#88c3ea', '#c0e9ff', '#edf9ff'),
-        'brown':  ('#705043', '#ad907b', '#d7ccc8', '#f2ebe8'),
-        'cyan':   ('#007B91', '#65b0bd', '#cce5e9', '#ebf5f6'),
-        'green':  ('#4b830d', '#84bc49', '#dcedc8', '#f1f8e9'),
-        'indigo': ('#26418f', '#92a6dd', '#dee8ff', '#f2f6ff'),
-        'orange': ('#bb4d00', '#ffad42', '#ffe97d', '#fff4cf'),
-        'pink':   ('#af4448', '#e57373', '#ffc2c2', '#ffe7e7'),
-        'purple': ('#712177', '#b890bb', '#e3d3e4', '#f7f2f7'),
-        'slate':  ('#29434e', '#7e9ba5', '#b6c6d2', '#e2e8ed'),
-        'teal':   ('#00695c', '#4ebaaa', '#ceece7', '#ebf7f5' )
+  'amber': (
+    '#fbab18',
+    '#ffd54f',
+    '#ffecb3',
+    '#fff7e1'
+  ),
+  'blue': (
+    '#005eaa',
+    '#88c3ea',
+    '#c0e9ff',
+    '#edf9ff'
+  ),
+  'brown': (
+    '#705043',
+    '#ad907b',
+    '#d7ccc8',
+    '#f2ebe8'
+  ),
+  'cyan': (
+    '#007B91',
+    '#65b0bd',
+    '#cce5e9',
+    '#ebf5f6'
+  ),
+  'green': (
+    '#4b830d',
+    '#84bc49',
+    '#dcedc8',
+    '#f1f8e9'
+  ),
+  'indigo': (
+    '#26418f',
+    '#92a6dd',
+    '#dee8ff',
+    '#f2f6ff'
+  ),
+  'orange': (
+    '#bb4d00',
+    '#ffad42',
+    '#ffe97d',
+    '#fff4cf'
+  ),
+  'pink': (
+    '#af4448',
+    '#e57373',
+    '#ffc2c2',
+    '#ffe7e7'
+  ),
+  'purple': (
+    '#712177',
+    '#b890bb',
+    '#e3d3e4',
+    '#f7f2f7'
+  ),
+  'slate': (
+    '#29434e',
+    '#7e9ba5',
+    '#b6c6d2',
+    '#e2e8ed'
+  ),
+  'teal': (
+    '#00695c',
+    '#4ebaaa',
+    '#ceece7',
+    '#ebf7f5'
+  )
 );
 
 // .type-sparkline class used for creating sparklines
@@ -31,8 +86,7 @@ $theme: (
       border-bottom-width: 4px;
     }
 
-     &.theme-#{$theme-name} {
-
+    &.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));
@@ -43,7 +97,7 @@ $theme: (
       .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;
       }
@@ -53,7 +107,7 @@ $theme: (
       }
 
       .cove-component__content.component--has-accent {
-        border-left: .5rem solid string.unquote(nth($theme-colors, 1)) !important;
+        border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
       }
 
       .cove-component__content.component--has-background:not(.component--hideBackgroundColor) {
@@ -62,7 +116,6 @@ $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));
@@ -73,7 +126,7 @@ $theme: (
       .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;
@@ -84,7 +137,7 @@ $theme: (
       }
 
       .cove-component__content.component--has-accent {
-        border-left: .5rem solid string.unquote(nth($theme-colors, 1)) !important;
+        border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
       }
 
       .cove-component__content.component--has-background:not(.component--hideBackgroundColor) {
@@ -95,17 +148,17 @@ $theme: (
 }
 
 $baseColor: #333;
-$blue: #005EAA;
-$lightestGray: #F2F2F2;
-$lightGray: #C7C7C7;
+$blue: #005eaa;
+$lightestGray: #f2f2f2;
+$lightGray: #c7c7c7;
 $mediumGray: #565656;
 $darkGray: #333;
 $red: #d8000c;
 $white: #fff;
 
-$primary: 	#005eaa !default;
+$primary: #005eaa !default;
 $secondary: #88c3ea !default;
-$tertiary: 	#c0e9ff !default;
+$tertiary: #c0e9ff !default;
 $quaternary: #edf9ff !default;
 
 $purple-primary: #712177 !default;

package/styles/v2/themes/index.scss

@@ -1 +1 @@
-@import "color-definitions";
+@import 'color-definitions';

package/styles/v2/utils/_animations.scss

@@ -32,8 +32,8 @@
 
 @keyframes ball-beat {
   50% {
-    opacity: .2;
-    transform: scale(.75);
+    opacity: 0.2;
+    transform: scale(0.75);
   }
   100% {
     opacity: 1;

package/styles/v2/utils/_breakpoints.scss

@@ -1,18 +1,59 @@
 // Breakpoint Classes
 @mixin breakpoint($class) {
-  @if $class == xs {@media (max-width: 767.98px) { @content; }}
-  @else if $class == sm {@media (min-width: 768px) { @content; }}
-  @else if $class == md {@media (min-width: 960px) { @content; }}
-  @else if $class == lg {@media (min-width: 1170px) { @content; }}
-  @else if $class == xl {@media (min-width: 1280px) { @content; }}
-  @else {@warn "Breakpoint mixin supports: xs, sm, md, lg, xl";}
+  @if $class == xs {
+    @media (max-width: 767.98px) {
+      @content;
+    }
+  } @else if $class == sm {
+    @media (min-width: 768px) {
+      @content;
+    }
+  } @else if $class == md {
+    @media (min-width: 960px) {
+      @content;
+    }
+  } @else if $class == lg {
+    @media (min-width: 1170px) {
+      @content;
+    }
+  } @else if $class == xl {
+    @media (min-width: 1280px) {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg, xl";
+  }
 }
 
 @mixin breakpointClass($class) {
-  @if $class == xs { &.xs, &.xxs {@content;} }
-  @else if $class == sm { &.sm, &.md, &.lg, &.xl {@content;} }
-  @else if $class == md { &.md, &.lg, &.xl {@content;} }
-  @else if $class == lg { &.lg, &.xl {@content;} }
-  @else if $class == xl { &.xl {@content;} }
-  @else {@warn "Breakpoint Class mixin supports: xs, sm, md, lg, xl";}
+  @if $class == xs {
+    &.xs,
+    &.xxs {
+      @content;
+    }
+  } @else if $class == sm {
+    &.sm,
+    &.md,
+    &.lg,
+    &.xl {
+      @content;
+    }
+  } @else if $class == md {
+    &.md,
+    &.lg,
+    &.xl {
+      @content;
+    }
+  } @else if $class == lg {
+    &.lg,
+    &.xl {
+      @content;
+    }
+  } @else if $class == xl {
+    &.xl {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint Class mixin supports: xs, sm, md, lg, xl";
+  }
 }

package/styles/v2/utils/_variables.scss

@@ -1,9 +1,9 @@
 $cove-breakpoints: (
-        xs: 480px,
-        sm: 768px,
-        md: 960px,
-        lg: 1170px,
-        xl: 1280px
+  xs: 480px,
+  sm: 768px,
+  md: 960px,
+  lg: 1170px,
+  xl: 1280px
 );
 $editorWidth: 350px;
 $transition-expo-out: cubic-bezier(0.16, 1, 0.3, 1);

package/styles/v2/utils/index.scss

@@ -1,9 +1,9 @@
-@import "variables";
-@import "mixins";
+@import 'variables';
+@import 'mixins';
 
-@import "align";
-@import "animations";
-@import "breakpoints";
-@import "functions";
-@import "grid";
-@import "spacers";
+@import 'align';
+@import 'animations';
+@import 'breakpoints';
+@import 'functions';
+@import 'grid';
+@import 'spacers';

package/styles/waiting.scss

@@ -1,26 +1,25 @@
 .cdc-open-viz-module {
-    @import "mixins";
-    .waiting {
-        &.collapsed {
-            padding: 2em !important;
-        }
-        @include emptyState;
-        align-items: flex-start;
-        padding-top: 250px;
-        .waiting-container {
-            max-width: 400px;
-        }
-        h3 {
-            font-size: 1.3rem;
-            font-weight: 600;
-            margin-bottom: .3rem;
-        }
-        p {
-            font-size: 1em;
-            strong {
-                font-weight: bold;
-            }
-        }
+  @import 'mixins';
+  .waiting {
+    &.collapsed {
+      padding: 2em !important;
     }
+    @include emptyState;
+    align-items: flex-start;
+    padding-top: 250px;
+    .waiting-container {
+      max-width: 400px;
+    }
+    h3 {
+      font-size: 1.3rem;
+      font-weight: 600;
+      margin-bottom: 0.3rem;
+    }
+    p {
+      font-size: 1em;
+      strong {
+        font-weight: bold;
+      }
+    }
+  }
 }
-