From 99ecc1e53344291e04866f832d71f048e08277ae Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Fri, 31 May 2024 10:12:20 -0700
Subject: [PATCH] update css for households panel
---
src/components/Maps.vue | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/src/components/Maps.vue b/src/components/Maps.vue
index 520d7bd..60a77fb 100644
--- a/src/components/Maps.vue
+++ b/src/components/Maps.vue
@@ -8,7 +8,7 @@
<br>
<div class="accordion-container">
<button class="accordion households-accordion active">Households<span class="symbol">-</span></button>
- <div class="panel" style="display: block;">
+ <div class="panel households-panel">
<p v-html="mapText.paragraph1"></p>
<img src="@/assets/images/tot_households_2022.png" alt="Choropleth map of total households in the contiguous United States aggregated at the county level where counties with the greatest total households in dark blue include Los Angeles County, California (3,363,093), Harris County, Texas (1,692,896) and Maricopa County, Arizona (1,665,560). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
</div>
@@ -154,7 +154,7 @@ onMounted(() => {
}
.accordion:hover::before, .accordion.active::before {
- border-color: #f39c12;
+ border-color: rgba(217, 217, 217, 0.95);
}
.active, .accordion:hover {
@@ -162,7 +162,7 @@ onMounted(() => {
}
.panel {
- display: none;
+ display: none;
overflow: hidden;
border: 3px solid #F0F0F0;
margin-bottom: 15px;
@@ -175,6 +175,10 @@ onMounted(() => {
margin: 20px;
}
+.households-accordion.active + .households-panel {
+ display: block;
+}
+
.symbol {
font-size: 32px;
font-weight: bold;
--
GitLab