source/styles/blocks/map.scss - master - outthevoid/frontend_developer_module_6

source/styles/blocks/map.scss

84 строки2 KB

darthmorgot

Мелкие правки стилей.

14 май 2024, 17:59

14 май 2024, 17:592d9bb16

// Map block
.map {
  position: relative;
}

.map__mask {
  position: absolute;
  top: 0;
  left: 50%;
  width: 320px;
  height: 420px;
  background-color: $base-white;
  background-image:
    image-set(
      url("../../images/mobile/map_bg_mobile@1x.webp") 1x,
      url("../../images/mobile/map_bg_mobile@2x.webp") 2x,
      url("../../images/mobile/map_bg_mobile@1x.jpg") 1x,
      url("../../images/mobile/map_bg_mobile@2x.jpg") 2x
    );
  background-repeat: no-repeat;
  background-position: center;
  transform: translateX(-50%);

  &::after {
    content: "";
    position: absolute;
    top: 185px;
    left: 48.8%;
    width: 38px;
    height: 50px;
    background-image: url("../../images/map-pin.svg");

    @media (min-width: $tablet-width) {
      top: 215px;
      left: 49.5%;
    }

    @media (min-width: $desktop-width) {
      top: 245px;
      left: 49.7%;
    }
  }


  @media (min-width: $tablet-width) {
    width: 768px;
    height: 480px;
    background-image:
      image-set(
        url("../../images/tablet/map_bg_tablet@1x.webp") 1x,
        url("../../images/tablet/map_bg_tablet@2x.webp") 2x,
        url("../../images/tablet/map_bg_tablet@1x.jpg") 1x,
        url("../../images/tablet/map_bg_tablet@2x.jpg") 2x
      );
  }

  @media (min-width: $desktop-width) {
    width: 1440px;
    height: 540px;
    background-image:
      image-set(
        url("../../images/desktop/map_bg_desktop@1x.webp") 1x,
        url("../../images/desktop/map_bg_desktop@2x.webp") 2x,
        url("../../images/desktop/map_bg_desktop@1x.jpg") 1x,
        url("../../images/desktop/map_bg_desktop@2x.jpg") 2x
      );
  }
}

.map__wrapper {
  width: 320px;
  height: 420px;
  margin: 0 auto;

  @media (min-width: $tablet-width) {
    width: 768px;
    height: 480px;
  }

  @media (min-width: $desktop-width) {
    width: 1440px;
    height: 540px;
  }
}