Baltimore-County-Government / dotgov-components

UI design system for Baltimore County's primary website
https://baltimore-county-government.github.io/dotgov-components/
2 stars 0 forks source link

0623 walking trails #405

Closed bbarbourbcmd closed 2 years ago

bbarbourbcmd commented 2 years ago

Original styles for comparison:

.search-container-trails { margin-bottom: 15px; margin-top: 25px; }

.search-container-trails > div { display: flex; align-items: center; justify-content: center; }

.map-container { width: 100%; }

.nav-tabs { border-bottom: none; }

.page-info, .records-info { font-size: .7em }

.disclaimer { margin-top: 40px; padding: 10px; border: 1px solid gray; background:#f3f3f3; }

.map { width: 100%; }

.map, .map-container, .map-legend { height: 525px; }

.legend-container { position: relative; }

.legend-toggle { position: absolute; z-index: 1; bottom: 10px; left: 30px; }

.address-label { color:#444; }

.park { border-bottom: 2px solid gray; }

.park:last-child { border: none; }

.trails { margin: 0; padding: 0; list-style-type: none; }

.trails-header-hidden { display: none; }

.trail { padding: 10px; border: 1px solid #d3d3d3; }

map_root {

width: 100%!important;

}

.search-container label { font-size: 1.25em; display: block; padding: 13px; }

.filter-container { padding: 10px 20px; }

.filter-container-top .filter { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }

.filter-container-top { border-bottom: 3px solid gray; }

.filter .input{ font-size: 1.25em; padding: 5px; }

.filter .input span { padding: 10px 0; }

.js-trails-filter { width: 85%; }

.clear-filter { margin-left: 20px; }

.paging-numbers button { background: none; border: none; color: #002280; font-size: 22px; margin: 0 5px; text-transform: inherit; text-decoration: underline; }

.paging-numbers button:hover { color: #1076bc; }

.prev-page { text-align: left; }

.next-page { text-align: right; }

.initial-message { font-size: 1.5em; padding: 10px; text-align: center; }

.health-coalition { display: none; }

.map-legend { display: none; }

.map-legend-visible { display: block; background:#fff; }

.park { padding: 20px 0; }

.park-map, .trail-map { margin-bottom: 10px; position: relative; display: inline-block; }

.park-map a, .trail-map a { background: none; border: 2px solid #002280; color: #002280; font-family: "Montserrat",sans-serif; font-size: 16px; font-weight: 700; padding: 10px; text-transform: uppercase; text-decoration: none; }

.park-map a:hover, .trail-map a:hover { background: #1076bc; border-color: #002280; color: #fff; }

.paging { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; }

@media screen and (max-width:786px) { .paging { justify-content: center; }

.filter-container-top .filter {
  justify-content: center;
}

.btn-group.paging-numbers {
  display: flex;
  justify-content: center;
  margin: 15px;
  width: 100%;
}

}

.paging .btn-group { margin: auto 5px; }

.show-records { text-align: right; display: flex; justify-content: center; padding: 5px; }

.show-records .dg_button-link { padding: 15px 5px; }

.park-address { font-style: normal; margin-bottom: 10px; padding: 10px; border: 1px solid #e0e0e0; }

.loading > p { display: block; font-size: 1.5em; padding: 10px 0; text-align: center; }

@media (max-width:600px){

filter {

  width:100%;
}

}

.park-trails .park-trails-nav { margin: 0 0 -1px; padding: 0; }

.park-trails .park-trails-nav li { border: 1px solid #d3d3d3; border-bottom-color:#fff; display: inline-block; list-style: none; padding: 10px; }

.park-trails .park-trails-nav li a { text-decoration: none; }

map_root img {

border:none !important; padding:0 !important; }

mainContent ul.park-trails-nav {

margin:0; }

.show-records { font-size: 0.8em; }

.paging { font-size: 0.8em; padding: 10px; }