@cdc/data-bite 1.1.4 → 4.22.11

package/src/scss/editor-panel.scss

@@ -9,7 +9,7 @@
 .editor-panel {
   //TODO: Remove after COVE refactor
   &.cove {
-    @import "@cdc/core/styles/v2/layout/tooltip.scss";
+    @import '@cdc/core/styles/v2/layout/tooltip.scss';
   }
 
   .text-center {
@@ -24,7 +24,7 @@
     justify-content: space-between;
     > label {
       width: 48%;
-      margin-top: 0 !important
+      margin-top: 0 !important;
     }
   }
   .divider-heading {
@@ -36,19 +36,19 @@
     list-style: none;
     border: $lightGray 1px solid;
     &:empty {
-      border: none !important
+      border: none !important;
     }
     li {
-      padding: .3em .5em;
+      padding: 0.3em 0.5em;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      font-size: .9em;
+      font-size: 0.9em;
       &:hover {
         background-color: $lightestGray;
       }
       span {
-        font-size: .8em;
+        font-size: 0.8em;
         color: #f00;
         cursor: pointer;
       }
@@ -76,7 +76,7 @@
     }
     .number-narrow {
       min-width: auto;
-      width: 75px
+      width: 75px;
     }
   }
   .accordion__divider {
@@ -91,7 +91,7 @@
   }
   .guidance-link {
     margin: 2em 1em 0;
-    padding: .75em 1em;
+    padding: 0.75em 1em;
     svg {
       width: 60px;
       color: $blue;
@@ -103,13 +103,13 @@
     }
   }
   .warning {
-    color: #D8000C;
-    background-color: #FFD2D2;
-    padding: .75em 1em;
+    color: #d8000c;
+    background-color: #ffd2d2;
+    padding: 0.75em 1em;
     margin: 1em 0;
-    font-size: .8em;
-    border: #D8000C 1px solid;
-    border-radius: .4em;
+    font-size: 0.8em;
+    border: #d8000c 1px solid;
+    border-radius: 0.4em;
     strong {
       font-weight: 600;
       display: block;
@@ -118,13 +118,15 @@
   .accordion__button {
     cursor: pointer;
     font-size: 1em;
-    padding: .3em 1em;
+    padding: 0.3em 1em;
     width: 100%;
     text-align: left;
     position: relative;
     border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   }
-  .accordion__panel:first-child { margin-top: 0; }
+  .accordion__panel:first-child {
+    margin-top: 0;
+  }
   .accordion__button:before {
     display: inline-block;
     content: '';
@@ -138,14 +140,14 @@
     position: absolute;
     top: 50%;
     transform: rotate(-45deg) translateY(-50%);
-    transition: .1s all;
+    transition: 0.1s all;
   }
 
   .accordion__button[aria-expanded='true']::before,
   .accordion__button[aria-selected='true']::before {
     transform: rotate(45deg) translateY(-50%);
     margin-right: 1.3em;
-    transition: .1s all;
+    transition: 0.1s all;
   }
 
   .accordion__panel {
@@ -153,7 +155,7 @@
     padding: 1em 1.25em 2em;
     animation: fadein 0.2s ease-in;
     h5 {
-      font-size: .8em;
+      font-size: 0.8em;
     }
 
     .accordion__panel-row {
@@ -161,7 +163,7 @@
       justify-content: flex-start;
       margin-left: -4px;
       margin-right: -4px;
-      margin-bottom: 0.75em
+      margin-bottom: 0.75em;
     }
 
     .accordion__panel-col {
@@ -191,23 +193,28 @@
       justify-content: flex-end;
     }
 
-    .flex-grow { flex-grow: 1; }
-    .flex-shrink { flex-shrink: 1; }
-    .flex-auto { flex-basis: auto; }
+    .flex-grow {
+      flex-grow: 1;
+    }
+    .flex-shrink {
+      flex-shrink: 1;
+    }
+    .flex-auto {
+      flex-basis: auto;
+    }
   }
 
   .advanced {
     padding: 0 1em 1em;
     text-align: left;
     p {
-      font-size: .8rem;
+      font-size: 0.8rem;
     }
     .advanced-toggle-link {
       padding-top: 1em;
       display: block;
       text-align: left;
       cursor: pointer;
-      color: rgba(0,0,0,.5);
       text-decoration: underline;
       span {
         text-decoration: none;
@@ -216,16 +223,16 @@
         padding-right: 5px;
       }
       &:hover {
-        color: rgba(0,0,0,.7);
+        color: rgba(0, 0, 0, 0.7);
       }
     }
     textarea {
       height: 400px;
       width: 100%;
-      font-size: .9em;
-      padding: .5em;
+      font-size: 0.9em;
+      padding: 0.5em;
       font-family: monospace;
-      box-sizing: border-box
+      box-sizing: border-box;
     }
   }
 
@@ -243,22 +250,22 @@
     background: #565656;
     color: #fff;
     font-size: 1.1em;
-    padding: .6em 1em;
+    padding: 0.6em 1em;
     position: relative;
-    border-bottom:#565656 3px solid;
+    border-bottom: #565656 3px solid;
     z-index: 3;
   }
 
   label {
     text-transform: uppercase;
     display: block;
-    font-size: .8em;
+    font-size: 0.8em;
     font-weight: 600;
     &:not(:first-child) {
       margin-top: 1em;
     }
     span.edit-label {
-      margin-bottom: .3em;
+      margin-bottom: 0.3em;
       display: block;
     }
     span.column-heading {
@@ -276,7 +283,10 @@
       }
     }
   }
-  input[type="text"], input[role="combobox"], input[type="number"], textarea {
+  input[type='text'],
+  input[role='combobox'],
+  input[type='number'],
+  textarea {
     min-width: 100%;
     max-width: 100%; // Doing this prevents width of textarea from being changed
   }
@@ -293,7 +303,7 @@
     display: flex;
     max-width: 100%;
     padding: 0;
-    margin: .5em 0 0 0;
+    margin: 0.5em 0 0 0;
     list-style: none;
     flex-wrap: wrap;
     li {
@@ -314,7 +324,7 @@
         bottom: 0;
       }
       &.selected {
-        border: rgba(0,0,0, .8) 2px solid;
+        border: rgba(0, 0, 0, 0.8) 2px solid;
       }
       span {
         width: 33.3%;
@@ -337,13 +347,15 @@
     li {
       margin-top: 1em;
     }
-    .three-col, .two-col {
+    .three-col,
+    .two-col {
       display: flex;
       justify-content: space-between;
       > label {
         margin-top: 0;
         display: inline-block;
-        input[type="text"], input[type="number"] {
+        input[type='text'],
+        input[type='number'] {
           width: 50px;
         }
       }
@@ -368,12 +380,12 @@
   .remove-column {
     float: right;
     text-transform: uppercase;
-    color: #C32B2B;
-    font-size: .7em;
+    color: #c32b2b;
+    font-size: 0.7em;
     line-height: 1.6em;
     border-radius: 5px;
     margin: 0 auto;
-    transition: .1s all;
+    transition: 0.1s all;
     border: 0;
     text-decoration: underline;
     outline: 0;
@@ -384,11 +396,12 @@
   .edit-block {
     padding-left: 1em;
     border-left: rgba(0, 0, 0, 0.2) 4px solid;
-    transition: .2s all;
+    transition: 0.2s all;
     &:not(:first-child) {
       margin-top: 2em;
     }
-    input[type="text"], input[type="number"] {
+    input[type='text'],
+    input[type='number'] {
       font-size: 1em;
     }
     label {
@@ -399,13 +412,13 @@
     }
     &:hover {
       border-left: rgba(0, 0, 0, 0.7) 4px solid;
-      transition: .2s all;
+      transition: 0.2s all;
     }
   }
 
   span.subtext {
     display: block;
-    color: rgba(0,0,0,.5);
+    color: rgba(0, 0, 0, 0.5);
     text-transform: none;
     font-weight: normal;
   }
@@ -416,24 +429,24 @@
   .sort-list {
     list-style: none;
     > li {
-      margin-right: .3em;
-      margin-bottom: .3em;
+      margin-right: 0.3em;
+      margin-bottom: 0.3em;
     }
   }
   .sort-list li > div {
     display: block;
     box-sizing: border-box;
-    border: 1px solid #D1D1D1;
+    border: 1px solid #d1d1d1;
     border-radius: 2px;
-    background: #F1F1F1;
-    padding: .4em .6em;
-    font-size: .8em;
-    margin-bottom: .3em;
+    background: #f1f1f1;
+    padding: 0.4em 0.6em;
+    font-size: 0.8em;
+    margin-bottom: 0.3em;
     cursor: move;
   }
 
   .info {
-    font-size: .8em;
+    font-size: 0.8em;
     line-height: 1.4em;
     font-style: italic;
     padding-top: 10px;
@@ -446,12 +459,12 @@
   .react-tags {
     position: relative;
     input.react-tags__search-input {
-      font-size: .8rem;
+      font-size: 0.8rem;
     }
     /* clicking anywhere will focus the input */
     cursor: text;
     span {
-      display: inline
+      display: inline;
     }
   }
 
@@ -466,24 +479,24 @@
   .react-tags__selected-tag {
     display: inline-block;
     box-sizing: border-box;
-    border: 1px solid #D1D1D1;
+    border: 1px solid #d1d1d1;
     border-radius: 2px;
-    background: #F1F1F1;
-    padding: .4em .6em;
-    font-size: .8em;
-    margin-right: .3em;
-    margin-bottom: .3em;
+    background: #f1f1f1;
+    padding: 0.4em 0.6em;
+    font-size: 0.8em;
+    margin-right: 0.3em;
+    margin-bottom: 0.3em;
   }
 
   .react-tags__selected-tag:after {
     content: '\2715';
-    color: #AAA;
+    color: #aaa;
     margin-left: 8px;
   }
 
   .react-tags__selected-tag:hover,
   .react-tags__selected-tag:focus {
-    border-color: #B1B1B1;
+    border-color: #b1b1b1;
   }
 
   .react-tags__search {
@@ -498,7 +511,7 @@
     padding: 0;
     list-style: none;
     background: white;
-    border: 1px solid #D1D1D1;
+    border: 1px solid #d1d1d1;
     border-radius: 2px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   }
@@ -527,38 +540,37 @@
     opacity: 0.5;
     cursor: auto;
   }
-
 }
 .editor-toggle {
-  background: #F2F2F2;
+  background: #f2f2f2;
   border-radius: 60px;
   color: #000;
   font-size: 1em;
   border: 0;
   position: fixed;
   z-index: 100;
-  transition: .1s background;
+  transition: 0.1s background;
   cursor: pointer;
   width: 25px;
   height: 25px;
   left: 307px;
   top: 10px;
-  box-shadow: rgba(0,0,0,.5) 0 1px 2px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
   &:before {
     top: 43%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
-    content: "\00ab";
+    content: '\00ab';
   }
   &.collapsed {
     left: 1em;
     margin-left: 0;
     &:before {
-      content: "\00bb";
+      content: '\00bb';
     }
   }
   &:hover {
-    background: rgba(255,255,255,1)
+    background: rgba(255, 255, 255, 1);
   }
 }

package/src/scss/main.scss

@@ -1,6 +1,6 @@
 @import '~@cdc/core/styles/base';
-@import "~@cdc/core/styles/heading-colors";
-@import "~@cdc/core/styles/v2/themes/color-definitions";
+@import '~@cdc/core/styles/heading-colors';
+@import '~@cdc/core/styles/v2/themes/color-definitions';
 @import 'variables';
 
 .cdc-open-viz-module.type-data-bite {
@@ -11,6 +11,14 @@
     left: -10000px;
   }
 
+  .checkbox-group {
+    padding: 16px;
+    border: 1px solid #c4c4c4;
+    border-radius: 8px;
+    margin-top: 8px;
+    margin-bottom: 24px;
+  }
+
   .loader {
     width: 100%;
     text-align: center;
@@ -26,10 +34,10 @@
     background: #005eaa;
     color: #fff;
     border: 0;
-    padding: .4em .8em;
+    padding: 0.4em 0.8em;
     display: block;
     border-radius: 5px;
-    transition: .1s all;
+    transition: 0.1s all;
     cursor: pointer;
 
     &[disabled] {
@@ -53,8 +61,8 @@
 
   .tooltip {
     background-color: #fff;
-    border: rgba(0,0,0,0.3) 1px solid !important;
-    box-shadow: rgba(0,0,0,.1) 3px 3px 7px;
+    border: rgba(0, 0, 0, 0.3) 1px solid !important;
+    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 7px;
     line-height: 1.4em;
     font-size: 1em !important;
     border-radius: 4px !important;
@@ -62,10 +70,10 @@
     opacity: 1;
   }
 
-  &.font-small .cdc-data-bite-inner-container .bite-content-container {
-    font-size: .9em !important;
+  &.font-small .bite-content-container {
+    font-size: 0.9em !important;
   }
-  &.font-large .cdc-data-bite-inner-container .bite-content-container {
+  &.font-large .bite-content-container {
     font-size: 1.1em !important;
   }
   // Medium is just the default

package/src/scss/variables.scss

@@ -1 +1 @@
-$editorWidth: 350px;
+$editorWidth: 350px;