KE_map popup

by sthag

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div id="oy-map-map">

  <div class="leaflet-popup-content-wrapper">
    <div class="leaflet-popup-content" style="width: 401px;">
      <div class="oy-map-popup-content">
        <div class="oy-edge-top"></div>
        <header>
          <a class="oy-map-popup-contact-link" href="#" title="edit contact">
            <p class="oy-map-popup-company">company name</p>
          </a>
          <p class="oy-map-popup-web"><a href="https://org-you.com" target="_blank">https://domain.tld</a></p>
        </header>
        <section class="oy-map-popup-details">
          <header class="oy-map-popup-place">
            <p class="oy-map-popup-address">street no., postal code city<br>country</p>
            <p class="oy-map-popup-rating-total">#.#</p>
          </header>
          <article>
            <p class="oy-map-popup-title">contact:</p>
            <div class="accordion accordion-flush" id="oy-map-popup-contact-accordion-12">
              <div class="accordion-item">
                <h2 class="accordion-header" id="">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-de5a39fbdc9e5" aria-expanded="true" aria-controls="collapse-de5a39fbdc9e5">full name</button>
                </h2>
                <div id="collapse-de5a39fbdc9e5" class="accordion-collapse collapse show" aria-labelledby="oy-map-popup-contact-de5a39fbdc9e5" data-bs-parent="#oy-map-popup-contact-accordion-12">
                  <div class="accordion-body">
                    <p class="oy-map-popup-name">first name last name</p>
                    <ul class="oy-map-popup-contact">
                      <li class="oy-map-popup-phone"><a href="tel:">phone</a></li>
                      <li class="oy-map-popup-mobile"><a...

SCSS

body {
  background-color: slategray;
}

.leaflet-popup-content-wrapper {
  /* position: absolute; */
  display: inline-block;
  background-color: white;
}

/*
Anpassung für Bootstrap-Stile
 */
.accordion-flush {

  .accordion-item {
    //background-color: rgba(0, 0, 0, .1);
    background-color: unset;
  }

  .accordion-button,
  .accordion-body {
    padding: .5rem .75rem;
  }

  .accordion-button {
    color: var(--oy-color-black);
    //background-color: rgba(0, 0, 0, .2);
    background-color: unset;

    &::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    &:not(.collapsed) {
      color: unset;
      background-color: unset;

      &::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      }
    }
  }
}



/*
Generelle Stile
 */
/* START Design-Kanten */
.oy-edge-top,
.oy-edge-bottom {
  position: absolute;
  width: var(--oy-edge-size);
  height: var(--oy-edge-size);
  background-color: var(--oy-color-yellow);
}

.oy-edge-top {
  top: 0;
  right: 0;
  clip-path: polygon(0% 0%,100% 0%,100% 100%,70% 100%,70% 30%,0% 30%);
}

.oy-edge-bottom {
  bottom: 0;
  left: 0;
  clip-path: polygon(0% 0%, 30% 0%, 30% 70%, 100.00% 70.00%, 100% 100%, 0% 100%);
}
/* END Design-Kanten */

/* START Design-Checkbox */
.oy-checkbox-container {
  display: inline-block;
  position: relative;
  margin: unset;
  padding-left: calc(var(--oy-checkbox-size) + 8px);
  cursor: pointer;
  line-height: var(--oy-checkbox-size);
  -webkit-user-select: none;
  -moz-user-select:...