2gis-maps/src/less/mixins.less

Interactive 2GIS maps API, based on Leaflet

/*
    Variables:
        @baseURL
        @ie8
        @skinName
        @imagesBasePath

    Mixins:
        .imageData
        .spriteData
        .isSprited
*/

.imageData(@name) when (default()) {
    @filename: '';
    @extension: '';
    @hasVectorVersion: false;
    @width: 0;
    @height: 0;
    @originalWidth: 0;
    @originalHeight: 0;
}

.isSprited(@name) when (default()) {
    @isSprited: false;
}

.dataURIImage(@name) {
    .imageData(@name);

    & when (@hasVectorVersion) {
        background-image: data-uri('@{imagesBasePath}/@{filename}.svg');
    }

    & when not (@hasVectorVersion) {
        background-image: data-uri('@{imagesBasePath}/@{filename}.@{extension}');
    }
}

.directImage(@name) {
    .imageData(@name);

    background-image: url('@{baseURL}/img/@{filename}.@{extension}');
    background-size: @originalWidth @originalHeight;

    .leaflet-retina & when not (@extension = 'gif') {
        background-image: url('@{baseURL}/img/@{filename}@2x.@{extension}');
    }
}

.spriteImage(@name) {
    .spriteData(@name);

    width: @width;
    height: @height;
    background-image: url('@{baseURL}/img/@{backgroundImage}');
    background-position: @backgroundPosition;
    background-size: @totalWidth @totalHeight;

    .leaflet-retina & {
        .spriteData('@{name}@2x');
        background-image: url('@{baseURL}/img/@{backgroundImage}');
        // Spritesmith при формировании 2x-спрайтов часто располагает изображения в другой последовательности,
        // поэтому размеры проставляем заново, определённые выше скорей всего не подходят.
        background-position: @backgroundPositionLeft / 2 @backgroundPositionTop / 2;
        background-size: @totalWidth / 2 @totalHeight / 2;
    }
}

.repeatableBg(@name) {
    .imageData(@name);

    & when not (@ie8) and (@hasVectorVersion) {
        .dataURIImage(@name);
    }

    & when (@ie8), not (@hasVectorVersion) {
        .directImage(@name);
    }
}

.notRepeatableBg(@name; @newerNotUseSprite: false) {
    background-repeat: no-repeat;

    .imageData(@name);

    & when not (@ie8) and (@hasVectorVersion) {
        .dataURIImage(@name);
    }

    & when (@ie8), not (@hasVectorVersion) {
        .isSprited(@name);

        & when (@isSprited) and not (@newerNotUseSprite) {
            .spriteImage(@name);
        }

        & when not (@isSprited), (@newerNotUseSprite) {
            .directImage(@name);
        }
    }
}

.notRepeatableBgWithSizes(@name; @newerNotUseSprite: false) {
    .imageData(@name);
    .isSprited(@name);
    .notRepeatableBg(@name, @newerNotUseSprite);

    & when not (@ie8) and (@hasVectorVersion) {
        width: @width;
        height: @height;
        background-size: @originalWidth @originalHeight;
    }

    & when (@ie8), not (@hasVectorVersion) {
        .isSprited(@name);

        & when not (@isSprited), (@newerNotUseSprite) {
            width: @width;
            height: @height;
        }
    }
}