From 9877dbecfefafd28ccf13fed6b22524bca784ffd Mon Sep 17 00:00:00 2001 From: Aditya Mohta Date: Fri, 12 Mar 2021 23:35:45 +0530 Subject: [PATCH 1/2] Modified: Directory structure --- src/App.js | 34 +- src/App.scss | 4568 -------------------- src/{components => pages}/About.js | 2 +- src/{components => pages}/Blog.js | 0 src/{components => pages}/Home.js | 24 +- src/{components => pages}/State.js | 22 +- src/pages/index.js | 34 + src/scss/_extra.scss | 206 + src/scss/abstracts/_variables.scss | 74 + src/scss/base/_animations.scss | 62 + src/scss/base/_common.scss | 97 + src/scss/base/_reset.scss | 124 + src/scss/components/_footer.scss | 97 + src/scss/components/_graphs.scss | 1226 ++++++ src/scss/components/_languageswitcher.scss | 77 + src/scss/components/_level.scss | 89 + src/scss/components/_levelvaccinated.scss | 26 + src/scss/components/_mapswitcher.scss | 45 + src/scss/components/_navbar.scss | 197 + src/scss/components/_search.scss | 393 ++ src/scss/components/_statedropdown.scss | 47 + src/scss/components/_stateheader.scss | 61 + src/scss/components/_statemeta.scss | 246 ++ src/scss/components/_table.scss | 492 +++ src/scss/components/_timeline.scss | 31 + src/scss/components/_tooltip.scss | 27 + src/scss/components/_updates.scss | 119 + src/scss/main.scss | 37 + src/scss/pages/_about.scss | 51 + src/scss/pages/_common.scss | 44 + src/scss/pages/_home.scss | 153 + src/scss/pages/_state.scss | 264 ++ src/scss/themes/_darkmode.scss | 355 ++ 33 files changed, 4702 insertions(+), 4622 deletions(-) delete mode 100644 src/App.scss rename src/{components => pages}/About.js (97%) rename src/{components => pages}/Blog.js (100%) rename src/{components => pages}/Home.js (87%) rename src/{components => pages}/State.js (93%) create mode 100644 src/pages/index.js create mode 100644 src/scss/_extra.scss create mode 100644 src/scss/abstracts/_variables.scss create mode 100644 src/scss/base/_animations.scss create mode 100644 src/scss/base/_common.scss create mode 100644 src/scss/base/_reset.scss create mode 100644 src/scss/components/_footer.scss create mode 100644 src/scss/components/_graphs.scss create mode 100644 src/scss/components/_languageswitcher.scss create mode 100644 src/scss/components/_level.scss create mode 100644 src/scss/components/_levelvaccinated.scss create mode 100644 src/scss/components/_mapswitcher.scss create mode 100644 src/scss/components/_navbar.scss create mode 100644 src/scss/components/_search.scss create mode 100644 src/scss/components/_statedropdown.scss create mode 100644 src/scss/components/_stateheader.scss create mode 100644 src/scss/components/_statemeta.scss create mode 100644 src/scss/components/_table.scss create mode 100644 src/scss/components/_timeline.scss create mode 100644 src/scss/components/_tooltip.scss create mode 100644 src/scss/components/_updates.scss create mode 100644 src/scss/main.scss create mode 100644 src/scss/pages/_about.scss create mode 100644 src/scss/pages/_common.scss create mode 100644 src/scss/pages/_home.scss create mode 100644 src/scss/pages/_state.scss create mode 100644 src/scss/themes/_darkmode.scss diff --git a/src/App.js b/src/App.js index 20fb4495ad..b3a47fa8c5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,11 @@ -import './App.scss'; -import Blog from './components/Blog'; +import './scss/main.scss'; import Navbar from './components/Navbar'; +import pages from './pages'; import {lazy, useState, Suspense, useEffect} from 'react'; import {Route, Redirect, Switch, useLocation} from 'react-router-dom'; import useDarkMode from 'use-dark-mode'; -const Home = lazy(() => import('./components/Home')); -const About = lazy(() => import('./components/About')); -const State = lazy(() => import('./components/State')); const LanguageSwitcher = lazy(() => import('./components/LanguageSwitcher')); const App = () => { @@ -16,33 +13,6 @@ const App = () => { const [showLanguageSwitcher, setShowLanguageSwitcher] = useState(false); const location = useLocation(); - const pages = [ - { - pageLink: '/', - view: Home, - displayName: 'Home', - showInNavbar: true, - }, - { - pageLink: '/blog', - view: Blog, - displayName: 'Blog', - showInNavbar: true, - }, - { - pageLink: '/about', - view: About, - displayName: 'About', - showInNavbar: true, - }, - { - pageLink: '/state/:stateCode', - view: State, - displayName: 'State', - showInNavbar: false, - }, - ]; - useEffect(() => { if (showLanguageSwitcher) { // For Chrome, Firefox, IE and Opera diff --git a/src/App.scss b/src/App.scss deleted file mode 100644 index ec345f9aab..0000000000 --- a/src/App.scss +++ /dev/null @@ -1,4568 +0,0 @@ -// Color Pallete - -$white: #fff; -$light: #f8f9fa; -$dark: #343a40; -$black: #000; - -$blue: #007bff; -$blue-light: #007bff10; -$blue-hover: #007bff30; -$blue-light-opaque: #eff7ff; -$blue-mid: #007bff99; -$pblue: #4c75f2; -$pblue-light: #4c75f210; -$pblue-hover: #4c75f230; -$pblue-light-opaque: #eff7ff; -$pblue-mid: #4c75f299; -$cherry: #ff073a; -$cherry-mid: #ff073a99; -$cherry-light: #ff073a20; -$cherry-hover: #ff073a30; -$cherry-light-opaque: #ffe0e6; -$red: #dc3545; -$red-light: #dc354520; -$red-mid: #dc354599; -$red-hover: #dc354530; -$orange: #fd7e14; -$orange-mid: #fd7e1499; -$orange-light: #fd7e1420; -$orange-hover: #fd7e1430; -$orange-light-opaque: #ffefe2; -$yellow: #ffc107; -$yellow-light: #ffc10720; -$yellow-hover: #ffc10730; -$yellow-mid: #ffc10799; -$yellow-light-opaque: #fff7e0; -$green: #28a745; -$green-light: #28a74520; -$green-hover: #28a74530; -$green-mid: #28a74599; -$gray: #6c757d; -$gray-light: #6c757d10; -$gray-light-opaque: #f6f6f7; -$gray-hover: #6c757d20; -$gray-mid: #6c757d99; -$gray-middark: #6c757d30; -$gray-dark: #343a40; -$gray-opaque: #f1f1f1; -$gray-hover-opaque: #edeeef; -$gray-hover-darker-opaque: #f6f6f7; -$purple: #201aa2dd; -$purple-light: #201aa220; -$purple-hover: #201aa230; -$purple-mid: #201aa299; -$purple-light-opaque: #e3e2f3; -$pink: #db5581; -$pink-light: #db558120; -$pink-hover: #db558160; -$pink-mid: #db558199; -$brown: #b6854d; -$brown-light: #b6854d10; -$brown-hover: #b6854d30; -$brown-mid: #b6854d99; -$brick: #e23028; -$brick-light: #e2302810; - -// Dark mode variables -$dark-m-gray: #161625; -$dark-mid-subtext: #bdb8ae; -$dark-m-white: #e1e1e1; -$dark-m-blue: #3391ff; -$dark-m-purple: #9673b9; -$dark-m-purple-mid: #9673b9bb; -$dark-m-purple-light: #40008050; - -* { - font-family: 'archia'; -} - -html { - overflow-x: hidden; - width: 100vw; -} - -body { - -webkit-tap-highlight-color: transparent; - -webkit-touch-callout: none; - margin: 0; - padding: 0; -} - -h1 { - font-size: 24px !important; - font-weight: 900; -} - -h2 { - font-size: 18px !important; - font-weight: 400; -} - -h3 { - font-size: 14px !important; - font-weight: 400; -} - -h4 { - font-size: 13px !important; - font-weight: 900; -} - -h5 { - font-size: 12px !important; - font-weight: 900; -} - -h6 { - font-size: 11px !important; - font-weight: 600; -} - -.App { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.arrow-up { - border-bottom: 5px solid $gray-mid; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - margin-left: 0.25rem; -} - -.arrow-down { - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid $gray-mid; - margin-left: 0.25rem; -} - -.Navbar { - align-items: center; - display: flex; - flex-direction: row; - height: 4rem; - justify-content: space-between; - - a { - color: inherit; - text-decoration: none; - } - - .navbar-left { - color: $gray-mid; - cursor: pointer; - font-size: 12px; - font-weight: 600; - padding: 1.5rem; - text-align: center; - width: 3rem; - - &:hover { - color: $gray; - } - } - - .navbar-middle { - color: $gray; - font-size: 18px; - font-weight: 900; - text-transform: uppercase; - - span { - color: $pblue; - } - } - - .navbar-right { - color: $gray; - cursor: pointer; - font-size: 12px; - font-weight: 600; - padding: 1.5rem; - text-align: center; - width: 3rem; - } - - .language-toggle { - cursor: pointer; - font-weight: 900; - text-transform: uppercase; - } - - .expand { - background: $gray-light-opaque; - color: $gray; - display: flex; - flex-direction: column; - width: 100vw; - z-index: 9999; - - & > * { - border-bottom: 1px solid $gray-light; - border-top: 1px solid $gray-light; - padding: 1.5rem; - transition: all 0.15s ease-in-out; - - &:hover { - background: $pblue-hover; - } - - span { - &.focused { - background: $pblue-light; - color: $pblue; - padding: 0.25rem; - } - } - } - - .expand-bottom { - align-self: flex-start; - border: 0; - display: flex; - flex-direction: column; - justify-content: center; - - h5 { - margin: 0; - } - - &:hover { - background: none; - } - } - } -} - -.Home { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - margin-left: 9rem; - margin-right: 3rem; - - .home-left, - .home-right { - display: flex; - flex-direction: column; - width: 34rem; - } - - .home-left { - margin-right: 2.5rem; - min-height: 60rem; - } - - .home-right { - margin-left: 2.5rem; - min-height: 10rem; - } - - .header { - z-index: 99; - } -} - -.alert { - align-items: flex-start; - background: $gray-light; - border-radius: 5px; - color: $gray; - display: flex; - flex-direction: row; - font-size: 10px; - padding: 0.5rem; - - svg { - color: $gray-mid; - height: 16px; - width: 16px; - } - - .alert-right { - margin-left: 0.25rem; - text-align: right; - width: 9rem; - - a { - background: $gray-light; - color: $gray; - padding-left: 0.1rem; - padding-right: 0.1rem; - - &:hover { - background: $gray-hover; - } - } - - &.is-full { - width: 100%; - } - } - - &.is-green { - background: $green-light; - color: $green; - - svg { - stroke: $green-mid; - } - } -} - -.StateHeader { - align-self: center; - display: flex; - flex-direction: row; - height: 5.25rem; - justify-content: space-between; - margin-bottom: 1rem; - position: relative; - width: 100%; - - & > * { - align-self: flex-start; - } - - .header-left { - h1, - h5 { - margin: 0; - } - - h1 { - color: $brick; - max-width: 20rem; - } - - h5 { - color: $gray; - font-weight: 600; - margin-top: 0.5rem; - } - } - - .header-right { - color: $purple-mid; - display: flex; - flex-direction: column; - text-align: right; - - h2, - h5 { - font-weight: 600; - margin: 0; - } - - h2 { - color: $purple; - font-weight: 900; - } - - a { - background: $purple-light; - color: inherit; - text-decoration: none; - - &:hover { - background: $purple-hover; - } - } - } -} - -.State { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - margin-left: 8rem; - margin-right: 3rem; - - .state-left, - .state-right { - display: flex; - flex-direction: column; - width: 34rem; - } - - .state-left { - margin-right: 2.5rem; - position: relative; - } - - .state-right { - margin-left: 2.5rem; - } - - a { - text-decoration: none; - } - - .district-bar { - width: calc(100% - 2rem); - } - - .Minigraph { - .svg-parent { - width: calc(25%) !important; - } - } - - .MapExplorer { - .header, - .map-stats, - .map-button, - .tabs-map, - .last-update, - .footnote { - display: none; - } - - .anchor { - display: none; - } - } - - .TimeseriesExplorer { - .anchor { - display: none; - } - } -} - -.StateMeta { - align-self: center; - display: grid; - grid-gap: 1rem; - grid-template-columns: repeat(2, 1fr); - margin-bottom: 3rem; - width: calc(100% - 3rem); - - &.population { - display: flex !important; - flex-direction: row !important; - justify-content: space-between !important; - margin: 0; - margin-bottom: 2.5rem; - margin-top: 2.5rem; - - .alert { - margin: 0; - } - } - - .meta-item { - border-radius: 5px; - min-height: 6rem; - padding-left: 1rem; - padding-top: 1rem; - - h1, - h2, - h3, - h4, - h5 { - margin: 0; - } - - h5 { - font-weight: 600; - } - - h2 { - font-weight: 600; - } - - h3 { - font-weight: 600; - width: 10rem; - word-wrap: break-word; - } - - h1 { - display: inline-block; - font-weight: 600; - } - - &.population { - min-height: 1rem !important; - padding: 0 !important; - - h1, - h3 { - color: $gray; - } - } - - .meta-item-top { - display: flex; - flex-direction: row; - justify-content: space-between; - - & > * { - align-self: center; - } - - h3 { - width: calc(100% - 2.5rem); - } - - span { - margin-bottom: auto; - margin-right: 1rem; - } - - svg { - align-self: flex-start; - cursor: pointer; - stroke-width: 2.5px; - width: 16px; - } - } - - .meta-item-middle { - display: flex; - flex-direction: row; - justify-content: space-between; - - * { - align-self: center; - } - - svg { - cursor: pointer; - margin-right: 1rem; - } - } - - p { - font-weight: 600; - margin-bottom: 1.25rem; - padding-right: 1rem; - } - - &.confirmed { - background: $cherry-light; - - h3, - h5, - svg, - p { - color: $cherry-mid; - } - - h1 { - color: $cherry; - } - } - - &.active { - background: $blue-light; - - h3, - h5, - svg, - p { - color: $blue-mid; - } - - h1 { - color: $blue; - } - } - - &.recovery { - background: $green-light; - - h3, - h5, - svg, - p { - color: $green-mid; - } - - h1 { - color: $green; - } - } - - &.mortality { - background: $gray-light; - - h3, - h5, - svg, - p { - color: $gray-mid; - } - - h1 { - color: $gray; - } - } - - &.cpm { - background: $yellow-light; - - h3, - h5, - svg { - color: $orange-mid; - } - - h1 { - color: $orange; - } - } - - &.tpm { - background: $purple-light; - - h3, - h5, - svg, - p { - color: $purple-mid; - } - - h1 { - color: $purple; - } - } - - &.ptr { - background: $pink-light; - - h3, - h5, - svg, - p { - color: $pink-mid; - } - - h1 { - color: $pink; - } - } - - &.gr { - background: $brown-light; - - h3, - h5, - p, - svg { - color: $brown-mid; - } - - h1 { - color: $brown; - } - } - } -} - -.StateDropdown { - align-items: center; - display: flex; - flex-direction: row; - position: relative; - - .state-name { - background: $brick-light; - border-radius: 5px; - cursor: pointer; - padding: 0.25rem; - } - - .dropdown { - background: $white; - border-radius: 5px; - height: 25rem; - left: -0.25rem; - overflow-y: scroll; - position: absolute; - top: 2.75rem; - width: 15rem; - z-index: 999; - - .item { - color: $red; - cursor: pointer; - padding: 0.75rem; - - &:hover { - background: $red-hover; - } - } - } - - .backdrop { - background: $red-light; - height: 100vh; - left: 0; - pointer-events: none; - position: fixed; - top: 0; - width: 100vw; - z-index: 10; - } -} - -.labels { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-bottom: 1rem; - - .label { - align-items: center; - background: $gray-light !important; - border-radius: 5px !important; - color: $gray-mid !important; - cursor: pointer; - display: flex; - flex-direction: row; - font-size: 14px; - margin-bottom: 0.25rem; - margin-right: 0.25rem; - padding: 0.25rem 0.5rem; - text-transform: capitalize; - - &.is-selected { - background: $yellow-hover !important; - color: $orange-mid !important; - - &:hover { - background: $yellow-hover !important; - color: $orange-mid !important; - } - } - - @media not all and (pointer: coarse) { - &:hover { - background: $yellow-light !important; - color: $orange-mid !important; - } - } - - .count { - align-items: center; - background: inherit; - border-radius: 50%; - color: inherit; - display: flex; - flex-direction: row; - font-size: 12px; - height: 1.5rem; - justify-content: center; - margin-left: 0.25rem; - width: 1.5rem; - } - } -} - -.Banner { - background: $purple-light; - color: $purple; - display: flex; - flex-direction: row; - font-size: 0.8rem; - font-weight: 600; - justify-content: center; - line-height: 20px; - - .snippet { - align-self: center; - cursor: pointer; - padding: 1.5rem; - text-align: center; - width: calc(100% - 10rem); - word-wrap: break-word; - } -} - -.Search { - display: flex; - flex-direction: column; - margin-bottom: 1rem; - position: relative; - width: 100%; - - & > * { - align-self: center; - } - - label { - color: $gray; - font-size: 0.75rem; - margin-bottom: 1rem; - } - - .line { - background: $gray-light; - height: 1rem; - width: 2px; - } - - input { - appearance: none !important; - background: #fff; - border: 0; - border-radius: 5px; - box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1); - color: $gray; - font-size: 1rem; - height: 2rem; - outline: none; - padding: 1rem; - padding-left: 3rem; - width: calc(100% - 4rem); - } - - .search-input-wrapper { - position: relative; - width: 100%; - } - - .search-placeholder { - color: $gray-mid; - font-size: 1rem; - left: 3rem; - opacity: 0.8; - pointer-events: none; - position: absolute; - top: 1.4rem; - transition: opacity 1s; - - &.disappear { - opacity: 0; - } - } - - .search-button { - svg { - color: $gray-mid; - left: 0.75rem; - position: absolute; - top: 1.25rem; - transition: all 0.2s ease-in-out; - } - - &.is-expand { - svg { - left: 0.5rem; - } - } - } - - .close-button { - background: $gray-light !important; - border-radius: 50%; - cursor: pointer; - display: flex; - flex-direction: row; - height: 20px; - justify-content: center; - position: absolute; - right: 1rem; - top: 1.35rem; - transition: all 0.2s ease-in-out; - width: 20px; - - &:hover { - background: $gray-hover !important; - } - - &.is-expand { - right: 0.75rem; - } - - svg { - align-self: center; - position: absolute; - stroke: $gray-mid; - stroke-width: 3; - width: 12px; - } - - &.custom { - background: $pink-light !important; - pointer-events: none; - z-index: 0; - - svg { - stroke: $pink !important; - } - } - } - - .feature { - background: $pink-light; - border-radius: 5px; - color: $pink; - cursor: pointer; - font-size: 0.75rem; - padding: 0.75rem; - text-align: center; - } - - .expanded { - display: flex; - flex-direction: row; - margin-top: 2rem; - padding: 1rem; - padding-bottom: 0; - width: calc(100% - 4rem); - - & > * { - flex: 1; - } - - h4, - h3 { - color: $gray; - font-weight: 600; - margin: 0; - margin-bottom: 0.5rem; - } - - h3 { - color: $pblue; - margin-bottom: 0.75rem; - } - } - - .results { - padding: 1rem; - padding-bottom: 0; - width: calc(100% - 2rem); - - a { - text-decoration: none !important; - } - - .pan-divider { - color: $gray; - font-weight: 600; - padding: 1rem 0; - } - - .result, - .essential-result { - align-self: flex-start; - border-bottom: 2px solid $gray-light; - color: $gray; - cursor: pointer; - display: flex; - flex-direction: row; - font-size: 0.9rem; - justify-content: space-between; - min-height: 2rem; - padding: 1rem; - transition: all 0.2s ease-in-out; - - &:hover { - background: $gray-light; - } - - & > * { - align-self: center; - } - - .result-name { - max-width: 15rem; - } - - .result-type { - background: $yellow-light; - border-radius: 2px; - color: $orange; - display: flex; - flex-direction: row; - font-size: 0.75rem; - padding: 0.25rem; - - &:hover { - background: $yellow-hover; - } - - svg { - margin-left: 0.25rem; - stroke: $orange-mid; - stroke-width: 3px; - } - - * { - align-self: center; - } - } - - .result-left { - display: flex; - flex-direction: row; - - * { - align-self: center; - } - } - - .result-zone { - border-radius: 50%; - height: 0.75rem; - margin-left: 0.5rem; - width: 0.75rem; - - &.is-red { - background: $cherry-light; - border: 2px solid $cherry-mid; - } - - &.is-orange { - background: $orange-light; - border: 2px solid $orange-mid; - } - - &.is-green { - background: $green-light; - border: 2px solid $green-mid; - } - } - } - - .essential-result { - display: flex; - flex-direction: column; - - .result-top { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - - .result-top-left { - display: flex; - flex-direction: column; - - .result-location { - display: flex; - flex-direction: row; - font-size: 0.75rem; - } - - .result-distance { - color: $green; - display: flex; - flex-direction: row; - font-size: 0.75rem; - } - } - } - - .result-category { - align-self: flex-start; - background: $pink-light; - border-radius: 2px; - color: $pink; - display: flex; - flex-direction: row; - font-size: 0.75rem; - height: 1rem; - padding: 0.25rem; - text-align: right; - text-transform: capitalize; - - &:hover { - background: $pink-hover; - } - - & > * { - align-self: center; - } - - svg { - margin-left: 0.25rem; - stroke-width: 3px; - width: 12px; - } - } - - .result-description { - align-self: flex-start; - font-size: 0.75rem; - margin-bottom: 0.5rem; - margin-top: 1rem; - } - - .result-contacts { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; - } - - .result-contact { - align-self: flex-start; - background: $gray-light; - border-radius: 2px; - color: $gray; - display: flex; - flex-direction: row; - font-size: 0.75rem; - height: 1rem; - margin-right: 0.25rem; - margin-top: 0.25rem; - padding: 0.25rem; - text-align: right; - - &:hover { - background: $gray-hover; - } - - a { - color: inherit; - } - - & > * { - align-self: center; - } - - svg { - margin-right: 0.25rem; - stroke: $gray-mid; - stroke-width: 3px; - width: 12px; - } - } - } - } - - .suggestions { - display: flex; - flex-direction: column; - margin-right: 1rem; - - .suggestion { - color: $gray-mid; - display: flex; - flex-direction: row; - padding: 0.1rem; - - div { - padding-top: 1px; - } - - h4 { - cursor: pointer; - margin-left: 0.25rem; - word-wrap: wrap; - - &:hover { - text-decoration: underline; - text-decoration-thickness: 2px; - } - } - } - } -} - -.header { - align-self: center; - display: flex; - flex-direction: column; - max-width: 40rem; - width: 100%; - - & > * { - align-self: center; - } - - .actions { - display: flex; - flex-direction: row; - justify-content: space-around; - padding: 1rem; - - &.timeline { - display: flex; - flex-direction: column; - justify-content: space-around; - padding: 1rem; - position: absolute; - top: 13.25rem; - - .highlight { - color: $brown !important; - position: absolute; - text-align: center; - top: 2.5rem; - width: 100%; - } - } - - & > * { - align-self: center; - margin-left: 0.5rem; - margin-right: 0.5rem; - } - - h5 { - color: $gray; - font-weight: 600; - margin: 0; - } - - svg { - color: $gray-mid; - cursor: pointer; - stroke-width: 3; - width: 16px; - - &:hover { - stroke: $gray; - } - } - - .timeline-icon { - display: flex; - flex-direction: column; - justify-content: center; - - svg { - display: flex; - fill: #a6abb0 !important; - flex-direction: row; - justify-content: center; - stroke: #a6abb0 !important; - stroke-width: 0.5 !important; - - path { - align-self: center; - } - - &:hover { - fill: $gray !important; - stroke: $gray !important; - } - } - } - - .bell-icon { - height: 24px; - position: relative; - - .indicator { - background: $pblue; - border-radius: 50%; - height: 7px; - position: absolute; - right: -3px; - top: -3px; - width: 7px; - } - } - } -} - -.Timeline { - cursor: pointer; - height: 3rem; - width: 34rem; - will-change: transform; - - .day { - position: absolute; - text-align: center; - width: 70px; - will-change: transform; - - h5 { - color: $gray-mid; - - &:hover { - color: $gray !important; - } - - &::selection { - background: transparent !important; - } - } - } -} - -.button { - background: $blue-light; - border: 0; - border-radius: 5px; - color: $blue-mid; - cursor: pointer; - display: flex; - flex-direction: row; - font-size: 0.75rem; - font-weight: 900; - margin-bottom: 0.5rem; - margin-top: 0.25rem; - outline: none; - padding: 0.5rem; - text-decoration: none; - text-transform: uppercase; - transition: background 0.2s ease-in-out; - - svg { - padding-right: 6px; - stroke-width: 2px; - width: 20px; - } - - &.is-purple { - background: $purple-light; - color: $purple-mid; - - &:hover { - background: $purple-hover; - } - } - - &.is-green { - background: $green-light; - color: $green-mid; - - &:hover { - background: $green-hover; - } - } - - &:hover { - background: $blue-hover; - } - - & > * { - align-self: center; - } -} - -.MapSwitcher { - align-self: center; - display: flex; - flex-direction: row; - justify-content: space-between; - position: absolute; - width: 100%; - - .highlight { - pointer-events: none; - position: absolute; - width: calc(25%) !important; - } - - .highlight, - .clickable { - border-radius: 5px; - cursor: pointer; - height: 13rem; - width: calc(25%); - z-index: 10; - } - - .clickable { - transition: background 0.15s ease-in-out; - - &:hover { - &.is-confirmed { - background: $cherry-light; - } - - &.is-active { - background: $blue-light; - } - - &.is-recovered { - background: $green-light; - } - - &.is-deceased { - background: $gray-light; - } - } - } -} - -.Level { - align-self: center; - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - - .level-item { - display: flex; - flex-direction: column; - width: calc(25%); - - & > * { - align-self: center; - } - } - - h1, - h5 { - margin-bottom: 0; - } - - h1 { - font-weight: 600; - } - - h4 { - margin-bottom: -0.5rem; - } - - h5 { - font-weight: 600; - overflow-wrap: break-word; - text-align: center; - width: 100%; - } - - .is-confirmed { - h1, - h5 { - color: $cherry; - } - - h4 { - color: $cherry-mid; - } - } - - .is-active { - h1, - h5 { - color: $blue; - } - - h4 { - color: $blue-mid; - } - } - - .is-recovered { - h1, - h5 { - color: $green; - } - - h4 { - color: $green-mid; - } - } - - .is-deceased { - h1, - h5 { - color: $gray; - } - - h4 { - color: $gray-mid; - } - } -} - -.LevelVaccinated { - align-items: center; - align-self: center; - animation-delay: 200ms; - background: $pink-light; - border-radius: 5px; - color: $pink; - display: flex; - flex-direction: row; - margin-bottom: 0.5rem; - margin-top: 1.5rem; - padding: 0.5rem; - - h4 { - font-weight: 500; - margin: 0 0 0 0.25rem; - } -} - -abbr { - text-decoration: none; - - &.is-cherry { - color: $cherry; - } - - &.is-blue { - color: $blue; - } - - &.is-green { - color: $green; - } - - &.is-gray { - color: $gray; - } -} - -.TableLoader { - margin-bottom: -0.25rem; -} - -.table-top { - align-items: flex-end; - align-self: center; - display: flex; - flex-direction: row; - font-weight: 600; - justify-content: space-between; - margin-bottom: 0.25rem; - width: 100%; - - .option-toggle, - .info-toggle, - .million-toggle, - .expand-table-toggle { - background: $gray-light; - border-radius: 5px; - color: $gray-mid; - cursor: pointer; - margin-right: 0.25rem; - padding: 0.5rem; - - svg { - align-self: center; - margin: 0.25rem; - } - - &.is-highlighted { - background: $green-light; - color: $green; - } - } - - .info-toggle { - &.is-highlighted { - background: $yellow-light; - color: $yellow; - } - } - - .million-toggle { - font-size: 13px; - font-weight: 600; - padding: 11.5px 10px; - text-align: center; - - &.is-highlighted { - background: $pink-light; - color: $pink; - } - } - - .expand-table-toggle { - color: $gray-mid; - margin-left: auto; - margin-right: 0; - - &.is-highlighted { - svg { - transform: rotate(90deg); - } - } - - svg { - cursor: pointer; - margin-bottom: 0.25rem; - transform: rotate(-90deg); - } - } - - @media (min-width: 769px) { - margin-top: 1rem; - } -} - -.table-helper { - align-self: center; - color: $gray; - display: flex; - flex-direction: column; - width: calc(100% - 2rem); - - h5 { - color: $gray-mid; - } - - .helper-top { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .info-item { - align-items: center; - color: $gray; - display: flex; - flex-direction: row; - font-size: 12px; - font-weight: 600; - height: 1.5rem; - - &:first-child { - margin-top: 1rem; - } - - :first-child { - width: 1.6rem; - - svg { - width: 15px; - } - } - - p { - max-width: calc(100% - 1.6rem); - } - - svg { - color: $gray-mid; - margin-bottom: 0.25rem; - } - - .is-confirmed { - svg { - color: $cherry; - } - } - - .is-active { - svg { - color: $blue; - } - } - - .is-recovered { - svg { - color: $green; - } - } - - .is-deceased { - svg { - color: $gray; - } - } - - .is-tested { - svg { - color: $purple; - } - } - - .is-vaccinated { - svg { - color: $pink; - } - } - - &.notes { - svg { - margin-bottom: 0; - } - } - - &.sort { - svg { - margin-bottom: 0; - } - } - - &.invert { - svg { - margin-bottom: 0; - transform: rotate(180deg); - } - } - } - - .text { - color: $gray-mid; - font-weight: 600; - - a { - background: $gray-light; - border-bottom: 2px solid $gray-hover; - color: $gray; - text-decoration: none; - - &:hover { - background: $gray-hover; - } - } - } -} - -.table-container { - align-self: center; - margin-bottom: 2.5rem; - overflow-x: auto; - width: 100%; -} - -.table { - border-radius: 3px; - display: inline-grid; - font-size: 12px; - grid-template-rows: auto; - min-width: 100%; - - .state-meta { - grid-column: 1 / -1; - - .state-meta-top { - align-items: center; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - margin-bottom: 1 + 0.25rem; - margin-top: 1rem; - - svg { - margin-right: 0.5rem; - } - - .last-updated { - align-items: center; - color: $green; - display: flex; - flex-direction: row; - } - - .state-page { - align-items: center; - background: $yellow-light; - border-radius: 5px; - color: $orange; - cursor: pointer; - display: flex; - flex-direction: row; - padding: 0.75rem; - - p { - align-self: flex-end; - flex: 1; - margin: 0; - text-align: right; - } - - &:hover { - background: $yellow-hover; - } - } - } - - .state-meta-bottom { - padding-bottom: 1.5rem; - - .disclaimer { - background: $brick-light; - border-radius: 5px; - color: $brick; - margin: auto; - padding: 1rem 0.25rem; - text-align: center; - width: 16rem; - - svg { - margin-right: 0.5rem; - } - } - } - } - - .row { - cursor: pointer; - display: contents; - width: 100%; - - &:nth-child(odd) { - .cell { - background: $gray-light; - } - } - - &.is-highlighted { - .cell { - background: $gray-hover-opaque !important; - } - } - - &.heading { - .cell { - cursor: pointer; - user-select: none; - - &:hover { - background: $gray-hover-opaque !important; - } - } - } - - &.is-total { - position: sticky; - top: 0; - - .cell { - background: $gray-hover-opaque !important; - } - } - - .cell { - align-items: center; - border-radius: 3px; - color: $gray; - display: flex; - flex-direction: row; - margin-bottom: 0.25rem; - padding: 0.5rem; - position: relative; - - &:not(:first-child) { - flex-basis: 4rem; - flex-grow: 1; - flex-shrink: 0; - justify-content: flex-end; - } - - &:first-child { - background: $gray-hover-darker-opaque; - flex-basis: 7rem; - flex-grow: 0; - flex-shrink: 0; - justify-content: space-between; - left: 0; - position: sticky; - z-index: 11; - - .sort-icon { - left: unset; - right: 0; - } - } - - svg { - color: $gray-mid; - margin-left: 0.2rem; - stroke-width: 2.5px; - } - - .sort-icon { - left: 0; - margin-left: 0.25rem; - margin-right: 0.25rem; - position: absolute; - top: 0; - - &.is-confirmed { - svg { - color: $cherry; - } - } - - &.is-active { - svg { - color: $blue; - } - } - - &.is-recovered { - svg { - color: $green; - } - } - - &.is-deceased { - svg { - color: $gray; - } - } - - &.is-tested { - svg { - color: $purple; - } - } - - &.is-vaccinated { - svg { - color: $pink; - } - } - - &.invert { - margin-top: 0.25rem; - transform: rotate(180deg); - } - } - - &.statistic { - align-items: flex-end; - display: flex; - flex-direction: column; - justify-content: flex-end; - - .total { - font-size: 14px; - } - - .is-confirmed { - color: $cherry; - } - - .is-active { - color: $blue; - } - - .is-recovered { - color: $green; - } - - .is-deceased { - color: $gray; - } - - .is-tested { - color: $purple; - } - - .is-vaccinated { - color: $pink; - } - } - - &:not(:last-child) { - margin-right: 0.25rem; - } - - &.heading { - background: $gray-light-opaque; - font-size: 13px; - font-weight: 900; - padding: 1.25rem 0.5rem 0.75rem; - - &:hover { - background: $gray-hover-opaque !important; - } - } - - .state-name, - .district-name { - font-size: 14px; - font-weight: 600; - max-width: 7rem; - word-wrap: break-word; - } - } - } - - .spacer-row { - grid-column: 1 / -1; - - .spacer { - color: $gray-mid; - margin-bottom: 1 + 0.25rem; - margin-top: 1rem; - text-align: center; - - p { - margin-left: auto; - margin-right: auto; - width: 10rem; - } - - .fold { - cursor: pointer; - - &:hover { - color: $gray; - } - } - } - } - - .intersection { - display: block; - } -} - -#chart { - z-index: 10; -} - -.anchor { - cursor: pointer; - position: absolute; - right: 0; - transform: rotate(45deg); - transition: all 0.1s ease-in-out; - z-index: 999; - - svg { - color: $gray-mid; - - &:hover { - color: $gray; - } - } - - &.stickied { - transform: rotate(90deg); - - svg { - color: $gray; - } - } -} - -.map-container { - display: flex; - flex-direction: column; - width: 100%; -} - -.MapExplorer { - align-self: center; - margin-bottom: 3rem; - position: relative; - width: 100%; - - &.stickied { - position: sticky !important; - top: 0; - } - - &.hidden { - display: none; - } - - .svg-parent { - display: block; - margin: auto; - margin-top: 2rem; - overflow: visible; - position: relative; - width: 90%; - - &.maplegend { - margin-top: 0.6rem; - width: 100%; - z-index: 1; - } - - svg { - align-self: center; - height: 100%; - overflow: visible; - width: 100%; - - text { - fill: $gray; - font-size: 10px; - font-weight: 600; - text-align: right; - } - } - } - - .map-button { - background: $yellow-light; - border-radius: 5px; - color: $orange; - cursor: pointer; - font-size: 0.75rem; - font-weight: 900; - margin-bottom: 0.25rem; - padding: 0.5rem; - position: absolute; - right: 0; - transition: all 0.2s ease-in-out; - - &:hover { - background: $yellow-hover; - } - - svg { - height: 12px; - margin-left: 0.25rem; - stroke: $orange-mid; - stroke-width: 3px; - vertical-align: middle; - width: 12px; - } - } - - .panel { - display: flex; - flex-direction: row; - justify-content: space-between; - min-height: 6rem; - padding-top: 1rem; - position: relative; - - h2 { - font-weight: 900; - margin-top: 0; - transition: color 0.3s ease-in-out; - word-wrap: break-word; - - &.confirmed { - color: $brick; - } - - &.active { - color: $blue; - } - - &.recovered { - color: $green; - } - - &.deceased { - color: $gray; - } - } - - h4 { - color: $gray-mid; - margin: 0; - word-wrap: break-word; - } - - .panel-left { - display: flex; - flex: 1; - flex-direction: column; - - .district { - line-height: 15px; - margin: 0; - transition: color 0.3s ease-in-out; - - span { - font-size: 0.75rem; - font-weight: 600; - } - - &.confirmed { - color: $brick; - } - - &.active { - color: $blue; - } - - &.recovered { - color: $green; - } - - &.deceased { - color: $gray; - } - - &.tested { - color: $purple; - } - } - } - - .panel-right { - display: flex; - flex-direction: column; - - svg { - transition: all 0.3s ease-in-out; - } - - &.is-confirmed { - svg { - fill: $cherry-light; - stroke: $cherry-mid; - } - - .boundary { - svg { - fill: $cherry-mid; - stroke: none; - } - } - - .is-highlighted { - background: $cherry-light; - - &:hover { - background: $cherry-hover; - } - } - } - - &.is-active { - svg { - fill: $blue-light; - stroke: $blue-mid; - } - - .boundary { - svg { - fill: $blue-mid; - stroke: none; - } - } - - .is-highlighted { - background: $blue-light; - - &:hover { - background: $blue-hover; - } - } - } - - &.is-recovered { - svg { - fill: $green-light; - stroke: $green-mid; - } - - .boundary { - svg { - fill: $green-mid; - stroke: none; - } - } - - .is-highlighted { - background: $green-light; - - &:hover { - background: $green-hover; - } - } - } - - &.is-deceased { - svg { - fill: $gray-light; - stroke: $gray-mid; - } - - .boundary { - svg { - fill: $gray-mid; - stroke: none; - } - } - - .is-highlighted { - background: $gray-middark; - - &:hover { - background: $gray-hover; - } - } - } - - .switch-type, - .switch-statistic { - display: flex; - flex-direction: row; - justify-content: flex-end; - margin-bottom: 0.25rem; - - div { - align-items: center; - background: $gray-light; - border-radius: 5px; - cursor: pointer; - display: flex; - flex-direction: row; - height: 2.5rem; - justify-content: center; - width: 2.5rem; - - &.back { - margin-right: 0 !important; - - svg { - fill: $gray; - stroke: transparent; - } - } - - &:hover { - background: $gray-hover; - } - - &:not(:last-child) { - margin-right: 0.25rem; - } - - svg { - height: 100%; - } - } - - .divider { - border-radius: 5px; - width: 2px !important; - } - } - - .switch-statistic { - align-self: flex-end; - flex-direction: row; - position: absolute; - top: 5rem; - - div { - background: none; - display: flex; - flex-direction: row; - height: 1.25rem; - margin-bottom: 0.25rem; - margin-left: 0.65rem !important; - width: 1.25rem; - - span { - position: absolute; - } - - &:hover { - background: none; - } - - &.is-confirmed { - svg { - fill: $cherry-hover; - stroke: none; - } - - &.is-highlighted { - svg { - fill: $cherry; - transform: scale(1.25); - } - } - } - - &.is-active { - svg { - fill: $blue-hover; - stroke: none; - } - - &.is-highlighted { - svg { - fill: $blue; - transform: scale(1.25); - } - } - } - - &.is-recovered { - svg { - fill: $green-hover; - stroke: none; - } - - &.is-highlighted { - svg { - fill: $green; - transform: scale(1.25); - } - } - } - - &.is-deceased { - svg { - fill: $gray-hover; - stroke: none; - } - - &.is-highlighted { - svg { - fill: $gray; - transform: scale(1.25); - } - } - } - } - } - } - - &.bottom { - margin-top: 0; - padding-top: 0; - } - } - - #chart, - #legend { - filter: saturate(1.5); - } - - .disclaimer { - align-items: center; - backdrop-filter: saturate(180%) blur(20px); - border-radius: 5px; - bottom: 50%; - display: flex; - flex-direction: row; - font-size: 12px; - left: 0; - margin-left: auto; - margin-right: auto; - padding: 0.5rem; - pointer-events: none; - position: absolute; - right: 0; - transition: background, color 0.3s ease-in-out; - width: 10rem; - z-index: 99; - - &.is-confirmed { - background: $cherry-light; - color: $cherry; - } - - &.is-active { - background: $blue-light; - color: $blue; - } - - &.is-recovered { - background: $green-light; - color: $green; - } - - &.is-deceased { - background: $gray-light; - color: $gray; - } - - span { - flex: 1; - } - - svg { - align-self: flex-start; - margin-right: 0.5rem; - stroke-width: 2px; - width: 16px; - } - } - - .footnote { - color: $gray; - margin-bottom: 0; - margin-top: 1em; - text-align: left; - z-index: 1; - - a { - border-bottom: 2px solid $gray-hover; - text-decoration: none; - - &:hover { - background: $gray-hover; - } - } - } -} - -.tabs { - display: flex; - flex-direction: row; - position: relative; - - .tab { - background: $gray-light; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - color: $gray-mid; - cursor: pointer; - height: 3.25rem; - margin-right: 0.25rem; - min-width: 5rem; - padding-left: 1rem; - padding-right: 1rem; - text-align: center; - - &:hover { - background: $gray-hover; - } - - &.focused { - background: $gray-opaque; - color: $gray; - } - } -} - -.tabs-map { - display: flex; - flex-direction: row; - flex-wrap: wrap; - position: relative; - z-index: 99; - - h4 { - display: table-cell; - font-size: 12px !important; - font-weight: 900; - height: 2rem; - margin-bottom: 0; - margin-top: 0; - vertical-align: middle; - } - - .tab { - background: $gray-light; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - color: $gray-mid; - cursor: pointer; - height: 2rem; - margin-right: 0.25rem; - margin-top: 0.25rem; - min-width: 1.6rem; - padding-left: 1rem; - padding-right: 1rem; - text-align: center; - transition: all 0.3s ease-in-out; - - &:hover { - background: $gray-hover; - } - - &.focused { - background: $gray-opaque; - color: $gray; - } - - &.disabled { - background: $gray-opaque; - color: $gray-mid; - } - } - - sup { - position: relative; - top: -0.5em; - vertical-align: top; - } -} - -.TimeseriesExplorer { - align-self: center; - display: flex; - flex-direction: column; - width: calc(100% - 2rem); - - &.stickied { - position: sticky !important; - top: -6.5rem; - } - - .alert { - align-self: flex-end; - margin: 0; - margin-top: 1rem; - } - - .state-selection { - display: flex; - flex-direction: row; - margin-top: 1rem; - max-width: calc(100% - 0.6rem); - - .dropdown { - min-width: calc(60%); - - select { - appearance: none; - background-color: #eee; - background-image: url('data:image/svg+xml,'); - background-position-x: calc(100% - 0.4rem); - background-position-y: 50%; - background-repeat: no-repeat; - background-size: 0.6rem; - border: 2px solid #e8e8e9; - border-radius: 4px; - color: $gray; - cursor: pointer; - font-weight: 600; - padding: 0.5rem; - padding-right: 1.4rem; - width: 100%; - - &:focus { - outline: none; - } - } - } - - .reset-icon { - margin: auto; - margin-left: 0.75rem; - margin-top: 0.5rem; - - svg { - color: $gray-mid; - cursor: pointer; - fill: #a6abb0; - stroke: #a6abb0; - stroke-width: 0.5; - width: 16px; - - &:hover { - fill: $gray; - stroke: $gray; - } - } - } - } -} - -.Timeseries { - align-self: center; - width: 100%; - - .svg-parent { - height: 12rem; - margin-bottom: 1rem; - - &.is-confirmed { - .stem { - stroke: $cherry-mid; - } - - .trend-area { - fill: $cherry-mid; - } - } - - &.is-active { - .stem { - stroke: $blue-mid; - } - - .trend-area { - fill: $blue-mid; - } - } - - &.is-recovered { - .stem { - stroke: $green-mid; - } - - .trend-area { - fill: $green-mid; - } - } - - &.is-deceased { - .stem { - stroke: $gray-mid; - } - - .trend-area { - fill: $gray-mid; - } - } - - &.is-tested { - .stem { - stroke: $purple-mid; - } - - .trend-area { - fill: $purple-mid; - } - } - - &.is-vaccinated { - .stem { - stroke: $pink-mid; - } - - .trend-area { - fill: $pink-mid; - } - } - - &.is-brush { - height: 4rem; - } - } -} - -.timeseries-header { - align-self: center; - position: relative; - width: 100%; - - h1 { - color: $gray; - margin: 0; - margin-bottom: 2rem; - text-align: center; - } - - .timeseries-options { - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 1rem; - - .timeseries-mode { - display: flex; - flex-direction: row; - } - - .scale-modes { - align-items: flex-end; - bottom: 0; - color: $gray; - display: flex; - flex-direction: row; - right: 0; - z-index: 99; - - &:hover { - label { - &.main { - color: $gray; - } - } - } - - .timeseries-mode { - margin-left: 1rem; - } - - & > * { - align-self: center; - } - } - - label { - color: $gray-mid; - font-size: 0.75rem; - font-weight: 900; - margin-right: 0.25rem; - z-index: 99; - } - } -} - -.disabled { - input { - &.switch { - background: $gray-light !important; - border: $gray-light 2px solid !important; - cursor: not-allowed !important; - - &::after { - background: $gray-light !important; - } - } - } -} - -input { - &.switch { - appearance: none; - background-color: #fff; - border: 2px solid #d9dadc; - border-radius: 10px; - cursor: pointer; - height: 14px; - margin: 0; - outline: none; - position: relative; - transition: all 300ms ease-in-out; - width: 24px; - - &::after { - background-color: $gray-mid; - border-radius: 50%; - content: ''; - height: 10px; - left: 0; - position: absolute; - top: 0; - transition: all 300ms ease-in-out; - width: 10px; - } - - &:checked { - background-color: $gray-mid; - transition: all 300ms ease-in-out; - - &::after { - background-color: $light; - left: 10px; - transition: all 300ms ease-in-out; - } - } - } -} - -.Timeseries, -.Minigraph { - display: flex; - flex-direction: column; - margin-top: 1rem; - width: 100%; - - .stats { - border-radius: 3px; - display: flex; - flex-direction: column; - left: 0.5rem; - padding: 0.25rem; - pointer-events: none; - position: absolute; - top: 0.5rem; - - .stats-bottom { - display: flex; - flex-direction: row; - - h6 { - margin-bottom: 0.1rem; - margin-left: 0.25rem; - } - - & > * { - margin-top: auto; - } - } - - h2, - h5, - h6 { - margin: 0; - transition: all 0.15s ease-in-out; - } - - h5 { - color: $cherry-mid; - - &.title { - color: $cherry-mid; - } - } - - h2, - h6 { - color: $cherry; - } - - &.is-recovered { - h5 { - color: $green-mid; - - &.title { - color: $green-mid; - } - } - - h2, - h6 { - color: $green; - } - } - - &.is-deceased { - h5 { - color: $gray-mid; - - &.title { - color: $gray-mid; - } - } - - h2, - h6 { - color: $gray; - } - } - - &.is-active { - h5 { - color: $blue-mid; - - &.title { - color: $blue-mid; - } - } - - h2, - h6 { - color: $blue; - } - } - - &.is-tested { - h5 { - color: $purple-mid; - - &.title { - color: $purple-mid; - } - } - - h2, - h6 { - color: $purple; - } - } - - &.is-vaccinated { - h5 { - color: $pink-mid; - - &.title { - color: $pink-mid; - } - } - - h2, - h6 { - color: $pink; - } - } - } - - .svg-parent { - align-self: center; - border-radius: 5px; - display: flex; - position: relative; - width: 100%; - - svg { - width: 100%; - - .domain, - .tick { - stroke-width: 1.5; - - line { - stroke-width: 1.5; - } - } - - text { - font-size: 9px; - font-weight: 600; - stroke: transparent; - } - } - - &.is-confirmed { - background: $cherry-light; - - svg { - .domain, - .tick, - line { - stroke: $cherry; - } - - text { - color: $cherry-mid; - } - } - } - - &.is-recovered { - background: $green-light; - - svg { - .domain, - .tick, - line { - stroke: $green; - } - - text { - color: $green-mid; - } - } - } - - &.is-deceased { - background: $gray-light; - - svg { - .domain, - .tick, - line { - stroke: $gray; - } - - text { - color: $gray-mid; - } - } - } - - &.is-active { - background: $blue-light; - - svg { - .domain, - .tick, - line { - stroke: $blue; - } - - text { - color: $blue-mid; - } - } - } - - &.is-tested { - background: $purple-light; - - svg { - .domain, - .tick, - line { - stroke: $purple; - } - - text { - color: $purple-mid; - } - } - } - - &.is-vaccinated { - background: $pink-light; - - svg { - .domain, - .tick, - line { - stroke: $pink; - } - - text { - color: $pink-mid; - } - } - } - - &.is-brush { - .overlay { - fill: $gray-hover; - } - - svg { - .domain, - .tick, - line { - stroke: $gray; - } - - text { - color: $gray; - } - } - } - } -} - -.Minigraph { - align-self: center; - display: flex; - flex-direction: row; - justify-content: space-between; - margin: 0; - margin-bottom: 1rem; - margin-top: 1rem; - - .svg-parent { - background: transparent !important; - width: calc(25%); - } -} - -.floating-buttons { - bottom: 1rem; - display: flex; - flex-direction: column; - padding: 0; - position: fixed; - right: 1rem; - width: 3rem; - z-index: 1; - - button { - backdrop-filter: saturate(180%) blur(2px); - background: $yellow-mid; - border: 0; - border-radius: 50%; - color: $orange; - cursor: pointer; - display: flex; - flex-direction: row; - margin: 0.25rem; - outline: none; - padding: 0.75rem; - transition: all 0.2s ease-in-out; - - &:hover { - background: #ffa500; - - svg { - stroke: #ffa500; - } - } - - svg { - align-self: center; - stroke: $orange; - } - } -} - -.Links { - display: flex; - flex-direction: column; - justify-content: center; -} - -.link { - align-self: center; - margin-bottom: 1rem; - margin-top: 1rem; - width: 34rem; - - a { - background: $blue-light; - color: $blue; - font-weight: 900; - text-decoration: none; - text-transform: uppercase; - transition: background 0.2s ease-in-out; - word-wrap: break-word; - - &:hover { - background: $blue-hover; - } - } - - h3 { - color: $gray-dark; - font-weight: 900; - margin-bottom: 0; - } -} - -footer { - display: flex; - flex-direction: column; - margin-bottom: 4rem; - margin-top: 4rem; - width: 100%; - - & > * { - align-self: center; - text-align: center; - } - - h5 { - color: $gray; - font-weight: 600; - margin: 0; - margin-bottom: 2rem; - } - - svg { - margin-right: 0.5rem; - padding: 0.25rem; - } - - .telegram { - color: $blue-mid; - - &:hover { - color: $blue; - } - } - - .github { - color: $gray-mid; - - &:hover { - color: $gray; - } - } - - .twitter { - color: $pblue-mid; - - &:hover { - color: $pblue; - } - } - - .api { - color: $yellow-mid; - - &:hover { - color: $yellow; - } - } - - .mail { - color: $brown-mid; - - &:hover { - color: $brown; - } - } -} - -.About { - display: flex; - flex-direction: column; - min-height: 30rem; - width: 100%; - - & > * { - align-self: center; - margin-bottom: 1.5rem; - width: 34rem; - } - - & > *:first-child { - margin-top: 4rem; - } - - h2 { - font-weight: 600; - margin: 0; - text-transform: none; - } - - .question { - color: $gray-dark; - margin: 0; - margin-bottom: 0.25rem; - } - - .answer { - color: $blue; - line-height: 1.5rem; - } - - a { - background: $blue-light; - color: $blue; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.pills { - display: flex; - flex-direction: row; - justify-content: flex-end; - - > button { - background-color: $yellow-light; - border: 2px $yellow-light solid; - border-bottom: 0; - border-top: 0; - color: $orange; - cursor: pointer; - font-size: 10px !important; - font-weight: 600; - margin: 0; - outline: none; - padding: 10px 15px; - text-align: center; - transition: background 0.25s ease-in-out; - - &:hover { - background: $yellow-hover; - } - - &.selected { - background-color: $yellow-mid; - } - - &:focus { - &:not(:focus-visible) { - outline: none; - } - } - - &:first-of-type { - border: 0; - border-bottom-left-radius: 5px; - border-top-left-radius: 5px; - } - - &:last-of-type { - border: 0; - border-bottom-right-radius: 5px; - border-top-right-radius: 5px; - } - } -} - -.updates-header { - align-self: center; - color: $gray-dark; - width: 100%; - - h2 { - color: $pblue; - font-weight: 900; - } - - h3 { - color: $blue-mid; - font-weight: 900; - - &:hover { - svg { - color: $blue; - } - } - - svg { - height: 1rem; - } - } -} - -.updates-footer { - align-self: center; - color: $gray-dark; - margin-left: auto; - - .telegram { - color: $blue; - - &:hover { - color: $purple; - } - } - - h4 { - color: $blue-mid; - font-weight: 900; - margin-top: 0.5rem; - - &:hover { - color: $blue; - } - - svg { - height: 1rem; - margin-bottom: -0.25rem; - } - } -} - -.updates { - align-self: center; - display: flex; - flex-direction: column; - margin-bottom: 1rem; - min-height: 22rem !important; - width: 100%; - - .update { - background: $gray-light; - border-radius: 5px; - margin-bottom: 0.5rem; - padding: 0.75rem; - transition: all 0.2s ease-in-out; - - &:hover { - background: $gray-hover; - } - - h5, - h4 { - margin: 0; - } - - h5 { - color: $gray-mid; - margin-bottom: 0.15rem; - } - - h4 { - color: $gray; - font-weight: 600; - } - } - - .button { - background: $pblue-light; - color: $pblue; - display: flex; - flex-direction: row; - height: 3rem; - width: 13rem; - - & > * { - align-self: center; - } - - &:hover { - background: $pblue-hover; - } - } - - a { - color: inherit; - display: flex; - flex-direction: row; - text-decoration: none; - - & > * { - align-self: center; - } - } -} - -.district-bar { - align-self: center; - display: flex; - flex-direction: column; - - .district-bar-bottom { - .button { - background: $gray-light; - color: $gray; - flex-basis: 15%; - font-weight: 600; - height: 2.5rem; - justify-content: center; - margin-top: 0.75rem; - text-transform: unset; - width: 5rem; - - &:hover { - background: $gray-hover; - } - } - } - - .district-bar-top { - align-self: center; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - width: 100%; - - h2 { - font-weight: 900; - margin-bottom: 0.5rem; - margin-top: 0; - - &.confirmed { - color: $red; - } - - &.active { - color: $blue; - } - - &.recovered { - color: $green; - } - - &.deceased { - color: $gray; - } - } - } - - .district-bar-left { - display: flex; - flex-direction: column; - flex-grow: 1; - } - - .district-bar-right { - display: flex; - flex-basis: 15rem; - flex-grow: 1; - justify-content: center; - position: relative; - - .happy-sign { - display: flex; - flex-direction: row; - position: absolute; - top: 4rem; - } - - .DeltaBarGraph { - margin-top: 1rem; - width: 100%; - - svg { - width: 100%; - - .label { - font-size: 11px; - font-weight: 900; - text-anchor: middle; - } - } - } - } - - .districts { - display: flex; - flex-direction: column; - flex-wrap: wrap; - width: 10rem; - - &.is-grid { - display: grid; - grid-auto-flow: column; - grid-gap: 0.5rem; - padding-bottom: 0.5rem; - width: 100%; - } - - .district { - display: flex; - flex-direction: row; - height: 2.5rem; - justify-content: flex-start; - margin-right: 0.5rem; - - h2, - h5 { - color: $gray; - font-weight: 600; - margin: 0; - } - - h5 { - display: inline-block !important; - margin-left: 0.5rem; - margin-top: 0.15rem; - width: auto !important; - } - - & > * { - align-self: center; - } - - .delta { - display: flex; - flex-direction: row; - margin-left: 0.5rem; - margin-top: 4px; - - h6 { - margin: 0; - - &.confirmed { - color: $red-mid; - } - - &.active { - color: $blue-mid; - } - - &.recovered { - color: $green-mid; - } - - &.deceased { - color: $gray-mid; - } - } - - svg { - stroke-width: 4; - vertical-align: bottom; - width: 10px; - - &.confirmed { - color: $red-mid; - } - - &.active { - color: $blue-mid; - } - - &.recovered { - color: $green-mid; - } - - &.deceased { - color: $gray-mid; - } - } - - & > * { - align-self: center; - } - } - } - } -} - -.LanguageSwitcher { - align-self: center; - display: flex; - flex-direction: column; - margin-left: 5rem; - width: 34rem; - - h3 { - align-self: center; - color: $pblue; - font-weight: 600; - margin-bottom: 2rem; - } - - .close-button { - align-self: center; - background: $pblue-light; - border-radius: 50%; - cursor: pointer; - display: flex; - flex-direction: column; - justify-content: center; - min-height: 1rem; - min-width: 1rem; - padding: 1rem; - - &:hover { - background: $pblue-hover; - } - - svg { - color: $pblue-mid; - stroke-width: 2.5px; - - &:hover { - color: $pblue; - } - } - } - - .languages { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - margin-bottom: 2.5rem; - min-height: 10rem; - - .language { - border-radius: 5px; - color: $pblue-mid; - cursor: pointer; - display: flex; - flex-direction: column; - font-weight: 600; - justify-content: center; - padding: 1rem; - user-select: none; - - &:hover { - color: $pblue; - } - - &.is-highlighted { - background: $pblue-light; - color: $pblue; - } - } - } -} - -.SunMoon { - cursor: pointer; -} - -.Tooltip { - display: flex; - flex-direction: column; - - .message { - background: #000; - border-radius: 5px; - display: flex; - flex-direction: row; - font-size: 13px; - font-weight: 400; - justify-content: flex-end; - max-width: 30vw; - min-width: 10rem; - padding: 0.5rem; - pointer-events: none; - right: 0; - top: 0; - transform: translate3d(2rem, 0, 0); - - p { - color: $white !important; - margin: 0; - } - } -} - -@media (min-width: 769px) { - .Home, - .State { - padding-top: 5rem; - } - - .Navbar { - background: $gray-light-opaque; - flex-direction: column; - height: 100%; - justify-content: flex-start; - min-width: 5rem; - position: fixed; - z-index: 999; - - .navbar-left { - margin-bottom: 0.5rem; - margin-top: auto; - order: 3; - text-align: center; - } - - .navbar-middle { - font-size: 0.6rem; - order: 1; - padding-bottom: 2rem; - padding-top: 2rem; - text-align: center; - width: 46px; - word-wrap: break-word; - } - - .navbar-right { - align-items: center; - background: $gray-light-opaque; - display: flex; - flex-direction: column; - order: 2; - padding-bottom: 0; - padding-top: 0; - - span { - display: flex; - flex-direction: row; - height: 1.5rem; - justify-content: center; - margin-bottom: 1.5rem; - margin-top: 1.5rem; - - &:hover { - color: $pblue-mid; - } - } - } - - .expand { - background: $gray-light-opaque; - flex-direction: column; - height: calc(100% - 5.5rem); - padding-left: 0; - padding-top: 5.75rem; - top: 0; - width: 15rem; - - & > * { - border: 0; - color: $gray; - font-weight: 600; - height: 1.5rem; - width: 12rem; - } - } - } - - .dark-mode { - .Navbar, - .expand, - .navbar-right { - background: #1e1e30 !important; - } - } - - .Home { - .home-left, - .home-right { - &.expanded { - width: 73rem; - } - } - - .home-left { - &.expanded { - margin-bottom: 2.5rem; - margin-right: 0; - } - } - - .home-right { - &.expanded { - flex-direction: row; - margin-left: 0; - } - } - } - - .map-container { - &.expanded { - margin-right: 2.5rem; - width: 50%; - } - } - - .TimeseriesExplorer { - &.expanded { - margin-left: 2.5rem; - width: calc(50% - 2rem); - } - } -} - -@media (max-width: 769px) { - .table-container, - .header, - .TimeseriesExplorer, - .map-container, - .Links, - .Summary, - .About, - .updates, - .updates-header, - .StateMeta, - .timeline, - .table-top, - .LanguageSwitcher { - width: calc(100% - 2rem); - } - - .Home, - .State { - display: flex; - flex-direction: column; - margin-left: 0; - margin-right: 0; - padding-top: 1rem; - width: 100%; - - .home-left, - .home-right, - .state-left, - .state-right { - display: flex; - flex-direction: column; - margin: 0; - width: 100%; - } - } - - .Level { - h1 { - font-size: 3.75vw !important; - } - } - - .map-container { - align-self: center; - } - - .MapExplorer { - .svg-parent { - width: 100%; - } - - .header { - margin-top: 2rem; - } - } - - .link, - .faq { - width: calc(100% - 2rem); - } - - .Timeseries { - .svg-parent { - width: 100%; - } - } - - .Minigraph { - .svg-parent { - padding: 0; - } - } - - .map-stats { - .stats { - .timestamp { - width: 4.5rem; - } - } - } - - a { - &.button { - display: flex; - flex: row; - justify-content: center; - width: 10rem; - - & > * { - align-self: center; - } - - svg { - width: 38px; - } - } - } - - .Banner { - height: 7rem; - - .snippet { - margin-left: 1rem; - margin-right: 1rem; - width: 100%; - } - } - - .cards-container { - padding: 0.5rem; - - .cards { - .card { - flex: 0 1 100%; - height: 25rem; - margin-bottom: 0; - } - - .chart-title { - padding: 20px 0 10px; - } - - .card-big { - height: 30rem; - } - } - } - - .Demographics { - margin-left: 0; - width: 100%; - - .select { - .react-date-picker__calendar { - position: fixed; - top: 2.3rem !important; - } - } - - .header { - margin: 0; - padding-left: 1rem; - padding-right: 1rem; - width: calc(100% - 2rem); - } - - .reminder { - padding-bottom: 1rem; - padding-top: 1rem; - width: calc(100% - 4rem); - } - - .Patients { - width: calc(100% - 2rem); - } - - .modal { - .modal-content { - width: calc(100% - 5rem); - - .meta { - height: 20rem; - } - } - } - - .filters-left { - flex-wrap: wrap; - justify-content: space-between; - } - - .filters { - align-self: center; - height: auto; - justify-content: center; - padding: 0.5rem; - } - } - - .patients-summary { - width: calc(100% - 2rem); - - .modal { - .modal-content { - width: calc(100% - 5rem); - - .meta { - height: 20rem; - } - } - } - } - - .patientdb-wrapper { - padding-left: 1rem !important; - padding-right: 1rem !important; - - .Patients { - width: 100%; - } - - .day { - justify-content: center; - width: 100%; - } - } - - .Navbar { - .expand { - height: calc(100% - 4rem); - overflow: auto; - transform: none !important; - } - - .expand-bottom { - margin-top: auto; - } - - .navbar-right { - span { - display: none; - - &:first-child { - display: initial; - } - } - } - } - - .Search { - .result-name { - max-width: 10rem !important; - } - } - - .State { - .MapExplorer, - .StateHeader { - width: calc(100% - 2rem); - } - - .district-bar { - width: calc(100% - 3rem); - - h1 { - padding-left: 0; - } - } - } - - .StateMeta { - display: grid; - grid-gap: 1rem; - grid-template-rows: repeat(auto-fit, minmax(5rem)); - margin-bottom: 1rem; - - .meta-item { - min-width: 1rem; - } - } - - .timeline { - padding-left: 0 !important; - padding-right: 0 !important; - } - - .Timeline { - width: 100%; - } - - .LanguageSwitcher { - margin-left: 0; - } - - .LevelVaccinated { - margin-bottom: 3rem !important; - margin-top: 2rem !important; - } - - .timeseries-header { - .timeseries-options { - flex-direction: column; - - .moving-average { - margin-top: 0.75rem; - } - } - } -} - -// Dark Mode - -.dark-mode { - background: #161625 !important; - color: #bdbdbd; - - .switch-wrapper > div { - background: #161625 !important; - } - - .is-tested { - color: $dark-m-purple !important; - - svg { - color: $dark-m-purple !important; - } - } - - .expand { - background: #1e1e30 !important; - } - - .Navbar, - .expand { - border-right: 0; - - .navbar-middle { - color: #bdbdbd; - } - } - - .table { - .cell { - &:first-child { - background: #1e1e30 !important; - } - - &.heading { - background: #1e1e30 !important; - - &:hover { - background: #212130 !important; - } - } - } - - .is-highlighted, - .is-total { - .cell { - background: #1e1e30 !important; - } - } - } - - .Search { - input { - background: #1e1e30 !important; - } - } - - .State { - .header-right { - h5 { - color: #9673b9bb !important; - } - - h2 { - color: #9673b9 !important; - } - - a { - background: $dark-m-purple-light !important; - } - } - - .breadcrumb { - ul { - background: #1e1e30 !important; - - &::after { - border-bottom-color: #1e1e30 !important; - } - - li { - a { - color: $gray !important; - - &:hover { - color: $white !important; - } - } - } - } - } - } - - .StateHeader { - .header-right { - color: $dark-m-purple-mid; - - h2 { - color: $dark-m-purple; - } - - a { - background: $dark-m-purple-light; - } - } - } - - .MapExplorer { - #chart, - #legend { - &.zone { - filter: none; - } - - &:not(.zone) { - filter: invert(1) hue-rotate(180deg) saturate(1.5) url('#balance-color'); - } - } - - .maplegend { - background: #161625 !important; - } - - .meta { - h1 { - &.tested { - color: #9673b9 !important; - } - } - - h2 { - &.tested { - color: #9673b9 !important; - } - } - } - - .stats { - &.tested { - background: $dark-m-purple-light !important; - - h1 { - color: #9673b9 !important; - } - - h5, - h6 { - color: #9673b9bb !important; - } - - svg { - stroke: #9673b9bb !important; - - &:hover { - stroke: #9673b9 !important; - } - } - } - } - - .disclaimer { - color: $gray-light-opaque; - } - } - - .Timeseries, - .Minigraph { - .stats { - &.is-tested { - h5 { - color: $dark-m-purple-mid !important; - - &.title { - color: $dark-m-purple-mid !important; - } - } - - h2, - h6 { - color: $dark-m-purple !important; - } - } - } - - .svg-parent { - &.is-tested { - background: $dark-m-purple-light !important; - - svg { - circle, - .domain, - .tick { - stroke: $dark-m-purple !important; - } - - circle { - fill: $dark-m-purple !important; - } - - .trend, - line { - stroke: #9673b999 !important; - } - - .trend-area { - fill: #9673b999 !important; - } - - text { - color: $dark-m-purple-mid !important; - stroke: transparent; - } - } - } - } - } - - .tpm { - background: $dark-m-purple-light !important; - - h3, - h5, - svg, - p { - color: #9673b9bb !important; - } - - h1 { - color: #9673b9 !important; - } - } - - .tab { - &.focused { - background: #1e1e30 !important; - color: #bdbdbd !important; - } - } - - .pills { - button { - &.selected { - background: #{$yellow}50; - } - } - } - - .TimeseriesExplorer { - .state-selection { - .dropdown { - select { - background: #1e1e30; - background-image: linear-gradient(45deg, transparent 50%, $gray 50%), - linear-gradient(135deg, $gray 50%, transparent 50%); - background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; - background-repeat: no-repeat; - background-size: 5px 5px, 5px 5px; - border-color: #9494941a; - } - } - } - } - - input { - &.switch { - background-color: #161625 !important; - border: 2px solid $gray-mid !important; - - &:checked { - background-color: #6c757d99 !important; - - &::after { - background-color: #cfcfcf !important; - } - } - - &::after { - background-color: #cfcfcf !important; - } - } - } - - .disabled { - input { - &.switch { - background: $dark !important; - border: $gray-light 2px solid !important; - opacity: 0.7; - - &::after { - background: $gray !important; - } - } - } - } - - .About { - .question { - color: $gray !important; - } - } - - .Demographics { - .filters { - background: #1e1e30 !important; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #1e1e30; - } - - .legend { - background: #1e1e30 !important; - } - - .react-date-picker { - background: #1e1e30; - border-color: #9494941a !important; - } - - .modal-content { - background: #1e1e30 !important; - } - - .modal { - background: #1e1e30bb !important; - } - } - - .StateDropdown { - .dropdown { - background: #1e1e30 !important; - } - } - - .TableLoader { - svg { - rect { - fill: #1e1e30 !important; - } - } - } -} - -// Animation Support - -.fadeInUp { - animation-duration: 0.45s; - animation-fill-mode: both; - animation-name: fadeInUp; -} - -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.rotateDownRight { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-name: rotateDownRight; -} - -@keyframes rotateDownRight { - 100% { - transform: rotate(-90deg); - } -} - -.rotateRightDown { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-name: rotateRightDown; -} - -@keyframes rotateRightDown { - 0% { - transform: rotate(-90deg); - } -} - -.fadeOutDown { - animation-duration: 0.45s; - animation-fill-mode: both; - animation-name: fadeOutDown; -} - -@keyframes fadeOutDown { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(20px); - } -} diff --git a/src/components/About.js b/src/pages/About.js similarity index 97% rename from src/components/About.js rename to src/pages/About.js index f5148fdb60..93670c5dd7 100644 --- a/src/components/About.js +++ b/src/pages/About.js @@ -1,4 +1,4 @@ -import Footer from './Footer'; +import Footer from '../components/Footer'; import {useState, useEffect} from 'react'; import {Helmet} from 'react-helmet'; diff --git a/src/components/Blog.js b/src/pages/Blog.js similarity index 100% rename from src/components/Blog.js rename to src/pages/Blog.js diff --git a/src/components/Home.js b/src/pages/Home.js similarity index 87% rename from src/components/Home.js rename to src/pages/Home.js index d0a93be7f6..508beef4d9 100644 --- a/src/components/Home.js +++ b/src/pages/Home.js @@ -9,17 +9,19 @@ import {Helmet} from 'react-helmet'; import {useLocation} from 'react-router-dom'; import {useLocalStorage, useSessionStorage, useWindowSize} from 'react-use'; -const Actions = lazy(() => import('./Actions')); -const Footer = lazy(() => import('./Footer')); -const Level = lazy(() => import('./Level')); -const LevelVaccinated = lazy(() => import('./LevelVaccinated')); -const MapExplorer = lazy(() => import('./MapExplorer')); -const MapSwitcher = lazy(() => import('./MapSwitcher')); -const Minigraphs = lazy(() => import('./Minigraphs')); -const Search = lazy(() => import('./Search')); -const StateHeader = lazy(() => import('./StateHeader')); -const Table = lazy(() => import('./Table')); -const TimeseriesExplorer = lazy(() => import('./TimeseriesExplorer')); +const Actions = lazy(() => import('../components/Actions')); +const Footer = lazy(() => import('../components/Footer')); +const Level = lazy(() => import('../components/Level')); +const LevelVaccinated = lazy(() => import('../components/LevelVaccinated')); +const MapExplorer = lazy(() => import('../components/MapExplorer')); +const MapSwitcher = lazy(() => import('../components/MapSwitcher')); +const Minigraphs = lazy(() => import('../components/Minigraphs')); +const Search = lazy(() => import('../components/Search')); +const StateHeader = lazy(() => import('../components/StateHeader')); +const Table = lazy(() => import('../components/Table')); +const TimeseriesExplorer = lazy(() => + import('../components/TimeseriesExplorer') +); function Home() { const [regionHighlighted, setRegionHighlighted] = useState({ diff --git a/src/components/State.js b/src/pages/State.js similarity index 93% rename from src/components/State.js rename to src/pages/State.js index 279cce24b6..491f6987e8 100644 --- a/src/components/State.js +++ b/src/pages/State.js @@ -19,16 +19,18 @@ import {useParams} from 'react-router-dom'; import {useSessionStorage} from 'react-use'; import useSWR from 'swr'; -const DeltaBarGraph = lazy(() => import('./DeltaBarGraph')); -const Footer = lazy(() => import('./Footer')); -const Level = lazy(() => import('./Level')); -const LevelVaccinated = lazy(() => import('./LevelVaccinated')); -const MapExplorer = lazy(() => import('./MapExplorer')); -const MapSwitcher = lazy(() => import('./MapSwitcher')); -const Minigraphs = lazy(() => import('./Minigraphs')); -const StateHeader = lazy(() => import('./StateHeader')); -const StateMeta = lazy(() => import('./StateMeta')); -const TimeseriesExplorer = lazy(() => import('./TimeseriesExplorer')); +const DeltaBarGraph = lazy(() => import('../components/DeltaBarGraph')); +const Footer = lazy(() => import('../components/Footer')); +const Level = lazy(() => import('../components/Level')); +const LevelVaccinated = lazy(() => import('../components/LevelVaccinated')); +const MapExplorer = lazy(() => import('../components/MapExplorer')); +const MapSwitcher = lazy(() => import('../components/MapSwitcher')); +const Minigraphs = lazy(() => import('../components/Minigraphs')); +const StateHeader = lazy(() => import('../components/StateHeader')); +const StateMeta = lazy(() => import('../components/StateMeta')); +const TimeseriesExplorer = lazy(() => + import('../components/TimeseriesExplorer') +); function State() { const {t} = useTranslation(); diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000000..1bf962fbd4 --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,34 @@ +import Blog from './Blog'; + +import {lazy} from 'react'; + +const Home = lazy(() => import('./Home')); +const About = lazy(() => import('./About')); +const State = lazy(() => import('./State')); + +export default [ + { + pageLink: '/', + view: Home, + displayName: 'Home', + showInNavbar: true, + }, + { + pageLink: '/blog', + view: Blog, + displayName: 'Blog', + showInNavbar: true, + }, + { + pageLink: '/about', + view: About, + displayName: 'About', + showInNavbar: true, + }, + { + pageLink: '/state/:stateCode', + view: State, + displayName: 'State', + showInNavbar: false, + }, +]; diff --git a/src/scss/_extra.scss b/src/scss/_extra.scss new file mode 100644 index 0000000000..d59e1dedfc --- /dev/null +++ b/src/scss/_extra.scss @@ -0,0 +1,206 @@ + +.arrow-up { + border-bottom: 5px solid $gray-mid; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + margin-left: 0.25rem; +} + +.arrow-down { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid $gray-mid; + margin-left: 0.25rem; +} + +.labels { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-bottom: 1rem; + + .label { + align-items: center; + background: $gray-light !important; + border-radius: 5px !important; + color: $gray-mid !important; + cursor: pointer; + display: flex; + flex-direction: row; + font-size: 14px; + margin-bottom: 0.25rem; + margin-right: 0.25rem; + padding: 0.25rem 0.5rem; + text-transform: capitalize; + + &.is-selected { + background: $yellow-hover !important; + color: $orange-mid !important; + + &:hover { + background: $yellow-hover !important; + color: $orange-mid !important; + } + } + + @media not all and (pointer: coarse) { + &:hover { + background: $yellow-light !important; + color: $orange-mid !important; + } + } + + .count { + align-items: center; + background: inherit; + border-radius: 50%; + color: inherit; + display: flex; + flex-direction: row; + font-size: 12px; + height: 1.5rem; + justify-content: center; + margin-left: 0.25rem; + width: 1.5rem; + } + } +} + +.Banner { + background: $purple-light; + color: $purple; + display: flex; + flex-direction: row; + font-size: 0.8rem; + font-weight: 600; + justify-content: center; + line-height: 20px; + + .snippet { + align-self: center; + cursor: pointer; + padding: 1.5rem; + text-align: center; + width: calc(100% - 10rem); + word-wrap: break-word; + } +} + +.Links { + display: flex; + flex-direction: column; + justify-content: center; +} + +@media (max-width: 769px) { + + .Banner { + height: 7rem; + + .snippet { + margin-left: 1rem; + margin-right: 1rem; + width: 100%; + } + } + + .cards-container { + padding: 0.5rem; + + .cards { + .card { + flex: 0 1 100%; + height: 25rem; + margin-bottom: 0; + } + + .chart-title { + padding: 20px 0 10px; + } + + .card-big { + height: 30rem; + } + } + } + + .Demographics { + margin-left: 0; + width: 100%; + + .select { + .react-date-picker__calendar { + position: fixed; + top: 2.3rem !important; + } + } + + .header { + margin: 0; + padding-left: 1rem; + padding-right: 1rem; + width: calc(100% - 2rem); + } + + .reminder { + padding-bottom: 1rem; + padding-top: 1rem; + width: calc(100% - 4rem); + } + + .Patients { + width: calc(100% - 2rem); + } + + .modal { + .modal-content { + width: calc(100% - 5rem); + + .meta { + height: 20rem; + } + } + } + + .filters-left { + flex-wrap: wrap; + justify-content: space-between; + } + + .filters { + align-self: center; + height: auto; + justify-content: center; + padding: 0.5rem; + } + } + + .patients-summary { + width: calc(100% - 2rem); + + .modal { + .modal-content { + width: calc(100% - 5rem); + + .meta { + height: 20rem; + } + } + } + } + + .patientdb-wrapper { + padding-left: 1rem !important; + padding-right: 1rem !important; + + .Patients { + width: 100%; + } + + .day { + justify-content: center; + width: 100%; + } + } + +} diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss new file mode 100644 index 0000000000..87c980c4a3 --- /dev/null +++ b/src/scss/abstracts/_variables.scss @@ -0,0 +1,74 @@ +// Color Pallete + +$white: #fff; +$light: #f8f9fa; +$dark: #343a40; +$black: #000; + +$blue: #007bff; +$blue-light: #007bff10; +$blue-hover: #007bff30; +$blue-light-opaque: #eff7ff; +$blue-mid: #007bff99; +$pblue: #4c75f2; +$pblue-light: #4c75f210; +$pblue-hover: #4c75f230; +$pblue-light-opaque: #eff7ff; +$pblue-mid: #4c75f299; +$cherry: #ff073a; +$cherry-mid: #ff073a99; +$cherry-light: #ff073a20; +$cherry-hover: #ff073a30; +$cherry-light-opaque: #ffe0e6; +$red: #dc3545; +$red-light: #dc354520; +$red-mid: #dc354599; +$red-hover: #dc354530; +$orange: #fd7e14; +$orange-mid: #fd7e1499; +$orange-light: #fd7e1420; +$orange-hover: #fd7e1430; +$orange-light-opaque: #ffefe2; +$yellow: #ffc107; +$yellow-light: #ffc10720; +$yellow-hover: #ffc10730; +$yellow-mid: #ffc10799; +$yellow-light-opaque: #fff7e0; +$green: #28a745; +$green-light: #28a74520; +$green-hover: #28a74530; +$green-mid: #28a74599; +$gray: #6c757d; +$gray-light: #6c757d10; +$gray-light-opaque: #f6f6f7; +$gray-hover: #6c757d20; +$gray-mid: #6c757d99; +$gray-middark: #6c757d30; +$gray-dark: #343a40; +$gray-opaque: #f1f1f1; +$gray-hover-opaque: #edeeef; +$gray-hover-darker-opaque: #f6f6f7; +$purple: #201aa2dd; +$purple-light: #201aa220; +$purple-hover: #201aa230; +$purple-mid: #201aa299; +$purple-light-opaque: #e3e2f3; +$pink: #db5581; +$pink-light: #db558120; +$pink-hover: #db558160; +$pink-mid: #db558199; +$brown: #b6854d; +$brown-light: #b6854d10; +$brown-hover: #b6854d30; +$brown-mid: #b6854d99; +$brick: #e23028; +$brick-light: #e2302810; + +// Dark mode variables +$dark-m-gray: #161625; +$dark-mid-subtext: #bdb8ae; +$dark-m-white: #e1e1e1; +$dark-m-blue: #3391ff; +$dark-m-purple: #9673b9; +$dark-m-purple-mid: #9673b9bb; +$dark-m-purple-light: #40008050; diff --git a/src/scss/base/_animations.scss b/src/scss/base/_animations.scss new file mode 100644 index 0000000000..3c536262c9 --- /dev/null +++ b/src/scss/base/_animations.scss @@ -0,0 +1,62 @@ + +// Animation Support + +.fadeInUp { + animation-duration: 0.45s; + animation-fill-mode: both; + animation-name: fadeInUp; +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.rotateDownRight { + animation-duration: 0.25s; + animation-fill-mode: both; + animation-name: rotateDownRight; +} + +@keyframes rotateDownRight { + 100% { + transform: rotate(-90deg); + } +} + +.rotateRightDown { + animation-duration: 0.25s; + animation-fill-mode: both; + animation-name: rotateRightDown; +} + +@keyframes rotateRightDown { + 0% { + transform: rotate(-90deg); + } +} + +.fadeOutDown { + animation-duration: 0.45s; + animation-fill-mode: both; + animation-name: fadeOutDown; +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(20px); + } +} diff --git a/src/scss/base/_common.scss b/src/scss/base/_common.scss new file mode 100644 index 0000000000..9257cfe3e6 --- /dev/null +++ b/src/scss/base/_common.scss @@ -0,0 +1,97 @@ +.alert { + align-items: flex-start; + background: $gray-light; + border-radius: 5px; + color: $gray; + display: flex; + flex-direction: row; + font-size: 10px; + padding: 0.5rem; + + svg { + color: $gray-mid; + height: 16px; + width: 16px; + } + + .alert-right { + margin-left: 0.25rem; + text-align: right; + width: 9rem; + + a { + background: $gray-light; + color: $gray; + padding-left: 0.1rem; + padding-right: 0.1rem; + + &:hover { + background: $gray-hover; + } + } + + &.is-full { + width: 100%; + } + } + + &.is-green { + background: $green-light; + color: $green; + + svg { + stroke: $green-mid; + } + } +} + +.button { + background: $blue-light; + border: 0; + border-radius: 5px; + color: $blue-mid; + cursor: pointer; + display: flex; + flex-direction: row; + font-size: 0.75rem; + font-weight: 900; + margin-bottom: 0.5rem; + margin-top: 0.25rem; + outline: none; + padding: 0.5rem; + text-decoration: none; + text-transform: uppercase; + transition: background 0.2s ease-in-out; + + svg { + padding-right: 6px; + stroke-width: 2px; + width: 20px; + } + + &.is-purple { + background: $purple-light; + color: $purple-mid; + + &:hover { + background: $purple-hover; + } + } + + &.is-green { + background: $green-light; + color: $green-mid; + + &:hover { + background: $green-hover; + } + } + + &:hover { + background: $blue-hover; + } + + & > * { + align-self: center; + } +} diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss new file mode 100644 index 0000000000..f6beff2f4b --- /dev/null +++ b/src/scss/base/_reset.scss @@ -0,0 +1,124 @@ + +* { + font-family: 'archia'; +} + +html { + overflow-x: hidden; + width: 100vw; +} + +body { + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + margin: 0; + padding: 0; +} + +h1 { + font-size: 24px !important; + font-weight: 900; +} + +h2 { + font-size: 18px !important; + font-weight: 400; +} + +h3 { + font-size: 14px !important; + font-weight: 400; +} + +h4 { + font-size: 13px !important; + font-weight: 900; +} + +h5 { + font-size: 12px !important; + font-weight: 900; +} + +h6 { + font-size: 11px !important; + font-weight: 600; +} + +abbr { + text-decoration: none; + + &.is-cherry { + color: $cherry; + } + + &.is-blue { + color: $blue; + } + + &.is-green { + color: $green; + } + + &.is-gray { + color: $gray; + } +} + +input { + &.switch { + appearance: none; + background-color: #fff; + border: 2px solid #d9dadc; + border-radius: 10px; + cursor: pointer; + height: 14px; + margin: 0; + outline: none; + position: relative; + transition: all 300ms ease-in-out; + width: 24px; + + &::after { + background-color: $gray-mid; + border-radius: 50%; + content: ''; + height: 10px; + left: 0; + position: absolute; + top: 0; + transition: all 300ms ease-in-out; + width: 10px; + } + + &:checked { + background-color: $gray-mid; + transition: all 300ms ease-in-out; + + &::after { + background-color: $light; + left: 10px; + transition: all 300ms ease-in-out; + } + } + } +} + +@media (max-width: 769px) { + a { + &.button { + display: flex; + flex-direction: row; + justify-content: center; + width: 10rem; + + & > * { + align-self: center; + } + + svg { + width: 38px; + } + } + } +} diff --git a/src/scss/components/_footer.scss b/src/scss/components/_footer.scss new file mode 100644 index 0000000000..204e3756df --- /dev/null +++ b/src/scss/components/_footer.scss @@ -0,0 +1,97 @@ +footer { + display: flex; + flex-direction: column; + margin-bottom: 4rem; + margin-top: 4rem; + width: 100%; + + & > * { + align-self: center; + text-align: center; + } + + h5 { + color: $gray; + font-weight: 600; + margin: 0; + margin-bottom: 2rem; + } + + svg { + margin-right: 0.5rem; + padding: 0.25rem; + } + + .telegram { + color: $blue-mid; + + &:hover { + color: $blue; + } + } + + .github { + color: $gray-mid; + + &:hover { + color: $gray; + } + } + + .twitter { + color: $pblue-mid; + + &:hover { + color: $pblue; + } + } + + .api { + color: $yellow-mid; + + &:hover { + color: $yellow; + } + } + + .mail { + color: $brown-mid; + + &:hover { + color: $brown; + } + } +} + +.link { + align-self: center; + margin-bottom: 1rem; + margin-top: 1rem; + width: 34rem; + + a { + background: $blue-light; + color: $blue; + font-weight: 900; + text-decoration: none; + text-transform: uppercase; + transition: background 0.2s ease-in-out; + word-wrap: break-word; + + &:hover { + background: $blue-hover; + } + } + + h3 { + color: $gray-dark; + font-weight: 900; + margin-bottom: 0; + } +} + +@media (max-width: 769px) { + .link { + width: calc(100% - 2rem); + } +} diff --git a/src/scss/components/_graphs.scss b/src/scss/components/_graphs.scss new file mode 100644 index 0000000000..0635a4a630 --- /dev/null +++ b/src/scss/components/_graphs.scss @@ -0,0 +1,1226 @@ +#chart { + z-index: 10; +} + +.anchor { + cursor: pointer; + position: absolute; + right: 0; + transform: rotate(45deg); + transition: all 0.1s ease-in-out; + z-index: 999; + + svg { + color: $gray-mid; + + &:hover { + color: $gray; + } + } + + &.stickied { + transform: rotate(90deg); + + svg { + color: $gray; + } + } +} + +.map-container { + display: flex; + flex-direction: column; + width: 100%; +} + +.MapExplorer { + align-self: center; + margin-bottom: 3rem; + position: relative; + width: 100%; + + &.stickied { + position: sticky !important; + top: 0; + } + + &.hidden { + display: none; + } + + .svg-parent { + display: block; + margin: auto; + margin-top: 2rem; + overflow: visible; + position: relative; + width: 90%; + + &.maplegend { + margin-top: 0.6rem; + width: 100%; + z-index: 1; + } + + svg { + align-self: center; + height: 100%; + overflow: visible; + width: 100%; + + text { + fill: $gray; + font-size: 10px; + font-weight: 600; + text-align: right; + } + } + } + + .map-button { + background: $yellow-light; + border-radius: 5px; + color: $orange; + cursor: pointer; + font-size: 0.75rem; + font-weight: 900; + margin-bottom: 0.25rem; + padding: 0.5rem; + position: absolute; + right: 0; + transition: all 0.2s ease-in-out; + + &:hover { + background: $yellow-hover; + } + + svg { + height: 12px; + margin-left: 0.25rem; + stroke: $orange-mid; + stroke-width: 3px; + vertical-align: middle; + width: 12px; + } + } + + .panel { + display: flex; + flex-direction: row; + justify-content: space-between; + min-height: 6rem; + padding-top: 1rem; + position: relative; + + h2 { + font-weight: 900; + margin-top: 0; + transition: color 0.3s ease-in-out; + word-wrap: break-word; + + &.confirmed { + color: $brick; + } + + &.active { + color: $blue; + } + + &.recovered { + color: $green; + } + + &.deceased { + color: $gray; + } + } + + h4 { + color: $gray-mid; + margin: 0; + word-wrap: break-word; + } + + .panel-left { + display: flex; + flex: 1; + flex-direction: column; + + .district { + line-height: 15px; + margin: 0; + transition: color 0.3s ease-in-out; + + span { + font-size: 0.75rem; + font-weight: 600; + } + + &.confirmed { + color: $brick; + } + + &.active { + color: $blue; + } + + &.recovered { + color: $green; + } + + &.deceased { + color: $gray; + } + + &.tested { + color: $purple; + } + } + } + + .panel-right { + display: flex; + flex-direction: column; + + svg { + transition: all 0.3s ease-in-out; + } + + &.is-confirmed { + svg { + fill: $cherry-light; + stroke: $cherry-mid; + } + + .boundary { + svg { + fill: $cherry-mid; + stroke: none; + } + } + + .is-highlighted { + background: $cherry-light; + + &:hover { + background: $cherry-hover; + } + } + } + + &.is-active { + svg { + fill: $blue-light; + stroke: $blue-mid; + } + + .boundary { + svg { + fill: $blue-mid; + stroke: none; + } + } + + .is-highlighted { + background: $blue-light; + + &:hover { + background: $blue-hover; + } + } + } + + &.is-recovered { + svg { + fill: $green-light; + stroke: $green-mid; + } + + .boundary { + svg { + fill: $green-mid; + stroke: none; + } + } + + .is-highlighted { + background: $green-light; + + &:hover { + background: $green-hover; + } + } + } + + &.is-deceased { + svg { + fill: $gray-light; + stroke: $gray-mid; + } + + .boundary { + svg { + fill: $gray-mid; + stroke: none; + } + } + + .is-highlighted { + background: $gray-middark; + + &:hover { + background: $gray-hover; + } + } + } + + .switch-type, + .switch-statistic { + display: flex; + flex-direction: row; + justify-content: flex-end; + margin-bottom: 0.25rem; + + div { + align-items: center; + background: $gray-light; + border-radius: 5px; + cursor: pointer; + display: flex; + flex-direction: row; + height: 2.5rem; + justify-content: center; + width: 2.5rem; + + &.back { + margin-right: 0 !important; + + svg { + fill: $gray; + stroke: transparent; + } + } + + &:hover { + background: $gray-hover; + } + + &:not(:last-child) { + margin-right: 0.25rem; + } + + svg { + height: 100%; + } + } + + .divider { + border-radius: 5px; + width: 2px !important; + } + } + + .switch-statistic { + align-self: flex-end; + flex-direction: row; + position: absolute; + top: 5rem; + + div { + background: none; + display: flex; + flex-direction: row; + height: 1.25rem; + margin-bottom: 0.25rem; + margin-left: 0.65rem !important; + width: 1.25rem; + + span { + position: absolute; + } + + &:hover { + background: none; + } + + &.is-confirmed { + svg { + fill: $cherry-hover; + stroke: none; + } + + &.is-highlighted { + svg { + fill: $cherry; + transform: scale(1.25); + } + } + } + + &.is-active { + svg { + fill: $blue-hover; + stroke: none; + } + + &.is-highlighted { + svg { + fill: $blue; + transform: scale(1.25); + } + } + } + + &.is-recovered { + svg { + fill: $green-hover; + stroke: none; + } + + &.is-highlighted { + svg { + fill: $green; + transform: scale(1.25); + } + } + } + + &.is-deceased { + svg { + fill: $gray-hover; + stroke: none; + } + + &.is-highlighted { + svg { + fill: $gray; + transform: scale(1.25); + } + } + } + } + } + } + + &.bottom { + margin-top: 0; + padding-top: 0; + } + } + + #chart, + #legend { + filter: saturate(1.5); + } + + .disclaimer { + align-items: center; + backdrop-filter: saturate(180%) blur(20px); + border-radius: 5px; + bottom: 50%; + display: flex; + flex-direction: row; + font-size: 12px; + left: 0; + margin-left: auto; + margin-right: auto; + padding: 0.5rem; + pointer-events: none; + position: absolute; + right: 0; + transition: background, color 0.3s ease-in-out; + width: 10rem; + z-index: 99; + + &.is-confirmed { + background: $cherry-light; + color: $cherry; + } + + &.is-active { + background: $blue-light; + color: $blue; + } + + &.is-recovered { + background: $green-light; + color: $green; + } + + &.is-deceased { + background: $gray-light; + color: $gray; + } + + span { + flex: 1; + } + + svg { + align-self: flex-start; + margin-right: 0.5rem; + stroke-width: 2px; + width: 16px; + } + } + + .footnote { + color: $gray; + margin-bottom: 0; + margin-top: 1em; + text-align: left; + z-index: 1; + + a { + border-bottom: 2px solid $gray-hover; + text-decoration: none; + + &:hover { + background: $gray-hover; + } + } + } +} + +.tabs { + display: flex; + flex-direction: row; + position: relative; + + .tab { + background: $gray-light; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + color: $gray-mid; + cursor: pointer; + height: 3.25rem; + margin-right: 0.25rem; + min-width: 5rem; + padding-left: 1rem; + padding-right: 1rem; + text-align: center; + + &:hover { + background: $gray-hover; + } + + &.focused { + background: $gray-opaque; + color: $gray; + } + } +} + +.tabs-map { + display: flex; + flex-direction: row; + flex-wrap: wrap; + position: relative; + z-index: 99; + + h4 { + display: table-cell; + font-size: 12px !important; + font-weight: 900; + height: 2rem; + margin-bottom: 0; + margin-top: 0; + vertical-align: middle; + } + + .tab { + background: $gray-light; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + color: $gray-mid; + cursor: pointer; + height: 2rem; + margin-right: 0.25rem; + margin-top: 0.25rem; + min-width: 1.6rem; + padding-left: 1rem; + padding-right: 1rem; + text-align: center; + transition: all 0.3s ease-in-out; + + &:hover { + background: $gray-hover; + } + + &.focused { + background: $gray-opaque; + color: $gray; + } + + &.disabled { + background: $gray-opaque; + color: $gray-mid; + } + } + + sup { + position: relative; + top: -0.5em; + vertical-align: top; + } +} + +.TimeseriesExplorer { + align-self: center; + display: flex; + flex-direction: column; + width: calc(100% - 2rem); + + &.stickied { + position: sticky !important; + top: -6.5rem; + } + + .alert { + align-self: flex-end; + margin: 0; + margin-top: 1rem; + } + + .state-selection { + display: flex; + flex-direction: row; + margin-top: 1rem; + max-width: calc(100% - 0.6rem); + + .dropdown { + min-width: calc(60%); + + select { + appearance: none; + background-color: #eee; + background-image: url('data:image/svg+xml,'); + background-position-x: calc(100% - 0.4rem); + background-position-y: 50%; + background-repeat: no-repeat; + background-size: 0.6rem; + border: 2px solid #e8e8e9; + border-radius: 4px; + color: $gray; + cursor: pointer; + font-weight: 600; + padding: 0.5rem; + padding-right: 1.4rem; + width: 100%; + + &:focus { + outline: none; + } + } + } + + .reset-icon { + margin: auto; + margin-left: 0.75rem; + margin-top: 0.5rem; + + svg { + color: $gray-mid; + cursor: pointer; + fill: #a6abb0; + stroke: #a6abb0; + stroke-width: 0.5; + width: 16px; + + &:hover { + fill: $gray; + stroke: $gray; + } + } + } + } +} + +.Timeseries { + align-self: center; + width: 100%; + + .svg-parent { + height: 12rem; + margin-bottom: 1rem; + + &.is-confirmed { + .stem { + stroke: $cherry-mid; + } + + .trend-area { + fill: $cherry-mid; + } + } + + &.is-active { + .stem { + stroke: $blue-mid; + } + + .trend-area { + fill: $blue-mid; + } + } + + &.is-recovered { + .stem { + stroke: $green-mid; + } + + .trend-area { + fill: $green-mid; + } + } + + &.is-deceased { + .stem { + stroke: $gray-mid; + } + + .trend-area { + fill: $gray-mid; + } + } + + &.is-tested { + .stem { + stroke: $purple-mid; + } + + .trend-area { + fill: $purple-mid; + } + } + + &.is-vaccinated { + .stem { + stroke: $pink-mid; + } + + .trend-area { + fill: $pink-mid; + } + } + + &.is-brush { + height: 4rem; + } + } +} + +.timeseries-header { + align-self: center; + position: relative; + width: 100%; + + h1 { + color: $gray; + margin: 0; + margin-bottom: 2rem; + text-align: center; + } + + .timeseries-options { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 1rem; + + .timeseries-mode { + display: flex; + flex-direction: row; + } + + .scale-modes { + align-items: flex-end; + bottom: 0; + color: $gray; + display: flex; + flex-direction: row; + right: 0; + z-index: 99; + + &:hover { + label { + &.main { + color: $gray; + } + } + } + + .timeseries-mode { + margin-left: 1rem; + } + + & > * { + align-self: center; + } + } + + label { + color: $gray-mid; + font-size: 0.75rem; + font-weight: 900; + margin-right: 0.25rem; + z-index: 99; + } + } +} + +.disabled { + input { + &.switch { + background: $gray-light !important; + border: $gray-light 2px solid !important; + cursor: not-allowed !important; + + &::after { + background: $gray-light !important; + } + } + } +} + +.Timeseries, +.Minigraph { + display: flex; + flex-direction: column; + margin-top: 1rem; + width: 100%; + + .stats { + border-radius: 3px; + display: flex; + flex-direction: column; + left: 0.5rem; + padding: 0.25rem; + pointer-events: none; + position: absolute; + top: 0.5rem; + + .stats-bottom { + display: flex; + flex-direction: row; + + h6 { + margin-bottom: 0.1rem; + margin-left: 0.25rem; + } + + & > * { + margin-top: auto; + } + } + + h2, + h5, + h6 { + margin: 0; + transition: all 0.15s ease-in-out; + } + + h5 { + color: $cherry-mid; + + &.title { + color: $cherry-mid; + } + } + + h2, + h6 { + color: $cherry; + } + + &.is-recovered { + h5 { + color: $green-mid; + + &.title { + color: $green-mid; + } + } + + h2, + h6 { + color: $green; + } + } + + &.is-deceased { + h5 { + color: $gray-mid; + + &.title { + color: $gray-mid; + } + } + + h2, + h6 { + color: $gray; + } + } + + &.is-active { + h5 { + color: $blue-mid; + + &.title { + color: $blue-mid; + } + } + + h2, + h6 { + color: $blue; + } + } + + &.is-tested { + h5 { + color: $purple-mid; + + &.title { + color: $purple-mid; + } + } + + h2, + h6 { + color: $purple; + } + } + + &.is-vaccinated { + h5 { + color: $pink-mid; + + &.title { + color: $pink-mid; + } + } + + h2, + h6 { + color: $pink; + } + } + } + + .svg-parent { + align-self: center; + border-radius: 5px; + display: flex; + position: relative; + width: 100%; + + svg { + width: 100%; + + .domain, + .tick { + stroke-width: 1.5; + + line { + stroke-width: 1.5; + } + } + + text { + font-size: 9px; + font-weight: 600; + stroke: transparent; + } + } + + &.is-confirmed { + background: $cherry-light; + + svg { + .domain, + .tick, + line { + stroke: $cherry; + } + + text { + color: $cherry-mid; + } + } + } + + &.is-recovered { + background: $green-light; + + svg { + .domain, + .tick, + line { + stroke: $green; + } + + text { + color: $green-mid; + } + } + } + + &.is-deceased { + background: $gray-light; + + svg { + .domain, + .tick, + line { + stroke: $gray; + } + + text { + color: $gray-mid; + } + } + } + + &.is-active { + background: $blue-light; + + svg { + .domain, + .tick, + line { + stroke: $blue; + } + + text { + color: $blue-mid; + } + } + } + + &.is-tested { + background: $purple-light; + + svg { + .domain, + .tick, + line { + stroke: $purple; + } + + text { + color: $purple-mid; + } + } + } + + &.is-vaccinated { + background: $pink-light; + + svg { + .domain, + .tick, + line { + stroke: $pink; + } + + text { + color: $pink-mid; + } + } + } + + &.is-brush { + .overlay { + fill: $gray-hover; + } + + svg { + .domain, + .tick, + line { + stroke: $gray; + } + + text { + color: $gray; + } + } + } + } +} + +.Minigraph { + align-self: center; + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 0; + margin-bottom: 1rem; + margin-top: 1rem; + + .svg-parent { + background: transparent !important; + width: calc(25%); + } +} + +.floating-buttons { + bottom: 1rem; + display: flex; + flex-direction: column; + padding: 0; + position: fixed; + right: 1rem; + width: 3rem; + z-index: 1; + + button { + backdrop-filter: saturate(180%) blur(2px); + background: $yellow-mid; + border: 0; + border-radius: 50%; + color: $orange; + cursor: pointer; + display: flex; + flex-direction: row; + margin: 0.25rem; + outline: none; + padding: 0.75rem; + transition: all 0.2s ease-in-out; + + &:hover { + background: #ffa500; + + svg { + stroke: #ffa500; + } + } + + svg { + align-self: center; + stroke: $orange; + } + } +} + +.pills { + display: flex; + flex-direction: row; + justify-content: flex-end; + + > button { + background-color: $yellow-light; + border: 2px $yellow-light solid; + border-bottom: 0; + border-top: 0; + color: $orange; + cursor: pointer; + font-size: 10px !important; + font-weight: 600; + margin: 0; + outline: none; + padding: 10px 15px; + text-align: center; + transition: background 0.25s ease-in-out; + + &:hover { + background: $yellow-hover; + } + + &.selected { + background-color: $yellow-mid; + } + + &:focus { + &:not(:focus-visible) { + outline: none; + } + } + + &:first-of-type { + border: 0; + border-bottom-left-radius: 5px; + border-top-left-radius: 5px; + } + + &:last-of-type { + border: 0; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; + } + } +} + +@media (min-width: 769px) { + + .map-container { + &.expanded { + margin-right: 2.5rem; + width: 50%; + } + } + + .TimeseriesExplorer { + &.expanded { + margin-left: 2.5rem; + width: calc(50% - 2rem); + } + } +} + +@media (max-width: 769px) { + + .map-container { + align-self: center; + } + + .MapExplorer { + .svg-parent { + width: 100%; + } + + .header { + margin-top: 2rem; + } + } + + .Timeseries { + .svg-parent { + width: 100%; + } + } + + .Minigraph { + .svg-parent { + padding: 0; + } + } + + .map-stats { + .stats { + .timestamp { + width: 4.5rem; + } + } + } + + .timeseries-header { + .timeseries-options { + flex-direction: column; + + .moving-average { + margin-top: 0.75rem; + } + } + } + + .timeline { + padding-left: 0 !important; + padding-right: 0 !important; + } +} diff --git a/src/scss/components/_languageswitcher.scss b/src/scss/components/_languageswitcher.scss new file mode 100644 index 0000000000..7c0cc2e5aa --- /dev/null +++ b/src/scss/components/_languageswitcher.scss @@ -0,0 +1,77 @@ + +.LanguageSwitcher { + align-self: center; + display: flex; + flex-direction: column; + margin-left: 5rem; + width: 34rem; + + h3 { + align-self: center; + color: $pblue; + font-weight: 600; + margin-bottom: 2rem; + } + + .close-button { + align-self: center; + background: $pblue-light; + border-radius: 50%; + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 1rem; + min-width: 1rem; + padding: 1rem; + + &:hover { + background: $pblue-hover; + } + + svg { + color: $pblue-mid; + stroke-width: 2.5px; + + &:hover { + color: $pblue; + } + } + } + + .languages { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 2.5rem; + min-height: 10rem; + + .language { + border-radius: 5px; + color: $pblue-mid; + cursor: pointer; + display: flex; + flex-direction: column; + font-weight: 600; + justify-content: center; + padding: 1rem; + user-select: none; + + &:hover { + color: $pblue; + } + + &.is-highlighted { + background: $pblue-light; + color: $pblue; + } + } + } +} + +@media (max-width: 769px) { + .LanguageSwitcher { + margin-left: 0; + } +} diff --git a/src/scss/components/_level.scss b/src/scss/components/_level.scss new file mode 100644 index 0000000000..f6166371ce --- /dev/null +++ b/src/scss/components/_level.scss @@ -0,0 +1,89 @@ +.Level { + align-self: center; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + + .level-item { + display: flex; + flex-direction: column; + width: calc(25%); + + & > * { + align-self: center; + } + } + + h1, + h5 { + margin-bottom: 0; + } + + h1 { + font-weight: 600; + } + + h4 { + margin-bottom: -0.5rem; + } + + h5 { + font-weight: 600; + overflow-wrap: break-word; + text-align: center; + width: 100%; + } + + .is-confirmed { + h1, + h5 { + color: $cherry; + } + + h4 { + color: $cherry-mid; + } + } + + .is-active { + h1, + h5 { + color: $blue; + } + + h4 { + color: $blue-mid; + } + } + + .is-recovered { + h1, + h5 { + color: $green; + } + + h4 { + color: $green-mid; + } + } + + .is-deceased { + h1, + h5 { + color: $gray; + } + + h4 { + color: $gray-mid; + } + } +} + +@media (max-width: 769px) { + .Level { + h1 { + font-size: 3.75vw !important; + } + } +} diff --git a/src/scss/components/_levelvaccinated.scss b/src/scss/components/_levelvaccinated.scss new file mode 100644 index 0000000000..aaa4097db0 --- /dev/null +++ b/src/scss/components/_levelvaccinated.scss @@ -0,0 +1,26 @@ + +.LevelVaccinated { + align-items: center; + align-self: center; + animation-delay: 200ms; + background: $pink-light; + border-radius: 5px; + color: $pink; + display: flex; + flex-direction: row; + margin-bottom: 0.5rem; + margin-top: 1.5rem; + padding: 0.5rem; + + h4 { + font-weight: 500; + margin: 0 0 0 0.25rem; + } +} + +@media (max-width: 769px) { + .LevelVaccinated { + margin-bottom: 3rem !important; + margin-top: 2rem !important; + } +} diff --git a/src/scss/components/_mapswitcher.scss b/src/scss/components/_mapswitcher.scss new file mode 100644 index 0000000000..69ad7d3725 --- /dev/null +++ b/src/scss/components/_mapswitcher.scss @@ -0,0 +1,45 @@ +.MapSwitcher { + align-self: center; + display: flex; + flex-direction: row; + justify-content: space-between; + position: absolute; + width: 100%; + + .highlight { + pointer-events: none; + position: absolute; + width: calc(25%) !important; + } + + .highlight, + .clickable { + border-radius: 5px; + cursor: pointer; + height: 13rem; + width: calc(25%); + z-index: 10; + } + + .clickable { + transition: background 0.15s ease-in-out; + + &:hover { + &.is-confirmed { + background: $cherry-light; + } + + &.is-active { + background: $blue-light; + } + + &.is-recovered { + background: $green-light; + } + + &.is-deceased { + background: $gray-light; + } + } + } +} diff --git a/src/scss/components/_navbar.scss b/src/scss/components/_navbar.scss new file mode 100644 index 0000000000..13f2caf0b3 --- /dev/null +++ b/src/scss/components/_navbar.scss @@ -0,0 +1,197 @@ + +.Navbar { + align-items: center; + display: flex; + flex-direction: row; + height: 4rem; + justify-content: space-between; + + a { + color: inherit; + text-decoration: none; + } + + .navbar-left { + color: $gray-mid; + cursor: pointer; + font-size: 12px; + font-weight: 600; + padding: 1.5rem; + text-align: center; + width: 3rem; + + &:hover { + color: $gray; + } + } + + .navbar-middle { + color: $gray; + font-size: 18px; + font-weight: 900; + text-transform: uppercase; + + span { + color: $pblue; + } + } + + .navbar-right { + color: $gray; + cursor: pointer; + font-size: 12px; + font-weight: 600; + padding: 1.5rem; + text-align: center; + width: 3rem; + } + + .language-toggle { + cursor: pointer; + font-weight: 900; + text-transform: uppercase; + } + + .expand { + background: $gray-light-opaque; + color: $gray; + display: flex; + flex-direction: column; + width: 100vw; + z-index: 9999; + + & > * { + border-bottom: 1px solid $gray-light; + border-top: 1px solid $gray-light; + padding: 1.5rem; + transition: all 0.15s ease-in-out; + + &:hover { + background: $pblue-hover; + } + + span { + &.focused { + background: $pblue-light; + color: $pblue; + padding: 0.25rem; + } + } + } + + .expand-bottom { + align-self: flex-start; + border: 0; + display: flex; + flex-direction: column; + justify-content: center; + + h5 { + margin: 0; + } + + &:hover { + background: none; + } + } + } +} + + +@media (min-width: 769px) { + .Navbar { + background: $gray-light-opaque; + flex-direction: column; + height: 100%; + justify-content: flex-start; + min-width: 5rem; + position: fixed; + z-index: 999; + + .navbar-left { + margin-bottom: 0.5rem; + margin-top: auto; + order: 3; + text-align: center; + } + + .navbar-middle { + font-size: 0.6rem; + order: 1; + padding-bottom: 2rem; + padding-top: 2rem; + text-align: center; + width: 46px; + word-wrap: break-word; + } + + .navbar-right { + align-items: center; + background: $gray-light-opaque; + display: flex; + flex-direction: column; + order: 2; + padding-bottom: 0; + padding-top: 0; + + span { + display: flex; + flex-direction: row; + height: 1.5rem; + justify-content: center; + margin-bottom: 1.5rem; + margin-top: 1.5rem; + + &:hover { + color: $pblue-mid; + } + } + } + + .expand { + background: $gray-light-opaque; + flex-direction: column; + height: calc(100% - 5.5rem); + padding-left: 0; + padding-top: 5.75rem; + top: 0; + width: 15rem; + + & > * { + border: 0; + color: $gray; + font-weight: 600; + height: 1.5rem; + width: 12rem; + } + } + } +} + +.SunMoon { + cursor: pointer; +} + +@media (max-width: 769px) { + .Navbar { + .expand { + height: calc(100% - 4rem); + overflow: auto; + transform: none !important; + } + + .expand-bottom { + margin-top: auto; + } + + .navbar-right { + span { + display: none; + + &:first-child { + display: initial; + } + } + } + } +} diff --git a/src/scss/components/_search.scss b/src/scss/components/_search.scss new file mode 100644 index 0000000000..33a036b3b3 --- /dev/null +++ b/src/scss/components/_search.scss @@ -0,0 +1,393 @@ + +.Search { + display: flex; + flex-direction: column; + margin-bottom: 1rem; + position: relative; + width: 100%; + + & > * { + align-self: center; + } + + label { + color: $gray; + font-size: 0.75rem; + margin-bottom: 1rem; + } + + .line { + background: $gray-light; + height: 1rem; + width: 2px; + } + + input { + appearance: none !important; + background: #fff; + border: 0; + border-radius: 5px; + box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1); + color: $gray; + font-size: 1rem; + height: 2rem; + outline: none; + padding: 1rem; + padding-left: 3rem; + width: calc(100% - 4rem); + } + + .search-input-wrapper { + position: relative; + width: 100%; + } + + .search-placeholder { + color: $gray-mid; + font-size: 1rem; + left: 3rem; + opacity: 0.8; + pointer-events: none; + position: absolute; + top: 1.4rem; + transition: opacity 1s; + + &.disappear { + opacity: 0; + } + } + + .search-button { + svg { + color: $gray-mid; + left: 0.75rem; + position: absolute; + top: 1.25rem; + transition: all 0.2s ease-in-out; + } + + &.is-expand { + svg { + left: 0.5rem; + } + } + } + + .close-button { + background: $gray-light !important; + border-radius: 50%; + cursor: pointer; + display: flex; + flex-direction: row; + height: 20px; + justify-content: center; + position: absolute; + right: 1rem; + top: 1.35rem; + transition: all 0.2s ease-in-out; + width: 20px; + + &:hover { + background: $gray-hover !important; + } + + &.is-expand { + right: 0.75rem; + } + + svg { + align-self: center; + position: absolute; + stroke: $gray-mid; + stroke-width: 3; + width: 12px; + } + + &.custom { + background: $pink-light !important; + pointer-events: none; + z-index: 0; + + svg { + stroke: $pink !important; + } + } + } + + .feature { + background: $pink-light; + border-radius: 5px; + color: $pink; + cursor: pointer; + font-size: 0.75rem; + padding: 0.75rem; + text-align: center; + } + + .expanded { + display: flex; + flex-direction: row; + margin-top: 2rem; + padding: 1rem; + padding-bottom: 0; + width: calc(100% - 4rem); + + & > * { + flex: 1; + } + + h4, + h3 { + color: $gray; + font-weight: 600; + margin: 0; + margin-bottom: 0.5rem; + } + + h3 { + color: $pblue; + margin-bottom: 0.75rem; + } + } + + .results { + padding: 1rem; + padding-bottom: 0; + width: calc(100% - 2rem); + + a { + text-decoration: none !important; + } + + .pan-divider { + color: $gray; + font-weight: 600; + padding: 1rem 0; + } + + .result, + .essential-result { + align-self: flex-start; + border-bottom: 2px solid $gray-light; + color: $gray; + cursor: pointer; + display: flex; + flex-direction: row; + font-size: 0.9rem; + justify-content: space-between; + min-height: 2rem; + padding: 1rem; + transition: all 0.2s ease-in-out; + + &:hover { + background: $gray-light; + } + + & > * { + align-self: center; + } + + .result-name { + max-width: 15rem; + } + + .result-type { + background: $yellow-light; + border-radius: 2px; + color: $orange; + display: flex; + flex-direction: row; + font-size: 0.75rem; + padding: 0.25rem; + + &:hover { + background: $yellow-hover; + } + + svg { + margin-left: 0.25rem; + stroke: $orange-mid; + stroke-width: 3px; + } + + * { + align-self: center; + } + } + + .result-left { + display: flex; + flex-direction: row; + + * { + align-self: center; + } + } + + .result-zone { + border-radius: 50%; + height: 0.75rem; + margin-left: 0.5rem; + width: 0.75rem; + + &.is-red { + background: $cherry-light; + border: 2px solid $cherry-mid; + } + + &.is-orange { + background: $orange-light; + border: 2px solid $orange-mid; + } + + &.is-green { + background: $green-light; + border: 2px solid $green-mid; + } + } + } + + .essential-result { + display: flex; + flex-direction: column; + + .result-top { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + + .result-top-left { + display: flex; + flex-direction: column; + + .result-location { + display: flex; + flex-direction: row; + font-size: 0.75rem; + } + + .result-distance { + color: $green; + display: flex; + flex-direction: row; + font-size: 0.75rem; + } + } + } + + .result-category { + align-self: flex-start; + background: $pink-light; + border-radius: 2px; + color: $pink; + display: flex; + flex-direction: row; + font-size: 0.75rem; + height: 1rem; + padding: 0.25rem; + text-align: right; + text-transform: capitalize; + + &:hover { + background: $pink-hover; + } + + & > * { + align-self: center; + } + + svg { + margin-left: 0.25rem; + stroke-width: 3px; + width: 12px; + } + } + + .result-description { + align-self: flex-start; + font-size: 0.75rem; + margin-bottom: 0.5rem; + margin-top: 1rem; + } + + .result-contacts { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + } + + .result-contact { + align-self: flex-start; + background: $gray-light; + border-radius: 2px; + color: $gray; + display: flex; + flex-direction: row; + font-size: 0.75rem; + height: 1rem; + margin-right: 0.25rem; + margin-top: 0.25rem; + padding: 0.25rem; + text-align: right; + + &:hover { + background: $gray-hover; + } + + a { + color: inherit; + } + + & > * { + align-self: center; + } + + svg { + margin-right: 0.25rem; + stroke: $gray-mid; + stroke-width: 3px; + width: 12px; + } + } + } + } + + .suggestions { + display: flex; + flex-direction: column; + margin-right: 1rem; + + .suggestion { + color: $gray-mid; + display: flex; + flex-direction: row; + padding: 0.1rem; + + div { + padding-top: 1px; + } + + h4 { + cursor: pointer; + margin-left: 0.25rem; + word-wrap: wrap; + + &:hover { + text-decoration: underline; + text-decoration-thickness: 2px; + } + } + } + } +} + + +@media (max-width: 769px) { + .Search { + .result-name { + max-width: 10rem !important; + } + } +} diff --git a/src/scss/components/_statedropdown.scss b/src/scss/components/_statedropdown.scss new file mode 100644 index 0000000000..e4894b500f --- /dev/null +++ b/src/scss/components/_statedropdown.scss @@ -0,0 +1,47 @@ + +.StateDropdown { + align-items: center; + display: flex; + flex-direction: row; + position: relative; + + .state-name { + background: $brick-light; + border-radius: 5px; + cursor: pointer; + padding: 0.25rem; + } + + .dropdown { + background: $white; + border-radius: 5px; + height: 25rem; + left: -0.25rem; + overflow-y: scroll; + position: absolute; + top: 2.75rem; + width: 15rem; + z-index: 999; + + .item { + color: $red; + cursor: pointer; + padding: 0.75rem; + + &:hover { + background: $red-hover; + } + } + } + + .backdrop { + background: $red-light; + height: 100vh; + left: 0; + pointer-events: none; + position: fixed; + top: 0; + width: 100vw; + z-index: 10; + } +} diff --git a/src/scss/components/_stateheader.scss b/src/scss/components/_stateheader.scss new file mode 100644 index 0000000000..ded2af3664 --- /dev/null +++ b/src/scss/components/_stateheader.scss @@ -0,0 +1,61 @@ + +.StateHeader { + align-self: center; + display: flex; + flex-direction: row; + height: 5.25rem; + justify-content: space-between; + margin-bottom: 1rem; + position: relative; + width: 100%; + + & > * { + align-self: flex-start; + } + + .header-left { + h1, + h5 { + margin: 0; + } + + h1 { + color: $brick; + max-width: 20rem; + } + + h5 { + color: $gray; + font-weight: 600; + margin-top: 0.5rem; + } + } + + .header-right { + color: $purple-mid; + display: flex; + flex-direction: column; + text-align: right; + + h2, + h5 { + font-weight: 600; + margin: 0; + } + + h2 { + color: $purple; + font-weight: 900; + } + + a { + background: $purple-light; + color: inherit; + text-decoration: none; + + &:hover { + background: $purple-hover; + } + } + } +} diff --git a/src/scss/components/_statemeta.scss b/src/scss/components/_statemeta.scss new file mode 100644 index 0000000000..ecafd6f1dc --- /dev/null +++ b/src/scss/components/_statemeta.scss @@ -0,0 +1,246 @@ + +.StateMeta { + align-self: center; + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(2, 1fr); + margin-bottom: 3rem; + width: calc(100% - 3rem); + + &.population { + display: flex !important; + flex-direction: row !important; + justify-content: space-between !important; + margin: 0; + margin-bottom: 2.5rem; + margin-top: 2.5rem; + + .alert { + margin: 0; + } + } + + .meta-item { + border-radius: 5px; + min-height: 6rem; + padding-left: 1rem; + padding-top: 1rem; + + h1, + h2, + h3, + h4, + h5 { + margin: 0; + } + + h5 { + font-weight: 600; + } + + h2 { + font-weight: 600; + } + + h3 { + font-weight: 600; + width: 10rem; + word-wrap: break-word; + } + + h1 { + display: inline-block; + font-weight: 600; + } + + &.population { + min-height: 1rem !important; + padding: 0 !important; + + h1, + h3 { + color: $gray; + } + } + + .meta-item-top { + display: flex; + flex-direction: row; + justify-content: space-between; + + & > * { + align-self: center; + } + + h3 { + width: calc(100% - 2.5rem); + } + + span { + margin-bottom: auto; + margin-right: 1rem; + } + + svg { + align-self: flex-start; + cursor: pointer; + stroke-width: 2.5px; + width: 16px; + } + } + + .meta-item-middle { + display: flex; + flex-direction: row; + justify-content: space-between; + + * { + align-self: center; + } + + svg { + cursor: pointer; + margin-right: 1rem; + } + } + + p { + font-weight: 600; + margin-bottom: 1.25rem; + padding-right: 1rem; + } + + &.confirmed { + background: $cherry-light; + + h3, + h5, + svg, + p { + color: $cherry-mid; + } + + h1 { + color: $cherry; + } + } + + &.active { + background: $blue-light; + + h3, + h5, + svg, + p { + color: $blue-mid; + } + + h1 { + color: $blue; + } + } + + &.recovery { + background: $green-light; + + h3, + h5, + svg, + p { + color: $green-mid; + } + + h1 { + color: $green; + } + } + + &.mortality { + background: $gray-light; + + h3, + h5, + svg, + p { + color: $gray-mid; + } + + h1 { + color: $gray; + } + } + + &.cpm { + background: $yellow-light; + + h3, + h5, + svg { + color: $orange-mid; + } + + h1 { + color: $orange; + } + } + + &.tpm { + background: $purple-light; + + h3, + h5, + svg, + p { + color: $purple-mid; + } + + h1 { + color: $purple; + } + } + + &.ptr { + background: $pink-light; + + h3, + h5, + svg, + p { + color: $pink-mid; + } + + h1 { + color: $pink; + } + } + + &.gr { + background: $brown-light; + + h3, + h5, + p, + svg { + color: $brown-mid; + } + + h1 { + color: $brown; + } + } + } +} + + +@media (max-width: 769px) { + .StateMeta { + display: grid; + grid-gap: 1rem; + grid-template-rows: repeat(auto-fit, minmax(5rem)); + margin-bottom: 1rem; + + .meta-item { + min-width: 1rem; + } + } +} diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss new file mode 100644 index 0000000000..49237ba451 --- /dev/null +++ b/src/scss/components/_table.scss @@ -0,0 +1,492 @@ + +.TableLoader { + margin-bottom: -0.25rem; +} + +.table-top { + align-items: flex-end; + align-self: center; + display: flex; + flex-direction: row; + font-weight: 600; + justify-content: space-between; + margin-bottom: 0.25rem; + width: 100%; + + .option-toggle, + .info-toggle, + .million-toggle, + .expand-table-toggle { + background: $gray-light; + border-radius: 5px; + color: $gray-mid; + cursor: pointer; + margin-right: 0.25rem; + padding: 0.5rem; + + svg { + align-self: center; + margin: 0.25rem; + } + + &.is-highlighted { + background: $green-light; + color: $green; + } + } + + .info-toggle { + &.is-highlighted { + background: $yellow-light; + color: $yellow; + } + } + + .million-toggle { + font-size: 13px; + font-weight: 600; + padding: 11.5px 10px; + text-align: center; + + &.is-highlighted { + background: $pink-light; + color: $pink; + } + } + + .expand-table-toggle { + color: $gray-mid; + margin-left: auto; + margin-right: 0; + + &.is-highlighted { + svg { + transform: rotate(90deg); + } + } + + svg { + cursor: pointer; + margin-bottom: 0.25rem; + transform: rotate(-90deg); + } + } + + @media (min-width: 769px) { + margin-top: 1rem; + } +} + +.table-helper { + align-self: center; + color: $gray; + display: flex; + flex-direction: column; + width: calc(100% - 2rem); + + h5 { + color: $gray-mid; + } + + .helper-top { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .info-item { + align-items: center; + color: $gray; + display: flex; + flex-direction: row; + font-size: 12px; + font-weight: 600; + height: 1.5rem; + + &:first-child { + margin-top: 1rem; + } + + :first-child { + width: 1.6rem; + + svg { + width: 15px; + } + } + + p { + max-width: calc(100% - 1.6rem); + } + + svg { + color: $gray-mid; + margin-bottom: 0.25rem; + } + + .is-confirmed { + svg { + color: $cherry; + } + } + + .is-active { + svg { + color: $blue; + } + } + + .is-recovered { + svg { + color: $green; + } + } + + .is-deceased { + svg { + color: $gray; + } + } + + .is-tested { + svg { + color: $purple; + } + } + + .is-vaccinated { + svg { + color: $pink; + } + } + + &.notes { + svg { + margin-bottom: 0; + } + } + + &.sort { + svg { + margin-bottom: 0; + } + } + + &.invert { + svg { + margin-bottom: 0; + transform: rotate(180deg); + } + } + } + + .text { + color: $gray-mid; + font-weight: 600; + + a { + background: $gray-light; + border-bottom: 2px solid $gray-hover; + color: $gray; + text-decoration: none; + + &:hover { + background: $gray-hover; + } + } + } +} + +.table-container { + align-self: center; + margin-bottom: 2.5rem; + overflow-x: auto; + width: 100%; +} + +.table { + border-radius: 3px; + display: inline-grid; + font-size: 12px; + grid-template-rows: auto; + min-width: 100%; + + .state-meta { + grid-column: 1 / -1; + + .state-meta-top { + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + margin-bottom: 1 + 0.25rem; + margin-top: 1rem; + + svg { + margin-right: 0.5rem; + } + + .last-updated { + align-items: center; + color: $green; + display: flex; + flex-direction: row; + } + + .state-page { + align-items: center; + background: $yellow-light; + border-radius: 5px; + color: $orange; + cursor: pointer; + display: flex; + flex-direction: row; + padding: 0.75rem; + + p { + align-self: flex-end; + flex: 1; + margin: 0; + text-align: right; + } + + &:hover { + background: $yellow-hover; + } + } + } + + .state-meta-bottom { + padding-bottom: 1.5rem; + + .disclaimer { + background: $brick-light; + border-radius: 5px; + color: $brick; + margin: auto; + padding: 1rem 0.25rem; + text-align: center; + width: 16rem; + + svg { + margin-right: 0.5rem; + } + } + } + } + + .row { + cursor: pointer; + display: contents; + width: 100%; + + &:nth-child(odd) { + .cell { + background: $gray-light; + } + } + + &.is-highlighted { + .cell { + background: $gray-hover-opaque !important; + } + } + + &.heading { + .cell { + cursor: pointer; + user-select: none; + + &:hover { + background: $gray-hover-opaque !important; + } + } + } + + &.is-total { + position: sticky; + top: 0; + + .cell { + background: $gray-hover-opaque !important; + } + } + + .cell { + align-items: center; + border-radius: 3px; + color: $gray; + display: flex; + flex-direction: row; + margin-bottom: 0.25rem; + padding: 0.5rem; + position: relative; + + &:not(:first-child) { + flex-basis: 4rem; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-end; + } + + &:first-child { + background: $gray-hover-darker-opaque; + flex-basis: 7rem; + flex-grow: 0; + flex-shrink: 0; + justify-content: space-between; + left: 0; + position: sticky; + z-index: 11; + + .sort-icon { + left: unset; + right: 0; + } + } + + svg { + color: $gray-mid; + margin-left: 0.2rem; + stroke-width: 2.5px; + } + + .sort-icon { + left: 0; + margin-left: 0.25rem; + margin-right: 0.25rem; + position: absolute; + top: 0; + + &.is-confirmed { + svg { + color: $cherry; + } + } + + &.is-active { + svg { + color: $blue; + } + } + + &.is-recovered { + svg { + color: $green; + } + } + + &.is-deceased { + svg { + color: $gray; + } + } + + &.is-tested { + svg { + color: $purple; + } + } + + &.is-vaccinated { + svg { + color: $pink; + } + } + + &.invert { + margin-top: 0.25rem; + transform: rotate(180deg); + } + } + + &.statistic { + align-items: flex-end; + display: flex; + flex-direction: column; + justify-content: flex-end; + + .total { + font-size: 14px; + } + + .is-confirmed { + color: $cherry; + } + + .is-active { + color: $blue; + } + + .is-recovered { + color: $green; + } + + .is-deceased { + color: $gray; + } + + .is-tested { + color: $purple; + } + + .is-vaccinated { + color: $pink; + } + } + + &:not(:last-child) { + margin-right: 0.25rem; + } + + &.heading { + background: $gray-light-opaque; + font-size: 13px; + font-weight: 900; + padding: 1.25rem 0.5rem 0.75rem; + + &:hover { + background: $gray-hover-opaque !important; + } + } + + .state-name, + .district-name { + font-size: 14px; + font-weight: 600; + max-width: 7rem; + word-wrap: break-word; + } + } + } + + .spacer-row { + grid-column: 1 / -1; + + .spacer { + color: $gray-mid; + margin-bottom: 1 + 0.25rem; + margin-top: 1rem; + text-align: center; + + p { + margin-left: auto; + margin-right: auto; + width: 10rem; + } + + .fold { + cursor: pointer; + + &:hover { + color: $gray; + } + } + } + } + + .intersection { + display: block; + } +} diff --git a/src/scss/components/_timeline.scss b/src/scss/components/_timeline.scss new file mode 100644 index 0000000000..8716306385 --- /dev/null +++ b/src/scss/components/_timeline.scss @@ -0,0 +1,31 @@ +.Timeline { + cursor: pointer; + height: 3rem; + width: 34rem; + will-change: transform; + + .day { + position: absolute; + text-align: center; + width: 70px; + will-change: transform; + + h5 { + color: $gray-mid; + + &:hover { + color: $gray !important; + } + + &::selection { + background: transparent !important; + } + } + } +} + +@media (max-width: 769px) { + .Timeline { + width: 100%; + } +} diff --git a/src/scss/components/_tooltip.scss b/src/scss/components/_tooltip.scss new file mode 100644 index 0000000000..c0632fd406 --- /dev/null +++ b/src/scss/components/_tooltip.scss @@ -0,0 +1,27 @@ + +.Tooltip { + display: flex; + flex-direction: column; + + .message { + background: #000; + border-radius: 5px; + display: flex; + flex-direction: row; + font-size: 13px; + font-weight: 400; + justify-content: flex-end; + max-width: 30vw; + min-width: 10rem; + padding: 0.5rem; + pointer-events: none; + right: 0; + top: 0; + transform: translate3d(2rem, 0, 0); + + p { + color: $white !important; + margin: 0; + } + } +} diff --git a/src/scss/components/_updates.scss b/src/scss/components/_updates.scss new file mode 100644 index 0000000000..47235436ed --- /dev/null +++ b/src/scss/components/_updates.scss @@ -0,0 +1,119 @@ + +.updates-header { + align-self: center; + color: $gray-dark; + width: 100%; + + h2 { + color: $pblue; + font-weight: 900; + } + + h3 { + color: $blue-mid; + font-weight: 900; + + &:hover { + svg { + color: $blue; + } + } + + svg { + height: 1rem; + } + } +} + +.updates-footer { + align-self: center; + color: $gray-dark; + margin-left: auto; + + .telegram { + color: $blue; + + &:hover { + color: $purple; + } + } + + h4 { + color: $blue-mid; + font-weight: 900; + margin-top: 0.5rem; + + &:hover { + color: $blue; + } + + svg { + height: 1rem; + margin-bottom: -0.25rem; + } + } +} + +.updates { + align-self: center; + display: flex; + flex-direction: column; + margin-bottom: 1rem; + min-height: 22rem !important; + width: 100%; + + .update { + background: $gray-light; + border-radius: 5px; + margin-bottom: 0.5rem; + padding: 0.75rem; + transition: all 0.2s ease-in-out; + + &:hover { + background: $gray-hover; + } + + h5, + h4 { + margin: 0; + } + + h5 { + color: $gray-mid; + margin-bottom: 0.15rem; + } + + h4 { + color: $gray; + font-weight: 600; + } + } + + .button { + background: $pblue-light; + color: $pblue; + display: flex; + flex-direction: row; + height: 3rem; + width: 13rem; + + & > * { + align-self: center; + } + + &:hover { + background: $pblue-hover; + } + } + + a { + color: inherit; + display: flex; + flex-direction: row; + text-decoration: none; + + & > * { + align-self: center; + } + } +} diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 0000000000..024850985e --- /dev/null +++ b/src/scss/main.scss @@ -0,0 +1,37 @@ +@import 'abstracts/variables'; + +@import 'base/reset'; +@import 'base/animations'; +@import 'base/common'; + +@import 'extra'; + +@import 'components/footer'; +@import 'components/graphs'; +@import 'components/languageswitcher'; +@import 'components/level'; +@import 'components/levelvaccinated'; +@import 'components/mapswitcher'; +@import 'components/navbar'; +@import 'components/search'; +@import 'components/statedropdown'; +@import 'components/stateheader'; +@import 'components/statemeta'; +@import 'components/table'; +@import 'components/timeline'; +@import 'components/tooltip'; +@import 'components/updates'; + +@import 'pages/about'; +@import 'pages/common'; +@import 'pages/home'; +@import 'pages/state'; + +@import 'themes/darkmode'; + + +.App { + display: flex; + flex-direction: column; + min-height: 100vh; +} diff --git a/src/scss/pages/_about.scss b/src/scss/pages/_about.scss new file mode 100644 index 0000000000..96ca4f73b7 --- /dev/null +++ b/src/scss/pages/_about.scss @@ -0,0 +1,51 @@ + +.About { + display: flex; + flex-direction: column; + min-height: 30rem; + width: 100%; + + & > * { + align-self: center; + margin-bottom: 1.5rem; + width: 34rem; + } + + & > *:first-child { + margin-top: 4rem; + } + + h2 { + font-weight: 600; + margin: 0; + text-transform: none; + } + + .question { + color: $gray-dark; + margin: 0; + margin-bottom: 0.25rem; + } + + .answer { + color: $blue; + line-height: 1.5rem; + } + + a { + background: $blue-light; + color: $blue; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + + +@media (max-width: 769px) { + .faq { + width: calc(100% - 2rem); + } +} diff --git a/src/scss/pages/_common.scss b/src/scss/pages/_common.scss new file mode 100644 index 0000000000..fe97948d75 --- /dev/null +++ b/src/scss/pages/_common.scss @@ -0,0 +1,44 @@ +@media (min-width: 769px) { + .Home, + .State { + padding-top: 5rem; + } +} + +@media (max-width: 769px) { + .table-container, + .header, + .TimeseriesExplorer, + .map-container, + .Links, + .Summary, + .About, + .updates, + .updates-header, + .StateMeta, + .timeline, + .table-top, + .LanguageSwitcher { + width: calc(100% - 2rem); + } + + .Home, + .State { + display: flex; + flex-direction: column; + margin-left: 0; + margin-right: 0; + padding-top: 1rem; + width: 100%; + + .home-left, + .home-right, + .state-left, + .state-right { + display: flex; + flex-direction: column; + margin: 0; + width: 100%; + } + } +} diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss new file mode 100644 index 0000000000..e5a4d494b1 --- /dev/null +++ b/src/scss/pages/_home.scss @@ -0,0 +1,153 @@ + +.Home { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin-left: 9rem; + margin-right: 3rem; + + .home-left, + .home-right { + display: flex; + flex-direction: column; + width: 34rem; + } + + .home-left { + margin-right: 2.5rem; + min-height: 60rem; + } + + .home-right { + margin-left: 2.5rem; + min-height: 10rem; + } + + .header { + z-index: 99; + } +} + +.header { + align-self: center; + display: flex; + flex-direction: column; + max-width: 40rem; + width: 100%; + + & > * { + align-self: center; + } + + .actions { + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 1rem; + + &.timeline { + display: flex; + flex-direction: column; + justify-content: space-around; + padding: 1rem; + position: absolute; + top: 13.25rem; + + .highlight { + color: $brown !important; + position: absolute; + text-align: center; + top: 2.5rem; + width: 100%; + } + } + + & > * { + align-self: center; + margin-left: 0.5rem; + margin-right: 0.5rem; + } + + h5 { + color: $gray; + font-weight: 600; + margin: 0; + } + + svg { + color: $gray-mid; + cursor: pointer; + stroke-width: 3; + width: 16px; + + &:hover { + stroke: $gray; + } + } + + .timeline-icon { + display: flex; + flex-direction: column; + justify-content: center; + + svg { + display: flex; + fill: #a6abb0 !important; + flex-direction: row; + justify-content: center; + stroke: #a6abb0 !important; + stroke-width: 0.5 !important; + + path { + align-self: center; + } + + &:hover { + fill: $gray !important; + stroke: $gray !important; + } + } + } + + .bell-icon { + height: 24px; + position: relative; + + .indicator { + background: $pblue; + border-radius: 50%; + height: 7px; + position: absolute; + right: -3px; + top: -3px; + width: 7px; + } + } + } +} + +@media (min-width: 769px) { + .Home { + .home-left, + .home-right { + &.expanded { + width: 73rem; + } + } + + .home-left { + &.expanded { + margin-bottom: 2.5rem; + margin-right: 0; + } + } + + .home-right { + &.expanded { + flex-direction: row; + margin-left: 0; + } + } + } +} diff --git a/src/scss/pages/_state.scss b/src/scss/pages/_state.scss new file mode 100644 index 0000000000..c519f209de --- /dev/null +++ b/src/scss/pages/_state.scss @@ -0,0 +1,264 @@ + +.State { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin-left: 8rem; + margin-right: 3rem; + + .state-left, + .state-right { + display: flex; + flex-direction: column; + width: 34rem; + } + + .state-left { + margin-right: 2.5rem; + position: relative; + } + + .state-right { + margin-left: 2.5rem; + } + + a { + text-decoration: none; + } + + .district-bar { + width: calc(100% - 2rem); + } + + .Minigraph { + .svg-parent { + width: calc(25%) !important; + } + } + + .MapExplorer { + .header, + .map-stats, + .map-button, + .tabs-map, + .last-update, + .footnote { + display: none; + } + + .anchor { + display: none; + } + } + + .TimeseriesExplorer { + .anchor { + display: none; + } + } +} + +.district-bar { + align-self: center; + display: flex; + flex-direction: column; + + .district-bar-bottom { + .button { + background: $gray-light; + color: $gray; + flex-basis: 15%; + font-weight: 600; + height: 2.5rem; + justify-content: center; + margin-top: 0.75rem; + text-transform: unset; + width: 5rem; + + &:hover { + background: $gray-hover; + } + } + } + + .district-bar-top { + align-self: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + + h2 { + font-weight: 900; + margin-bottom: 0.5rem; + margin-top: 0; + + &.confirmed { + color: $red; + } + + &.active { + color: $blue; + } + + &.recovered { + color: $green; + } + + &.deceased { + color: $gray; + } + } + } + + .district-bar-left { + display: flex; + flex-direction: column; + flex-grow: 1; + } + + .district-bar-right { + display: flex; + flex-basis: 15rem; + flex-grow: 1; + justify-content: center; + position: relative; + + .happy-sign { + display: flex; + flex-direction: row; + position: absolute; + top: 4rem; + } + + .DeltaBarGraph { + margin-top: 1rem; + width: 100%; + + svg { + width: 100%; + + .label { + font-size: 11px; + font-weight: 900; + text-anchor: middle; + } + } + } + } + + .districts { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 10rem; + + &.is-grid { + display: grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + padding-bottom: 0.5rem; + width: 100%; + } + + .district { + display: flex; + flex-direction: row; + height: 2.5rem; + justify-content: flex-start; + margin-right: 0.5rem; + + h2, + h5 { + color: $gray; + font-weight: 600; + margin: 0; + } + + h5 { + display: inline-block !important; + margin-left: 0.5rem; + margin-top: 0.15rem; + width: auto !important; + } + + & > * { + align-self: center; + } + + .delta { + display: flex; + flex-direction: row; + margin-left: 0.5rem; + margin-top: 4px; + + h6 { + margin: 0; + + &.confirmed { + color: $red-mid; + } + + &.active { + color: $blue-mid; + } + + &.recovered { + color: $green-mid; + } + + &.deceased { + color: $gray-mid; + } + } + + svg { + stroke-width: 4; + vertical-align: bottom; + width: 10px; + + &.confirmed { + color: $red-mid; + } + + &.active { + color: $blue-mid; + } + + &.recovered { + color: $green-mid; + } + + &.deceased { + color: $gray-mid; + } + } + + & > * { + align-self: center; + } + } + } + } +} + +@media (max-width: 769px) { + + .State { + .MapExplorer, + .StateHeader { + width: calc(100% - 2rem); + } + + .district-bar { + width: calc(100% - 3rem); + + h1 { + padding-left: 0; + } + } + } + +} diff --git a/src/scss/themes/_darkmode.scss b/src/scss/themes/_darkmode.scss new file mode 100644 index 0000000000..b202220d2c --- /dev/null +++ b/src/scss/themes/_darkmode.scss @@ -0,0 +1,355 @@ +// Dark Mode + +.dark-mode { + background: #161625 !important; + color: #bdbdbd; + + .switch-wrapper > div { + background: #161625 !important; + } + + .is-tested { + color: $dark-m-purple !important; + + svg { + color: $dark-m-purple !important; + } + } + + .expand { + background: #1e1e30 !important; + } + + .Navbar, + .expand { + border-right: 0; + + .navbar-middle { + color: #bdbdbd; + } + } + + .table { + .cell { + &:first-child { + background: #1e1e30 !important; + } + + &.heading { + background: #1e1e30 !important; + + &:hover { + background: #212130 !important; + } + } + } + + .is-highlighted, + .is-total { + .cell { + background: #1e1e30 !important; + } + } + } + + .Search { + input { + background: #1e1e30 !important; + } + } + + .State { + .header-right { + h5 { + color: #9673b9bb !important; + } + + h2 { + color: #9673b9 !important; + } + + a { + background: $dark-m-purple-light !important; + } + } + + .breadcrumb { + ul { + background: #1e1e30 !important; + + &::after { + border-bottom-color: #1e1e30 !important; + } + + li { + a { + color: $gray !important; + + &:hover { + color: $white !important; + } + } + } + } + } + } + + .StateHeader { + .header-right { + color: $dark-m-purple-mid; + + h2 { + color: $dark-m-purple; + } + + a { + background: $dark-m-purple-light; + } + } + } + + .MapExplorer { + #chart, + #legend { + &.zone { + filter: none; + } + + &:not(.zone) { + filter: invert(1) hue-rotate(180deg) saturate(1.5) url('#balance-color'); + } + } + + .maplegend { + background: #161625 !important; + } + + .meta { + h1 { + &.tested { + color: #9673b9 !important; + } + } + + h2 { + &.tested { + color: #9673b9 !important; + } + } + } + + .stats { + &.tested { + background: $dark-m-purple-light !important; + + h1 { + color: #9673b9 !important; + } + + h5, + h6 { + color: #9673b9bb !important; + } + + svg { + stroke: #9673b9bb !important; + + &:hover { + stroke: #9673b9 !important; + } + } + } + } + + .disclaimer { + color: $gray-light-opaque; + } + } + + .Timeseries, + .Minigraph { + .stats { + &.is-tested { + h5 { + color: $dark-m-purple-mid !important; + + &.title { + color: $dark-m-purple-mid !important; + } + } + + h2, + h6 { + color: $dark-m-purple !important; + } + } + } + + .svg-parent { + &.is-tested { + background: $dark-m-purple-light !important; + + svg { + circle, + .domain, + .tick { + stroke: $dark-m-purple !important; + } + + circle { + fill: $dark-m-purple !important; + } + + .trend, + line { + stroke: #9673b999 !important; + } + + .trend-area { + fill: #9673b999 !important; + } + + text { + color: $dark-m-purple-mid !important; + stroke: transparent; + } + } + } + } + } + + .tpm { + background: $dark-m-purple-light !important; + + h3, + h5, + svg, + p { + color: #9673b9bb !important; + } + + h1 { + color: #9673b9 !important; + } + } + + .tab { + &.focused { + background: #1e1e30 !important; + color: #bdbdbd !important; + } + } + + .pills { + button { + &.selected { + background: #{$yellow}50; + } + } + } + + .TimeseriesExplorer { + .state-selection { + .dropdown { + select { + background: #1e1e30; + background-image: linear-gradient(45deg, transparent 50%, $gray 50%), + linear-gradient(135deg, $gray 50%, transparent 50%); + background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; + background-repeat: no-repeat; + background-size: 5px 5px, 5px 5px; + border-color: #9494941a; + } + } + } + } + + input { + &.switch { + background-color: #161625 !important; + border: 2px solid $gray-mid !important; + + &:checked { + background-color: #6c757d99 !important; + + &::after { + background-color: #cfcfcf !important; + } + } + + &::after { + background-color: #cfcfcf !important; + } + } + } + + .disabled { + input { + &.switch { + background: $dark !important; + border: $gray-light 2px solid !important; + opacity: 0.7; + + &::after { + background: $gray !important; + } + } + } + } + + .About { + .question { + color: $gray !important; + } + } + + .Demographics { + .filters { + background: #1e1e30 !important; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 #1e1e30; + } + + .legend { + background: #1e1e30 !important; + } + + .react-date-picker { + background: #1e1e30; + border-color: #9494941a !important; + } + + .modal-content { + background: #1e1e30 !important; + } + + .modal { + background: #1e1e30bb !important; + } + } + + .StateDropdown { + .dropdown { + background: #1e1e30 !important; + } + } + + .TableLoader { + svg { + rect { + fill: #1e1e30 !important; + } + } + } +} + + +@media (min-width: 769px) { + + .dark-mode { + .Navbar, + .expand, + .navbar-right { + background: #1e1e30 !important; + } + } +} From 67435ed581c6483bbc77654e69fca0a5792fdfe9 Mon Sep 17 00:00:00 2001 From: Aditya Mohta Date: Fri, 12 Mar 2021 23:54:11 +0530 Subject: [PATCH 2/2] FIXED: scss files import order --- src/scss/main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/main.scss b/src/scss/main.scss index 024850985e..10642192ae 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -23,9 +23,9 @@ @import 'components/updates'; @import 'pages/about'; -@import 'pages/common'; @import 'pages/home'; @import 'pages/state'; +@import 'pages/common'; @import 'themes/darkmode';