info m-breadcrumb
visibility Preview code Output {php} { } Sass
home / something / something 
<div class="m-breadcrumb">
	<div class="m-breadcrumb__trail" xmlns:v="https://rdf.data-vocabulary.org/#">
		<a href="#" rel="home" class="m-breadcrumb__link">home</a>
		<span class="m-breadcrumb__sep">/</span>
		<a href="#" rel="v:url" property="v:title" class="m-breadcrumb__link">something</a>
		<span class="m-breadcrumb__sep">/</span>
		<span class="m-breadcrumb__end">something</span>
	</div>
</div>
.m-breadcrumb {

    padding: space(1) 0;

    &__link {

        @include text-underline(none);
        color: color('black');

    }

}

Menu

info m-buttons
visibility Preview code Output {php} { } Sass
button button
button button 
<div class="m-buttons">
	<a href="#" class="a-button">button</a>
	<a href="#" class="a-button">button</a>
</div>

<hr>

<div class="m-buttons text-center">
	<a href="#" class="a-button">button</a>
	<a href="#" class="a-button">button</a>
</div>
.m-buttons {

    font-size: 0;
    margin: space(1) * -1;

    > * {

        margin: space(1);

    }

}
info m-flash-messages
visibility Preview code Output {php} { } Sass
Content of success notice
Content of error notice 
<div class="m-flash-messages">
	<input type="checkbox" id="flash-message-status-1" class="a-flash-message__status" checked="checked">

	<div class="a-flash-message a-flash-message--1 a-flash-message--success">
		<span class="a-flash-message__icon"></span> Content of success notice <label for="flash-message-status-1" class="a-flash-message__close" aria-label="Close">&#10005;</label>
	</div>

	<input type="checkbox" id="flash-message-status-2" class="a-flash-message__status" checked="checked">

	<div class="a-flash-message a-flash-message--2 a-flash-message--error">
		<span class="a-flash-message__icon"></span> Content of error notice <label for="flash-message-status-2" class="a-flash-message__close" aria-label="Close">&#10005;</label>
	</div>
</div>
@import "atoms/flash-message/index";

.m-flash-messages {

    overflow: hidden;
    padding: em(10px);
    padding-top: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;

    @media(min-width: breakpoint-min(sm)) {

        max-width: em(400px);
        width: 50%;

    }

}
info m-form-checkbox
visibility Preview code Output {php} { } Sass 
<input type="checkbox" name="check1" id="frm-pc-form-check1" checked class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check1">Checkbox label</label>

<hr>

<input type="checkbox" name="check2" id="frm-pc-form-check2" disabled class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check2">Disable checkbox</label>

<hr>

<input type="checkbox" name="check3[]" id="frm-pc-form-check3-list-1" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check3-list-1">Checkbox list 01</label>
<input type="checkbox" name="check3[]" id="frm-pc-form-check3-list-2" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check3-list-2">Checkbox list 02</label>
<input type="checkbox" name="check3[]" id="frm-pc-form-check3-list-3" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check3-list-3">Checkbox list 03</label>
@import "scss/mixins/icon";

.m-form-checkbox {

    @extend .sr-only;

    $self: &;

    + #{$self}__label {

        cursor: pointer;
        display: block;
        margin-bottom: space(1);
        margin-top: space(1);
        position: relative;
        user-select: none;

        &:first-child {

            margin-top: 0;

        }

        &:last-child {

            margin-bottom: 0;

        }

        @media(min-width: breakpoint-min(sm)) {

            &--inline {

                display: inline-block;
                margin: 0;
                margin-right: em(10px);

            }

        }

        &:before {

            border: 1px solid color('gray');
            content: ' ';
            display: inline-block;
            height: em(20px);
            line-height: em(20px);
            margin-right: em(10px);
            overflow: hidden;
            text-align: center;
            vertical-align: text-bottom;
            width: em(20px);

        }

    }

    &[disabled="disabled"] {

        + #{$self}__label {

            cursor: default;

        }

    }

    &:checked {

        + #{$self}__label {

            &:before {

                background: url('svg/icomoon/SVG/ic12-check.svg') no-repeat center;

            }

        }

    }

    &.focus-visible {

        &:focus {

            + #{$self}__label {

                &:before {

                    outline: 1px dotted color('black');
                    outline: auto 5px -webkit-focus-ring-color; // sass-lint:disable-line no-duplicate-properties no-vendor-prefixes

                }

            }

        }

    }

}
info m-form-date
visibility Preview code Output {php} { } Sass ( ) Javascript 
<label class="m-form-date" for="frm-pc-form-date">
	<span class="w-100">
		<input type="text" name="date" id="frm-pc-form-date" class="m-form-date__input a-form-input jq_datepicker">
	</span>
	<i class="m-form-date__icon icon-calendar" aria-hidden="true"></i>
</label>
@import "atoms/form-input/index";

@import "pickmeup/andy-theme";

.m-form-date {

    @extend .a-form-input;
    align-items: center;
    cursor: text;
    display: flex;
    padding: 0;

    #{&} &__input {

        border: 0;
        margin: 0;

    }

    &__icon {

        padding: em(10px);
        text-align: right;

    }

}
import $ from 'jquery';

import pickmeup from 'pickmeup/dist/pickmeup.min';

export default class DatePicker {
	constructor() {
		if (this.test()) {
			if (typeof pickMeUp_i18n !== 'undefined') pickmeup.defaults.locales['i18n'] = pickMeUp_i18n; // eslint-disable-line

			$('.jq_datepicker').each((i, el) => {
				$(el).attr('readonly', 'true');

				pickmeup(el, this.options($(el)));

				el.addEventListener('pickmeup-change', function(e) {
					$(this).trigger('change');

					if (typeof $(this).attr('data-alt') != 'undefined') {
						var selectedDate = e.detail.date;

						$('[name="' + $(this).attr('data-alt') + '"]')
							.val(selectedDate.getFullYear() +
								'-' + (selectedDate.getMonth() + 1) +
								'-' + selectedDate.getDate());
					}
				});
			});
		}
	}

	test() {
		return $('.jq_datepicker').length && typeof pickmeup == 'function' ? true : false;
	}

	options($el) {
		return {
			position: 'bottom',
			hide_on_select: true,
			format: 'd/m/Y',
			min: $el.attr('data-set-min') ? new Date() : false,
			max: $el.attr('data-set-max') ? new Date(2026, 11, 31, 0, 0, 0, 0) : false,
			default_date: false,
			locale: typeof pickMeUp_i18n !== 'undefined' ? 'i18n' : 'en', // eslint-disable-line camelcase
			view: $el.attr('data-view') ? $el.attr('data-view') : 'days',
			class_name: 'pmu',
			prev: '<i class="pmu-button-arrow a-icon-angle-left"></i>',
			next: '<i class="pmu-button-arrow a-icon-angle-right"></i>'
		};
	}
}

$(() => new DatePicker);
info m-form-group
visibility Preview code Output {php} { } Sass 
<div class="m-form-group">
	<label class="m-form-group__label a-form-label" for="frm-pc-form-group">Text field</label>
	<input type="text" name="group" id="frm-pc-form-group" class="m-form-group__input a-form-input">
</div>

<hr>

<div class="m-form-group m-form-group--placeholder">
	<input type="text" onblur="this.setAttribute('value', this.value)" name="placeholder" id="frm-pc-form-placeholder" class="m-form-group__input a-form-input">
	<label class="m-form-group__label a-form-label" for="frm-pc-form-placeholder">Text field</label>
</div>
@import "atoms/form-input/index";

.m-form-group {

    $self: &;

    position: relative;

    + #{$self} {

        margin-top: space(2);

    }

    &--placeholder {

        @extend .a-form-input;
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        overflow: hidden;
        padding: 0;

        #{$self}__label {

            @extend .a-form-input;
            border: 0;
            cursor: text;
            flex: 0 0 auto;
            margin: 0;
            max-width: none;
            order: 1;
            width: auto;

            .js & {

                flex: 1 0 100%;
                max-width: 100%;
                width: 100%;

            }

        }

        #{$self}__input {

            border: 0;
            flex-basis: 0;
            flex-grow: 1;
            margin: 0;
            max-width: 100%;
            order: 2;

            .js & {

                flex-basis: initial;
                flex-grow: initial;
                max-width: initial;

            }

            &:focus,
            &[value] {

                + #{$self}__label {

                    flex-basis: auto; // for width transition use fix size - eg. 200px
                    width: auto;

                }

            }

            &[value=""] {

                &:not(:focus) {

                    + #{$self}__label {

                        flex-basis: 100%;
                        width: 100%;

                    }

                }

            }

        }

    }

}
info m-form-number
visibility Preview code Output {php} { } Sass ( ) Javascript
Number field
Number field - inline spinners
<div class="my-3"> Number field<br>
	<div class="m-form-number">
		<input type="number" min="0" max="9" step="1" name="number1" id="frm-pc-form-number1" class="m-form-number__input a-form-input jq_number_field">
	</div>
</div>

<div class="my-3"> Number field - inline spinners<br>
	<div class="m-form-number m-form-number--inline">
		<input type="number" min="0" max="9" step="1" name="number2" id="frm-pc-form-number2" class="m-form-number__input a-form-input jq_number_field">
	</div>
</div>
@import "atoms/form-input/index";

.m-form-number {

    $self: &;

    display: inline-block;
    margin-bottom: space(1);
    margin-top: space(1);
    position: relative;

    &:first-child {

        margin-top: 0;

    }

    &:last-child {

        margin-bottom: 0;

    }

    &__spin {

        cursor: pointer;
        height: 50%;
        line-height: 1;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        right: 0;
        text-align: center;
        width: 20px;
        z-index: 0;

        &[data-dir="inner"] {

            top: 0;

            &:after {

                content: '+';

            }

        }

        &[data-dir="outer"] {

            bottom: 0;

            &:after {

                content: '-';

            }

        }

        &:before {

            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            width: 0;

        }

        .no-js & {

            display: none;

        }

    }

    & #{$self}__input {

        margin: 0;
        position: relative;
        text-align: center;
        width: 80px;
        z-index: 1;

        .js & {

            appearance: textfield;
            margin: 0 20px;

            // sass-lint:disable no-vendor-prefixes
            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {

                -webkit-appearance: none;
                margin: 0;

            }
            // sass-lint:enable no-vendor-prefixes

        }

    }

    &:not(#{$self}--inline) {

        #{$self}__spin {

            &[data-dir="outer"] {

                border-top: 0;

            }

        }

        #{$self}__input {

            margin-left: 0;

        }

    }

    &--inline {

        #{$self}__spin {

            bottom: auto;
            height: 100%;
            top: 0;

            &[data-dir="outer"] {

                left: 0;
                right: auto;

            }

        }

        #{$self}__input {

            width: 60px;

        }

    }

}
import $ from 'jquery';

export default class NumberField {
	constructor() {

		$('.jq_number_field').each((i, el) => {
			var $el = {
				input: $(el),
				spines: []
			};

			var data = {
				min: parseFloat($el.input.attr('min') || 0),
				max: parseFloat($el.input.attr('max') || $el.input.attr('maxlength')),
				step: parseFloat($el.input.attr('step') || 1)
			};

			$.each([ 'inner', 'outer' ], (index, dir) => {
				var spin = $('<span>')
							.addClass('m-form-number__spin')
							.attr('data-dir', dir);

				spin.on('click', { input: $el.input, dir: dir, data: data }, this.change);

				$el.spines.push(spin);
			});

			$el.input.before($el.spines);

			$el.input.on('change', { data: data }, this.trigger);
		});
	}

	change(event) {
		var $el = {
			input: $(event.data.input),
			spin: $(this)
		};

		var data = event.data.data;
		data.dir = event.data.dir;
		data.number = parseInt($el.input.val());

		if (isNaN(data.number)) {
			data.number = !isNaN(data.min) ? data.min : 0;
		}

		if (isNaN(data.step)) {
			data.step = 1;
		}

		if (data.dir === 'inner') {
			data.number += data.step;
		} else {
			data.number -= data.step;
		}

		if (!isNaN(data.min) && !isNaN(data.max)) {
			data.number = Math.min(data.max, Math.max(data.min, data.number));
		}

		$el.input.val(data.number).trigger('change');
	}

	trigger(event) {
		var $el = {
			input: $(this)
		};

		var data = event.data.data;

		if (!isNaN(data.min) && !isNaN(data.max)) {
			data.number = parseInt($el.input.val());

			data.number = Math.min(data.max, Math.max(data.min, data.number));

			$el.input.val(data.number);
		}
	}
}

$(() => new NumberField);
info m-form-radio
visibility Preview code Output {php} { } Sass 
<input type="radio" name="radio" id="frm-pc-form-radio-list-1" class="m-form-radio">
<label class="m-form-radio__label" for="frm-pc-form-radio-list-1">Radio list 01</label>
<input type="radio" name="radio" id="frm-pc-form-radio-list-2" class="m-form-radio">
<label class="m-form-radio__label" for="frm-pc-form-radio-list-2">Radio list 02</label>
<input type="radio" name="radio" id="frm-pc-form-radio-list-3" class="m-form-radio">
<label class="m-form-radio__label" for="frm-pc-form-radio-list-3">Radio list 03</label>
.m-form-radio {

    @extend .sr-only;

    $self: &;

    + #{$self}__label {

        cursor: pointer;
        display: block;
        margin-bottom: space(1);
        margin-top: space(1);
        position: relative;
        user-select: none;

        &:first-child {

            margin-top: 0;

        }

        &:last-child {

            margin-bottom: 0;

        }

        @media(min-width: breakpoint-min(sm)) {

            &--inline {

                display: inline-block;
                margin: 0;
                margin-right: em(10px);

            }

        }

        &:before {

            background: color('black');
            background-clip: content-box;
            border: 1px solid color('gray');
            border-radius: 50%;
            box-shadow: inset em(0 0 0 100%) color('white');
            content: '';
            display: inline-block;
            font-size: em(125%);
            height: em(100%);
            margin-right: em(50%);
            padding: 1px;
            transition: $base-transition;
            vertical-align: sub;
            width: em(100%);

        }

    }

    &[disabled="disabled"] {

        + #{$self}__label {

            cursor: default;

        }

    }

    &:checked {

        + #{$self}__label {

            &:before {

                box-shadow: inset em(0 0 0 30%) color('white');

            }

        }

    }

    &.focus-visible {

        &:focus {

            + #{$self}__label {

                &:before {

                    outline: 1px dotted color('black');
                    outline: auto 5px -webkit-focus-ring-color; // sass-lint:disable-line no-duplicate-properties no-vendor-prefixes

                }

            }

        }

    }

}
info m-form-slide
visibility Preview code Output {php} { } Sass ( ) Javascript
Slide field
Range field
<div class="my-3"> Slide field<br>
	<div class="m-form-slide row jq_range">
		<div class="m-form-slide__column col-24 col-sm-auto order-sm-2">
			<input type="number" min="0" max="80" step="5" value="50" name="slide" id="frm-pc-form-slide" class="m-form-slide__control jq_range_control">
		</div>
		<div class="m-form-slide__column col-24 col-sm order-sm-1">
			<div class="m-form-slide__slider jq_range_slider"></div>
		</div>
	</div>
</div>

<div class="my-3"> Range field<br>
	<div class="m-form-slide row jq_range">
		<div class="m-form-slide__column col-12 col-md-auto order-md-1">
			<input type="number" min="0" max="80" step="5" value="0" name="range[]" id="frm-pc-form-range-&#039;1&#039;" class="m-form-slide__control jq_range_control">
		</div>
		<div class="m-form-slide__column col-12 col-md-auto order-md-3 text-right">
			<input type="number" min="0" max="80" step="5" value="80" name="range[]" id="frm-pc-form-range-&#039;2&#039;" class="m-form-slide__control jq_range_control">
		</div>
		<div class="m-form-slide__column col-24 col-md order-md-2">
			<div class="m-form-slide__slider jq_range_slider"></div>
		</div>
	</div>
</div>
@import "nouislider/andy-theme";

.m-form-slide {

    &__column {

        align-self: center;

    }

    &__control {

        text-align: center;

        @media(min-width: breakpoint-min(md)) {

            @include font-size(normal);
            padding: em(6.5px) em(10px);

        }

        .js & {

            appearance: textfield;

            // sass-lint:disable no-vendor-prefixes
            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {

                -webkit-appearance: none;
                margin: 0;

            }
            // sass-lint:enable no-vendor-prefixes

        }

    }

    &__slider {

        align-self: center;
        display: none;

        .js & {

            display: block;

        }

    }

}
import $ from 'jquery';

import noUiSlider from 'nouislider/distribute/nouislider';

export default class RangeSlide {
	constructor() {
		if (this.test()) {
			$('.jq_range').each(function() {
				var $el = {
					container: $(this),
					controls: $('.jq_range_control', $(this)),
					slider: $('.jq_range_slider', $(this))
				};

				var data = {
					values: []
				};

				$el.controls.each(function() {
					$el.control = this;

					data.min = parseFloat($el.control.min || 0);
					data.max = parseFloat($el.control.max || $el.control.maxlength);
					data.step = parseFloat($el.control.step || 1);

					data.values.push($el.control.value);
				});

				$el.noUiSlider = noUiSlider.create($el.slider[0], {
					start: data.values,
					connect: true,
					range: {
						'min': data.min,
						'max': data.max
					},
					step: data.step
				});

				$el.controls.on('input', function() {
					var values = [ null, null ],
						index = $.inArray(this, $el.controls);

					values[index] = $(this).val();

					$el.noUiSlider.set(values);
				});

				$el.noUiSlider.on('update', (values, handle) => {
					$el.controls.eq(handle).val(Math.round(values[handle]));
				});

				$el.noUiSlider.on('end', () => $el.controls.trigger('change'));
			});
		}
	}

	test() {
		return typeof noUiSlider !== 'undefined' ? true : false;
	}
}

$(() => new RangeSlide);
info m-form-upload
visibility Preview code Output {php} { } Sass ( ) Javascript
Upload maximum size 2 MB 
<div class="m-form-upload jq_upload">
	<input type="file" name="file" id="frm-pc-form-file" class="m-form-upload__input jq_upload_file">
	<span class="m-form-upload__control a-button jq_upload_control"> Upload </span>
	<span class="m-form-upload__note">maximum size 2 MB</span>
	<span class="m-form-upload__path jq_upload_path" data-text="Selected file: "></span>
</div>
@import "atoms/button/index";

.m-form-upload {

    $self: &;

    position: relative;

    &__input {

        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 19;

        &:hover {

            outline: none;

        }

        &.focus-visible {

            &:focus {

                + #{$self}__control {

                    outline: 1px dotted color('black');
                    outline: auto 5px -webkit-focus-ring-color; // sass-lint:disable-line no-duplicate-properties no-vendor-prefixes

                }

            }

        }

    }

    &__control {

        margin-right: em(10px);

    }

    &__path {

        &:not(:empty) {

            display: block;
            margin-top: em(10px);

            &:before {

                content: attr(data-text);

            }

        }

    }
}
import $ from 'jquery';

export default class Upload {
	constructor() {
		$('.jq_upload').each((i, el) => {
			var $el = {
				'container': $(el),
				'file': $('.jq_upload_file', el),
				'control': $('.jq_upload_control', el),
				'path': $('.jq_upload_path', el)
			};

			$el.control
				.on('keydown', (e) => {
					if (e.keyCode === 13 || e.keyCode === 32) {
						$el.file.focus();
					}
				})
				.on('click', () => {
					$el.file.focus();

					return false;
				});

			$el.file.on('change', () => {
				var value = $el.file.val();

				var filename = value.substring(
					value.lastIndexOf('\\') + 1
				);

				$el.path.html(typeof filename !== 'undefined' ? filename : value);
			});
		});
	}
}

$(() => new Upload);
info m-gallery
visibility Preview code Output {php} { } Sass
Popis videa (volitelně)

Popis videa (volitelně)

Popis obrázku (volitelně)

Popis obrázku (volitelně)

(3)
(4) 
<div class="m-gallery row">
	<div class="m-gallery__column col-sm-12 col-md-8 col-lg-6">
		<a href="https://placehold.it/1024x768/" title="Popis obrázku (volitelně)" class="m-gallery__item" rel="pswp">
			<img src="https://placehold.it/345x220" width="345" height="220" loading="lazy" class="m-gallery__thumb" alt="Popis videa (volitelně)">
			<i class="m-gallery__icon a-icon-play" aria-hidden="true"></i>
		</a>
		<p class="m-gallery__alt"> Popis videa (volitelně) </p>
	</div>
	<div class="m-gallery__column col-sm-12 col-md-8 col-lg-6">
		<a href="https://placehold.it/1024x768/" title="Popis obrázku (volitelně)" class="m-gallery__item" rel="pswp">
			<img src="https://placehold.it/345x220" width="345" height="220" loading="lazy" class="m-gallery__thumb" alt="Popis obrázku (volitelně)">
		</a>
		<p class="m-gallery__alt"> Popis obrázku (volitelně) </p>
	</div>
	<div class="m-gallery__column col-sm-12 col-md-8 col-lg-6">
		<a href="https://placehold.it/1024x768/" title="" class="m-gallery__item" rel="pswp">
			<img src="https://placehold.it/345x220" width="345" height="220" loading="lazy" class="m-gallery__thumb" alt="(3)">
		</a>
	</div>
	<div class="m-gallery__column col-sm-12 col-md-8 col-lg-6">
		<a href="https://placehold.it/1024x768/" title="" class="m-gallery__item" rel="pswp">
			<img src="https://placehold.it/345x220" width="345" height="220" loading="lazy" class="m-gallery__thumb" alt="(4)">
		</a>
	</div>
</div>
.m-gallery {

    &__item {

        @include text-underline(none);
        display: block;
        position: relative;

    }

    &__thumb {

        display: block;
        width: 100%;

    }

    &__icon {

        @include calc-size(font-size, 30px, 60px);
        color: color('white');
        left: 50%;
        margin: em(-50%);
        position: absolute;
        top: 50%;

    }

}
info m-hamburger
visibility Preview code Output {php} { } Sass 
<input type="checkbox" id="o-header-status" class="menu-status d-none jq_menu_status">

<header class="... menu-for-open">
	<label for="o-header-status" class="m-hamburger m-hamburger--border" style="display: block; text-align: left">
		<span class="m-hamburger__title">MENU</span>
		<span class="m-hamburger__icon"></span>
	</label>
</header>
$menu-status: '.menu-status:not(:disabled):checked + .menu-for-open' !global;

.m-hamburger {

    cursor: pointer;
    display: inline-block;
    position: relative;
    text-align: right;
    z-index: 10;

    &__icon {

        background: transparent;
        background-clip: padding-box;
        border-color: transparent;
        border-style: solid;
        border-width: em(19px 10px, 40px);
        box-shadow: inset em(0 0 0 1px, 40px);
        box-sizing: content-box;
        color: color('black');
        display: inline-block;
        font-size: 40px;
        height: em(2px, 40px);
        position: relative;
        transition: color 0s linear $base-transition;
        vertical-align: middle;
        width: em(20px, 40px);

        &:before,
        &:after {

            background: color('black');
            content: '';
            height: inherit;
            left: 0;
            transition: bottom $base-transition linear $base-transition, top $base-transition linear $base-transition, transform $base-transition;
            transform-origin: center;
            position: absolute;
            width: inherit;

        }

        &:before {

            top: em(-7px, 40px);

        }

        &:after {

            bottom: em(-7px, 40px);

        }

        #{$menu-status} & {

            border-color: color('white');
            color: color('white');
            transition: color 0s linear $base-transition;

            &:before,
            &:after {

                transition: bottom $base-transition, top $base-transition, transform $base-transition linear $base-transition;

            }

            &:before {

                top: 0;
                transform: rotate(45deg);

            }

            &:after {

                bottom: 0;
                transform: rotate(-45deg);

            }

        }

    }

    &--border &__icon {

        border-width: em(18px 9px, 40px);
        margin: em(1px, 40px);
        outline: em(1px, 40px) solid color('gray');

    }

    &__title {

        @include font-family(first, bold);
        @include font-size(small);
        color: color('black');
        margin-right: em(5px, small);
        opacity: 1;
        transition: opacity $base-transition;

        #{$menu-status} & {

            opacity: 0;

        }

    }

    @media(min-width: breakpoint-min($menu-breakpoint)) {

        display: none;

    }

}
info m-ico-button
visibility Preview code Output {php} { } Sass
button 
<a href="#" class="m-ico-button a-button">
	<i class="m-ico-button__icon icon-mail" aria-hidden="true"></i>
	<span class="m-ico-button__text">button</span>
</a>
@import "atoms/button/index";

.m-ico-button {

    $self: &;

    align-items: center;
    display: inline-flex !important; // sass-lint:disable-line no-important

    &__text {

        flex-grow: 1;

    }

    & #{$self}__icon {

        flex-basis: 0;
        vertical-align: baseline;

    }

}
info m-lang
visibility Preview code Output {php} { } Sass 
<input type="checkbox" id="language-status" class="d-none">

<div class="m-lang language-for-open">
	<ul class="m-lang__list">
		<li class="m-lang__item m-lang__item--active">
			<a hreflang="cs-CZ" href="./cz" rel="alternate" class="m-lang__link">
				<span class="m-lang__name">CZ</span>
			</a>
		</li>
		<li class="m-lang__item">
			<a hreflang="en-EN" href="./en" rel="alternate" class="m-lang__link">
				<span class="m-lang__name">EN</span>
			</a>
		</li>
		<li class="m-lang__item">
			<a hreflang="sk-SK" href="./sk" rel="alternate" class="m-lang__link">
				<span class="m-lang__name">SK</span>
			</a>
		</li>
	</ul>
	<label for="language-status" class="m-lang__link m-lang__control">
		<span class="m-lang__name">CZ</span>
		<i class="m-lang__caret" aria-hidden="true"></i>
	</label>
</div>
.m-lang {

    $self: &;
    $status: '#language-status:checked + .language-for-open';

    display: inline-block;
    vertical-align: middle;

    @media(min-width: breakpoint-min($menu-breakpoint)) {

        position: relative;

    }

    &__list {

        list-style: none;
        margin: 0;
        padding: 0;
        text-align: left;

        @media(min-width: breakpoint-min($menu-breakpoint)) {

            background: color('white');
            box-shadow: 0 0 em(8px) color('shadow');
            left: 0;
            max-height: 0;
            overflow: hidden;
            position: absolute;
            right: 0;
            top: 0;
            transition: max-height $base-transition ease-in, box-shadow $base-transition;
            z-index: 2;

        }

    }

    &__item {

        border-left: 1px solid color('gray');
        display: inline-block;
        margin: 0 0 0 15px;
        padding: 0 0 0 15px;

        @media(min-width: breakpoint-min($menu-breakpoint)) {

            border: 0;
            display: block;
            margin: 0;
            padding: 0;

            &--active {

                visibility: hidden;

            }

        }

    }

    &__control {

        display: none;

        @media(min-width: breakpoint-min($menu-breakpoint)) {

            position: relative;
            z-index: 3;

        }

    }

    &__caret {

        display: none;

        @media(min-width: breakpoint-min($menu-breakpoint)) {

            $caret-width: em(3px);

            @include caret($caret-width, down);
            display: inline-block;
            margin-left: $caret-width * .85;

            &:after {

                transition: transform $base-transition;

            }

        }

    }

    &__link {

        @include font-size(normal);
        @include text-underline(none);
        cursor: pointer;
        line-height: line-height(large);

        &,
        &:hover,
        &:focus {

            color: color('black');

        }

        @media(min-width: breakpoint-min($menu-breakpoint)) {

            display: block;
            margin: 5px 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }

    }

    @media (hover: none) {

        @at-root {

            #{$status} {

                #{$self}__list {

                    height: auto;
                    max-height: 160px;
                    transition: max-height $base-transition ease-out, box-shadow $base-transition;

                }

                #{$self}__caret {

                    &:after {

                        transform: rotate(-180deg);

                    }

                }

            }

        }

    }

    @media (hover: hover), all and (-ms-high-contrast: none) {// sass-lint:disable-line no-vendor-prefixes

        &:hover {

            #{$self}__list {

                height: auto;
                max-height: 160px;
                transition: max-height $base-transition ease-out, box-shadow $base-transition;

            }

            #{$self}__caret {

                &:after {

                    transform: rotate(-180deg);

                }

            }

        }

    }

}
info m-list
visibility Preview code Output {php} { } Sass
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  • Vivamus ac leo pretium faucibus
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  • Vivamus ac leo pretium faucibus
<ul class="m-list">
	<li class="m-list__item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
	<li class="m-list__item">Vivamus ac leo pretium faucibus</li>
	<li class="m-list__item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
	<li class="m-list__item">Vivamus ac leo pretium faucibus</li>
</ul>
.m-list {

    list-style: none;
    margin-left: 0;

}
info m-list-icon
visibility Preview code Output {php} { } Sass

  • Lorem ipsum dolor

    Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.

  • Fusce tellus Nunc

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

  • Fusce aliquam vestibulum

    Ut enim ad minima veniam, quis nostrum exercitationem ullam.

  • Lorem ipsum dolor

    Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.

  • Fusce tellus Nunc

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

  • Fusce aliquam vestibulum

    Ut enim ad minima veniam, quis nostrum exercitationem ullam.

<ul class="m-list-icon row">
	<li class="m-list-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner row">
			<div class="col-auto">
				<div class="m-list-icon__medium">
					<i aria-hidden="true" class="m-list-icon__char icon-star"></i>
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Lorem ipsum dolor </strong>
				</p>
				<p>Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.</p>
			</div>
		</div>
	</li>
	<li class="m-list-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner row">
			<div class="col-auto">
				<div class="m-list-icon__medium">
					<i aria-hidden="true" class="m-list-icon__char icon-life-buoy"></i>
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Fusce tellus Nunc </strong>
				</p>
				<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
			</div>
		</div>
	</li>
	<li class="m-list-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner row">
			<div class="col-auto">
				<div class="m-list-icon__medium">
					<i aria-hidden="true" class="m-list-icon__char icon-settings"></i>
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Fusce aliquam vestibulum </strong>
				</p>
				<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
			</div>
		</div>
	</li>
</ul>

<hr class="my-3">

<ul class="m-list-icon row">
	<li class="m-list-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner text-center">
			<div class="m-list-icon__medium">
				<i aria-hidden="true" class="m-list-icon__char icon-star"></i>
			</div>
			<p>
				<strong> Lorem ipsum dolor </strong>
			</p>
			<p>Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.</p>
		</div>
	</li>
	<li class="m-list-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner text-center">
			<div class="m-list-icon__medium">
				<i aria-hidden="true" class="m-list-icon__char icon-life-buoy"></i>
			</div>
			<p>
				<strong> Fusce tellus Nunc </strong>
			</p>
			<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
		</div>
	</li>
	<li class="m-list-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner text-center">
			<div class="m-list-icon__medium">
				<i aria-hidden="true" class="m-list-icon__char icon-settings"></i>
			</div>
			<p>
				<strong> Fusce aliquam vestibulum </strong>
			</p>
			<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
		</div>
	</li>
</ul>
.m-list-icon {

    list-style: none;

    &__medium {

        @include font-size(xx-large);
        border: 1px solid color('gray-light');
        border-radius: 50%;
        display: inline-block;
        padding: em(10px, xx-large);
    }

    & #{&}__char {

        align-items: center;
        box-sizing: content-box;
        display: flex;
        height: em(100%);
        justify-content: center;
        padding: em(10px, xx-large);
        text-align: center;
        width: em(100%);

        &:before {

            font-size: em(75%);
            vertical-align: middle;

        }

    }

}
info m-list-ol
visibility Preview code Output {php} { } Sass

  1. Lorem ipsum dolor

    Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.

  2. Fusce tellus Nunc

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

  3. Fusce aliquam vestibulum

    Ut enim ad minima veniam, quis nostrum exercitationem ullam.

  1. Lorem ipsum dolor

    Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.

  2. Fusce tellus Nunc

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

  3. Fusce aliquam vestibulum

    Ut enim ad minima veniam, quis nostrum exercitationem ullam.

<ol class="m-list-ol row">
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner row">
			<div class="col-auto">
				<div class="m-list-ol__medium">
					<i class="m-list-ol__char" aria-hidden="true"></i>
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Lorem ipsum dolor </strong>
				</p>
				<p>Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.</p>
			</div>
		</div>
	</li>
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner row">
			<div class="col-auto">
				<div class="m-list-ol__medium">
					<i class="m-list-ol__char" aria-hidden="true"></i>
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Fusce tellus Nunc </strong>
				</p>
				<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
			</div>
		</div>
	</li>
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner row">
			<div class="col-auto">
				<div class="m-list-ol__medium">
					<i class="m-list-ol__char" aria-hidden="true"></i>
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Fusce aliquam vestibulum </strong>
				</p>
				<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
			</div>
		</div>
	</li>
</ol>

<hr class="my-3">

<ol class="m-list-ol row">
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner text-center">
			<div class="m-list-ol__medium">
				<i class="m-list-ol__char" aria-hidden="true"></i>
			</div>
			<p>
				<strong> Lorem ipsum dolor </strong>
			</p>
			<p>Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.</p>
		</div>
	</li>
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner text-center">
			<div class="m-list-ol__medium">
				<i class="m-list-ol__char" aria-hidden="true"></i>
			</div>
			<p>
				<strong> Fusce tellus Nunc </strong>
			</p>
			<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
		</div>
	</li>
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner text-center">
			<div class="m-list-ol__medium">
				<i class="m-list-ol__char" aria-hidden="true"></i>
			</div>
			<p>
				<strong> Fusce aliquam vestibulum </strong>
			</p>
			<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
		</div>
	</li>
</ol>
.m-list-ol {

    counter-reset: ol;
    list-style: none;

    &__item {

        &:before {

            display: none;

        }

    }

    &__medium {

        @include font-size(xx-large);
        border: 1px solid color('gray-light');
        border-radius: 50%;
        display: inline-block;
        padding: em(10px, xx-large);

    }

    & #{&}__char {

        box-sizing: content-box;
        display: block;
        height: em(100%);
        line-height: 1;
        padding: em(10px, xx-large);
        text-align: center;
        width: em(100%);

        &:before {

            content: counter(ol);
            counter-increment: ol;
            display: inline-block;
            font-style: normal;

        }

    }

}
info m-list-thumb
visibility Preview code Output {php} { } Sass
  • Lorem ipsum dolor

    Lorem ipsum dolor

    Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.

  • Fusce tellus Nunc

    Fusce tellus Nunc

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

  • Fusce aliquam vestibulum

    Fusce aliquam vestibulum

    Ut enim ad minima veniam, quis nostrum exercitationem ullam.

  • Lorem ipsum dolor

    Lorem ipsum dolor

    Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.

  • Fusce tellus Nunc

    Fusce tellus Nunc

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

  • Fusce aliquam vestibulum

    Fusce aliquam vestibulum

    Ut enim ad minima veniam, quis nostrum exercitationem ullam.

<ul class="m-list-thumb row">
	<li class="m-list-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner row">
			<div class="col-auto">
				<div class="m-list-thumb__medium">
					<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Lorem ipsum dolor" class="m-list-thumb__file" loading="lazy">
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Lorem ipsum dolor </strong>
				</p>
				<p>Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.</p>
			</div>
		</div>
	</li>
	<li class="m-list-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner row">
			<div class="col-auto">
				<div class="m-list-thumb__medium">
					<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Fusce tellus Nunc" class="m-list-thumb__file" loading="lazy">
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Fusce tellus Nunc </strong>
				</p>
				<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
			</div>
		</div>
	</li>
	<li class="m-list-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner row">
			<div class="col-auto">
				<div class="m-list-thumb__medium">
					<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Fusce aliquam vestibulum" class="m-list-thumb__file" loading="lazy">
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Fusce aliquam vestibulum </strong>
				</p>
				<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
			</div>
		</div>
	</li>
</ul>

<hr class="my-3">

<ul class="m-list-thumb row">
	<li class="m-list-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner text-center">
			<div class="m-list-thumb__medium">
				<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Lorem ipsum dolor" class="m-list-thumb__file" loading="lazy">
			</div>
			<p>
				<strong> Lorem ipsum dolor </strong>
			</p>
			<p>Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.</p>
		</div>
	</li>
	<li class="m-list-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner text-center">
			<div class="m-list-thumb__medium">
				<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Fusce tellus Nunc" class="m-list-thumb__file" loading="lazy">
			</div>
			<p>
				<strong> Fusce tellus Nunc </strong>
			</p>
			<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
		</div>
	</li>
	<li class="m-list-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner text-center">
			<div class="m-list-thumb__medium">
				<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Fusce aliquam vestibulum" class="m-list-thumb__file" loading="lazy">
			</div>
			<p>
				<strong> Fusce aliquam vestibulum </strong>
			</p>
			<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
		</div>
	</li>
</ul>
.m-list-thumb {

    list-style: none;

    &__medium {

        border-radius: 50%;
        display: inline-block;

    }

    &__file {

        border-radius: 50%;
        display: block;
        height: auto;
        max-width: 3rem;

        @media(min-width: breakpoint-min(md)) {

            max-width: 10rem;

        }

    }

}
info m-nav-base
visibility Preview code Output {php} { } Sass 
<nav class="m-nav-base">
	<ul class="m-nav-base__list">
		<li class="m-nav-base__item m-nav-base__item--active">
			<a href="#" class="m-nav-base__link">Menu 01</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 02</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 03</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 04</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 05</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 06</a>
			<!-- Skip the closing tag -->
	</ul>
</nav>

<hr>

<nav class="m-nav-base m-nav-base--sep">
	<ul class="m-nav-base__list">
		<li class="m-nav-base__item m-nav-base__item--active">
			<a href="#" class="m-nav-base__link">Menu 01</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 02</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 03</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 04</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 05</a>
			<!-- Skip the closing tag -->
		<li class="m-nav-base__item">
			<a href="#" class="m-nav-base__link">Menu 06</a>
			<!-- Skip the closing tag -->
	</ul>
</nav>
.m-nav-base {

    overflow: hidden;

    &__list {

        display: inline-block;
        list-style: none;
        margin: em(-10px -5px);

    }

    &__item {

        display: inline-block;
        margin: em(10px) 0;
        padding-left: em(5px);
        padding-right: em(5px);
        vertical-align: middle;

    }

    &__link {

        @include text-underline(none);
        color: inherit;

    }

    &--sep &__list {

        margin-left: em(-30px);
        margin-right: em(-30px);

    }

    &--sep &__item {

        padding-left: em(30px);
        padding-right: em(30px);

    }

}
info m-nav-dropdown
visibility Preview code Output {php} { } Sass ( ) Javascript
Parent Item
Parent Item 
<div class="position-relative"> Parent Item <ul class="m-nav-dropdown jq_dropdown">
		<li class="m-nav-dropdown__item">
			<a href="#" class="m-nav-dropdown__link">Menu 01</a>
		</li>
		<li class="m-nav-dropdown__item m-nav-dropdown__item--parent">
			<a href="#" class="m-nav-dropdown__link">Menu 02</a>
			<ul class="m-nav-dropdown jq_dropdown">
				<li class="m-nav-dropdown__item">
					<a href="#" class="m-nav-dropdown__link">Menu 03</a>
				</li>
				<li class="m-nav-dropdown__item">
					<a href="#" class="m-nav-dropdown__link">Menu 04</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

<hr>

<div class="float-right position-relative"> Parent Item <ul class="m-nav-dropdown jq_dropdown">
		<li class="m-nav-dropdown__item">
			<a href="#" class="m-nav-dropdown__link">Menu 01</a>
		</li>
		<li class="m-nav-dropdown__item m-nav-dropdown__item--parent">
			<a href="#" class="m-nav-dropdown__link">Menu 02</a>
			<ul class="m-nav-dropdown jq_dropdown">
				<li class="m-nav-dropdown__item">
					<a href="#" class="m-nav-dropdown__link">Menu 03</a>
				</li>
				<li class="m-nav-dropdown__item">
					<a href="#" class="m-nav-dropdown__link">Menu 04</a>
				</li>
			</ul>
		</li>
	</ul>
</div>
.m-nav-dropdown {

    $self: &;

    border-right: 1px solid;
    color: color('gray');
    display: block;
    list-style: none;
    margin: space(1) 0 0;
    padding: 0 space(2) 0 0;

    & & {

        margin-top: space(1);
    }

    &__link {

        @include text-underline(none, underline);
        color: color('black');
        display: block;

        &:hover,
        &:focus,
        &--active {

            color: color('black');

        }

    }

    @media(min-width: breakpoint-min($menu-breakpoint)) {

        border: 0;
        left: 0;
        margin: 0;
        opacity: 0;
        padding: space(2) 0 0;
        position: absolute;
        text-align: left;
        top: 100%;
        transition: opacity $base-transition;
        visibility: hidden;
        width: 20rem;
        z-index: -1;

        :hover > & {

            opacity: 1;
            visibility: visible;
            z-index: 1;

        }

        @at-root {

            .no-js {

                #{$self} {

                    left: auto;
                    right: 0;

                    #{$self} {

                        left: auto;
                        right: 100%;

                    }

                }

            }

        }

        &[data-align="right"] {

            left: auto;
            right: 0;

            #{$self} & {

                left: auto;
                right: 100%;

            }

        }

        &__item {

            background: color('white');
            border: 1px solid;
            border-bottom: 0;
            border-top: 0;
            line-height: line-height(normal);
            margin: 0;
            padding: 0;

            &:last-child {

                border-bottom: 1px solid;

                #{$self}__link {

                    padding-bottom: em(20px);

                }

            }

            &--parent {

                position: relative;

                > #{$self}__link {

                    @include caret(3px, right);

                    &:after {

                        vertical-align: middle;
                    }

                }

            }

        }

        &__link {

            padding: em(15px 20px);

        }

        #{$self} {

            left: 100%;
            padding-top: 0;
            top: 0;

            #{$self}__item {

                &:first-child {

                    border-top: 1px solid;

                }

            }

            #{$self} {

                display: none;

            }

        }

    }

}
import $ from 'jquery';

export default class DropDown {
	constructor() {
		if (this.test()) {
			this.align();

			$(window).resize(this.align);
		}
	}

	test() {
		return $('.jq_dropdown').length ? true : false;
	}

	align() {
		var maxWidth = $(window).width();

		$('.jq_dropdown').each(function() {
			var $el = $(this);

			$el.removeAttr('data-align');

			if ($el.offset().left + $el.outerWidth() >= maxWidth) {
				$el.attr('data-align', 'right');
			}
		});
	}
}

$(window).on('load', () => new DropDown());
info m-nav-header
visibility Preview code Output {php} { } Sass ( ) Javascript 
<div class="position-relative">

	<nav class="m-nav-header">
		<ul class="m-nav-header__list">
			<li class="m-nav-header__item">
				<a href="#" class="m-nav-header__link m-nav-header__link--active">Menu 01</a>
				<!-- Skip the closing tag -->
			<li class="m-nav-header__item">
				<a href="#" class="m-nav-header__link">Menu 02</a>
				<ul class="m-nav-mega">
					<li class="m-nav-mega__item m-nav-mega__item--parent">
						<a href="#" class="m-nav-mega__link">Megamenu 01</a>
						<ul class="m-nav-mega">
							<li class="m-nav-mega__item">
								<a href="#" class="m-nav-mega__link">Menu 01</a>
							</li>
							<li class="m-nav-mega__item">
								<a href="#" class="m-nav-mega__link">Menu 02</a>
							</li>
						</ul>
					</li>
					<li class="m-nav-mega__item m-nav-mega__item--parent">
						<a href="#" class="m-nav-mega__link">Megamenu 02</a>
						<ul class="m-nav-mega">
							<li class="m-nav-mega__item">
								<a href="#" class="m-nav-mega__link">Menu 01</a>
							</li>
							<li class="m-nav-mega__item">
								<a href="#" class="m-nav-mega__link">Menu 02</a>
							</li>
						</ul>
					</li>
				</ul>
				<!-- Skip the closing tag -->
			<li class="m-nav-header__item m-nav-header__item--parent">
				<a href="#" class="m-nav-header__link">Menu 03</a>
				<ul class="m-nav-dropdown jq_dropdown">
					<li class="m-nav-dropdown__item">
						<a href="#" class="m-nav-dropdown__link">Menu 01</a>
					</li>
					<li class="m-nav-dropdown__item m-nav-dropdown__item--parent">
						<a href="#" class="m-nav-dropdown__link">Menu 02</a>
						<ul class="m-nav-dropdown jq_dropdown">
							<li class="m-nav-dropdown__item">
								<a href="#" class="m-nav-dropdown__link">Menu 03</a>
							</li>
							<li class="m-nav-dropdown__item">
								<a href="#" class="m-nav-dropdown__link">Menu 04</a>
							</li>
						</ul>
					</li>
				</ul>
				<!-- Skip the closing tag -->
			<li class="m-nav-header__item">
				<a href="#" class="m-nav-header__link">Menu 04</a>
				<!-- Skip the closing tag -->
		</ul>
	</nav>

</div>
@import "molecules/nav-dropdown/index";

@import "molecules/nav-mega/index";

.m-nav-header {

    font-size: 0;

    &__list {

        @include font-size(medium);
        color: color('black');
        list-style: none;

        @media(min-width: breakpoint-min($menu-breakpoint)) {

            @include font-size(small);
            display: inline-block;
            margin-left: em(-15px);
            margin-right: em(-15px);

        }

        @media(min-width: breakpoint-min(xl)) {

            @include font-size(normal);

        }

    }

    &__item {

        margin: em(10px) 0;

        @media(min-width: breakpoint-min($menu-breakpoint)) {

            display: inline-block;
            line-height: 40px;
            margin: 0;
            padding-left: em(15px);
            padding-right: em(15px);

        }

        &--parent {

            position: relative;

        }

    }

    &__link {

        @include text-underline(none, underline);
        color: color('black');
        display: block;

        &:hover,
        &:focus,
        &--active {

            color: color('black');

        }

    }

}
import 'molecules/nav-dropdown';
info m-nav-mega
visibility Preview code Output {php} { } Sass 
<header class="position-relative">
	<ul>
		<li class="float-left mt-0"> Default Style <ul class="m-nav-mega">
				<li class="m-nav-mega__item m-nav-mega__item--parent">
					<a href="#" class="m-nav-mega__link">Megamenu 01</a>
					<ul class="m-nav-mega">
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 01</a>
						</li>
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 02</a>
						</li>
					</ul>
				</li>
				<li class="m-nav-mega__item m-nav-mega__item--parent">
					<a href="#" class="m-nav-mega__link">Megamenu 02</a>
					<ul class="m-nav-mega">
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 03</a>
						</li>
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 04</a>
						</li>
					</ul>
				</li>
				<li class="m-nav-mega__item m-nav-mega__item--parent">
					<a href="#" class="m-nav-mega__link">Megamenu 03</a>
					<ul class="m-nav-mega">
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 05</a>
						</li>
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 06</a>
						</li>
					</ul>
				</li>
				<li class="m-nav-mega__item m-nav-mega__item--parent">
					<a href="#" class="m-nav-mega__link">Megamenu 04</a>
					<ul class="m-nav-mega">
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 07</a>
						</li>
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 08</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="float-left mt-0 ml-3"> Inline Style <ul class="m-nav-mega m-nav-mega--inline">
				<li class="m-nav-mega__item">
					<a href="#" class="m-nav-mega__link">Megamenu 01</a>
				</li>
				<li class="m-nav-mega__item">
					<a href="#" class="m-nav-mega__link">Megamenu 02</a>
				</li>
				<li class="m-nav-mega__item">
					<a href="#" class="m-nav-mega__link">Megamenu 03</a>
				</li>
				<li class="m-nav-mega__item">
					<a href="#" class="m-nav-mega__link">Megamenu 04</a>
				</li>
			</ul>
		</li>
	</ul>
</header>
.m-nav-mega {

    $self: &;

    border-right: 1px solid;
    color: color('gray');
    display: block;
    list-style: none;
    margin: space(1) 0 0;
    padding: 0 space(2) 0 0;

    & & {

        margin-top: space(1);

    }

    &__link {

        @include text-underline(none, underline);
        color: color('black');
        display: block;

        &:hover,
        &:focus,
        &--active {

            color: color('black');

        }

    }

    @media(min-width: breakpoint-min($menu-breakpoint)) {

        border: 0;
        display: none;
        flex-wrap: wrap;
        left: 0;
        margin: -1px 0 0;
        overflow: hidden;
        padding: space(2) 0 0;
        position: absolute;
        text-align: left;
        width: 100%;
        z-index: 1;

        &:after {

            background: color('white');
            border: 1px solid;
            border-top: 0;
            bottom: 0;
            content: '';
            left: 0;
            position: absolute;
            right: 0;
            top: space(2);
            z-index: -1;

        }

        :hover > & {

            display: flex;

        }

        &__item {

            flex-grow: 1;
            line-height: line-height(normal);
            margin: 0;
            padding: em(10px 20px);

            &--parent {

                #{$self}__item {

                    padding: 0;

                }

                > #{$self}__link {

                    @include font-family(first, bold);

                }

            }

        }

        &__link {

            padding: em(5px 0);

        }

        #{$self} {

            display: block;
            margin: 0;
            opacity: 1;
            padding: 0;
            position: static;
            visibility: visible;

            &:after {

                display: none;

            }

        }

        &--inline {

            justify-content: center;

            #{$self} {

                display: none;

                &__item {

                    flex-grow: unset;
                    padding: 0 space(1);

                }

            }

        }

    }

}
info m-pagination
visibility Preview code Output {php} { } Sass
1 2 3 … 10
« » 
<div class="m-pagination__wrap">
	<div class="m-pagination">
		<span class="m-pagination__i m-pagination__i--active"> 1 </span>
		<a href="#" class="m-pagination__i"> 2 </a>
		<a href="#" class="m-pagination__i"> 3 </a>
		<span class="m-pagination__i"> &hellip; </span>
		<a href="#" class="m-pagination__i"> 10 </a>
		<br class="m-pagination__break">
		<a rel="first" class="m-pagination__i m-pagination__i--first"> &laquo; </a>
		<a rel="prev" class="m-pagination__i m-pagination__i--prev"> &lsaquo; </a>
		<a href="#" rel="next" class="m-pagination__i m-pagination__i--next"> &rsaquo; </a>
		<a href="#" rel="last" class="m-pagination__i m-pagination__i---last"> &raquo; </a>
	</div>
</div>
.m-pagination {

    display: inline-block;
    font-size: 0;
    margin: space(1) * -1;

    &__wrap {

        text-align: center;

    }

    &__i {

        @include font-size(normal);
        @include text-underline(none);
        box-sizing: content-box;
        display: inline-block;
        line-height: em(38px);
        margin: space(1);
        padding: 0;
        text-align: center;
        transition: color $base-transition;
        width: em(38px);

        &#{&}--active {

            color: color('black');

        }

        &,
        &:hover {

            color: color('gray');

        }

        &[href] {

            &:hover,
            &:focus {

                color: color('black');

            }

        }

        @media(min-width: breakpoint-min(md)) {

            &--first,
            &--prev {

                float: left;

            }

        }

    }

    &__break {

        @media(min-width: breakpoint-min(md)) {

            display: none;

        }

    }

}
info m-partner-item
visibility Preview code Output {php} { } Sass
Mgr. John Doe

Mgr. John Doe

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="position: relative; width: 300px; z-index: 0">
	<div class="m-partner-item">
		<div class="m-partner-item__placeholder">
			<img src="https://placehold.it/100x100" srcset="https://placehold.it/100x100 1x, https://placehold.it/200x200 2x" width="100" height="100" alt="Mgr. John Doe" class="m-partner-item__thumb" loading="lazy">
			<div class="m-partner-item__border"></div>
		</div>
		<div class="m-partner-item__text">
			<p>
				<strong> Mgr. John Doe </strong>
			</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		</div>
	</div>
</div>
.m-partner-item {

    border-bottom: 1px solid color('gray-light');
    border-radius: $base-radius;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;

    &:link {

        @include text-underline(none);
        display: block;

    }

    &__border {

        border: 1px solid color('gray-light');
        border-bottom: 0;
        border-radius: $base-radius;
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        z-index: -1;

    }

    &__placeholder {

        display: inline-block;

        &:after {

            content: '';
            display: block;
            padding-bottom: 50%;

        }

    }

    &__thumb {

        margin-bottom: -50%;

    }

    &__text {

        padding: space(1);

        @media (min-width: breakpoint-min(md)) {

            padding: space(2);

        }

    }

}
info m-search
visibility Preview code Output {php} { } Sass 
<label for="search-status" data-auto-focus=".m-search__input">
	<i class="icon-search" aria-hidden="true"></i>
</label>

<input type="checkbox" id="search-status" class="d-none">

<div class="m-search search-for-open">
	<div class="m-search__window">
		<div class="m-search__container">
			<form action="." method="POST">
				<div class="row align-items-center">
					<div class="col-16 text-left">
						<label for="frm-pc-form-q">Search</label>
					</div>
					<div class="col-8 text-right">
						<label for="search-status" class="m-search__icon m-search__close">
							<span aria-hidden="true">&#10005;</span>
						</label>
					</div>
					<div class="col-24 jq_valid_input">
						<div class="m-search__block">
							<div class="w-100">
								<input placeholder="Type &amp; hit enter..." name="q" id="frm-pc-form-q" class="m-search__input a-form-input">
							</div>
							<span class="m-search__submit">
								<i class="m-search__icon icon-search" aria-hidden="true"></i>
								<input type="submit" class="m-search__action" name="action" id="frm-pc-form-action">
							</span>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
@import "atoms/form-input/index";

.m-search {

    $self: &;
    $status: '#search-status:checked + .search-for-open';

    display: inline-block;

    &__window {

        align-items: center;
        background: transparentize(color('white'), .2);
        display: flex;
        height: 100%;
        left: 100%;
        overflow: auto;
        padding: ($grid-gutter-width / 2);
        position: fixed;
        text-align: left;
        top: 0;
        transition: $base-transition;
        width: 100%;
        z-index: 11;

        #{$status} & {

            left: 0;

        }

    }

    &__container {

        margin-left: auto;
        margin-right: auto;
        max-width: map-get($container-max-widths, sm);
        padding-left: ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
        text-align: center;
        width: 100%;

    }

    &__block {

        border: 1px solid color('gray');
        display: table;
        font-size: 0;
        position: relative;
        transition: $base-transition margin;
        white-space: nowrap;
        width: 100%;

        > * {

            @include font-size(normal);
            display: table-cell;
            vertical-align: middle;

        }

    }

    & #{&}__input {

        border: 0;
        margin: 0;

        &:focus {

            box-shadow: none;

        }

    }

    &__submit {

        background: color('gray');
        border: 0;
        min-width: em(40px);
        padding: 0 em(15px);
        position: relative;
        text-align: center;
        transition: $base-transition color;

        &:hover {

            color: color('white');

        }

        @media(min-width: breakpoint-min(lg)) {

            @include font-size(large);
            min-width: em(70px, large);

        }

    }

    &__icon {

        @include font-size(large);
        display: inline-block;

    }

    &__close {

        cursor: pointer;
        transition: $base-transition color;

        &:hover,
        &:focus {

            box-shadow: none;
            color: color('black');

        }

    }

    &__action {

        background: transparent;
        color: transparent;
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        margin: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;

    }

}
info m-section
visibility Preview code Output {php} { } Sass

Section Title

Section Perex...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at. Sed convallis magna eu sem. Duis pulvinar.

Section Button
Section background 
<div id="section-anchor" class="a-anchor"></div>
<section class="m-section bg-gray-light">
	<div class="m-section__content container">
		<h2 class="m-section__title"> Section Title </h2>
		<p class="m-section__perex"> Section Perex...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at. Sed convallis magna eu sem. Duis pulvinar. </p>
		<div class="m-buttons text-center">
			<a href="#" class="a-button"> Section Button </a>
		</div>
	</div>
	<div class="m-section__background a-background a-background--cover a-background--center">
		<picture>
			<source
				srcset="https://placehold.it/767x600"
				media="(max-width: 767px)" />
			<source
				srcset="https://placehold.it/1920x1080" />
			<img
				src="https://placehold.it/1920x1080"
				width="1920"
				height="1080"
				loading="lazy"
				alt="Section background" />
		</picture>
	</div>
</section>
@import "atoms/background/index";

@import "atoms/button/index";

.m-section {

    padding: em(40px) 0;
    position: relative;
    z-index: 0;

    @media(min-width: breakpoint-min(lg)) {

        padding: em(60px) 0;

    }

    &__content {

        position: relative;

    }

    &__title {

        text-align: center;

    }

    &__perex {

        margin-left: auto;
        margin-right: auto;
        max-width: map-get($container-max-widths, 'md');
        text-align: center;

    }

    &-grow {

        flex: 1 0 auto;

    }

}
info m-social-icons
visibility Preview code Output {php} { } Sass 
<div id="snippet-pc-56-content">
	<div class="m-social-icons m-social-icons--inline">
		<ul class="m-social-icons__list">
			<li class="m-social-icons__item">
				<a href="#" class="m-social-icons__link" target="_blank">
					<i class="icon-twitter" aria-hidden="true"></i>
				</a>
				<!-- Skip the closing tag -->
			<li class="m-social-icons__item">
				<a href="#" class="m-social-icons__link" target="_blank">
					<i class="icon-facebook" aria-hidden="true"></i>
				</a>
				<!-- Skip the closing tag -->
			<li class="m-social-icons__item">
				<a href="#" class="m-social-icons__link" target="_blank">
					<i class="icon-linkedin-square" aria-hidden="true"></i>
				</a>
				<!-- Skip the closing tag -->
			<li class="m-social-icons__item">
				<a href="#" class="m-social-icons__link" target="_blank">
					<i class="icon-pinterest-p" aria-hidden="true"></i>
				</a>
				<!-- Skip the closing tag -->
			<li class="m-social-icons__item">
				<a href="#" class="m-social-icons__link" target="_blank">
					<i class="icon-google-plus" aria-hidden="true"></i>
				</a>
				<!-- Skip the closing tag -->
		</ul>
	</div>
</div>
.m-social-icons {

    overflow: hidden;

    &__list {

        @include font-size(large);
        display: inline-block;
        list-style: none;
        margin: em(-10px);

    }

    &__item {

        margin: em(10px);
    }

    &--inline &__item {

        display: inline-block;
        vertical-align: middle;

    }

    &__link {

        @include text-underline(none);
        color: inherit;

    }

}
info m-table
visibility Preview code Output {php} { } Sass ( ) Javascript
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy 
<div class="m-table jq_table">
	<table class="m-table__table">
		<thead class="m-table__head">
			<tr class="m-table__row">
				<th class="m-table__heading m-table__column">Company</th>
				<th class="m-table__heading m-table__column">Contact</th>
				<th class="m-table__heading m-table__column">Country</th>
			</tr>
		</thead>
		<tbody class="m-table__body">
			<tr class="m-table__row">
				<td class="m-table__column">Alfreds Futterkiste</td>
				<td class="m-table__column">Maria Anders</td>
				<td class="m-table__column">Germany</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Centro comercial Moctezuma</td>
				<td class="m-table__column">Francisco Chang</td>
				<td class="m-table__column">Mexico</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Ernst Handel</td>
				<td class="m-table__column">Roland Mendel</td>
				<td class="m-table__column">Austria</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Island Trading</td>
				<td class="m-table__column">Helen Bennett</td>
				<td class="m-table__column">UK</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Laughing Bacchus Winecellars</td>
				<td class="m-table__column">Yoshi Tannamuri</td>
				<td class="m-table__column">Canada</td>
			</tr>
			<tr class="m-table__row">
				<td class="m-table__column">Magazzini Alimentari Riuniti</td>
				<td class="m-table__column">Giovanni Rovelli</td>
				<td class="m-table__column">Italy</td>
			</tr>
		</tbody>
	</table>
</div>
.m-table {

    $self: &;
    $scroll-bar-color: color('gray-dark-extra');
    $scroll-bar-height: 1px;
    $scroll-caption-height: 38px;

    border-left: 1px solid color('gray');
    margin-bottom: space(2);
    margin-top: space(2);
    overflow-x: auto;

    &:first-child {

        margin-top: 0;

    }

    &:last-child {

        margin-bottom: 0;

    }

    &::-webkit-scrollbar { // sass-lint:disable-line no-vendor-prefixes

        background: color('gray-light');
        height: $scroll-bar-height;

    }

    &::-webkit-scrollbar-thumb { // sass-lint:disable-line no-vendor-prefixes

        background: $scroll-bar-color;

    }

    &.on {

        border-image: linear-gradient(to top, transparentize(color('gray'), 1) ($scroll-caption-height + 2), color('gray') ($scroll-caption-height + 2));
        border-image-slice: 1;

        #{$self}__scroll {

            @include font-size(mini);
            align-items: center;
            color: color('gray-dark');
            display: flex;
            height: $scroll-caption-height;
            justify-content: center;
            left: 0;
            line-height: line-height(large);
            position: sticky;
            padding: 10px 0;
            top: 0;

            &:before {

                background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='20'%3E%3Cpath fill='%23cecece' d='M1.5.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm4 0a1.5 1.5 0 000 3H8V11.72l-1.719-1.185-.076-.035a2.437 2.437 0 00-2.783.523L2.074 12.44l5.012 6.147.035.035a3.002 3.002 0 002.121.879H16c1.645 0 3-1.355 3-3V9.693c0-.97-.713-1.813-1.67-1.972h-.002L11 6.666V2A1.5 1.5 0 009.5.5h-4zM10 8.527l7 1.168V16.5c0 .565-.435 1-1 1H9.242a.995.995 0 01-.695-.287L4.738 12.54l.131-.137a.416.416 0 01.473-.088L10 15.53V8.527z'/%3E%3C/svg%3E") no-repeat center;
                background-size: 19px 20px;
                content: '';
                display: inline-block;
                height: 20px;
                margin: -3px 10px 0 0;
                vertical-align: middle;
                width: 19px;

            }

        }

    }

    &__scroll {

        display: none;

    }

    &__append {

        background: color('white');
        border: 1px solid color('gray');
        border-left: 0;
        border-top: 0;
        left: 0;
        padding: 25px 10px;
        position: sticky;
        text-align: center;
        top: 0;

    }

    & #{$self} {

        &__table {
            border-left: 0;
            margin: 0;
            min-width: 600px;
        }

        &__column {
            border-bottom: 1px solid color('gray');
            border-right: 1px solid color('gray');
        }
    }
}
import $ from 'jquery';

$(() => {
	var windowWidth = $(window).width();

	$('.jq_table').each(function() {
		var $el = {
			table: $(this),
			selects: $('.jq_table_select', this)
		};

		var i18n = typeof table_i18n !== 'undefined' ? table_i18n : { scroll: 'Drag to side to scroll table' }; // eslint-disable-line

		$(this)
			.append('<div class="m-table__scroll">' + i18n.scroll + '</div>');

		setTableOverflow($(this));

		$el.selects.on('change', function() {
			if ($(this).attr('id') === 'select-all') {
				$el.selects.not(this).prop('checked', this.checked);
			} else {
				$el.selects.filter('#select-all').prop('checked',
					($el.selects
					.not('#select-all')
					.filter(':checked').length === $el.selects.not('#select-all').length)
				);
			}
		});
	});

	$(window).on('resize', () => {
		windowWidth = $(window).width();

		$('.jq_table').each(function() {
			setTableOverflow($(this));
		});
	});

	function setTableOverflow($table) {
		$table.width('auto');

		var tableWidth = $table[0].offsetWidth;
		var scrollWidth = $table[0].scrollWidth;

		if (tableWidth < scrollWidth) {
			$table.addClass('on');
			if (windowWidth <= 991) {
				$table.width(windowWidth - $table.offset().left + 1);
			}
		} else {
			$table.removeClass('on');
		}
	}
});
info m-toggle
visibility Preview code Output {php} { } Sass

Proin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida dolor sit amet lacus. Acumsan et viverra justo commodoProin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida gravida dolor sit amet lacus accumsan et viverra justo commodo msan et viverra justo commodo Proin gravida dolor sit amet lacus accumsan et viverra justo commodo

<div class="m-toggle">
	<input type="checkbox" id="m-toggle-unique-id-item-1" name="m-toggle-unique-id[]" aria-hidden="true" class="m-toggle__control sr-only">

	<label class="m-toggle__label" for="m-toggle-unique-id-item-1">
		<span class="m-toggle__title">Lorem ipsum dolor sit amet adipiscing</span>

		<span class="m-toggle__arrow">
			+
		</span>
	</label>

	<div class="m-toggle__panel">
		<div class="m-toggle__content">
			<p>Proin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida dolor sit amet lacus. Acumsan et viverra justo commodoProin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida gravida dolor sit amet lacus accumsan et viverra justo commodo msan et viverra justo commodo Proin gravida dolor sit amet lacus accumsan et viverra justo commodo</p>
		</div>
	</div>
</div>
.m-toggle {

    $self: &;

    border: 1px solid color('gray');

    + #{&} {

        margin-top: space(1);

    }

    &__label {

        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: space(1) space(2);

        @media(min-width: breakpoint-min(md)) {

            padding: space(2) space(3);

        }

    }

    &__title {

        align-self: center;
        flex-basis: 0;
        flex-grow: 1;
        margin: 0;
        max-width: 100%;

    }

    &__arrow {

        @include font-size(large);
        align-self: center;
        flex: 0 0 auto;
        display: inline-block;
        line-height: line-height(small);
        max-width: none;
        text-align: right;
        transition: $base-transition;
        vertical-align: middle;
        width: auto;

    }

    &__panel {

        display: block;
        height: auto;
        max-height: 0;
        overflow-y: hidden;
        transition: max-height .5s ease-out;

    }

    &__content {

        border-top: 1px solid color('gray');
        padding: space(2);

        @media(min-width: breakpoint-min(md)) {

            padding: space(3);

        }

    }

    &__control {

        &:checked {

            + #{$self}__label {

                #{$self}__arrow {

                    transform: rotate(45deg);

                }

                + #{$self}__panel {

                    max-height: 80rem;

                }

            }

            &[type="radio"] {

                + #{$self}__label {

                    cursor: default;

                }

            }

        }

    }

}