navigation.pcss.css

/**
 * @file
 * Navigation layout overrides for the admin toolbar.
 */

/* cspell:ignore navigationcreate, toolsextra, xxxs */

@import "../base/media-queries.pcss.css";

:root {
  --admin-theme-toolbar-height: 48px;
  --admin-theme-toolbar-secondary-height: 48px;
  --admin-theme-scroll-offset: 72px;
  --admin-theme-toolbar-y-offset: var(--admin-theme-toolbar-height);
  --admin-theme-toolbar-x-offset: 0px;
  --admin-theme-sticky-offset: 0px;
  --admin-icon-size-toolbar: 20px;

  @media (--admin-medium) {
    --admin-theme-toolbar-height: 0px;
    --admin-theme-toolbar-secondary-height: 52px;
    --admin-theme-toolbar-x-offset: var(--drupal-displace-offset-left, 64px);
    --admin-theme-scroll-offset: 130px;
    --admin-theme-sticky-offset: var(--admin-theme-height-sticky);
  }
}

html.admin-toolbar-expanded {
  @media (--admin-medium) {
    --admin-theme-toolbar-x-offset: var(--drupal-displace-offset-left, 264px);
  }
}

body.gin--navigation {
  --admin-toolbar-sidebar-width: 4rem;
}

[data-admin-toolbar="expanded"] body.gin--navigation {
  --admin-toolbar-sidebar-width: 16.5rem;

  @media (--admin-toolbar-tablet) {
    --admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  --admin-toolbar-font-family: var(--admin-font-family);
  --admin-toolbar-color-white: var(--admin-color-bg-surface);
  --admin-toolbar-color-gray-050: var(--admin-color-bg-surface-nested);
  --admin-toolbar-color-gray-100: var(--admin-color-border-soft);
  --admin-toolbar-color-gray-200: var(--admin-color-border);
  --admin-toolbar-color-gray-800: var(--admin-color-text);
  --admin-toolbar-color-gray-990: var(--admin-color-primary-active);
  --toolbar-button-has-active-child-color: var(--admin-color-primary);
  --toolbar-button-current-color: var(--admin-color-primary);
  --toolbar-button-focus-color: var(--admin-color-primary);
  --admin-toolbar-color-focus: var(--admin-color-focus);
  --admin-toolbar-color-expanded: var(--admin-color-bg-surface-nested);

  &.admin-toolbar-control-bar {
    background: var(--admin-color-bg-surface-nested);
  }

  /* Fix Control Bar hamburger button in dark mode. */
  .admin-toolbar-control-bar__burger path {
    stroke: currentColor;
  }
}

/* Workspaces. */
.toolbar-button--workspaces {
  .gin--dark-mode 
}

.toolbar-button--workspaces--live {
  .gin--dark-mode 
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  .toolbar-menu__link {
    &:hover {
      color: var(--admin-color-primary);
    }
  }
}