@cdc/chart 4.23.10 → 4.24.1

package/src/scss/legend.scss

@@ -1,206 +0,0 @@
-// Notes - copied in from map > sidebar.scss
-// should be placed in a more global area eventually.
-// Had to remove/edit some styles to make the legend look proper.
-aside {
-  background-color: #fff;
-  z-index: 6;
-  border-top: $lightGray 1px solid;
-  @include breakpointClass(md) {
-    &.bottom {
-      border: $lightGray 1px solid;
-    }
-    &.side {
-      z-index: 1;
-      box-sizing: content-box;
-      max-width: 450px;
-      margin-top: 2em;
-      margin-bottom: 2em;
-      align-self: flex-start;
-      z-index: 4;
-      right: 1em;
-      border: $lightGray 1px solid;
-      width: 50%;
-      top: 2em;
-      right: 1em;
-
-      ul.vertical-sorted {
-        @include breakpoint(md) {
-          column-count: 2;
-          column-fill: balance;
-        }
-      }
-
-      ul:not(.vertical-sorted) {
-        @include breakpoint(md) {
-          column-count: initial;
-          column-fill: initial;
-        }
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-      }
-    }
-
-    &.bottom {
-      ul.legend-container__ul.vertical-sorted {
-        display: block;
-        @include breakpoint(md) {
-          column-count: 2;
-          column-fill: balance;
-        }
-      }
-
-      ul.legend-container__ul {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-
-        li {
-          width: 50%;
-        }
-      }
-
-      ul.single-row {
-        display: block;
-        column-count: initial;
-        column-fill: auto;
-      }
-    }
-  }
-
-  &.legend-container {
-    padding: 1em;
-    position: relative;
-    .legend-container__title {
-      font-size: 1.3em;
-      padding-bottom: 0;
-      display: inline-block;
-    }
-    .legend-container__title + p,
-    .legend-container__title + ul,
-    p + ul,
-    p + p {
-      padding-top: 1em;
-    }
-    .legend-container__reset-button {
-      font-size: 0.75em;
-      color: rgba(0, 0, 0, 0.6);
-      position: absolute;
-      right: 1em;
-      top: 1em;
-      background: rgba(0, 0, 0, 0.1);
-      text-transform: uppercase;
-      transition: 0.2s all;
-      padding: 0.2em 0.5em;
-      border: rgba(0, 0, 0, 0.2) 1px solid;
-      color: rgba(0, 0, 0, 0.6) !important;
-      &:hover {
-        text-decoration: none;
-        background: rgba(0, 0, 0, 0.15);
-        transition: 0.2s all;
-      }
-    }
-    p {
-      line-height: 1.4em;
-    }
-    .legend-container__ul {
-      list-style: none;
-      padding-top: 1em;
-
-      &.vertical-sorted {
-        flex-direction: column;
-      }
-      .legend-container__li {
-        flex-shrink: 0;
-        display: inline-block;
-        padding-right: 1em;
-        padding-bottom: 1em;
-        vertical-align: middle;
-        transition: 0.1s opacity;
-        display: flex;
-        cursor: pointer;
-        flex-grow: 1;
-
-        &.legend-container__li--disabled {
-          opacity: 0.4;
-        }
-      }
-    }
-  }
-
-  &.side .legend-container .legend-container__ul--single-column {
-    @include breakpointClass(md) {
-      width: 25%;
-      min-width: 200px;
-      .legend-section ul {
-        flex-direction: column;
-        li {
-          width: 100%;
-          &:nth-last-of-type(-n + 2) {
-            padding-bottom: 1em;
-          }
-          &:last-child {
-            padding-bottom: 0;
-          }
-        }
-      }
-    }
-    li {
-      width: 100%;
-    }
-  }
-
-  &.bottom.single-row {
-    width: 100%;
-    .legend-container ul {
-      flex-direction: row;
-      align-items: baseline;
-      justify-content: flex-start;
-      flex-wrap: wrap;
-      li {
-        justify-items: center;
-        line-break: loose;
-        align-items: center;
-        width: auto;
-        padding-right: 1em;
-        padding-bottom: 1em;
-        display: inline-block;
-        & > span {
-          margin: 0 !important;
-        }
-      }
-    }
-  }
-
-  @include breakpointClass(sm) {
-    .legend-container ul {
-      align-items: flex-start;
-      justify-content: space-between;
-      li {
-        flex-grow: 1;
-        padding-right: 0.5em;
-      }
-    }
-  }
-
-  .filters-section {
-    padding: 0 1em 1em;
-    .heading-3 {
-      font-weight: bold;
-      margin-bottom: 0.5em;
-    }
-    form {
-      margin-top: 0.5em;
-      line-height: 2em;
-      display: flex;
-      align-items: flex-end;
-      section + section {
-        margin-left: 0.75em;
-      }
-      select {
-        display: block;
-        font-size: 1em;
-      }
-    }
-  }
-}

package/src/scss/variables.scss

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