From b4aac769e4308db18e29a1fd14c988608cf21183 Mon Sep 17 00:00:00 2001 From: stanley-miao Date: Tue, 31 Aug 2021 23:01:17 -0400 Subject: [PATCH 1/2] Standardize shadows & cleanup --- .../CountriesSearcher/countriesSearcher.css | 2 +- MAP/src/components/Legend/legend.css | 2 +- .../components/StatsBar/StatsBar.module.scss | 2 +- MAP/src/components/TabMenu/TabMenu.scss | 49 ++++++++++--------- MAP/src/components/Zoom/Zoom.module.scss | 2 +- 5 files changed, 29 insertions(+), 28 deletions(-) diff --git a/MAP/src/components/CountriesSearcher/countriesSearcher.css b/MAP/src/components/CountriesSearcher/countriesSearcher.css index f18fa269..21fc4f9b 100644 --- a/MAP/src/components/CountriesSearcher/countriesSearcher.css +++ b/MAP/src/components/CountriesSearcher/countriesSearcher.css @@ -14,7 +14,7 @@ z-index: 1; background: var(--ld-bg); color: var(--ld-text); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + box-shadow: 0 4px 8px 0 var(--ld-gray-4); transition: width 1s; } diff --git a/MAP/src/components/Legend/legend.css b/MAP/src/components/Legend/legend.css index de1d6183..1d869e91 100644 --- a/MAP/src/components/Legend/legend.css +++ b/MAP/src/components/Legend/legend.css @@ -5,7 +5,7 @@ height: 50px; border-radius: 50%; background-color: var(--ld-bg); - box-shadow: 0 4px 17px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 8px 0 var(--ld-gray-4); display: flex; color: var(--ld-text); justify-content: center; diff --git a/MAP/src/components/StatsBar/StatsBar.module.scss b/MAP/src/components/StatsBar/StatsBar.module.scss index c15690cf..26307f79 100644 --- a/MAP/src/components/StatsBar/StatsBar.module.scss +++ b/MAP/src/components/StatsBar/StatsBar.module.scss @@ -1,7 +1,7 @@ .statsBar { background-color: var(--ld-bg); padding: 0 0 0 10px; - box-shadow: 0 4px 4px 0 var(--ld-gray-2); + box-shadow: 0 4px 8px 0 var(--ld-gray-4); display: flex; align-items: flex-start; position: relative; diff --git a/MAP/src/components/TabMenu/TabMenu.scss b/MAP/src/components/TabMenu/TabMenu.scss index 0ee99dbd..13f4aaca 100644 --- a/MAP/src/components/TabMenu/TabMenu.scss +++ b/MAP/src/components/TabMenu/TabMenu.scss @@ -2,8 +2,8 @@ .menu-overlay { position: absolute; - top: 0px; - left: 0px; + top: 0; + left: 0; z-index: 1100; background-color: rgba(40, 40, 40, 0.8); width: 100%; @@ -12,11 +12,12 @@ display: none; } } + .menu-close-btn { position: absolute !important; color: white; background-color: transparent; - padding: 0px !important; + padding: 0 !important; top: 90px; width: 39px !important; height: 39px !important; @@ -25,7 +26,6 @@ margin-right: auto !important; margin-left: auto !important; border-radius: 50% !important; - /*box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);*/ display: flex; align-items: center; justify-content: center; @@ -35,14 +35,15 @@ @media (max-width: 960px) { background: transparent !important; box-shadow: none; - border-radius: 0px; + border-radius: 0; } } + .dark .menu-close-btn { position: absolute !important; color: white; background-color: transparent; - padding: 0px; + padding: 0; top: 10%; width: 39px; right: 0; @@ -50,14 +51,13 @@ margin-right: auto; margin-left: auto; border-radius: 50%; - /*box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);*/ &:hover { cursor: pointer; } @media (max-width: 960px) { background: transparent !important; box-shadow: none; - border-radius: 0px; + border-radius: 0; } } @@ -92,9 +92,9 @@ z-index: 2000; right: 2vw; border-radius: 50%; - border: 0px; + border: 0; background-color: white; - box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 8px 0 var(--ld-gray-4); justify-content: center; align-items: center; padding: 10px; @@ -109,7 +109,7 @@ @keyframes fadeInRight { from { opacity: 0; - width: 0%; + width: 0; } to { @@ -117,10 +117,11 @@ width: 8%; } } + @keyframes fadeInRightM { from { opacity: 0; - width: 0%; + width: 0; } to { @@ -128,10 +129,11 @@ width: 23%; } } + .ld-menu { @media (max-width: 960px) { width: 56px; - top: 0px; + top: 0; height: 100%; animation: fadeInRightM 1s; } @@ -145,7 +147,7 @@ max-width: 56px; position: absolute; padding: 0; - right: 0px; + right: 0; background-color: #f2f2f2; z-index: 1100; .dark & { @@ -154,7 +156,7 @@ & .link-container { display: flex; justify-content: space-between; - padding: 25px 0px; + padding: 25px 0; } & .ld-menu-nav { display: flex; @@ -162,7 +164,7 @@ width: 100%; & nav { width: 100%; - padding: 10px 0px 10px 0px; + padding: 10px 0 10px 0; display: flex; flex-direction: column; justify-content: center; @@ -205,8 +207,7 @@ width: 10px; z-index: -1; content: ' '; - border-radius: 0% 100% 100% 69% / 0% 50% 51% 0%; - /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/ + border-radius: 0 100% 100% 69% / 0% 50% 51% 0%; background-color: transparent; border-width: 10px 0 10px 10px; border-style: solid; @@ -231,19 +232,19 @@ .ld-menu--content { display: block; - top: 0px; + top: 0; right: 100%; height: 100%; position: absolute; background-color: white; width: 700px; - border-radius: 0px 0px 0px 0px; - -moz-border-radius: 0px 0px 0px 0px; - -webkit-border-radius: 0px 0px 0px 0px; + border-radius: 0 0 0 0; + -moz-border-radius: 0 0 0 0; + -webkit-border-radius: 0 0 0 0; overflow: auto; - box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.25); + box-shadow: 0 4px 8px 0 var(--ld-gray-4); @media (max-width: 960px) { - border-radius: 0px; + border-radius: 0; width: calc(100vw - 100%); left: calc(100% - 100vw); } diff --git a/MAP/src/components/Zoom/Zoom.module.scss b/MAP/src/components/Zoom/Zoom.module.scss index 89c084e5..62dfaad3 100644 --- a/MAP/src/components/Zoom/Zoom.module.scss +++ b/MAP/src/components/Zoom/Zoom.module.scss @@ -2,7 +2,7 @@ background-color: var(--ld-bg); width: 50px; border-radius: 25px; - box-shadow: 0 4px 4px 0 var(--ld-gray-2); + box-shadow: 0 4px 8px 0 var(--ld-gray-4); display: flex; flex-direction: column; align-items: center; From 5a13e55cb33683c053d0ada90fa247ddb563eade Mon Sep 17 00:00:00 2001 From: stanley-miao Date: Tue, 31 Aug 2021 23:15:56 -0400 Subject: [PATCH 2/2] Revert TabMenu shadow --- MAP/src/components/TabMenu/TabMenu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MAP/src/components/TabMenu/TabMenu.scss b/MAP/src/components/TabMenu/TabMenu.scss index 13f4aaca..af2297f0 100644 --- a/MAP/src/components/TabMenu/TabMenu.scss +++ b/MAP/src/components/TabMenu/TabMenu.scss @@ -242,7 +242,7 @@ -moz-border-radius: 0 0 0 0; -webkit-border-radius: 0 0 0 0; overflow: auto; - box-shadow: 0 4px 8px 0 var(--ld-gray-4); + box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.25); @media (max-width: 960px) { border-radius: 0; width: calc(100vw - 100%);