ankedsgn

(function ($, Drupal, drupalSettings) {

  Drupal.behaviors.progressBar = {
    attach: function (context) {

      //add a listener for scroll
      $(window).scroll(() => {

        if (document.querySelector('.js-progress-bar').length) {
          const ProgressText = document.querySelector('.progress-bar__text');

ankedsgn

$(function() {
  $(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
      return;
    }

ankedsgn

// Bouncing link 

a:hover {
   animation: bounce .7s  ease-in-out;
}

   
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-5px);}

ankedsgn

{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
    {% import _self as menus %}

ankedsgn

(function ($, Drupal) {

  $(window).on('scroll', function () {;
    scrollingSwitch();
    // console.log('scrolling scrolling scrolling');
  });



  function scrollingSwitch() {

ankedsgn

<div class="article__copy-link__container">
    <div class="button--group-message article__copy-link js-copy-wrap">
        <a class="button button--secondary button--icon button--icon-left button--has-message button--copy-link js-copy-link" href="#">
            {{ 'Copy the link'|t }}
            <svg class="icon icon--link">
                <use xlink:href="#icon-link"/>
            </svg>
        </a>
        <div class="button__message js-copy-message">
            {{ 'Link copied to clipboard'|t }}

ankedsgn

{% set classes = [
  'paragraph',
  'paragraph--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  not paragraph.isPublished() ? 'paragraph--unpublished',
  'grid grid--medium image-overlay',
  grid_medium
] %}

ankedsgn

 $('.training-index__filters-form-inner .form-checkbox').each(function () {
        if (this.checked) {
          // console.log('YES');
          $(this).parents('.fieldset-wrapper').show();
          $(this).parents('fieldset legend').toggleClass('is-open');
        }
      });

ankedsgn

{% set currenturl =  url('<current>')|render|render %}

  <select class="nav-top-level__select" name="nav-select" id="structure-nav-select" onchange="navSelect(value);">
    {% for item in menu %}
      <option value="{{ item.url }}" {% if item.url in currenturl %} selected {% endif %}>{{ item.text }}</option>
    {% endfor %}
  </select>

ankedsgn

// http://hugogiraudel.com/2016/10/13/css-hide-and-seek/ Screenreaders-only sr-only
.invisible-accessible, .sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;