acklen-keystone/admin/public/styles/isomorphic/map/googleMap.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

/* * * * * * * * * * * * * * * * * *
GOOGEL MAP
* * * * * * * * * * * * * * * * * */
.isoGoogleMap {
  display: flex;
  background: #fdfdfd;
  position: relative;
  overflow: hidden;
}

.marker-icon {
  width: 44px;
  height: 44px;
  margin-left: 0;
  margin-bottom: -22px !important;
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 50%;
  position: relative;
  transform: scale(1);
  transform-origin: center center;
  .isoTransition(0.4s);

  &:hover {
    transform: scale(1.15);
  }

  .marker-icon-wrapper {
    width: 36px;
    height: 36px;
    display: -webkit-inline-flex;
    display: -ms-inline-flex;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: @primary-color;
    border-radius: 50%;

    i {
      color: #fff;
      font-size: 19px;
      line-height: 1;
    }
  }

  // &:before{
  //   content: '';
  //   width: 0;
  //   height: 0;
  //   border-style: solid;
  //   border-width: 20px 6px 0 6px;
  //   border-color: #ffffff transparent transparent transparent;
  //   position: absolute;
  //   bottom: -19px;
  //   z-index: 1;
  // }
  //
  // &:after{
  //   content: '';
  //   width: 15px;
  //   height: 6px;
  //   display: inline-block;
  //   background-color: rgba(0,0,0,0.2);
  //   box-shadow: 0 0 4px rgba(0,0,0,0.15), 0 0 6px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.06);
  //   position: absolute;
  //   bottom: -22px;
  //   border-radius: 50%;
  // }
}

.isoMarkerInfoWindow {
  position: relative;
}
.isoInfoWindowWrapper{
  position: relative;
}
.isoInfoWindow {
  display: block;
  overflow: hidden;
  width: 280px;
  background-color: #ffffff;
  z-index: 100;

  // &:hover {
  //   .windowCloseBtn {
  //     svg {
  //       fill: #fff;
  //     }
  //   }
  // }

  // .windowCloseBtn {
  //   width: 24px;
  //   height: 24px;
  //   display: -webkit-inline-flex;
  //   display: -ms-inline-flex;
  //   display: inline-flex;
  //   align-items: center;
  //   justify-content: center;
  //   background-color: rgba(0, 0, 0, 0.2);
  //   border: 0;
  //   outline: 0;
  //   text-align: center;
  //   cursor: pointer;
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   .isoTransition;

  //   i {
  //     width: 100%;
  //     font-size: @isoFontSize + 2;
  //     color: @isoColor--DarkBlue;
  //     .isoTransition;
  //   }

  //   &:hover {
  //     background-color: rgba(255, 255, 255, 0.25);
  //   }
  // }

  .isoInfoWindowImage {
    width: 100%;
    height: 180px;
    overflow: hidden;
    text-align: center;
    position: relative;
    display: inline-block;

    img {
      display: block;
      max-width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }

  .isoInfoWindowDetails {
    display: block;
    padding: 15px 30px;

    .isoHeading {
      font-family: @isoFontFamily;
      font-size: @isoFontSize + 2;
      font-weight: 500;
      color: @isoColor--HeadingLight;
      margin: 0 0 5px;
    }

    .isoLocation {
      font-family: @isoFontFamily;
      font-size: @isoFontSize - 2;
      font-weight: 400;
      color: @isoColor--HeadingLight;
      margin-bottom: 0px;
    }
  }
}

.gm-style-iw {
  // width: 100% !important;
  // top: 0 !important;
  // left: 0 !important;

  > div{
  //   width: 100% !important;
  //   max-width: none !important;
  display: block;
  
  }

  + div{
    display: none;
  }
}