MIUN - Design Library

ImageViewerBlock: Full Width 

<div class="block image-slider">
    <div class="block-header">
        <h2 class="heading-level-2">Ett bildspel</h2>
    </div>

    <section class="block-content slick-slider">
        <article id="1" aria-label="En bild som har lite längre rubrik">
            <div class="slider-image-container" data-id="1">
                <img src="https://picsum.photos/920/517" alt="En jättefin bild som föreställer något" class="slider-image">
            </div>
            <figcaption class="padding-none">
                <div class="row">
                    <div class="col-12">
                        <p class="image-description ">En jättefin bild som föreställer något</p>
                    </div>
                    <div class="col-md-9">
                    </div>
                    <div class="col-3 hide-mobile">
                        <p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">keyboard_arrow_down</span></button></p>
                    </div>

                </div>
            </figcaption>
        </article>
        <article id="2" aria-label="En bild">
            <div class="slider-image-container" data-id="2">
                <img src="https://picsum.photos/920/517" alt="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga labore dolorum aliquam sunt, nisi illum eos ullam provident veniam ex ipsam perspiciatis nesciunt velit repellendus! Amet nulla blanditiis maiores?"
                    class="slider-image">
            </div>
            <figcaption>
                <div class="row">
                    <div class="col-12">
                        <p class="image-description ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga labore dolorum aliquam sunt, nisi illum eos ullam provident veniam ex ipsam perspiciatis nesciunt velit repellendus! Amet nulla blanditiis maiores?</p>
                    </div>
                    <div class="col-md-9">
                        <p class="image-photographer">Fotograf: Kent Johnsson</p>
                    </div>
                    <div class="col-3 hide-mobile">
                        <p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">keyboard_arrow_down</span></button></p>
                    </div>

                </div>
            </figcaption>
        </article>
        <article id="3" aria-label="En bild">
            <div class="slider-image-container" data-id="3">
                <img src="https://picsum.photos/920/517" alt="En jättefin bild som föreställer något" class="slider-image">
            </div>
            <figcaption>
                <div class="row">
                    <div class="col-12">
                        <p class="image-description ">En jättefin bild som föreställer något</p>
                    </div>
                    <div class="col-md-9">
                        <p class="image-photographer">Fotograf: Leif Johnsson</p>
                    </div>
                    <div class="col-3 hide-mobile">
                        <p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">keyboard_arrow_down</span></button></p>
                    </div>

                </div>
            </figcaption>
        </article>
        <article id="4" aria-label="En bild">
            <div class="slider-image-container" data-id="4">
                <img src="https://picsum.photos/920/517" alt="En jättefin bild som föreställer något" class="slider-image">
            </div>
            <figcaption>
                <div class="row">
                    <div class="col-12">
                        <p class="image-description ">En jättefin bild som föreställer något</p>
                    </div>
                    <div class="col-md-9">
                        <p class="image-photographer">Fotograf: John Johnsson</p>
                    </div>
                    <div class="col-3 hide-mobile">
                        <p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">keyboard_arrow_down</span></button></p>
                    </div>

                </div>
            </figcaption>
        </article>
        <article id="5" aria-label="En bild">
            <div class="slider-image-container" data-id="5">
                <img src="https://picsum.photos/920/517" alt="En jättefin bild som föreställer något" class="slider-image">
            </div>
            <figcaption>
                <div class="row">
                    <div class="col-12">
                        <p class="image-description ">En jättefin bild som föreställer något</p>
                    </div>
                    <div class="col-md-9">
                        <p class="image-photographer">Fotograf: Kurt Johnsson</p>
                    </div>
                    <div class="col-3 hide-mobile">
                        <p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">keyboard_arrow_down</span></button></p>
                    </div>

                </div>
            </figcaption>
        </article>
        <article id="6" aria-label="En bild">
            <div class="slider-image-container" data-id="6">
                <img src="https://picsum.photos/920/517" alt="En jättefin bild som föreställer något" class="slider-image">
            </div>
            <figcaption>
                <div class="row">
                    <div class="col-12">
                        <p class="image-description ">En jättefin bild som föreställer något</p>
                    </div>
                    <div class="col-md-9">
                        <p class="image-photographer">Fotograf: Nils Johnsson</p>
                    </div>
                    <div class="col-3 hide-mobile">
                        <p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">keyboard_arrow_down</span></button></p>
                    </div>

                </div>
            </figcaption>
        </article>
        <article id="7" aria-label="En bild">
            <div class="slider-image-container" data-id="7">
                <img src="https://picsum.photos/920/517" alt="En jättefin bild som föreställer något" class="slider-image">
            </div>
            <figcaption>
                <div class="row">
                    <div class="col-12">
                        <p class="image-description ">En jättefin bild som föreställer något</p>
                    </div>
                    <div class="col-md-9">
                        <p class="image-photographer">Fotograf: John Johnsson</p>
                    </div>
                    <div class="col-3 hide-mobile">
                        <p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">keyboard_arrow_down</span></button></p>
                    </div>

                </div>
            </figcaption>
        </article>
        <article id="8" aria-label="En bild">
            <div class="slider-image-container" data-id="8">
                <img src="https://picsum.photos/920/517" alt="En jättefin bild som föreställer något" class="slider-image">
            </div>
            <figcaption>
                <div class="row">
                    <div class="col-12">
                        <p class="image-description ">En jättefin bild som föreställer något</p>
                    </div>
                    <div class="col-md-9">
                        <p class="image-photographer">Fotograf: John Johnsson</p>
                    </div>
                    <div class="col-3 hide-mobile">
                        <p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">keyboard_arrow_down</span></button></p>
                    </div>

                </div>
            </figcaption>
        </article>
    </section>
    <div class="slider-nav ">
        <div class="thumbnail-container"><img src="https://picsum.photos/70/70" alt=""></div>
        <div class="thumbnail-container"><img src="https://picsum.photos/70/70" alt=""></div>
        <div class="thumbnail-container"><img src="https://picsum.photos/70/70" alt=""></div>
        <div class="thumbnail-container"><img src="https://picsum.photos/70/70" alt=""></div>
        <div class="thumbnail-container"><img src="https://picsum.photos/70/70" alt=""></div>
        <div class="thumbnail-container"><img src="https://picsum.photos/70/70" alt=""></div>
        <div class="thumbnail-container"><img src="https://picsum.photos/70/70" alt=""></div>
        <div class="thumbnail-container"><img src="https://picsum.photos/70/70" alt=""></div>
    </div>
</div>
 
{{#if isSlider}}
            <div class="block image-slider">
                {{#if heading}}
                <div class="block-header">
                    <h2 class="heading-level-2">{{ heading }}</h2>
                </div>
                {{/if}}

                <section class="block-content slick-slider">
                    {{#each images}}
                        <article id="{{imageId}}" aria-label="{{title}}">
                            <div class="slider-image-container" data-id="{{imageId}}">
                                <img src="{{ sliderPreviewImageUrl }}" alt="{{ description }}" class="slider-image">
                            </div>
                            {{#unless ../hideMetadata}}
                                <figcaption {{#unless photographer}} class="padding-none" {{/unless}}>
                                    <div class="row">
                                        {{#unless ../hideDescription}}
                                            <div class="col-12">
                                                {{#if description}}
                                                    <p class="image-description {{#if ../expandThumbnails}}show{{/if}}">{{ description }}</p>
                                                {{/if}}
                                            </div>
                                        {{/unless}}
                                        <div class="col-md-9">
                                            {{#if photographer}}
                                                <p class="image-photographer">Fotograf: {{ photographer }}</p>
                                            {{/if}}
                                        </div>
                                        <div class="col-3 hide-mobile"><p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">{{#if ../expandThumbnails}}keyboard_arrow_up{{else}}keyboard_arrow_down{{/if}}</span></button></p></div>
                                        
                                    </div>
                                </figcaption>
                            {{/unless}}
                        </article>
                    {{/each}}
                </section>
                {{#unless hideMetadata}}
                    {{#unless hideThumbnails}}
                        <div class="slider-nav {{#if expandThumbnails}}show{{/if}}">
                            {{#each images}}
                                <div class="thumbnail-container"><img src="{{ sliderThumbnailImageUrl }}" alt=""></div>
                            {{/each}}
                        </div>
                    {{/unless}}
                {{/unless}}
            </div>
{{else}}
    <div class="block image-gallery">
        {{#if heading}}
        <div class="block-header">
            <h2 class="heading-level-2">{{ heading }}</h2>
        </div>
        {{/if}}
        <section class="block-content row">
            {{#each images}}
                <article id="item-{{ imageId }}" class="image-gallery-item" aria-labelledby="item-title-{{ imageId }}">
                    <figure>
                        <div class="figure-image-container" data-id="{{imageId}}">
                            <a href="#fancy-id-{{ imageId }}" data-fancybox="{{ ../galleryId }}">
                                <img src="{{ thumbnailImageUrl }}" alt="{{ description }}" class="figure-image">
                            </a>
                        </div>
                        <figcaption>
                            <h3 id="item-title-{{ imageId }}" class="heading-level-4">{{ title }}</h3>
                            {{#unless ../hideDescription}}
                                {{#if description}}
                                    <p class="image-description">{{ description }}</p>
                                {{/if}}
                            {{/unless}}
                            {{#if photographer}}
                                <p class="image-photographer">Fotograf: {{ photographer }}</p>
                            {{/if}}
                        </figcaption>
                    </figure>
                    <div class="action-container">
                        {{#if ../allowDownload}}
                            <a href="{{ orginalImageUrl }}" class="button-small" target="_blank" aria-label="Ladda ner {{ description }}">Ladda ner</a>
                        {{/if}}
                    </div>
                </article>
                <div id="fancy-id-{{ imageId }}" class="lightbox-html" style="display: none;">
                    <figure>
                        <span><img src="{{ previewImageUrl }}" alt="{{ description }}"></span>
                        <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                        <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
                    </figure>
                    <div class="meta">
                        <div class="basic">
                            <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                            <p>
                                <strong>{{ title }}</strong>
                                <br>
                                {{#unless ../hideDescription}}
                                    {{#if description}}
                                        {{ description }}
                                    {{/if}}
                                {{/unless}}
                            </p>
                        </div>
                        <div class="extra">
                            <p>
                                {{#if photographer}}
                                    <strong>Fotograf: </strong>{{ photographer }}<br>
                                {{/if}}
                            </p>
                            {{#if ../allowDownload}}
                                <a href="{{ orginalImageUrl }}" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                            {{/if}}
                        </div>
                    </div>
                </div>
            {{/each}}
        </section>
    </div>
{{/if}}
 
{
  "galleryId": "some-guid",
  "isSlider": true,
  "heading": "Ett bildspel",
  "allowDownload": true,
  "hideDescription": false,
  "hideMetadata": false,
  "hideThumbnails": false,
  "expandThumbnails": false,
  "epiDivClass": "col-12",
  "images": [
    {
      "imageId": 1,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild som har lite längre rubrik",
      "description": "En jättefin bild som föreställer något"
    },
    {
      "imageId": 2,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga labore dolorum aliquam sunt, nisi illum eos ullam provident veniam ex ipsam perspiciatis nesciunt velit repellendus! Amet nulla blanditiis maiores?",
      "photographer": "Kent Johnsson"
    },
    {
      "imageId": 3,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "Leif Johnsson"
    },
    {
      "imageId": 4,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "John Johnsson"
    },
    {
      "imageId": 5,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "Kurt Johnsson"
    },
    {
      "imageId": 6,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "Nils Johnsson"
    },
    {
      "imageId": 7,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "John Johnsson"
    },
    {
      "imageId": 8,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "John Johnsson"
    }
  ]
}
  • Content: 
    $( document ).ready(function() {

	$('[data-fancybox]').fancybox({
		padding: 0,
		margin: 0,
		loop: true,
		arrows: false,
		beforeShow: function (instance) {
			var current = (this.index + 1);
			var total = instance.group.length;
			$('.meta .current').text(current);
			$('.meta .total').text(total);
		},
	});

	var $slickSlider = $('.slick-slider');
	var $slickNav = $('.slider-nav');
	var $slider_height;
	$slickSlider.on('init',function(event, slick, currentSlide, nextSlide) {
		$slider_height = $(this).height();
	});
	$slickSlider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
		var i = (currentSlide ? currentSlide : 0) + 1;
		$('.slide-current').text(i);
		$('.slide-count').text(slick.slideCount);
		$('img', $slickNav).removeClass('active');
		$('img:eq(' + (i - 1) + ')', $slickNav).addClass('active');
		adjustSlider();
		var img_hight = $('.slider-image-container').height();
		$('.slick-arrow').css('top',img_hight/2);
	});
	
	$slickSlider.slick();

	$('.show-more').on('click', function() {
		$('.image-description').toggleClass('show');
		$('.slider-nav').toggleClass('show');
		adjustSlider();
		if($('.material-icons', this).text() === 'keyboard_arrow_down') {
			$('.material-icons', this).text('keyboard_arrow_up');
		} else {
			$('.material-icons', this).text('keyboard_arrow_down');
		}
	});

	$('div', $slickNav).on('click', function() {
		$slickSlider.slick('slickGoTo', $(this).index());
	});

	function adjustSlider() {
		var $el = $('.image-description')
		if ($el.hasClass('show')) {
			var sl_height = $('.slick-active').find('.image-description').height()+10;
			$slickSlider.height($slider_height+sl_height);
		}
		else {
			$slickSlider.attr('style', null);
		}
	}
});
  • URL: /components/raw/imageviewerblock/ImageViewerBlock.js
  • Filesystem Path: src\components\02-block_components\ImageViewerBlock\ImageViewerBlock.js
  • Size: 1.8 KB
  • Content: 
    .imageviewerblock{
    margin-bottom: $md-space;
}
.image-gallery {
    .image-gallery-item {
        width: 285px;
        padding-right: 15px;
        padding-left: 15px; 

        .figure-image-container {
            position: relative;
            min-width: 255px;
            min-height: 170px;
            background-color: $light-grey;
            margin-bottom: $xs-space;

            .figure-image {
                max-height: 100%;
                max-width: 100%;
                width: auto;
                height: auto;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
        }

        .image-description {
            margin-bottom: 10px;
        }
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 1065px;
    }
}

.fancybox-content {
    padding: 0 !important;
    overflow: auto;
}

.lightbox-html figure {
    background-color: $light-grey;
    max-width: 950px;
    max-height: 650px;
    text-align: center;
    margin: 0 auto;
    position: relative;
}

@media (min-width: 38em) {
    .lightbox-html figure {
        min-width: 550px;
    }
}

@media (min-width: 48em) {
    .lightbox-html figure {
        min-height: 500px;
        min-width: 650px;
    }
}

@media (min-width: 63.5em) {
    .lightbox-html figure {
        min-height: 500px;
        min-width: 650px;
    }
}

@media (min-width: 82em) {
    .lightbox-html figure {
        float: left;
        display: table;
        min-height: 500px;
        min-width: 750px;
    }
}

@media (min-width: 104em) {
    .lightbox-html figure {
        min-height: 632px;
        min-width: 950px;
    }
}

@media (min-width: 70em) {
    .lightbox-html figure span {
        display: table-cell;
        vertical-align: middle;
    }
}

.lightbox-html figure img {
    display: block;
    margin: 0 auto;
    max-height: 200px;
}

@media (min-width: 38em) {
    .lightbox-html figure img {
        max-height: 400px;
    }
}

@media (min-width: 48em) {
    .lightbox-html figure img {
        max-width: 750px;
        max-height: 500px;
    }
}

@media (min-width: 104em) {
    .lightbox-html figure img {
        max-width: 950px;
        max-height: 632px;
    }
}

.lightbox-html .meta {
    width: 320px;
    padding: 1.2em;
    font-size: .9em;
    background: #fff;
}

@media (min-width: 48em) {
    .lightbox-html .meta {
        max-width: 320px;
        padding: 1.5em;
        font-size: 1em;
    }
}

@media (min-width: 70.5em) {
    .lightbox-html .meta {
        max-width: 320px;
        font-size: .9em;
        padding: 2.5em 2em 1em 2em;
        overflow: hidden;
    }
}

.lightbox-html .meta .basic {
    float: none;
    width: 100%;
}

@media (min-width: 63.5em) {
    .lightbox-html .meta .basic {
        float: none;
        width: 100%;
    }
}

.lightbox-html .meta .extra {
    float: none;
    width: 100%;
    border-top: 1px solid #e1e1e1;
    padding-top: 1.5em;
    margin-top: 1.5em;
}

@media (min-width: 63.5em) {
    .lightbox-html .meta .extra {
        float: none;
        width: 100%;
        border-top: 1px solid #e1e1e1;
        padding-top: 1.5em;
        margin-top: 1.5em;

        p {
            margin-bottom: 1.5rem;
        }
    }
}

.lightbox-html .meta .extra .button-default {
    display: block;
    text-align: center;
}

.lightbox-html .meta {
    .current, .total {
        font-family: "Lato Bold";
    }
    .count, .current, .total, p, p strong {
        font-size: .9em;
    }
}

// Image slider

.image-slider {
    .slider-image-container {
        position: relative;
        background-color: $light-grey;
        height: 517px;
        @include media-breakpoint-down(lg) {
            height: 430px;
        }
        @include media-breakpoint-down(md) {
            height: 320px;
        }
        @include media-breakpoint-down(sm) {
            height: 280px;
        }
        @media (max-width: 420px) { 
            height: 170px;
        }
        .slider-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            max-width: 100%;
            max-height: 99.9%;
        }
    }
}

.slick-slider {
    article {
       position: relative;
       margin-bottom: 0 !important;
    }

    .slick-track {
        height: 100% !important;
    }
    
    figcaption {
        position: static;
        width: 100%;
        overflow-y: auto;
        padding: 20px 30px;
        background-color: rgba($color: #404040, $alpha: .9);
        
        p, p span {
            color: #fff;
        }

        .image-count {
            text-align: right;
        }
    }
    .image-description {
        display: none;
        margin-right: 180px;
        margin-bottom: 10px;
        @include media-breakpoint-down(sm) {
            display: none !important;
        }
        &.show {
            display: block;
            
        }
    }
}

.slick-prev, .slick-next {
    top: calc(50% - 25px);
    height: 50px;
    width: 50px;
    color: #fff;
    border-radius: 50%;
    background: rgba($color: #404040, $alpha: .9);
    z-index: 100;
}

.slick-prev:before, .slick-next:before {
    opacity: 1;
}

.slick-prev:hover, .slick-next:hover, .slick-prev:focus, .slick-next:focus {
    background: rgba($color: #202020, $alpha: .9)
}

.slick-prev {
    left: 20px;
}

.slick-next {
    right: 20px;
}

.slick-prev:before {
    font-family: "Material Icons";
    content: "\e408";
    font-size: 32px;
}

.slick-next:before {
    font-family: "Material Icons";
    content: "\e409";
    font-size: 32px;
}

.slider-nav {
    display: none;
    padding: 20px 30px;
    background-color: #404040;
    @include media-breakpoint-down(sm) {
        display: none !important;
    }
    &.show {
        display: block;
    }

    .thumbnail-container {
        display: inline-block;

        &:hover {
            cursor: pointer;
        }

        img {
            width: 70px;
            height: 70px;
            margin: 3px;
            padding: 3px;
        }

        img.active {
            padding: 0;
            border: 3px solid #fff;
        }
    }
}

.slick-slider .slick-track, .slick-slider .slick-list {
    height: 100% !important;
}

.show-more {
    margin: 0;
    margin-left: 10px;
    padding: 0;
    border: 0;
    background-color: transparent;

    &:hover {
        cursor: pointer;
    }

    span {
        font-size: 32px;
        vertical-align: middle;
        line-height: 1px;
    }
}

@include media-breakpoint-down(md) {
    .hide-mobile {
        display: none;
    }

    .padding-none {
        padding: 0 !important;
    }
}
  • URL: /components/raw/imageviewerblock/ImageViewerBlock.scss
  • Filesystem Path: src\components\02-block_components\ImageViewerBlock\ImageViewerBlock.scss
  • Size: 7.1 KB

There are no notes for this item.