@cdc/core 4.22.10 → 4.22.11

package/styles/_global.scss

@@ -7,11 +7,11 @@ strong {
 }
 
 .error-box {
-  background: #FFC2C2;
+  background: #ffc2c2;
   display: flex;
   justify-content: space-between;
-  padding: .3rem 1rem;
-  font-size: .9rem;
+  padding: 0.3rem 1rem;
+  font-size: 0.9rem;
   strong {
     font-weight: 600;
   }
@@ -20,7 +20,7 @@ strong {
   }
   .dismiss-error {
     flex-shrink: 0;
-    font-size: .8rem;
+    font-size: 0.8rem;
     cursor: pointer;
   }
 }
@@ -42,7 +42,7 @@ strong {
 .inline-icon {
   width: 1em !important;
   height: auto !important;
-  @media all and (-ms-high-contrast:none) {
+  @media all and (-ms-high-contrast: none) {
     height: 30px !important;
   }
   font-size: 1rem;
@@ -56,26 +56,26 @@ strong {
   background: #005eaa;
   color: #fff;
   border: 0;
-  padding: .4em .8em;
+  padding: 0.4em 0.8em;
   font-size: 1em;
   display: block;
-  border-radius: .3em;
-  transition: .1s background-color;
+  border-radius: 0.3em;
+  transition: 0.1s background-color;
   cursor: pointer;
   &.full-width {
     width: 100%;
   }
   &:hover {
-    transition: .1s background-color;
+    transition: 0.1s background-color;
   }
   &.secondary {
-    font-size: .8em;
-    padding: .3em 1em;
+    font-size: 0.8em;
+    padding: 0.3em 1em;
     background: rgba(0, 0, 0, 0.3);
     display: inline-block;
     margin-bottom: 1em;
     &:hover {
-      background: rgba(0,0,0,.5);
+      background: rgba(0, 0, 0, 0.5);
     }
   }
   &.danger {
@@ -87,7 +87,7 @@ strong {
   }
 
   &:hover {
-    transition: .1s all;
+    transition: 0.1s all;
     background: lighten(#005eaa, 5%);
   }
 
@@ -100,14 +100,19 @@ strong {
   }
 }
 
-input[type="text"], input[type="date"], input[role="combobox"], input[type="number"], input[type="search"], textarea {
-  padding: .5em .5em;
+input[type='text'],
+input[type='date'],
+input[role='combobox'],
+input[type='number'],
+input[type='search'],
+textarea {
+  padding: 0.5em 0.5em;
   font-size: 1em;
   font-weight: normal;
   font-family: sans-serif;
-  border: rgba(0,0,0,.3) 1px solid !important;
+  border: rgba(0, 0, 0, 0.3) 1px solid !important;
   &:focus {
-    border: rgba(0,0,0,.7) 1px solid !important;
+    border: rgba(0, 0, 0, 0.7) 1px solid !important;
     outline: 0;
   }
 }
@@ -129,16 +134,16 @@ select {
 
 .guidance-link {
   margin: 2em 0 1em;
-  padding: .75em 1em;
+  padding: 0.75em 1em;
   display: flex;
   text-decoration: none;
   color: #444;
   border: $lightGray 1px solid;
   position: relative;
-  transition: .2s all;
+  transition: 0.2s all;
   font-size: 1em;
   &:before {
-    content: " ";
+    content: ' ';
     width: 5px;
     background: $blue;
     left: -1px;
@@ -148,11 +153,11 @@ select {
   }
   &:hover {
     background: $lightestGray;
-    transition: .2s all;
+    transition: 0.2s all;
     color: #444;
   }
   > div {
-    font-size: .9em;
+    font-size: 0.9em;
   }
   svg {
     width: 60px;
@@ -173,11 +178,11 @@ section.introText {
 }
 
 section.footnotes {
-  border-top: 1px solid #DDD;
+  border-top: 1px solid #ddd;
   margin-top: 20px;
   padding: 15px;
 }
 
 .cdc-chart-inner-container .subtext {
   padding: 15px;
-}
+}

package/styles/_mixins.scss

@@ -1,13 +1,13 @@
 @mixin emptyState {
-    background: rgba(255, 255, 255, 0.5);
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 7;
-}
+  background: rgba(255, 255, 255, 0.5);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 7;
+}

package/styles/_reset.scss

@@ -10,7 +10,7 @@
   // match cdc site outline
   :focus,
   [tabindex]:focus-visible {
-    outline: 2px solid rgba(255,102,1,.9) !important;
+    outline: 2px solid rgba(255, 102, 1, 0.9) !important;
   }
 
   .outline-none {
@@ -18,19 +18,85 @@
   }
 }
 .cdc-open-viz-module {
-  div, span, applet, object, iframe,
-  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-  a, abbr, acronym, address, big, cite, code,
-  del, dfn, em, img, ins, kbd, q, s, samp,
-  small, strike, strong, sub, sup, tt, var,
-  b, u, i, center,
-  dl, dt, dd, ol, ul, li,
-  fieldset, form, label, legend,
-  table, caption, tbody, tfoot, thead, tr, th, td,
-  article, aside, canvas, details, embed,
-  figure, figcaption, footer, header, hgroup,
-  menu, nav, output, ruby, section, summary,
-  time, mark, audio, video {
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
     margin: 0;
     padding: 0;
     border: 0;
@@ -47,9 +113,12 @@
     }
   }
 
-  * {box-sizing: border-box}
+  * {
+    box-sizing: border-box;
+  }
 
-  sub, sup {
+  sub,
+  sup {
     /* Specified in % so that the sup/sup is the
       right size relative to the surrounding text */
     font-size: 75%;

package/styles/_variables.scss

@@ -1,15 +1,15 @@
 $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/base.scss

@@ -1,61 +1,57 @@
-@use "sass:string";
+@use 'sass:string';
 
 @mixin breakpoint($class) {
   @if $class == xs {
-    @media (max-width: 767px) { @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: 1300px) { @content; }
-  }
-
-  @else {
+    @media (max-width: 767px) {
+      @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: 1300px) {
+      @content;
+    }
+  } @else {
     @warn "Breakpoint mixin supports: xs, sm, md, lg";
   }
 }
 
 @mixin breakpointClass($class) {
   @if $class == xs {
-    &.xs, &.xxs {
+    &.xs,
+    &.xxs {
       @content;
     }
-  }
-
-  @else if $class == sm {
-    &.sm, &.md, &.lg {
+  } @else if $class == sm {
+    &.sm,
+    &.md,
+    &.lg {
       @content;
     }
-  }
-
-  @else if $class == md {
-    &.md, &.lg {
+  } @else if $class == md {
+    &.md,
+    &.lg {
       @content;
     }
-  }
-
-  @else if $class == lg {
+  } @else if $class == lg {
     &.lg {
       @content;
     }
-  }
-
-  @else {
+  } @else {
     @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
   }
 }
 
 // Imports
-@import "reset";
-@import "variables";
-@import "mixins";
+@import 'reset';
+@import 'variables';
+@import 'mixins';
 
 .cdc-open-viz-module {
   position: relative;
@@ -65,20 +61,75 @@
   @include breakpointClass(md) {
     font-size: 16px !important;
   }
-  @import "data-table";
-  @import "global";
+  @import 'data-table';
+  @import 'global';
 }
 
 $theme: (
-        'amber':  ('#fbab18', '#ffd54f', '#ffecb3', '#fff7e1'),
-        'blue':   ('#005eaa', '#88c3ea', '#c0e9ff', '#edf9ff'),
-        'brown':  ('#705043', '#ad907b', '#d7ccc8', '#f2ebe8'),
-        'cyan':   ('#006778', '#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': (
+    '#006778',
+    '#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'
+  )
 );

package/styles/heading-colors.scss

@@ -1,4 +1,8 @@
-div.dashboard-title, div.chart-title, div.map-title, .color-palette li, .btn {
+div.dashboard-title,
+div.chart-title,
+div.map-title,
+.color-palette li,
+.btn {
   &.theme-purple {
     background: #712177;
     border-bottom-color: #b890bb;
@@ -43,4 +47,4 @@ div.dashboard-title, div.chart-title, div.map-title, .color-palette li, .btn {
     background: #005eaa;
     border-bottom-color: #88c3ea;
   }
-}
+}

package/styles/loading.scss

@@ -5,68 +5,70 @@
  * Licensed under MIT
  */
 @keyframes ball-beat {
-   50% {
-       opacity: .2;
-       -webkit-transform: scale(.75);
-          -moz-transform: scale(.75);
-            -o-transform: scale(.75);
-               transform: scale(.75);
-   }
-   100% {
-       opacity: 1;
-       -webkit-transform: scale(1);
-          -moz-transform: scale(1);
-            -o-transform: scale(1);
-               transform: scale(1);
-   }
+  50% {
+    opacity: 0.2;
+    -webkit-transform: scale(0.75);
+    -moz-transform: scale(0.75);
+    -o-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
 }
 
 .cdc-open-viz-module .loading {
-   text-align: center;
-   position: absolute;
-   z-index: 3;
-   background: rgba(255,255,255,.5);
-   left: 0;
-   right: 0;
-   bottom: 0;
-   top: 0;
-   min-height: 30%;
-   span {
-   display: block;
-   margin-bottom: 1em;
-   font-size: 1.3em;
-   }
-   .la-ball-beat {
+  text-align: center;
+  position: absolute;
+  z-index: 3;
+  background: rgba(255, 255, 255, 0.5);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  min-height: 30%;
+  span {
+    display: block;
+    margin-bottom: 1em;
+    font-size: 1.3em;
+  }
+  .la-ball-beat {
+    position: relative;
+    box-sizing: border-box;
+    margin: 0 auto;
+    transform: scale(1.3);
+    font-size: 0;
+    color: #777;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 108px;
+    height: 36px;
+    &.sm,
+    &.xs,
+    &.xxs {
+      transform: scale(0.7);
+    }
+    div + div {
+      margin-left: 10px;
+    }
+    > div {
       position: relative;
-      box-sizing: border-box;   
-      margin: 0 auto;
-      transform: scale(1.3);
-      font-size: 0;
-      color: #777;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 108px;
-      height: 36px;
-      &.sm, &.xs, &.xxs {
-         transform: scale(0.7)
+      box-sizing: border-box;
+      width: 20px;
+      height: 20px;
+      border-radius: 100%;
+      animation: ball-beat 0.7s -0.15s infinite linear;
+      display: inline-block;
+      background-color: currentColor;
+      border: 0 solid currentColor;
+      &:nth-child(2n-1) {
+        animation-delay: -0.5s;
       }
-      div + div {
-         margin-left: 10px;
-      }
-      > div {
-         position: relative;
-         box-sizing: border-box;      
-         width: 20px;
-         height: 20px;
-         border-radius: 100%;
-         animation: ball-beat .7s -.15s infinite linear;
-         display: inline-block;
-         background-color: currentColor;
-         border: 0 solid currentColor;
-         &:nth-child(2n-1) {
-            animation-delay: -.5s;
-         }
-      }
-   }
-}
+    }
+  }
+}

package/styles/v2/base/_file-selector.scss

@@ -4,9 +4,9 @@
   font-size: 0.875rem;
   color: $mediumGray;
   border: $lightGray 2px dashed;
-  border-radius: .2rem;
+  border-radius: 0.2rem;
   cursor: pointer;
-  transition: .1s all;
+  transition: 0.1s all;
 
   &.drag-active {
     background-color: $lightestGray;

package/styles/v2/base/_general.scss

@@ -12,7 +12,7 @@
 
   small {
     display: block;
-    font-size: .8rem;
+    font-size: 0.8rem;
     font-style: italic;
     color: $mediumGray;
   }

package/styles/v2/base/_reset.scss

@@ -37,7 +37,6 @@ a:not([class]) {
   text-decoration-skip-ink: auto;
 }
 
-
 img,
 picture {
   max-width: 100%;
@@ -51,7 +50,8 @@ select {
   font: inherit;
 }
 
-sub, sup {
+sub,
+sup {
   font-size: 75%;
   line-height: 0;
   position: relative;

package/styles/v2/base/index.scss

@@ -1,7 +1,7 @@
 //@import "reset"; TODO: Enable after cove refactor
-@import "typography";
+@import 'typography';
 
-@import "general";
-@import "heading";
+@import 'general';
+@import 'heading';
 
-@import "file-selector";
+@import 'file-selector';