@cdc/map 2.6.0 → 2.6.3

package/src/scss/main.scss

@@ -0,0 +1,224 @@
+@import "~@cdc/core/styles/base";
+@import "~@cdc/core/styles/heading-colors";
+@import "variables";
+@import "editor-panel";
+
+.cdc-map-outer-container {
+  position: relative;
+  display: flex; // Needed for the main content
+  .loading > div.la-ball-beat {
+    margin-top: 20%;
+  }
+  @include breakpointClass(xs) {
+    div#tooltip {
+      display: none !important;
+    }
+  }
+  @include breakpointClass(md) {
+    .map-container.modal-background::before {
+      border-bottom: $lightGray 1px solid;
+      margin-bottom: -1px;
+      bottom: 1px;
+    }
+  }
+}
+
+.cdc-map-inner-container {
+  @import "./tooltips";
+  @import "./map";
+  @import "./sidebar";
+  @import "./datatable";
+  flex-grow: 1;
+  text-rendering: geometricPrecision;
+  color: #202020;
+  border: 0;
+  text-align: left;
+  max-width: 100%;
+  .btn {
+    padding: .375em .75em;
+    border-radius: .3em;
+  }
+
+  header.hidden {
+    display: none;
+  }
+
+  .no-border {
+    border: 0;
+  }
+
+  div.map-title {
+    margin: 0;
+    color: #fff;
+    font-size: 1.1em;
+    position: relative;
+    em {
+      font-style: italic;
+    }
+    strong {
+      font-weight: bold;
+    }
+  }
+
+  div.map-title:not(:empty) {
+    margin: 0 !important;
+    padding: .6em .8em;
+    border-bottom-width: 3px;
+    border-bottom-style: solid;
+  }
+
+  .map-container {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    &.modal-background {
+      position: relative;
+      &::before {
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: -1em;
+        right: -1em;
+        bottom: 0;
+        background: rgba(0,0,0,.05);
+        z-index: 7;
+      }
+      .modal-content {
+        background: #fff;
+        position: absolute;
+        z-index: 8;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        flex-direction: row;
+        border-radius: 5px;
+        transform: translate(-50%, -50%);
+        border: rgba(0, 0, 0, 0.3) 1px solid;
+        box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 7px;
+        opacity: 1;
+        line-height: 1.4em;
+        font-size: 1rem;
+        border-radius: 4px;
+        min-width: 250px;
+        padding: 16px 40px 16px 20px;
+        width: auto;
+        .content {
+          flex-grow: 1;
+        }
+        .legend-item {
+          margin-right: .75em;
+          margin-top: 3px;
+          flex-shrink: 0;
+        }
+        @include breakpointClass(sm) {
+          transform: translate(-50%, -100%);
+        }
+        @include breakpointClass(md) {
+          transform: translate(-50%, -120%);
+        }
+        @include breakpointClass(lg) {
+          font-size: .9em;
+          min-width: 300px;
+          .legend-item {
+            height: 1.3em;
+            width: 1.3em;
+          }
+        }
+        strong {
+          font-weight: 600;
+          font-size: 1.2em;
+        }
+        .modal-close {
+          position: absolute;
+          right: 20px;
+          top: 18px;
+          cursor: pointer;
+          width: 1em;
+        }
+        span.navigation-link {
+          text-decoration: underline;
+          cursor: pointer;
+          color: #075290;
+          display: flex;
+          svg {
+            display: inline-block;
+            max-width: 13px;
+          }
+        }
+        &.capitalize p {
+          text-transform: capitalize;
+        }
+      }
+    }
+  }
+
+  p.subtext {
+    font-size: .9em;
+    padding: 0 .8em .8em;
+    em {
+      font-style: italic;
+    }
+    strong {
+      font-weight: bold;
+    }
+  }
+
+  span.legend-item {
+    margin-right: 5px;
+    border-radius: 300px;
+    vertical-align: middle;
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    min-width: 1em;
+    min-height: 1em;
+    max-width: 1em;
+    max-height: 1em;
+    border: rgba(0,0,0,.3) 1px solid;
+  }
+
+  .navigation-menu {
+    background: #fff;
+    position: relative;
+    line-height: 1.3em;
+    padding: 1em;
+    z-index: 6;
+    width: 100%;
+    border-top: $lightGray 1px solid;
+    label {
+      flex-grow: 1;
+      > div.select-heading {
+        font-size: 1.1em;
+        font-weight: 600;
+        margin-bottom: .75em; 
+      }
+    }
+    form {
+      max-width: 400px;
+      display: flex;
+      align-items: flex-end;
+    }
+    select {
+      font-size: 1.2em;
+      display: inline-block;
+      vertical-align: top;
+      width: 100%;
+    }
+    input {
+      color: #fff;
+      font-weight: 700;
+      padding: .4em .65em;
+      font-size: .9em;
+      border: 0;
+      display: inline-block;
+      border-radius: 7px;
+      margin-left: .5em;
+      cursor: pointer;
+    }
+  }
+
+  [tabIndex]:focus {
+    outline-color: rgb(0, 95, 204)
+  }
+  
+}

package/src/scss/map.scss

@@ -0,0 +1,188 @@
+// Map Download UI
+.map-downloads {
+	position: relative;
+	z-index: 3;
+
+	.map-downloads__ui.btn-group {
+		transform: scale(0.8);
+	}
+
+	.map-downloads__ui {
+		position: absolute;
+		top: 0.5em;
+		left: 0.5em;
+		transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+		box-shadow: 0 5px 12px -8px rgba(0, 0, 0, 0.5);
+		user-select: none;
+		height: 42px;
+	}
+}
+
+.map-container {
+	&.full-border {
+		border: #c2c2c2 1px solid;
+	}
+}
+
+header + .map-container.full-border {
+	border-top: 0; // When they have a header, don't add a border top
+}
+
+// World Specific Styles
+.map-container.world {
+	&.data .geography-container {
+		border-bottom: $lightGray 1px solid;
+	}
+	.geography-container {
+		cursor: move;
+	}
+}
+
+@include breakpointClass(md) {
+	// US Specific
+	.map-container.us {
+		margin: 0 1em;
+	}
+	// Data Specific
+	.map-container.data {
+		&.side {
+			flex-direction: row;
+		}
+	}
+}
+
+.geography-container {
+	position: relative;
+	flex-grow: 1;
+	width: 100%;
+	overflow: hidden;
+	.geo-point {
+		transition: 0.3s all;
+		circle {
+			fill: inherit;
+			transition: 0.1s transform;
+		}
+		&:hover {
+			transition: 0.2s all;
+		}
+	}
+	.map-logo {
+		position: absolute;
+		bottom: 2em;
+		right: 1em;
+		z-index: 3;
+		width: 75px;
+	}
+}
+
+.single-geo {
+	transition: 0.2s fill;
+	cursor: pointer;
+	&:focus {
+		outline: 0;
+	}
+}
+
+// Cities and Territories
+.territories {
+	margin: 2em 100px 2em 0;
+	font-size: 1.1em;
+	display: flex;
+	align-items: center;
+	> span {
+		margin-left: 1em;
+		margin-right: 0.5em;
+	}
+	svg {
+		max-width: 35px;
+	    min-width: 25px;
+		margin-left: 0.5em;
+		transition: 0.3s all;
+		text {
+			font-size: 0.95em;
+		}
+	}
+}
+
+.zoom-controls {
+	display: flex;
+	position: absolute;
+	bottom: 2em;
+	left: 1em;
+	z-index: 4;
+	> button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.2em;
+		height: 1.75em;
+		width: 1.75em;
+		background: rgba(0, 0, 0, 0.65);
+		transition: 0.2s all;
+		color: #fff;
+		border-radius: 100%;
+		border: 0;
+		&:hover {
+			background: rgba(0, 0, 0, 0.8);
+			transition: 0.2s all;
+		}
+		&:active {
+			transform: scale(0.9);
+		}
+	}
+	> button:first-child {
+		margin-right: 0.25em;
+	}
+}
+
+@include breakpointClass(sm) {
+	.zoom-controls > button {
+		height: 2.5em;
+		width: 2.5em;
+	}
+}
+
+@include breakpointClass(md) {
+	.map-downloads .map-downloads__ui.btn-group {
+		top: 1em;
+		left: 1em;
+		transform: none;
+	}
+	.territories {
+		font-size: 1em;
+		> span {
+			margin-left: 0;
+		}
+		svg {
+			max-width: 45px;
+		}
+	}
+}
+
+.countyMapGroup {
+	transition: transform 1s;
+	will-change: transform;
+	transform-origin: center;
+	stroke: none !important;
+}
+
+// .state {
+// 	display: none;
+// }
+
+.state {
+	&--inactive:hover path {
+		cursor: pointer;
+		transition: fill 0.5s;
+	}
+}
+
+.county--path {
+	fill: white;
+}
+
+.btn--reset {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+}

package/src/scss/sidebar.scss

@@ -0,0 +1,146 @@
+.map-container.world aside.side {
+  border-top: 0;
+}
+@include breakpointClass(md) {
+  .map-container.world aside.side {
+    border-top: $lightGray 1px solid;
+    position: absolute;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 10px 18px;
+  }
+}
+
+aside {
+  background-color: #fff;
+  z-index: 6;
+  border-top: $lightGray 1px solid;
+  @include breakpointClass(md) {
+    &.bottom {
+      border: #c2c2c2 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;
+    }
+  }
+
+  .legend-section {
+    padding: 1em;
+    position: relative;
+    .heading-2 {
+      font-size: 1.3em;
+      padding-bottom: 0;
+      display: inline-block;
+    }
+    .heading-2 + p, .heading-2 + ul, p + ul, p + p {
+      padding-top: 1em;
+    }
+    .clear {
+      font-size: .75em;
+      color: rgba(0, 0, 0, 0.6);
+      position: absolute;
+      right: 1em;
+      background: rgba(0, 0, 0, 0.1);
+      text-transform: uppercase;
+      transition: .2s all;
+      padding: .2em .5em;
+      border: rgba(0,0,0,.2) 1px solid;
+      &:hover {
+        text-decoration: none;
+        background: rgba(0,0,0,.15);
+        transition: .2s all;
+      }
+    }
+    p {
+      line-height: 1.4em;
+    }
+    ul {
+      list-style: none;
+      padding: 0;
+      display: flex;
+      flex-wrap: wrap;
+      li {
+        flex-shrink: 0;
+        display: inline-block;
+        padding-right: 1em;
+        padding-bottom: 1em;
+        vertical-align: middle;
+        transition: .1s opacity;
+        display: flex;
+        align-items: center;
+        &.single-legend {
+          cursor: pointer;
+        }
+        .color {
+          flex-shrink: 0;
+        }
+        &.disabled {
+          opacity: .4;
+        }
+      }
+    }
+  }
+
+  &.side.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;
+          }
+        }
+      }
+    }
+  }
+
+  @include breakpointClass(sm) {
+    .legend-section ul {
+      align-items: flex-start;
+      justify-content: space-between;
+      li {
+        width: 48%;
+        padding-right: .5em;
+        &:nth-last-of-type(-n+2) {
+          padding-bottom: 0
+        }
+      }
+    }
+  }
+
+  .filters-section {
+    padding: 0 1em 1em;
+    .heading-3 {
+      font-weight: bold;
+      margin-bottom: .5em;
+    }
+    form {
+      margin-top: .5em;
+      line-height: 2em;
+      display: flex;
+      align-items: flex-end;
+      section + section {
+        margin-left: .75em;
+      }
+      select {
+        display: block;
+        font-size: 1em;
+      }
+    }
+  }
+}

package/src/scss/tooltips.scss

@@ -0,0 +1,30 @@
+/* Tooltip Styles - overrides some default ones provided by <ReactTooltip /> */
+.tooltip {
+  opacity: 1 !important;
+  border: rgba(0,0,0,.3) 1px solid;
+  box-shadow: rgba(0,0,0,.1) 3px 3px 7px;
+  opacity: 1;
+  line-height: 1.4em;
+  font-size: 1em;
+  border-radius: 4px;
+  padding: 8px 12px;
+  &:before, &:after {
+    display: none;
+  }
+
+  &.capitalize dl {
+    text-transform: capitalize;
+  }
+
+  dl dt:not(:empty)::after {
+    content: ":\00a0";
+  }
+
+  dl > div {
+    display: flex;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+}

package/src/scss/variables.scss

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