@cdc/core 1.1.4 → 4.22.11

package/styles/base.scss

@@ -1,59 +1,57 @@
+@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;
@@ -63,6 +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'
+  )
+);

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

@@ -0,0 +1,20 @@
+.cove-file-selector {
+  padding: 1rem 3rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: $mediumGray;
+  border: $lightGray 2px dashed;
+  border-radius: 0.2rem;
+  cursor: pointer;
+  transition: 0.1s all;
+
+  &.drag-active {
+    background-color: $lightestGray;
+  }
+
+  span {
+    white-space: pre;
+    color: $blue;
+    text-decoration: underline;
+  }
+}

package/styles/v2/base/_general.scss

@@ -1,33 +1,20 @@
+@import '../themes/color-definitions';
+
 .cove {
   margin: 0;
   font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
   font-weight: 400;
   font-style: normal;
+  line-height: 1.4;
+  color: $baseColor;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  color: #111;
-
-  strong {
-    font-weight: 600;
-  }
-
-  .subtext {
-    margin-top: 1em;
-  }
-
-  .warning {
-    padding: .75em 1em;
-    margin: 1em 0;
-    background-color: #FFD2D2;
-    color: #D8000C;
-    font-size: .8em;
-    border: #D8000C 1px solid;
-    border-radius: .4em;
 
-    strong {
-      font-weight: 600;
-      display: block;
-    }
+  small {
+    display: block;
+    font-size: 0.8rem;
+    font-style: italic;
+    color: $mediumGray;
   }
 
   .sr-only,

package/styles/v2/base/_heading.scss

@@ -0,0 +1,20 @@
+*[class^='cove-heading'] {
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+}
+
+.cove-heading--1 {
+  font-size: 1.5rem;
+}
+
+.cove-heading--2 {
+  font-size: 1.25rem;
+}
+
+.cove-heading--3 {
+  font-size: 1rem;
+}
+
+.cove-heading--4 {
+  font-size: 0.75rem;
+}

package/styles/v2/base/_reset.scss

@@ -27,7 +27,8 @@ html:focus-within {
 }
 
 body {
-  min-height: 100vh;
+  // TODO: Uncomment after cove refactor - conflicts with flex display on current <body>. Why the $#@&%! 'that' was done in the first place, I have no clue.
+  //min-height: 100vh;
   text-rendering: optimizeSpeed;
   line-height: 1.5;
 }
@@ -36,7 +37,6 @@ a:not([class]) {
   text-decoration-skip-ink: auto;
 }
 
-
 img,
 picture {
   max-width: 100%;
@@ -50,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,3 +1,7 @@
-@import "reset";
-@import "typography";
-@import "general";
+//@import "reset"; TODO: Enable after cove refactor
+@import 'typography';
+
+@import 'general';
+@import 'heading';
+
+@import 'file-selector';

package/styles/v2/components/accordion.scss

@@ -1,5 +1,5 @@
-@import "../utils/variables";
-@import "../themes/index";
+@import '../utils/variables';
+@import '../themes/index';
 
 .cove {
   .cove-accordion__item {
@@ -9,7 +9,7 @@
 
     .number-narrow {
       min-width: auto;
-      width: 75px
+      width: 75px;
     }
   }
 
@@ -22,7 +22,7 @@
     justify-content: space-between;
     position: relative;
     width: 100%;
-    padding: .3em 1em;
+    padding: 0.3em 1em;
     font-size: 1em;
     text-align: left;
     border-bottom: 1px solid rgba(0, 0, 0, 0.2);
@@ -41,14 +41,14 @@
       position: absolute;
       top: 50%;
       transform: rotate(-45deg) translateX(0) translateY(-50%);
-      transition: .1s all;
+      transition: 0.1s all;
     }
 
     &[aria-expanded='true']::before,
     &[aria-selected='true']::before {
       transform: rotate(45deg) translateX(-2px) translateY(-70%);
       margin-right: 1.3em;
-      transition: .1s all;
+      transition: 0.1s all;
     }
 
     .cove-tooltip,
@@ -71,7 +71,7 @@
     }
 
     h5 {
-      font-size: .8em;
+      font-size: 0.8em;
     }
   }
 
@@ -114,7 +114,7 @@
   }
 
   .cove-accordion__small-inputs {
-    input[type="text"] {
+    input[type='text'] {
       display: block;
       width: 100%;
       height: 22px;
@@ -139,14 +139,14 @@
   }
 
   .cove-accordion__input-error {
-    color: #D8000C;
-    border: #D8000C 1px solid;
+    color: #d8000c;
+    border: #d8000c 1px solid;
   }
 
   .cove-accordion__panel-error {
-    color: #D8000C;
-    background-color: #FFD2D2;
-    border: #D8000C 1px solid;
+    color: #d8000c;
+    background-color: #ffd2d2;
+    border: #d8000c 1px solid;
     margin-top: 12px;
     padding: 4px 8px;
     line-height: 1.2em;

package/styles/v2/components/button.scss

@@ -1,5 +1,15 @@
-@import "../utils/variables";
-@import "../themes/index";
+@import '../utils/variables';
+@import '../themes/index';
+
+.sbdocs .cove-button {
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+
+  &.fluid {
+    width: 100%;
+    margin-right: 0;
+  }
+}
 
 .cove-button {
   display: inline-block;
@@ -24,7 +34,7 @@
 
   &:disabled {
     background-color: #adadad !important;
-    cursor: not-allowed !important;
+    cursor: not-allowed;
   }
 
   &:not(:disabled) {
@@ -38,19 +48,25 @@
     background-color: lighten($primary, 5%);
   }
 
-  &:active,
-  &:focus {
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      outline: 2px solid rgba(161, 161, 161, 0.6);
-      border-radius: .3125em;
-      margin: -2px;
-      pointer-events: none;
+  &:not(.loading) {
+    &:focus,
+    &:active {
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        outline: 2px solid rgba(161, 161, 161, 0.6);
+        border-radius: 0.3125em;
+        margin: -2px;
+        pointer-events: none;
+      }
     }
   }
 
+  &.loading:disabled {
+    cursor: default;
+  }
+
   &.fluid {
     width: 100%;
   }
@@ -121,58 +137,3 @@
   transition: all 500ms $transition-expo-out;
   opacity: 0;
 }
-
-/* Old Styles ------------------------------------------
-.btn {
-  display: block;
-  padding: .4em .8em;
-  font-size: 1em;
-  color: #fff;
-  background: #005eaa;
-  border: 0;
-  border-radius: .3em;
-  transition: .1s background-color;
-  cursor: pointer;
-
-  &.full-width {
-    width: 100%;
-  }
-
-  &:hover {
-    transition: .1s background-color;
-  }
-
-  &.secondary {
-    font-size: .8em;
-    padding: .3em 1em;
-    background: rgba(0, 0, 0, 0.3);
-    display: inline-block;
-    margin-bottom: 1em;
-
-    &:hover {
-      background: rgba(0, 0, 0, .5);
-    }
-  }
-
-  &.danger {
-    background-color: $red;
-    color: #fff;
-
-    &:hover {
-      background-color: darken($red, 5%);
-    }
-  }
-
-  &:hover {
-    transition: .1s all;
-    background: lighten(#005eaa, 5%);
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-    position: relative;
-    top: 2px;
-    margin-left: 5px;
-  }
-}*/

package/styles/v2/components/card.scss

@@ -0,0 +1,7 @@
+.cove-card {
+  border: 1px solid #c7c7c7;
+  border-radius: 0.25rem;
+  background-color: #f2f2f2;
+  padding: 0.75rem;
+  height: 100%;
+}