j1-template 2020.0.3 → 2020.0.4

data/lib/starter_web/assets/themes/j1/adapter/js/navigator.js

@@ -72,8 +72,6 @@ regenerate:                             true
 {% assign nav_quicklinks_settings       = navigator_settings.nav_quicklinks %}
 {% assign nav_topsearch_defaults        = navigator_defaults.nav_topsearch %}
 {% assign nav_topsearch_settings        = navigator_settings.nav_topsearch %}
-{% assign nav_sidebar_defaults          = navigator_defaults.nav_sidebar %}
-{% assign nav_sidebar_settings          = navigator_settings.nav_sidebar %}
 {% assign nav_authclient_defaults       = authentication_defaults.auth_client %}
 {% assign nav_authclient_settings       = authentication_settings.auth_client %}
 
@@ -84,12 +82,10 @@ regenerate:                             true
 {% assign nav_menu_options              = nav_menu_defaults | merge: nav_menu_settings %}
 {% assign quicklinks_options            = nav_quicklinks_defaults | merge: nav_quicklinks_settings %}
 {% assign topsearch_options             = nav_topsearch_defaults | merge: nav_topsearch_settings %}
-{% assign sidebar_options               = nav_sidebar_defaults | merge: nav_sidebar_settings %}
 {% assign authclient_options            = nav_authclient_defaults | merge: nav_authclient_settings %}
 
 {% assign nav_bar_id                    = navigator_defaults.nav_bar.id %}
 {% assign nav_menu_id                   = navigator_defaults.nav_menu.id %}
-{% assign nav_sidebar_id                = navigator_defaults.nav_sidebar.id %}
 {% assign nav_quicklinks_id             = navigator_defaults.nav_quicklinks.id %}
 {% assign nav_navbar_media_breakpoint   = navigator_defaults.nav_bar.media_breakpoint %}
 {% assign authclient_modals_id          = navigator_defaults.nav_authclient.xhr_container_id %}
@@ -142,14 +138,12 @@ j1.adapter['navigator'] = (function (j1, window) {
 
   var nav_menu_id                 = '{{nav_menu_id}}';
   var nav_quicklinks_id           = '{{nav_quicklinks_id}}';
-  var nav_sidebar_id              = '{{nav_sidebar_id}}';
   var authclient_modals_id        = '{{authclient_modals_id}}';
 
   var colors_data_path            = '{{template_config.colors_data_path}}';
   var font_size_data_path         = '{{template_config.font_size_data_path}}';
   var nav_menu_data_path          = '{{nav_menu_options.data_path}}';
   var nav_quicklinks_data_path    = '{{quicklinks_options.data_path}}';
-  var nav_sidebar_data_path       = '{{sidebar_options.data_path}}';
   var authclient_modals_data_path = '{{authclient_options.xhr_data_path}}';
 
   var cookie_names                = j1.getCookieNames();
@@ -206,13 +200,11 @@ j1.adapter['navigator'] = (function (j1, window) {
       var navMenuConfig                             = {};
       var navQuicklinksConfig                       = {};
       var navTopsearchConfig                        = {};
-      var navSidebarConfig                          = {};
       var navAuthClientConfig                       = {};
       var navBarOptions                             = {};
       var navMenuOptions                            = {};
       var navQuicklinksOptions                      = {};
       var navTopsearchOptions                       = {};
-      var navSidebarOptions                         = {};
       var navAuthClientOptions                      = {};
       var navAuthMAnagerConfig                      = {};
 
@@ -221,7 +213,6 @@ j1.adapter['navigator'] = (function (j1, window) {
       navMenuConfig                                 = $.extend({}, {{nav_menu_options | replace: '=>', ':' }});
       navQuicklinksConfig                           = $.extend({}, {{quicklinks_options | replace: '=>', ':' }});
       navTopsearchConfig                            = $.extend({}, {{topsearch_options | replace: '=>', ':' }});
-      navSidebarConfig                              = $.extend({}, {{sidebar_options | replace: '=>', ':' }});
       navAuthClientConfig                           = $.extend({}, {{authclient_options | replace: '=>', ':' }});
 
       navAuthMAnagerConfig                          = $.extend({}, {{authentication_options | replace: '=>', ':' }});
@@ -234,7 +225,6 @@ j1.adapter['navigator'] = (function (j1, window) {
       navMenuOptions                                = j1.mergeData(navMenuConfig, navDefaults.nav_menu);
       navQuicklinksOptions                          = j1.mergeData(navQuicklinksConfig, navDefaults.nav_quicklinks);
       navTopsearchOptions                           = j1.mergeData(navTopsearchConfig, navDefaults.nav_topsearch);
-      navSidebarOptions                             = j1.mergeData(navSidebarConfig, navDefaults.nav_sidebar);
       navAuthClientConfig                           = j1.mergeData(navAuthClientConfig, navDefaults.nav_authclient);
 
       // save config settings into the navigator object for global access
@@ -244,7 +234,6 @@ j1.adapter['navigator'] = (function (j1, window) {
       j1.adapter.navigator['navMenuOptions']        = navMenuOptions;
       j1.adapter.navigator['navQuicklinksOptions']  = navQuicklinksOptions;
       j1.adapter.navigator['navTopsearchOptions']   = navTopsearchOptions;
-      j1.adapter.navigator['navSidebarOptions']     = navSidebarOptions;
       j1.adapter.navigator['navAuthClientConfig']   = navAuthClientConfig;
       j1.adapter.navigator['navAuthManagerConfig']  = navAuthMAnagerConfig;
 
@@ -260,27 +249,22 @@ j1.adapter['navigator'] = (function (j1, window) {
       // -----------------------------------------------------------------------
       logger.info('run deferred data load');
       $.when (
-        j1.xhrData (// sidebar
-          'j1.adapter.navigator', {
-          xhr_container_id: navSidebarOptions.xhr_container_id,
-          xhr_data_path:    navSidebarOptions.xhr_data_path },
-          null),
-        j1.xhrData (// quicklinks
+        j1.xhrData ( // quicklinks
           'j1.adapter.navigator', {
           xhr_container_id: navQuicklinksOptions.xhr_container_id,
           xhr_data_path:    navQuicklinksOptions.xhr_data_path },
           null),
-        j1.xhrData (// authclient
+        j1.xhrData ( // authclient
           'j1.adapter.navigator', {
           xhr_container_id: navAuthClientConfig.xhr_container_id,
           xhr_data_path:    navAuthClientConfig.xhr_data_path },
           null),
-        j1.xhrData (// menubar
+        j1.xhrData ( // menubar
           'j1.adapter.navigator', {
           xhr_container_id: navMenuOptions.xhr_container_id,
           xhr_data_path:    navMenuOptions.xhr_data_path },
           'data_loaded'))
-      .done (function (sideBar, quickLinks, authclient, menuBar) {
+      .done (function (quickLinks, authclient, menuBar) {
         // ---------------------------------------------------------------------
         // core initializer
         // ---------------------------------------------------------------------
@@ -330,8 +314,7 @@ j1.adapter['navigator'] = (function (j1, window) {
                 logger.info('apply styles');
                 _this.setCSS (
                   navBarOptions, navMenuOptions,
-                  navQuicklinksOptions, navTopsearchOptions,
-                  navSidebarOptions
+                  navQuicklinksOptions, navTopsearchOptions
                 );
 
                 logger.info('init auth client');
@@ -375,12 +358,12 @@ j1.adapter['navigator'] = (function (j1, window) {
 
     // -------------------------------------------------------------------------
     // Initialize JS portion for the dialogs (modals) used by J1AuthClient
-    // NOTE: Currently cookie|sidebar updates NOT processed at the NAV module
+    // NOTE: Currently cookie updates NOT processed at the NAV module
     //       All updates on Cookies are managed by Cookie Consent.
     //       To be considered to re-add cookie updates for the auth state
     // -------------------------------------------------------------------------
     initAuthClient: function(auth_config) {
-      var logger      = log4javascript.getLogger('j1.adapter.navigator.initAuthClient');
+      var logger        = log4javascript.getLogger('j1.adapter.navigator.initAuthClient');
       var user_session  = j1.readCookie(cookie_user_session_name);
 
       _this.modalEventHandler(auth_config);
@@ -532,7 +515,7 @@ j1.adapter['navigator'] = (function (j1, window) {
     // setCSS
     // Set dynamic CSS styles
     // -------------------------------------------------------------------------
-    setCSS: function (navBarOptions, navMenuOptions, navQuicklinksOptions, navTopsearchOptions, navSidebarOptions) {
+    setCSS: function (navBarOptions, navMenuOptions, navQuicklinksOptions, navTopsearchOptions) {
       var logger              = log4javascript.getLogger("j1.adapter.navigator.setCSS");
       var gridBreakpoint_lg   = '992px';
       var gridBreakpoint_md   = '768px';
@@ -577,9 +560,6 @@ j1.adapter['navigator'] = (function (j1, window) {
       navTopsearchOptions.input_color                 = j1.setColorData(navTopsearchOptions.input_color);
       navTopsearchOptions.background_color            = j1.setColorData(navTopsearchOptions.background_color);
 
-      {% comment %} Set|Resolve navSidebarOptions
-      -------------------------------------------------------------------------- {% endcomment %}
-      navSidebarOptions.background_color              = j1.setColorData(navSidebarOptions.background_color);
 
       {% comment %} Set dymanic styles
       -------------------------------------------------------------------------- {% endcomment %}
@@ -676,10 +656,6 @@ j1.adapter['navigator'] = (function (j1, window) {
       $('head').append("<style>.top-search .input-group-addon { color: " +navTopsearchOptions.input_color+ " !important; }</style>");
       $('head').append("<style>.top-search .input.form-control { color: " +navTopsearchOptions.input_color+ " !important; }</style>");
 
-      {% comment %} navSidebar styles
-      -------------------------------------------------------------------------- {% endcomment %}
-      $('head').append("<style>.side { background-color: " +navSidebarOptions.background_color+ " !important; }</style>");
-
       return true;
     }, // END setCSS
 

data/lib/starter_web/assets/themes/j1/adapter/js/toccer.js

@@ -188,41 +188,45 @@ j1.adapter['toccer'] = (function () {
       _this.setState('running');
       logger.info('state: ' + _this.getState());
 
-
-      var bg_primary = j1.getStyleValue('bg-primary', 'background-color');
-
-      tocbot.init({
-        log:                    {{ toccer_options.log | json }},
-        activeLinkColor:        {{ toccer_options.activeLinkColor | json }},
-        tocSelector:            {{ toccer_options.tocSelector | json }},
-        headingSelector:        {{ toccer_options.headingSelector | json }},
-        ignoreSelector:         {{ toccer_options.ignoreSelector | json }},
-        contentSelector:        {{ toccer_options.contentSelector | json }},
-        collapseDepth:          settings.collapseDepth,
-        throttleTimeout:        {{ toccer_options.throttleTimeout | json }},
-        includeHtml:            false,
-        linkClass:              'toc-link',
-        extraLinkClasses:       '',
-        activeLinkClass:        'is-active-link',
-        listClass:              'toc-list',
-        extraListClasses:       '',
-        isCollapsedClass:       'is-collapsed',
-        collapsibleClass:       'is-collapsible',
-        listItemClass:          'toc-list-item',
-        positionFixedSelector:  '',
-        positionFixedClass:     'is-position-fixed',
-        fixedSidebarOffset:     'auto',
-        smoothScroll:           {{ toccer_options.smoothScrollEnabled | json }},
-        smoothScrollOffset:     {{ toccer_options.smoothScrollOffset | json }},
-        smoothScrollDuration:   {{ toccer_options.smoothScrollDuration | json }},
-        headingsOffset:         {{ toccer_options.headingsOffset | json }},
-        throttleTimeout:        {{ toccer_options.throttleTimeout | json }}
-      });
-
-      if (tocbot.options.log == true) {
-        // Writes all of the current option settings to JS console
-        console.log(tocbot.options);
-      }
+      // jadams, 2020-06-23: TODO, tocbot should be fired if page|mmenu
+      //                     is ready
+      //
+      setTimeout (function () {
+        var bg_primary = j1.getStyleValue('bg-primary', 'background-color');
+
+        tocbot.init({
+          log:                    {{ toccer_options.log | json }},
+          activeLinkColor:        {{ toccer_options.activeLinkColor | json }},
+          tocSelector:            {{ toccer_options.tocSelector | json }},
+          headingSelector:        {{ toccer_options.headingSelector | json }},
+          ignoreSelector:         {{ toccer_options.ignoreSelector | json }},
+          contentSelector:        {{ toccer_options.contentSelector | json }},
+          collapseDepth:          settings.collapseDepth,
+          throttleTimeout:        {{ toccer_options.throttleTimeout | json }},
+          includeHtml:            false,
+          linkClass:              'toc-link',
+          extraLinkClasses:       '',
+          activeLinkClass:        'is-active-link',
+          listClass:              'toc-list',
+          extraListClasses:       '',
+          isCollapsedClass:       'is-collapsed',
+          collapsibleClass:       'is-collapsible',
+          listItemClass:          'toc-list-item',
+          positionFixedSelector:  '',
+          positionFixedClass:     'is-position-fixed',
+          fixedSidebarOffset:     'auto',
+          smoothScroll:           {{ toccer_options.smoothScrollEnabled | json }},
+          smoothScrollOffset:     {{ toccer_options.smoothScrollOffset | json }},
+          smoothScrollDuration:   {{ toccer_options.smoothScrollDuration | json }},
+          headingsOffset:         {{ toccer_options.headingsOffset | json }},
+          throttleTimeout:        {{ toccer_options.throttleTimeout | json }}
+        });
+
+        if (tocbot.options.log == true) {
+          // Writes all of the current option settings to JS console
+          console.log(tocbot.options);
+        }
+      }, {{toccer_options.delay}});
 
       return true;
     }, // END initToccerCore
@@ -350,4 +354,4 @@ j1.adapter['toccer'] = (function () {
 
 {% endcapture %}
 {{ j1_cache | strip_empty_lines }}
-{% assign j1_cache = nil %}
+{% assign j1_cache = nil %}

data/lib/starter_web/assets/themes/j1/extensions/mmenu-light/css/mmenu-light.min.css

@@ -7,4 +7,378 @@
  *
  * License: CC-BY-4.0
  * http://creativecommons.org/licenses/by/4.0/
- */:root{--mm-ocd-width:80%;--mm-ocd-min-width:200px;--mm-ocd-max-width:440px}body.mm-ocd-opened{overflow-y:hidden;-ms-scroll-chaining:none;overscroll-behavior:none}.mm-ocd{position:fixed;top:0;right:0;bottom:100%;left:0;z-index:9999;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:contain;background:rgba(0,0,0,0);-webkit-transition-property:bottom,background-color;-o-transition-property:bottom,background-color;transition-property:bottom,background-color;-webkit-transition-duration:0s,.3s;-o-transition-duration:0s,.3s;transition-duration:0s,.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:.45s,.15s;-o-transition-delay:.45s,.15s;transition-delay:.45s,.15s}.mm-ocd--open{bottom:0;background:rgba(0,0,0,.25);-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}.mm-ocd__content{position:absolute;top:0;bottom:0;z-index:2;width:80%;width:var(--mm-ocd-width);min-width:200px;min-width:var(--mm-ocd-min-width);max-width:440px;max-width:var(--mm-ocd-max-width);background:#fff;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.mm-ocd--left .mm-ocd__content{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mm-ocd--right .mm-ocd__content{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mm-ocd--open .mm-ocd__content{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-ocd__backdrop{position:absolute;top:0;bottom:0;z-index:3;width:calc(100% - 80%);width:calc(100% - var(--mm-ocd-width));min-width:calc(100% - 440px);min-width:calc(100% - var(--mm-ocd-max-width));max-width:calc(100% - 200px);max-width:calc(100% - var(--mm-ocd-min-width));background:rgba(3,2,1,0)}.mm-ocd--left .mm-ocd__backdrop{right:0}.mm-ocd--right .mm-ocd__backdrop{left:0}.mm-spn,.mm-spn a,.mm-spn li,.mm-spn span,.mm-spn ul{display:block;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}:root{--mm-spn-item-height:50px;--mm-spn-item-indent:20px;--mm-spn-line-height:24px}.mm-spn{width:100%;height:100%;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;overflow:hidden;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.mm-spn ul{-webkit-overflow-scrolling:touch;position:fixed;top:0;left:100%;bottom:0;z-index:2;width:130%;padding-right:30%;line-height:24px;line-height:var(--mm-spn-line-height);overflow:visible;overflow-y:auto;background:inherit;-webkit-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;transition:left .3s ease 0s;cursor:default}.mm-spn ul:after{content:'';display:block;height:50px;height:var(--mm-spn-item-height)}.mm-spn>ul{left:0}.mm-spn ul.mm-spn--open{left:0}.mm-spn ul.mm-spn--parent{left:-30%;overflow-y:hidden}.mm-spn li{position:relative;background:inherit;cursor:pointer}.mm-spn li:before{content:'';display:block;position:absolute;top:25px;top:calc(var(--mm-spn-item-height)/ 2);right:25px;right:calc(var(--mm-spn-item-height)/ 2);z-index:0;width:10px;height:10px;border-top:2px solid;border-right:2px solid;-webkit-transform:rotate(45deg) translate(0,-50%);-ms-transform:rotate(45deg) translate(0,-50%);transform:rotate(45deg) translate(0,-50%);opacity:.4}.mm-spn li:after{content:'';display:block;margin-left:20px;margin-left:var(--mm-spn-item-indent);border-top:1px solid;opacity:.15}.mm-spn a,.mm-spn span{position:relative;z-index:1;padding:13px 20px;padding:calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent)}.mm-spn a{background:inherit;color:inherit;text-decoration:none}.mm-spn a:not(:last-child){width:calc(100% - 50px);width:calc(100% - var(--mm-spn-item-height))}.mm-spn a:not(:last-child):after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;border-right:1px solid;opacity:.15}.mm-spn span{background:0}.mm-spn.mm-spn--navbar{cursor:pointer}.mm-spn.mm-spn--navbar:before{content:'';display:block;position:absolute;top:25px;top:calc(var(--mm-spn-item-height)/ 2);left:20px;left:var(--mm-spn-item-indent);width:10px;height:10px;margin-top:2px;border-top:2px solid;border-left:2px solid;-webkit-transform:rotate(-45deg) translate(50%,-50%);-ms-transform:rotate(-45deg) translate(50%,-50%);transform:rotate(-45deg) translate(50%,-50%);opacity:.4}.mm-spn.mm-spn--navbar.mm-spn--main{cursor:default}.mm-spn.mm-spn--navbar.mm-spn--main:before{content:none;display:none}.mm-spn.mm-spn--navbar:after{content:attr(data-mm-spn-title);display:block;position:absolute;top:0;left:0;right:0;height:50px;height:var(--mm-spn-item-height);padding:0 40px;padding:0 calc(var(--mm-spn-item-indent) * 2);line-height:50px;line-height:var(--mm-spn-item-height);opacity:.4;text-align:center;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}.mm-spn.mm-spn--navbar.mm-spn--main:after{padding-left:20px;padding-left:var(--mm-spn-item-indent)}.mm-spn.mm-spn--navbar ul{top:51px;top:calc(var(--mm-spn-item-height)+1px)}.mm-spn.mm-spn--navbar ul:before{content:'';display:block;position:fixed;top:inherit;z-index:2;width:100%;border-top:1px solid currentColor;opacity:.15}.mm-spn.mm-spn--light{color:#444;background:#f3f3f3}.mm-spn.mm-spn--dark{color:#ddd;background:#333}.mm-spn.mm-spn--vertical{overflow-y:auto}.mm-spn.mm-spn--vertical ul{width:100%;padding-right:0;position:static}.mm-spn.mm-spn--vertical ul ul{display:none;padding-left:20px;padding-left:var(--mm-spn-item-indent)}.mm-spn.mm-spn--vertical ul ul:after{height:25px;height:calc(var(--mm-spn-item-height)/ 2)}.mm-spn.mm-spn--vertical ul.mm-spn--open{display:block}.mm-spn.mm-spn--vertical li.mm-spn--open:before{-webkit-transform:rotate(135deg) translate(-50%,0);-ms-transform:rotate(135deg) translate(-50%,0);transform:rotate(135deg) translate(-50%,0)}.mm-spn.mm-spn--vertical ul ul li:last-child:after{content:none;display:none}
+ */
+
+:root {
+  --mm-ocd-width: 80%;
+  --mm-ocd-min-width: 200px;
+  --mm-ocd-max-width: 440px
+}
+
+body.mm-ocd-opened {
+  overflow-y: hidden;
+  -ms-scroll-chaining: none;
+  overscroll-behavior: none
+}
+
+/*
+  jadams, 2020-06-20: CSS/Offset to the NAV bar should be calculted
+  at runtime as a dyn style
+*/
+.mm-ocd {
+  position: fixed;
+  top: 80px; /* jadams, 2020-06-20: offset to the NAV bar */
+  right: 0;
+  bottom: 100%;
+  left: 0;
+  z-index: 9999;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+  overscroll-behavior: contain;
+  background: rgba(0, 0, 0, 0);
+  -webkit-transition-property: bottom, background-color;
+  -o-transition-property: bottom, background-color;
+  transition-property: bottom, background-color;
+  -webkit-transition-duration: 0s, .3s;
+  -o-transition-duration: 0s, .3s;
+  transition-duration: 0s, .3s;
+  -webkit-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  transition-timing-function: ease;
+  -webkit-transition-delay: .45s, .15s;
+  -o-transition-delay: .45s, .15s;
+  transition-delay: .45s, .15s
+}
+
+.mm-ocd--open {
+  bottom: 0;
+  background: rgba(0, 0, 0, .25);
+  -webkit-transition-delay: 0s;
+  -o-transition-delay: 0s;
+  transition-delay: 0s
+}
+
+.mm-ocd__content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 80%;
+  width: var(--mm-ocd-width);
+  min-width: 200px;
+  min-width: var(--mm-ocd-min-width);
+  max-width: 440px;
+  max-width: var(--mm-ocd-max-width);
+  background: #fff;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: -webkit-transform;
+  -o-transition-property: transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  -webkit-transition-duration: .3s;
+  -o-transition-duration: .3s;
+  transition-duration: .3s;
+  -webkit-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  transition-timing-function: ease
+}
+
+.mm-ocd--left .mm-ocd__content {
+  left: 0;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0)
+}
+
+.mm-ocd--right .mm-ocd__content {
+  right: 0;
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0)
+}
+
+.mm-ocd--open .mm-ocd__content {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0)
+}
+
+.mm-ocd__backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  width: calc(100% - 80%);
+  width: calc(100% - var(--mm-ocd-width));
+  min-width: calc(100% - 440px);
+  min-width: calc(100% - var(--mm-ocd-max-width));
+  max-width: calc(100% - 200px);
+  max-width: calc(100% - var(--mm-ocd-min-width));
+  background: rgba(3, 2, 1, 0)
+}
+
+.mm-ocd--left .mm-ocd__backdrop {
+  right: 0
+}
+
+.mm-ocd--right .mm-ocd__backdrop {
+  left: 0
+}
+
+.mm-spn,
+.mm-spn a,
+.mm-spn li,
+.mm-spn span,
+.mm-spn ul {
+  display: block;
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+:root {
+  --mm-spn-item-height: 50px;
+  --mm-spn-item-indent: 20px;
+  --mm-spn-line-height: 24px
+}
+
+.mm-spn {
+  width: 100%;
+  height: 100%;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-overflow-scrolling: touch;
+  overflow: hidden;
+  -webkit-clip-path: inset(0 0 0 0);
+  clip-path: inset(0 0 0 0);
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0)
+}
+
+.mm-spn ul {
+  -webkit-overflow-scrolling: touch;
+  position: fixed;
+  top: 0;
+  left: 100%;
+  bottom: 0;
+  z-index: 2;
+  width: 130%;
+  padding-right: 30%;
+  line-height: 24px;
+  line-height: var(--mm-spn-line-height);
+  overflow: visible;
+  overflow-y: auto;
+  background: inherit;
+  -webkit-transition: left .3s ease 0s;
+  -o-transition: left .3s ease 0s;
+  transition: left .3s ease 0s;
+  cursor: default
+}
+
+.mm-spn ul:after {
+  content: '';
+  display: block;
+  height: 50px;
+  height: var(--mm-spn-item-height)
+}
+
+.mm-spn>ul {
+  left: 0
+}
+
+.mm-spn ul.mm-spn--open {
+  left: 0
+}
+
+.mm-spn ul.mm-spn--parent {
+  left: -30%;
+  overflow-y: hidden
+}
+
+.mm-spn li {
+  position: relative;
+  background: inherit;
+  cursor: pointer
+}
+
+.mm-spn li:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 25px;
+  top: calc(var(--mm-spn-item-height)/ 2);
+  right: 25px;
+  right: calc(var(--mm-spn-item-height)/ 2);
+  z-index: 0;
+  width: 10px;
+  height: 10px;
+  border-top: 2px solid;
+  border-right: 2px solid;
+  -webkit-transform: rotate(45deg) translate(0, -50%);
+  -ms-transform: rotate(45deg) translate(0, -50%);
+  transform: rotate(45deg) translate(0, -50%);
+  opacity: .4
+}
+
+.mm-spn li:after {
+  content: '';
+  display: block;
+  margin-left: 20px;
+  margin-left: var(--mm-spn-item-indent);
+  border-top: 1px solid;
+  opacity: .15
+}
+
+.mm-spn a,
+.mm-spn span {
+  position: relative;
+  z-index: 1;
+  padding: 13px 20px;
+  padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent)
+}
+
+.mm-spn a {
+  background: inherit;
+  color: inherit;
+  text-decoration: none
+}
+
+.mm-spn a:not(:last-child) {
+  width: calc(100% - 50px);
+  width: calc(100% - var(--mm-spn-item-height))
+}
+
+.mm-spn a:not(:last-child):after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-right: 1px solid;
+  opacity: .15
+}
+
+.mm-spn span {
+  background: 0 0
+}
+
+.mm-spn.mm-spn--navbar {
+  cursor: pointer
+}
+
+.mm-spn.mm-spn--navbar:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 25px;
+  top: calc(var(--mm-spn-item-height)/ 2);
+  left: 20px;
+  left: var(--mm-spn-item-indent);
+  width: 10px;
+  height: 10px;
+  margin-top: 2px;
+  border-top: 2px solid;
+  border-left: 2px solid;
+  -webkit-transform: rotate(-45deg) translate(50%, -50%);
+  -ms-transform: rotate(-45deg) translate(50%, -50%);
+  transform: rotate(-45deg) translate(50%, -50%);
+  opacity: .4
+}
+
+.mm-spn.mm-spn--navbar.mm-spn--main {
+  cursor: default
+}
+
+.mm-spn.mm-spn--navbar.mm-spn--main:before {
+  content: none;
+  display: none
+}
+
+.mm-spn.mm-spn--navbar:after {
+  content: attr(data-mm-spn-title);
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  height: var(--mm-spn-item-height);
+  padding: 0 40px;
+  padding: 0 calc(var(--mm-spn-item-indent) * 2);
+  line-height: 50px;
+  line-height: var(--mm-spn-item-height);
+  opacity: .4;
+  text-align: left;  /* jadams, 2020-06-20: set menu title to the left */
+  overflow: hidden;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  font-size: x-large; /* jadams, 2020-06-20: increase size of the menu title */
+}
+
+.mm-spn.mm-spn--navbar.mm-spn--main:after {
+  padding-left: 20px;
+  padding-left: var(--mm-spn-item-indent)
+}
+
+.mm-spn.mm-spn--navbar ul {
+  top: 51px;
+  top: calc(var(--mm-spn-item-height) + 1px)
+}
+
+.mm-spn.mm-spn--navbar ul:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: inherit;
+  z-index: 2;
+  width: 100%;
+  border-top: 1px solid currentColor;
+  opacity: .15
+}
+
+.mm-spn.mm-spn--light {
+  color: #444;
+  background: #f3f3f3
+}
+
+/* jadams, 2020-06-20: set j1 template colors (dark theme) */
+.mm-spn.mm-spn--dark {
+  color: #e3e3e3;
+  background: #191919
+}
+
+.mm-spn.mm-spn--vertical {
+  overflow-y: auto
+}
+
+.mm-spn.mm-spn--vertical ul {
+  width: 100%;
+  padding-right: 0;
+  position: static
+}
+
+.mm-spn.mm-spn--vertical ul ul {
+  display: none;
+  padding-left: 20px;
+  padding-left: var(--mm-spn-item-indent)
+}
+
+.mm-spn.mm-spn--vertical ul ul:after {
+  height: 25px;
+  height: calc(var(--mm-spn-item-height)/ 2)
+}
+
+.mm-spn.mm-spn--vertical ul.mm-spn--open {
+  display: block
+}
+
+.mm-spn.mm-spn--vertical li.mm-spn--open:before {
+  -webkit-transform: rotate(135deg) translate(-50%, 0);
+  -ms-transform: rotate(135deg) translate(-50%, 0);
+  transform: rotate(135deg) translate(-50%, 0)
+}
+
+.mm-spn.mm-spn--vertical ul ul li:last-child:after {
+  content: none;
+  display: none
+}