Split up CSS into Sass modules (#119)

None of the code was changed. It's only rearranged now into dedicated files. Sass and Parcel combine all these files into one single minimized output. So this has zero negative impact on users.
ParkingReformNetwork · Aug 12, 2023 · ca39729 · ca39729
1 parent bf21341
commit ca39729
Show file tree

Hide file tree

Showing 7 changed files with 328 additions and 329 deletions.
diff --git a/src/css/_about.scss b/src/css/_about.scss
@@ -0,0 +1,36 @@
+dd {
+  margin-bottom: 10px;
+}
+
+div.about-text-popup {
+  position: absolute;
+  z-index: 2001;
+  background-color: white;
+  font-size: 18px;
+  border: 1px solid rgba(186, 186, 186, 0.7);
+  display: none;
+  left: 10%;
+  height: 60%;
+  width: 80%;
+  top: 120px;
+  overflow: auto;
+}
+
+div.about-text-popup svg.fa-circle-xmark {
+  color: #4d4d4d;
+}
+
+div.about-text-container {
+  padding: 20px;
+}
+
+.about-close {
+  float: right;
+  cursor: pointer;
+}
+
+@media only screen and (max-width: 830px) {
+  div.about-text-popup {
+    top: 190px;
+  }
+}
diff --git a/src/css/_controls.scss b/src/css/_controls.scss
@@ -0,0 +1,28 @@
+.leaflet-top.leaflet-left {
+  top: 52px;
+}
+
+.leaflet-touch .leaflet-control-layers-toggle {
+  width: 33px;
+  height: 33px;
+}
+
+#map > div.leaflet-control-container > div.leaflet-top.leaflet-right {
+  top: 130px;
+  margin-left: 9px;
+  right: auto;
+}
+
+.leaflet-control-layers {
+  font-size: 12px;
+}
+
+@media only screen and (max-width: 625px) {
+  .leaflet-top.leaflet-left {
+    top: 62px;
+  }
+
+  #map > div.leaflet-control-container > div.leaflet-top.leaflet-right {
+    top: 140px;
+  }
+}
diff --git a/src/css/_copied-link.scss b/src/css/_copied-link.scss
@@ -0,0 +1,20 @@
+div.copied-link-message {
+  position: absolute;
+  z-index: 2001;
+  border-radius: 5px;
+  top: 200px;
+  width: 500px;
+  text-align: center;
+  background-color: white;
+  left: 100px;
+  font-size: 24px;
+  border: 1px solid black;
+  display: none;
+}
+
+@media only screen and (max-width: 830px) {
+  div.copied-link-message {
+    width: 350px;
+    left: 40px;
+  }
+}
diff --git a/src/css/_donate.scss b/src/css/_donate.scss
@@ -0,0 +1,25 @@
+div.donate-button {
+  position: absolute;
+  border-radius: 5px;
+  left: 9px;
+  bottom: 19px;
+  z-index: 2001;
+  width: 100px;
+}
+
+div.donate-button a img {
+  width: 100%;
+  border-radius: 4px;
+}
+
+@media only screen and (max-width: 830px) {
+  div.donate-button {
+    bottom: 43px;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  div.donate-button a img {
+    width: 70%;
+  }
+}
diff --git a/src/css/_header.scss b/src/css/_header.scss
@@ -0,0 +1,93 @@
+fieldset#tier-dropdown {
+  position: absolute;
+  right: 90px;
+  top: 5px;
+  z-index: 2005;
+}
+
+#city-choice {
+  font-size: 20px;
+  padding: 3px 5px;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+}
+
+div.banners {
+  background-color: #4d4d4d;
+  position: absolute;
+  top: 0;
+  z-index: 2001;
+  text-align: center;
+  width: 100%;
+  left: 0;
+  padding: 10px 15px;
+}
+
+div.banner-title,
+div.banner-icons {
+  font-weight: bold;
+  border: none;
+  font-size: 20px;
+  background-color: #4d4d4d;
+  color: white;
+  float: right;
+  right: 2px;
+}
+
+.banner-about-icon {
+  display: inline;
+}
+
+div.banner-icons {
+  cursor: pointer;
+}
+
+div.banner-icons svg {
+  color: white;
+}
+
+div.banner-icons svg.fa-circle-info {
+  margin-right: 10px;
+}
+
+#tier-dropdown label {
+  font-weight: bold;
+  border: none;
+  font-size: 20px;
+  background-color: #4d4d4d;
+  color: white;
+}
+
+div.banner-title {
+  left: 4px;
+  text-align: left;
+  float: left;
+}
+
+@media only screen and (max-width: 625px) {
+  div.banners {
+    height: 65px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  div.banner-title {
+    font-size: 16px;
+  }
+
+  fieldset#tier-dropdown {
+    position: absolute;
+    left: 10px;
+    top: 35px;
+    z-index: 2005;
+  }
+
+  fieldset#tier-dropdown label {
+    font-size: 14px;
+  }
+
+  #city-choice {
+    font-size: 14px;
+    padding: 0;
+  }
+}
diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss
@@ -0,0 +1,118 @@
+$teal: #21ccb9;
+
+.popup-fixed {
+  position: fixed;
+  transform: none !important;
+  margin: 0;
+}
+
+.leaflet-popup-tip-container {
+  display: none;
+}
+
+.leaflet-popup-content-wrapper {
+  width: 365px;
+  border-radius: 10px;
+  float: right;
+  position: fixed;
+  right: 11px;
+  top: 62px;
+}
+
+.leaflet-popup-content {
+  width: 330px;
+}
+
+div.leaflet-popup-content-wrapper div div {
+  width: 342px;
+}
+
+div.leaflet-popup-content-wrapper > div > div.title {
+  color: $teal;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+div.leaflet-popup-content-wrapper div span.details-title,
+div.leaflet-popup-content-wrapper div span.details-value {
+  font-size: 14px;
+  color: black;
+}
+
+div.leaflet-popup-content-wrapper span.details-value {
+  color: $teal;
+}
+
+div.leaflet-popup-content-wrapper > div > div.title {
+  color: $teal;
+  font-weight: bold;
+  font-size: 18px;
+  display: inline-block;
+  width: 50%;
+}
+
+div.leaflet-popup-content-wrapper > div > div.url-copy-button {
+  float: right;
+  width: 0%;
+  display: inline-block;
+}
+
+div.leaflet-popup-content-wrapper > div > div.url-copy-button:hover {
+  cursor: pointer;
+}
+
+div.leaflet-popup-content-wrapper > div > div.url-copy-button svg.fa-link {
+  color: $teal;
+}
+
+div.popup-button a {
+  background-color: $teal;
+  padding: 10px;
+  font-size: 16px;
+  color: white;
+  border-radius: 8px;
+  font-weight: bold;
+  text-decoration: none;
+  border: 1px solid $teal;
+  display: inline-block;
+}
+
+div.popup-button a:hover {
+  background-color: white;
+  color: $teal;
+  border: 1px solid $teal;
+}
+
+@media only screen and (max-width: 830px) {
+  .leaflet-popup-content-wrapper {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: 119px;
+    width: 350px;
+    border-radius: 10px;
+    float: left;
+    position: fixed;
+    bottom: 32px;
+    top: auto;
+    right: 10px;
+  }
+
+  div.leaflet-popup-content-wrapper div div {
+    width: 310px;
+  }
+
+  div.leaflet-popup-content {
+    width: auto;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .leaflet-popup-content-wrapper {
+    width: 280px;
+    bottom: 40px;
+  }
+
+  div.leaflet-popup-content-wrapper div div {
+    width: 240px;
+  }
+}