@cdc/waffle-chart 1.0.0 → 1.0.1

package/src/scss/editor-panel.scss

@@ -1,710 +0,0 @@
-.spacing-wrapper {
-  padding-left: 350px;
-}
-
-.editor-panel.hidden + .spacing-wrapper {
-  padding-left: 0;
-}
-
-.editor-panel {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: $editorWidth;
-  background: #fff;
-  overflow-x: hidden;
-  overflow-y: auto;
-  z-index: 8;
-
-  .heading {
-    font-size: 1.2em;
-  }
-
-  .two-col-inputs {
-    display: flex;
-    margin-top: 1em;
-    justify-content: space-between;
-
-    > label {
-      width: 48%;
-      margin-top: 0 !important
-    }
-  }
-
-  .divider-heading {
-    display: block;
-    font-size: 1em;
-    margin-top: 1em;
-  }
-
-  .series-list {
-    list-style: none;
-    border: $lightGray 1px solid;
-
-    &:empty {
-      border: none !important
-    }
-
-    li {
-      padding: .3em .5em;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: .9em;
-
-      &:hover {
-        background-color: $lightestGray;
-      }
-
-      span {
-        font-size: .8em;
-        color: #f00;
-        cursor: pointer;
-      }
-
-      + li {
-        border-top: $lightGray 1px solid;
-      }
-    }
-  }
-
-  .accordion__heading {
-    background: $lightestGray;
-  }
-
-  .accordion__item {
-    select {
-      text-transform: capitalize;
-    }
-
-    .number-narrow {
-      min-width: auto;
-      width: 75px
-    }
-  }
-
-  .form-container {
-    border-right: $lightGray 1px solid;
-    flex-grow: 1;
-  }
-
-  .guidance-link {
-    margin: 2em 1em 0;
-    padding: .75em 1em;
-
-    svg {
-      width: 60px;
-      color: $blue;
-      margin-right: 1rem;
-      height: 60px; // IE11
-      path {
-        fill: currentColor;
-      }
-    }
-  }
-
-  .warning {
-    color: #D8000C;
-    background-color: #FFD2D2;
-    border: #D8000C 1px solid;
-    padding: .75em 1em;
-    margin: 1em 0;
-    font-size: .8em;
-    border-radius: .4em;
-
-    strong {
-      font-weight: 600;
-      display: block;
-    }
-  }
-
-  .accordion__button {
-    cursor: pointer;
-    font-size: 1em;
-    padding: .3em 1em;
-    width: 100%;
-    text-align: left;
-    position: relative;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-
-    &::before {
-      display: inline-block;
-      content: '';
-      height: 7px;
-      width: 7px;
-      margin-right: 1em;
-      border-bottom: 2px solid currentColor;
-      border-right: 2px solid currentColor;
-      right: 0;
-      position: absolute;
-      top: 50%;
-      transform: rotate(-45deg) translateY(-50%);
-      transition: .1s all;
-    }
-
-    &[aria-expanded='true']::before,
-    &[aria-selected='true']::before {
-      transform: rotate(45deg) translateY(-50%);
-      margin-right: 1.3em;
-      transition: .1s all;
-    }
-  }
-
-  .accordion__panel {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-    padding: 1em 1.25em 2em;
-    animation: fadein 0.2s ease-in;
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    h5 {
-      font-size: .8em;
-    }
-
-    .accordion__panel-section {
-      padding: 16px;
-      border: 1px solid #c4c4c4;
-      border-radius: 8px;
-      margin-top: 8px;
-      margin-bottom: 24px;
-    }
-
-    .accordion__panel-row {
-      display: flex;
-      justify-content: flex-start;
-      margin-left: -4px;
-      margin-right: -4px;
-    }
-
-    .accordion__panel-col {
-      flex: 1 1 0;
-      padding-left: 4px;
-      padding-right: 4px;
-    }
-
-    .accordion__small-inputs {
-      input[type="text"] {
-        display: block;
-        width: 100%;
-        height: 22px;
-        min-width: unset !important;
-        padding-top: 0;
-        padding-bottom: 0;
-        font-size: 1.1em;
-        line-height: 1em;
-        box-sizing: border-box;
-      }
-    }
-
-    .accordion__panel-label {
-      font-size: 14px;
-      text-transform: unset;
-      font-weight: normal;
-      line-height: 16px;
-      user-select: none;
-    }
-
-    .accordion__panel-label--inline {
-      @extend .accordion__panel-label;
-      text-align: right;
-      margin-right: 8px;
-    }
-
-    .accordion__panel-label--muted {
-      @extend .accordion__panel-label;
-      color: #6f6f6f;
-    }
-
-    .d-flex {
-      display: flex;
-    }
-
-    .align-center {
-      align-items: center;
-    }
-
-    .justify-end {
-      justify-content: flex-end;
-    }
-
-    .accordion__panel-checkbox {
-      display: block;
-      width: 18px;
-      height: 18px;
-      border: 1px solid #c4c4c4;
-      cursor: pointer;
-
-      &.checked::after {
-        content: 'L';
-        display: block;
-        position: relative;
-        top: -7px;
-        left: -3px;
-        transform: scaleX(-1) rotate(-35deg);
-        font-size: 16px;
-        font-weight: bold;
-        color: #025eaa;
-        pointer-events: none;
-      }
-    }
-
-    .accordion__input-error {
-      color: #D8000C;
-      border: #D8000C 1px solid;
-    }
-
-    .accordion__panel-error {
-      color: #D8000C;
-      background-color: #FFD2D2;
-      border: #D8000C 1px solid;
-      margin-top: 12px;
-      padding: 4px 8px;
-      line-height: 1.2em;
-      font-size: 14px;
-      border-radius: 4px;
-    }
-  }
-
-  .advanced {
-    padding: 0 1em 1em;
-    text-align: left;
-
-    p {
-      font-size: .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;
-        display: inline-block;
-        font-family: monospace;
-        padding-right: 5px;
-      }
-
-      &:hover {
-        color: rgba(0, 0, 0, .7);
-      }
-    }
-
-    textarea {
-      height: 400px;
-      width: 100%;
-      font-size: .9em;
-      padding: .5em;
-      font-family: monospace;
-      box-sizing: border-box
-    }
-  }
-
-  @keyframes fadein {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  h2 {
-    background: #565656;
-    color: #fff;
-    font-size: 1.1em;
-    padding: .6em 1em;
-    position: relative;
-    border-bottom: #565656 3px solid;
-    z-index: 3;
-  }
-
-  label {
-    text-transform: uppercase;
-    display: block;
-    font-size: .8em;
-    font-weight: 600;
-
-    &:not(:first-child) {
-      margin-top: 1em;
-    }
-
-    span.edit-label {
-      margin-bottom: .3em;
-      display: block;
-    }
-
-    span.column-heading {
-      font-size: 1em;
-    }
-
-    &.checkbox {
-      display: flex;
-
-      span {
-        display: inline;
-      }
-
-      input {
-        margin-left: 0;
-        width: inherit;
-        display: inline;
-      }
-    }
-  }
-
-  input[type="text"],
-  input[role="combobox"],
-  input[type="number"],
-  textarea {
-    width: 100%;
-    min-width: 100%;
-    max-width: 100%; // Doing this prevents width of textarea from being changed
-  }
-
-  textarea {
-    min-height: 140px;
-  }
-
-  .color-palette {
-    display: flex;
-    max-width: 100%;
-    padding: 0;
-    margin: .5em 0 0 0;
-    list-style: none;
-    flex-wrap: wrap;
-
-    li {
-      display: flex;
-      width: 21px;
-      height: 21px;
-      border-radius: 40px;
-      margin-right: 4px;
-      margin-bottom: 10px;
-      overflow: hidden;
-      cursor: pointer;
-      position: relative;
-
-      .click-target {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-
-      &.selected {
-        border: rgba(0, 0, 0, .8) 2px solid;
-      }
-
-      span {
-        width: 33.3%;
-      }
-    }
-
-    @at-root .header #{&} {
-      li {
-        width: 21px;
-        height: 21px;
-        border-radius: 40px;
-        margin-right: 2.8px;
-      }
-    }
-  }
-
-  fieldset {
-    display: block;
-  }
-
-  .primary-fieldset {
-    padding: 0;
-    margin: 0;
-    border: 0;
-  }
-
-  ul.column-edit {
-    list-style: none;
-
-    li {
-      margin-top: 1em;
-    }
-
-    .three-col {
-      display: flex;
-      justify-content: space-between;
-
-      > label {
-        margin-top: 0;
-        width: 30%;
-        display: inline-block;
-
-        input[type="text"], input[type="number"] {
-          width: 50px;
-        }
-      }
-    }
-  }
-
-  &.hidden {
-    display: none;
-  }
-
-  .remove-column {
-    float: right;
-    text-transform: uppercase;
-    color: #C32B2B;
-    font-size: .7em;
-    line-height: 1.6em;
-    border-radius: 5px;
-    margin: 0 auto;
-    transition: .1s all;
-    border: 0;
-    text-decoration: underline;
-    outline: 0;
-    cursor: pointer;
-    font-weight: bold;
-  }
-
-  .edit-block {
-    padding-left: 1em;
-    border-left: rgba(0, 0, 0, 0.2) 4px solid;
-    transition: .2s all;
-
-    &:not(:first-child) {
-      margin-top: 2em;
-    }
-
-    input[type="text"], input[type="number"] {
-      font-size: 1em;
-    }
-
-    label {
-      margin-top: 0;
-    }
-
-    label + label {
-      margin-top: 1em;
-    }
-
-    &:hover {
-      border-left: rgba(0, 0, 0, 0.7) 4px solid;
-      transition: .2s all;
-    }
-  }
-
-  span.subtext {
-    display: block;
-    color: rgba(0, 0, 0, .5);
-    text-transform: none;
-    font-weight: normal;
-  }
-
-  .btn {
-    margin-top: 1em;
-  }
-
-  .sort-list {
-    list-style: none;
-
-    > li {
-      margin-right: .3em;
-      margin-bottom: .3em;
-    }
-
-    li > div {
-      display: block;
-      box-sizing: border-box;
-      border: 1px solid #D1D1D1;
-      border-radius: 2px;
-      background: #F1F1F1;
-      padding: .4em .6em;
-      font-size: .8em;
-      margin-bottom: .3em;
-      cursor: move;
-    }
-  }
-
-  .info {
-    font-size: .8em;
-    line-height: 1.4em;
-    font-style: italic;
-    padding-top: 10px;
-  }
-
-  .react-tags__search {
-    width: 100%;
-  }
-
-  .react-tags {
-    position: relative;
-    cursor: text;
-
-    input.react-tags__search-input {
-      font-size: .8rem;
-    }
-
-    span {
-      display: inline
-    }
-
-    &.is-focused {
-      border-color: rgba(0, 0, 0, 0.7);
-    }
-  }
-
-  .react-tags__selected {
-    display: inline;
-  }
-
-  .react-tags__selected-tag {
-    display: inline-block;
-    box-sizing: border-box;
-    border: 1px solid #D1D1D1;
-    border-radius: 2px;
-    background: #F1F1F1;
-    padding: .4em .6em;
-    font-size: .8em;
-    margin-right: .3em;
-    margin-bottom: .3em;
-
-    &::after {
-      content: '\2715';
-      color: #AAA;
-      margin-left: 8px;
-    }
-
-    &:hover,
-    &:focus {
-      border-color: #B1B1B1;
-    }
-  }
-
-  .react-tags__search {
-    display: inline-block;
-    max-width: 100%;
-
-    input {
-      max-width: 100%;
-      margin: 0;
-      outline: none;
-      padding: .5em .3em;
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    input::-ms-clear {
-      display: none;
-    }
-  }
-
-  @media screen and (min-width: 30em) {
-    .react-tags__search {
-      position: relative;
-    }
-  }
-
-  .react-tags__suggestions {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-
-    ul {
-      margin: 4px -1px;
-      padding: 0;
-      list-style: none;
-      background: white;
-      border: 1px solid #D1D1D1;
-      border-radius: 2px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    }
-
-    li {
-      border-bottom: 1px solid #ddd;
-      padding: 6px 8px;
-
-      &:hover {
-        cursor: pointer;
-        background: #eee;
-      }
-
-      &.is-active {
-        background: #b7cfe0;
-      }
-
-      &.is-disabled {
-        opacity: 0.5;
-        cursor: auto;
-      }
-
-      mark {
-        text-decoration: underline;
-        background: none;
-        font-weight: 600;
-      }
-    }
-  }
-
-  @media screen and (min-width: 30em) {
-    .react-tags__suggestions {
-      width: 240px;
-    }
-  }
-}
-
-.editor-toggle {
-  background: #F2F2F2;
-  border-radius: 60px;
-  color: #000;
-  font-size: 1em;
-  border: 0;
-  position: fixed;
-  z-index: 100;
-  transition: .1s background;
-  cursor: pointer;
-  width: 25px;
-  height: 25px;
-  left: 307px;
-  top: 10px;
-  box-shadow: rgba(0, 0, 0, .5) 0 1px 2px;
-
-  &:before {
-    top: 43%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    position: absolute;
-    content: "\00ab";
-  }
-
-  &.collapsed {
-    left: 1em;
-    margin-left: 0;
-
-    &:before {
-      content: "\00bb";
-    }
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 1)
-  }
-}
-
-@include breakpointClass(md) {
-  .editor-panel:not(.hidden) + .cdc-data-bite-inner-container {
-    padding-left: $editorWidth;
-  }
-
-  .waiting {
-    padding-left: 350px;
-  }
-}

package/src/scss/responsive.scss

@@ -1 +0,0 @@
-

package/src/scss/variables.scss

@@ -1,29 +0,0 @@
-$theme-colors: (
-  "blue": $primary,
-  "purple": $purple-primary,
-  "brown": $brown-primary,
-  "teal": $teal-primary,
-  "pink": $pink-primary,
-  "orange": $orange-primary,
-  "slate": $slate-primary,
-  "indigo": $indigo-primary,
-  "cyan": $cyan-primary,
-  "green": $green-primary,
-  "amber": $amber-primary
-);
-
-$theme-colors-secondary: (
-  "blue": $secondary,
-  "purple": $purple-secondary,
-  "brown": $brown-secondary,
-  "teal": $teal-secondary,
-  "pink": $pink-secondary,
-  "orange": $orange-secondary,
-  "slate": $slate-secondary,
-  "indigo": $indigo-secondary,
-  "cyan": $cyan-secondary,
-  "green": $green-secondary,
-  "amber": $amber-secondary
-);
-
-$editorWidth: 350px;