mrtag23

<p>This is normal paragraph text with some <u>underlined</u>, <s>strikethrough</s>,  <strong>bold</strong>and <em>italic</em>text. You can also use <a href="http://example.com/">links</a> to redirect people to other <a href="http://example.com/">places</a>. There are also headings you could use:</p>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

mrtag23

/*
  Creates a focus trap inside the specified trap wrapper element.
  - trapWrapper: DOM node inside which the focus should be trapped.
  - customFocusableFirst: a custom DOM node(usually outside the trapWrapper)
    which should be treated as a first focusable element.
  - customFocusableLast: a custom DOM node(usually outside the trapWrapper)
    which should be treated as the last focusable element.
  - closeButton: DOM node, if provided will be used to remove focus trap event listeners.
  - customEventContainer - DOM node container to be used as event listener.
 */

mrtag23

function trapFocus(element, namespace) {
    var focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'),
        firstFocusableEl = focusableEls[0];  
        lastFocusableEl = focusableEls[focusableEls.length - 1];
        KEYCODE_TAB = 9;

    element.addEventListener('keydown', function(e) {
        var isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB);

        if (!isTabPressed) { 

mrtag23

var focusable = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
var firstFocusable = focusable[0];
var lastFocusable = focusable[focusable.length - 1];

mrtag23

{
  "breakpoints": {
    "desktop": "all and (min-width: 1200px)",
    "tablet": "all and (min-width: 768px) and (max-width: 1199px)",
    "mobile": "all and (max-width: 767px)"
  }
}

mrtag23

$(function(){
  var wrapper = document.getElementsByClassName('thewrapper')[0];

  wrapper.addEventListener('focusout', function(event) {
    if (wrapper.contains(event.relatedTarget)) {
        return;
    }
    console.log('out of the wrapper');
  });
})

mrtag23

{#
/**
 * @file
 * Theme override of a responsive image.
 *
 * Available variables:
 * - sources: The attributes of the <source> tags for this <picture> tag.
 * - img_element: The controlling image, with the fallback image in srcset.
 * - output_image_tag: Whether or not to output an <img> tag instead of a
 *   <picture> tag.

mrtag23

// Use this for creating scalable elements (usually images / background images) that maintain a ratio.
// USAGE: @include responsive-ratio(16,9);
@mixin responsive-ratio($x,$y) {
  height: 0;
  padding-bottom: percentage($y / $x);
}

mrtag23

  // Adjusts top offset depending on additional fixed positioned elements.
  var windowOffsetAdjust = function() {
    if ($window.width() < 1200) {
      if ($body.hasClass('toolbar-vertical')) {
        return 0;
      } else {
        // Adds header height.
        return 60;
      }
    } else {

mrtag23

(function ($) {
  // Alter chosen markup for dropdowns with icons.
  $('.dropdown--hasIcons .dropdown__select').on('chosen:showing_dropdown', function (event, data) {
    // Since items are not initially created in DOM we will alter the markup on dropdown show.
    var resultsData = data.chosen.results_data,
      $dropdownItems = data.chosen.dropdown.find('li');

    resultsData.forEach(function (result, i) {
      $dropdownItems.eq(i).prepend('<i class="dropdown__icon dropdown__icon-' + result.value + '"></i>')
    });