Commit cb90859c authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

New Drupal navigation support

parent cc919825

dist/css/base/gin.css

+8 −2
Original line number Diff line number Diff line
@@ -211,7 +211,7 @@ button.link:active, 
            backdrop-filter: none;

  }



  .gin--vertical-toolbar .region-sticky, .gin--horizontal-toolbar .region-sticky, .gin--classic-toolbar .region-sticky {

  .gin--navigation .region-sticky, .gin--vertical-toolbar .region-sticky, .gin--horizontal-toolbar .region-sticky, .gin--classic-toolbar .region-sticky {

    top: var(--gin-toolbar-y-offset);

  }
@@ -516,6 +516,10 @@ body:not(.toolbar-tray-open) .layout-container { 
  margin-top: 0;

}



#system-clear-cache + #system-performance-settings {

  margin-top: var(--gin-spacing-l);

}



@media (max-width: 60.99em) {

  .gin--edit-form .region-sticky--is-sticky .block-page-title-block {

    visibility: hidden;
@@ -3539,7 +3543,9 @@ hr { 
.ck .ck.ck-button:active,

.ck .ck.ck-button:focus,

.ck .ck.ck-button:active:focus,

.toolbar-box .toolbar-handle:focus {

.toolbar-box .toolbar-handle:focus,

.gin--navigation .navigation-link:focus,

.gin--navigation .level-1 > .navigation-link:hover {

  outline: none;

  box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);

}

dist/css/components/toolbar_secondary.css

+1 −0
Original line number Diff line number Diff line
@@ -302,6 +302,7 @@ 
    padding: var(--gin-spacing-s) var(--gin-spacing-m);

    border-radius: var(--gin-border-s);

    font-size: var(--gin-font-size-xs);

    font-weight: normal;

  }



  .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray a:hover, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray a:active {

dist/css/layout/navigation.css

0 → 100644
+236 −0
Original line number Diff line number Diff line 
:root {

  --gin-toolbar-secondary-height: 48px;

  --gin-scroll-offset: 72px;

  --gin-toolbar-y-offset: 0px;

  --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 64px);

  --gin-sticky-offset: 0px;

}



@media (min-width: 61em) {

  :root {

    --gin-toolbar-secondary-height: 60px;

    --gin-icon-size-toolbar: 22px;

    --gin-scroll-offset: 130px;

    --gin-sticky-offset: var(--gin-height-sticky);

  }

}



@media (min-width: 61em) {

  html.navigation-active {

    --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 264px);

  }

}



[dir="ltr"] .navigation__sidebar ~ .dialog-off-canvas-main-canvas {

  transition: margin-left var(--gin-transition-fast);

}



[dir="rtl"] .navigation__sidebar ~ .dialog-off-canvas-main-canvas {

  transition: margin-right var(--gin-transition-fast);

}



.gin--navigation .navigation__sidebar {

  transition: var(--gin-transition-fast);

}



.gin--navigation .navigation__sidebar,

.gin--navigation .navigation__sidebar--sticky-menu {

  background: var(--gin-bg-layer);

}



[dir="ltr"] .gin--navigation .navigation__sidebar,

[dir="ltr"] .gin--navigation .navigation__sidebar--sticky-menu {

  border-right: 1px solid var(--gin-border-color-layer);

}



[dir="rtl"] .gin--navigation .navigation__sidebar,

[dir="rtl"] .gin--navigation .navigation__sidebar--sticky-menu {

  border-left: 1px solid var(--gin-border-color-layer);

}



.gin--navigation .navigation-link {

  color: var(--gin-color-text);

  font-weight: normal;

}



.gin--navigation .navigation-link::before {

  background-color: var(--gin-icon-color);

}



.gin--navigation .menu-item.current > .navigation-link {

  color: var(--gin-color-primary);

}



.gin--navigation .level-1 > .navigation-link::before {

  width: var(--gin-icon-size-toolbar);

  height: var(--gin-icon-size-toolbar);

}



.gin--navigation .level-1.menu-item--expanded,

.gin--navigation .level-1.current {

  background-color: transparent;

}



.gin--navigation .level-1.menu-item--expanded > .navigation-link,

.gin--navigation .level-1.current > .navigation-link {

  color: var(--gin-color-primary);

  background-color: var(--gin-color-primary-light);

}



.gin--navigation .level-1.menu-item--expanded > .navigation-link::before, .gin--navigation .level-1.menu-item--expanded > .navigation-link::after,

.gin--navigation .level-1.current > .navigation-link::before,

.gin--navigation .level-1.current > .navigation-link::after {

  background: var(--gin-color-primary);

}



.gin--navigation .level-1.menu-item--expanded > .navigation-link:hover, .gin--navigation .level-1.menu-item--expanded > .navigation-link:focus,

.gin--navigation .level-1.current > .navigation-link:hover,

.gin--navigation .level-1.current > .navigation-link:focus {

  color: var(--gin-color-primary-hover);

  background-color: var(--gin-color-primary-light-hover);

}



.gin--navigation .level-1 > .navigation-link:hover,

.gin--navigation .level-1 > .navigation-link:focus,

.gin--navigation .level-2 > .navigation-link:hover,

.gin--navigation .level-2 > .navigation-link:focus,

.gin--navigation .level-2 .navigation-link:hover,

.gin--navigation .level-2 .navigation-link:focus,

.gin--navigation .menu-item.menu-item--expanded:not(.current) > .navigation-link,

.gin--navigation #sidebar-control:hover,

.gin--navigation #sidebar-control:focus {

  color: var(--gin-color-primary-hover);

  background-color: var(--gin-color-primary-light-hover);

}



.gin--navigation .level-1 > .navigation-link:hover::before, .gin--navigation .level-1 > .navigation-link:hover::after,

.gin--navigation .level-1 > .navigation-link:focus::before,

.gin--navigation .level-1 > .navigation-link:focus::after,

.gin--navigation .level-2 > .navigation-link:hover::before,

.gin--navigation .level-2 > .navigation-link:hover::after,

.gin--navigation .level-2 > .navigation-link:focus::before,

.gin--navigation .level-2 > .navigation-link:focus::after,

.gin--navigation .level-2 .navigation-link:hover::before,

.gin--navigation .level-2 .navigation-link:hover::after,

.gin--navigation .level-2 .navigation-link:focus::before,

.gin--navigation .level-2 .navigation-link:focus::after,

.gin--navigation .menu-item.menu-item--expanded:not(.current) > .navigation-link::before,

.gin--navigation .menu-item.menu-item--expanded:not(.current) > .navigation-link::after,

.gin--navigation #sidebar-control:hover::before,

.gin--navigation #sidebar-control:hover::after,

.gin--navigation #sidebar-control:focus::before,

.gin--navigation #sidebar-control:focus::after {

  background: var(--gin-color-primary-hover);

}



html:not(.navigation-active) .gin--navigation .level-1 > .navigation-menu-wrapper, html:not(.navigation-active) .gin--navigation .level-1.menu-item--expanded > .navigation-menu-wrapper .arrow-ref::before {

  background-color: var(--gin-bg-layer2);

}



.toolbar-anti-flicker.toolbar-loading.toolbar-fixed body.gin--navigation {

  padding-top: 0;

}



.toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,

.toolbar .toolbar-bar .toolbar-tab, .toolbar .toolbar-tray-horizontal li {

  float: none;

}



.gin-secondary-toolbar .toolbar-menu__trigger {

  display: none;

}



[dir="ltr"] .gin-secondary-toolbar .toolbar-tray .menu-item + .menu-item {

  border-left: none;

}



[dir="rtl"] .gin-secondary-toolbar .toolbar-tray .menu-item + .menu-item {

  border-right: none;

}



.gin-secondary-toolbar #toolbar-item-user-secondary {

  display: none;

}



.gin-secondary-toolbar .breadcrumb__item,

.gin-secondary-toolbar .breadcrumb__link {

  color: var(--gin-color-text-light);

  font-weight: normal;

}



.gin-secondary-toolbar .breadcrumb__item:hover,

.gin-secondary-toolbar .breadcrumb__link:hover {

  color: var(--gin-color-primary-hover);

}



.gin-secondary-toolbar .breadcrumb__item {

  display: flex;

}



.gin-secondary-toolbar .breadcrumb__item:first-child + .breadcrumb__item::before {

  content: "|";

}



.gin-secondary-toolbar .breadcrumb__item:first-child .breadcrumb__link {

  position: relative;

}



[dir="ltr"] .gin-secondary-toolbar .breadcrumb__item:first-child .breadcrumb__link {

  padding-left: 1.75em;

}



[dir="rtl"] .gin-secondary-toolbar .breadcrumb__item:first-child .breadcrumb__link {

  padding-right: 1.75em;

}



.gin-secondary-toolbar .breadcrumb__item:first-child .breadcrumb__link::before {

  content: "";

  display: inline-block;

  position: absolute;

  top: 50%;

  width: var(--gin-icon-size-toolbar-secondary);

  height: var(--gin-icon-size-toolbar-secondary);

  padding: 0;

  transform: translateY(-50%);

  background-color: var(--gin-icon-color);

  -webkit-mask-image: url("../../media/sprite.svg#backtosite-view");

          mask-image: url("../../media/sprite.svg#backtosite-view");

  -webkit-mask-size: 100% 100%;

          mask-size: 100% 100%;

  -webkit-mask-position: center center;

          mask-position: center center;

}



[dir="ltr"] .gin-secondary-toolbar .breadcrumb__item:first-child .breadcrumb__link::before {

  left: 0;

}



[dir="rtl"] .gin-secondary-toolbar .breadcrumb__item:first-child .breadcrumb__link::before {

  right: 0;

}



@media (forced-colors: active) {

  .gin-secondary-toolbar .breadcrumb__item:first-child .breadcrumb__link::before {

    background: linktext;

  }

}



.gin-secondary-toolbar .breadcrumb__item:first-child .breadcrumb__link:hover::before {

  background-color: var(--gin-color-primary-hover);

}



.gin-secondary-toolbar .breadcrumb__item + .breadcrumb__item::before {

  content: "/";

  opacity: .3;

  font-size: var(--gin-font-size-xs);

  display: inline-block;

  padding: 0;

  background: none;

}



@media (forced-colors: active) {

  .gin-secondary-toolbar .breadcrumb__item + .breadcrumb__item::before {

    opacity: 1;

  }

}

gin.libraries.yml

+19 −0
Original line number Diff line number Diff line
@@ -27,6 +27,25 @@ gin_init: 
  dependencies:

    - core/drupalSettings



navigation:

  css:

    component:

      dist/css/components/toolbar.css: { minified: false }

      dist/css/components/toolbar_secondary.css: { minified: false }

    theme:

      dist/css/layout/navigation.css: { minified: false }

  dependencies:

  - navigation/navigation

  - gin/coffee

  - gin/node_preview

  - gin/responsive_preview

  - gin/contextual_links

  - gin/settings_tray

  - gin/settings_tray_edit

  - core/drupalSettings

  - core/once

  - core/drupal.displace



gin_toolbar:

  css:

    component:

includes/html.theme

+10 −2
Original line number Diff line number Diff line
@@ -45,8 +45,16 @@ function gin_preprocess_html(&$variables) { 
      return;

    }



    $module_handler = \Drupal::service('module_handler');



    // Check for new Drupal navigation

    if ($module_handler->moduleExists('navigation')) {

      // Set toolbar class.

      $variables['attributes']['class'][] = 'gin--navigation';

    } else {

      // Set toolbar class.

      $variables['attributes']['class'][] = 'gin--' . $toolbar . '-toolbar';

    }



    // Gin secondary toolbar.

    if ($toolbar !== 'classic') {