From 76624f31baafaf1160700c4e782df2f76cde63df Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 5 Nov 2024 20:08:02 +0100 Subject: [PATCH] style: Turn off shadow DOM for map marker styling, to inherit styles from map --- src/alpaca-map-marker.js | 147 ++------------------------------------- src/alpaca-map.js | 2 + src/styles-map-marker.js | 130 ++++++++++++++++++++++++++++++++++ 3 files changed, 138 insertions(+), 141 deletions(-) create mode 100644 src/styles-map-marker.js diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index 29b71ee..bb05d6e 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -21,147 +21,6 @@ export default class AlpacaMapMarker extends LitElement { } /* If a property changes the element re-renders */, }; - static styles = [ - css` - /********* FARM MARKERS *********/ - /* Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css */ - - /* Farm markers */ - - .farm-marker { - padding: 0.75rem; - background-color: white; - color: var(--almost-black); - transition: all 0.3s ease-out; - width: auto; - max-width: 15rem; - border-radius: 1rem; - border-width: 0.2rem; - border-style: solid; - - &.public { - border-color: var(--public-farm); - } - - &.private { - border-color: var(--private-farm); - } - - .summary { - display: flex; - gap: 0.5rem; - align-items: center; - font-size: 1.5rem; - } - - .count { - font-weight: bolder; - } - - .more-info { - display: flex; - border-radius: 0.5rem; - flex: 1; - flex-direction: column; - - &:not(.highlight) { - display: none; - } - } - - .city { - border-radius: 10px; - padding: 0.2rem 0.5rem; - border: 1px solid var(--gray-100); - max-width: fit-content; - } - - .address { - font-size: 1rem; - font-style: normal; - margin-top: 1rem; - } - - .farm-marker-link { - font-size: 1rem; - font-style: normal; - margin: 1rem 0 0.5rem 0; - border-radius: 1rem; - padding: 1rem 0.5rem; - border: 0.125rem solid var(--gray-500); - box-shadow: 0 0.25rem 0 0.125rem var(--gray-200); - - .text { - margin: 0 0 0 1rem; - } - } - - .farm-marker-link:hover { - border-color: var(--pink); - box-shadow: 0 0.25rem 0 0.125rem var(--gray-400); - } - - .directions, - .city address { - display: flex; - flex-basis: auto; - align-items: center; - padding: 0 0.25rem 0 0; - } - - /* Icons */ - - .icon { - &.link-arrow { - margin-left: 0.5rem; - } - } - - &.public .icon { - color: var(--green); - } - - &.private .icon { - color: var(--brown); - } - } - - .farm-marker::after { - /* Pointer under farm marker - taken from css in https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers*/ - border-left: 8px solid transparent; - border-right: 8px solid transparent; - content: ""; - height: 0; - left: 50%; - position: absolute; - top: 100%; - transform: translateX(-50%) translateY(calc(0.1em * -1)); - /* translateY inspired from hotels.com */ - width: 0; - } - - .farm-marker.public::after { - border-top: 8px solid var(--green); - } - - .farm-marker.private::after { - border-top: 8px solid var(--brown); - } - - /********* Links *********/ - - a { - color: var(--dark-blue); - } - - a:hover { - color: var(--pale-blue); - text-decoration: underline; - text-decoration-thickness: 0.5em; - } - `, - ]; - constructor() { super(); this.name; @@ -180,6 +39,12 @@ export default class AlpacaMapMarker extends LitElement { super.connectedCallback(); } + createRenderRoot() { + // Turns off shadow DOM. + // Since AlpacaMapMarker is not used externally, only by AlpacaMap then we want to inherit all styling, so turn off shadow DOM. + return this; + } + render() { return html`
diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 96e6503..611e805 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -4,6 +4,7 @@ import { MarkerClusterer } from "@googlemaps/markerclusterer"; import { Loader } from "@googlemaps/js-api-loader"; import STYLED_MAP_TYPE from "./styles-map.js"; +import stylesMapMarker from "./styles-map-marker.js"; import "./alpaca-map-marker.js"; import "./alpaca-map-icon.js"; @@ -215,6 +216,7 @@ export default class AlpacaMap extends LitElement { background-color: var(--pale-blue); } `, + stylesMapMarker, ]; constructor() { diff --git a/src/styles-map-marker.js b/src/styles-map-marker.js new file mode 100644 index 0000000..ff82b8b --- /dev/null +++ b/src/styles-map-marker.js @@ -0,0 +1,130 @@ +import { css } from "lit"; + +/** + * Map marker styling + * + * Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css + * + */ + +export default css` + .farm-marker { + padding: 0.75rem; + background-color: white; + color: var(--almost-black); + transition: all 0.3s ease-out; + width: auto; + max-width: 15rem; + border-radius: 1rem; + border-width: 0.2rem; + border-style: solid; + + &.public { + border-color: var(--public-farm); + } + + &.private { + border-color: var(--private-farm); + } + + .summary { + display: flex; + gap: 0.5rem; + align-items: center; + font-size: 1.5rem; + } + + .count { + font-weight: bolder; + } + + .more-info { + display: flex; + border-radius: 0.5rem; + flex: 1; + flex-direction: column; + + &:not(.highlight) { + display: none; + } + } + + .city { + border-radius: 10px; + padding: 0.2rem 0.5rem; + border: 1px solid var(--gray-100); + max-width: fit-content; + } + + .address { + font-size: 1rem; + font-style: normal; + margin-top: 1rem; + } + + .farm-marker-link { + font-size: 1rem; + font-style: normal; + margin: 1rem 0 0.5rem 0; + border-radius: 1rem; + padding: 1rem 0.5rem; + border: 0.125rem solid var(--gray-500); + box-shadow: 0 0.25rem 0 0.125rem var(--gray-200); + + .text { + margin: 0 0 0 1rem; + } + } + + .farm-marker-link:hover { + border-color: var(--pink); + box-shadow: 0 0.25rem 0 0.125rem var(--gray-400); + } + + .directions, + .city address { + display: flex; + flex-basis: auto; + align-items: center; + padding: 0 0.25rem 0 0; + } + + /* Icons */ + + .icon { + &.link-arrow { + margin-left: 0.5rem; + } + } + + &.public .icon { + color: var(--green); + } + + &.private .icon { + color: var(--brown); + } + } + + .farm-marker::after { + /* Pointer under farm marker - taken from css in https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers*/ + border-left: 8px solid transparent; + border-right: 8px solid transparent; + content: ""; + height: 0; + left: 50%; + position: absolute; + top: 100%; + transform: translateX(-50%) translateY(calc(0.1em * -1)); + /* translateY inspired from hotels.com */ + width: 0; + } + + .farm-marker.public::after { + border-top: 8px solid var(--green); + } + + .farm-marker.private::after { + border-top: 8px solid var(--brown); + } +`;