Swegon Component Library

Top Bar 

<div class="top-bar">
    <div class="top-bar__inner">
        <div class="top-bar__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper neque non metus ultrices, sed posuere est consequat. Morbi eget est sem. Quisque consectetur elit quis mauris mattis vulputate. In suscipit commodo fermentum. Nam turpis felis, ornare eget euismod sit amet, facilisis a libero. Proin a magna pretium, scelerisque tortor molestie, rutrum libero. Curabitur nec laoreet magna. Suspendisse congue eu sapien a vehicula. Pellentesque finibus eleifend turpis. Praesent semper, lorem vulputate pretium auctor, justo sem volutpat mauris, a fermentum mi ligula sit amet nisi. Sed non quam et velit interdum lacinia. Proin tincidunt commodo ligula. In ante purus, dapibus ac sem nec, blandit fringilla odio. Integer vehicula dui ac quam semper bibendum.</p>
        </div>
        <button class="top-bar__close">
            <svg class="icon top-bar__icon" focusable="false">
                <use xlink:href="#icon-close"></use>
            </svg>
            <span class="top-bar__label">Stäng</span>
        </button>
    </div>
</div>
 
<div class="top-bar">
    <div class="top-bar__inner">
        <div class="top-bar__content">
            {{#>@partial-block}}
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper neque non metus ultrices, sed posuere est consequat. Morbi eget est sem. Quisque consectetur elit quis mauris mattis vulputate. In suscipit commodo fermentum. Nam turpis felis, ornare eget euismod sit amet, facilisis a libero. Proin a magna pretium, scelerisque tortor molestie, rutrum libero. Curabitur nec laoreet magna. Suspendisse congue eu sapien a vehicula. Pellentesque finibus eleifend turpis. Praesent semper, lorem vulputate pretium auctor, justo sem volutpat mauris, a fermentum mi ligula sit amet nisi. Sed non quam et velit interdum lacinia. Proin tincidunt commodo ligula. In ante purus, dapibus ac sem nec, blandit fringilla odio. Integer vehicula dui ac quam semper bibendum.</p>
            {{/@partial-block}}
        </div>
        <button class="top-bar__close" {{{getattributes attributes}}}>
            {{> @icon id="close" additionalClasses="top-bar__icon" }}
            <span class="top-bar__label">Stäng</span>
        </button>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    import getEvent from '../../functions/getEvent';

class TopBar {
    constructor (el) {
        this.el = el;
        this.button = this.el.querySelector('.top-bar__close');
        this.onClick = this.onClick.bind(this);

        this.init();
    }

    onClick (e) {
        e.preventDefault();
        this.button.removeEventListener('click', this.onClick);
        this.hide();
    }

    hide() {
        const header = this.el.parentNode.querySelector('.header');
        this.el.classList.add('top-bar--hidden');

        // Recalculate header
        header && header.dispatchEvent(getEvent('recalculate'));
    }

    init() {
        this.button && this.button.addEventListener('click', this.onClick);
    }
};

export default TopBar;
  • URL: /components/raw/top-bar/TopBar.js
  • Filesystem Path: src/components/top-bar/TopBar.js
  • Size: 745 Bytes
  • Content: 
    import TopBar from './TopBar.js';
const els = document.querySelectorAll('.top-bar');

for (let el of els) {
    new TopBar(el);
}
  • URL: /components/raw/top-bar/index.js
  • Filesystem Path: src/components/top-bar/index.js
  • Size: 130 Bytes
  • Content: 
    .top-bar {
    background-color: $color-green-pale;

    &--hidden {
        display: none;
    }
}

.top-bar__inner {
    position: relative;
    margin: 0 auto;
    max-width: $site-content-width;
    padding: size(8) size(2) size(3);

    @include breakpoint($m) {
        padding: size(8) size(2) size(3) size(4);
    }

    @include breakpoint($l) {
        padding: size(4) size(10) size(4) size(4);
    }

}

.top-bar__close {
    position: absolute;
    top: size(0.75);
    right: size(2);
    padding: size(1);
    outline: none;
    background: transparent;
    border: 0;

    @include breakpoint($l) {
        top: size(3);
        right: size(2);
    }
}

.top-bar__icon {
    fill: $color-black;
    width: size(3);
    height: size(3);
    margin: 0 auto;
}

.top-bar__label {
    display: block;
    text-align: center;
    font-size: size(1.25);
}
  • URL: /components/raw/top-bar/top-bar.scss
  • Filesystem Path: src/components/top-bar/top-bar.scss
  • Size: 866 Bytes

No notes defined.