navigation.css

Same filename in this branch
  1. main core/themes/admin/migration/css/layout/navigation.css
  2. main core/themes/default_admin/css/components/navigation.css
Same filename and directory in other branches
  1. 11.x core/themes/admin/migration/css/layout/navigation.css
  2. 11.x core/themes/default_admin/migration/css/layout/navigation.css
  3. 11.x core/themes/default_admin/css/components/navigation.css

Navigation layout overrides for the admin toolbar.

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/layout/navigation.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Navigation layout overrides for the admin toolbar.

  11.  */

  12. 

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

  14. 

  15. :root {

  16.   --gin-toolbar-height: 3rem;

  17.   --gin-toolbar-secondary-height: 3rem;

  18.   --gin-scroll-offset: 4.5rem;

  19.   --gin-toolbar-y-offset: var(--gin-toolbar-height);

  20.   --gin-toolbar-x-offset: 0px;

  21.   --gin-sticky-offset: 0px;

  22.   --gin-icon-size-toolbar: 1.25rem;

  23. 

  24.   @media (min-width: 61em) {

  25.     --gin-toolbar-height: 0px;

  26.     --gin-toolbar-secondary-height: 3.25rem;

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

  28.     --gin-scroll-offset: 8.125rem;

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

  30.   }

  31. }

  32. 

  33. html.admin-toolbar-expanded {

  34.   @media (min-width: 61em) {

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

  36.   }

  37. }

  38. 

  39. body.gin--navigation {

  40.   --admin-toolbar-sidebar-width: 4rem;

  41. }

  42. 

  43. [data-admin-toolbar="expanded"] body.gin--navigation {

  44.   --admin-toolbar-sidebar-width: 16.5rem;

  45. 

  46.   @media (--admin-toolbar-tablet) {

  47.     --admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));

  48.   }

  49. }

  50. 

  51. :is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  52.   --admin-toolbar-font-family: var(--gin-font);

  53.   --admin-toolbar-color-white: var(--gin-bg-layer);

  54.   --admin-toolbar-color-gray-050: var(--gin-bg-layer2);

  55.   --admin-toolbar-color-gray-100: var(--gin-border-color-layer);

  56.   --admin-toolbar-color-gray-200: var(--gin-border-color-layer2);

  57.   --admin-toolbar-color-gray-800: var(--gin-color-text);

  58.   --admin-toolbar-color-gray-990: var(--gin-color-primary-active);

  59. }

  60. 

  61. :is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) {

  62.   &.admin-toolbar-control-bar {

  63.     background-color: var(--admin-toolbar-color-white);

  64.   }

  65. 

  66.   .toolbar-menu__link {

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

  68.     font-weight: var(--font-weight-semibold);

  69.     font-variation-settings: unset;

  70.     &:hover::before {

  71.       inline-size: var(--space-xxs);

  72.     }

  73. 

  74.     &,

  75.     &:hover,

  76.     &:active {

  77.       outline: none;

  78.       box-shadow: none;

  79.     }

  80. 

  81.     &:hover {

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

  83.       background-color: var(--gin-bg-item-hover);

  84.     }

  85. 

  86.     &:active,

  87.     &:focus,

  88.     &:hover:focus {

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

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

  91.     }

  92. 

  93.     &:focus {

  94.       outline: none;

  95.       box-shadow:

  96.         inset 0 0 0 1px var(--gin-color-focus-border),

  97.         inset 0 0 0 3px var(--gin-color-focus);

  98.     }

  99.   }

  100. 

  101.   &.admin-toolbar {

  102.     top: 0;

  103.     height: 100%;

  104. 

  105.     .toolbar-button {

  106.       min-height: unset;

  107.       padding-inline: 0.625rem;

  108.       padding-block: calc(var(--space-xs) + 1px);

  109.       margin-block-end: var(--space-xxxs);

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

  111.       font-weight: var(--font-weight-semibold);

  112.       font-variation-settings: unset;

  113. 

  114.       &,

  115.       &:hover,

  116.       &:active {

  117.         outline: none;

  118.         box-shadow: none;

  119.       }

  120. 

  121.       &:hover {

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

  123.         background-color: var(--gin-bg-item-hover);

  124.       }

  125. 

  126.       &:active,

  127.       &:focus,

  128.       &:hover:focus {

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

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

  131.       }

  132.     }

  133. 

  134.     .toolbar-button--primary {

  135.       color: var(--gin-color-button-text) !important;

  136.     }

  137.   }

  138. 

  139.   .admin-toolbar__header {

  140.     padding-block-start: var(--space-xs);

  141. 

  142.     @media (min-width: 64em) {

  143.       padding-block-start: 0;

  144.     }

  145.   }

  146. 

  147.   .admin-toolbar__content {

  148.     margin-block-start: calc(var(--space-xxs) * -1);

  149.     padding: var(--admin-toolbar-sidebar-header) var(--space-s) var(--space-s) var(--space-s);

  150. 

  151.     @media (min-width: 64em) {

  152.       margin-block-start: 0;

  153.       padding: var(--space-s);

  154.     }

  155.   }

  156. 

  157.   .admin-toolbar__footer {

  158.     padding: var(--space-s);

  159.   }

  160. 

  161.   .admin-toolbar__footer,

  162.   .admin-toolbar__content .toolbar-block:nth-last-child(n + 2)::after {

  163.     border-block-start-color: var(--gin-border-color-secondary);

  164.   }

  165. 

  166.   .admin-toolbar__logo {

  167.     border-radius: 0.625rem;

  168.     line-height: 0;

  169. 

  170.     svg rect {

  171.       fill: var(--gin-color-primary);

  172.     }

  173. 

  174.     svg path {

  175.       fill: var(--gin-bg-app);

  176.     }

  177. 

  178.     &:hover svg rect {

  179.       fill: var(--gin-color-primary-hover);

  180.     }

  181. 

  182.     &:active svg rect,

  183.     &:focus svg rect {

  184.       fill: var(--gin-color-primary-active);

  185.     }

  186.   }

  187. 

  188.   #navigation-link-navigationcreate {

  189.     margin-block-start: var(--space-xxs);

  190. 

  191.     &:first-child {

  192.       margin-block-end: var(--admin-toolbar-space-8);

  193. 

  194.       &::after {

  195.         display: block;

  196.         margin-block-start: var(--admin-toolbar-space-12);

  197.         content: "";

  198.         border-block-end: 1px solid var(--gin-border-color-secondary);

  199.       }

  200.     }

  201.   }

  202. 

  203.   .toolbar-block__list {

  204.     gap: 0;

  205.   }

  206. 

  207.   &.gin--navigation-top-bar .toolbar-button.toolbar-button {

  208.     min-height: auto;

  209.     padding: var(--space-xs) var(--space-s);

  210.     border: 0 none;

  211.     border-radius: var(--gin-border-m);

  212.     outline: none;

  213. 

  214.     @media (prefers-reduced-motion: no-preference) {

  215.       transition: var(--gin-transition);

  216.     }

  217.   }

  218. 

  219.   &.gin--navigation-top-bar .toolbar-button.toolbar-button--primary {

  220.     --toolbar-button-color: var(--gin-color-button-text);

  221.     --toolbar-button-bg: var(--gin-color-primary);

  222.     --toolbar-button-hover-color: var(--gin-color-button-text);

  223.     --toolbar-button-hover-bg: var(--gin-color-primary-hover);

  224.     --toolbar-button-focus-color: var(--gin-color-button-text);

  225.     --toolbar-button-focus-bg: var(--gin-color-primary-active);

  226.     --toolbar-button-icon-size: var(--font-size-s);

  227. 

  228.     box-shadow: 0.1em 0.25em 0.5em var(--gin-color-primary-light);

  229. 

  230.     &:dir(rtl) {

  231.       box-shadow: -0.1em 0.25em 0.5em var(--gin-color-primary-light);

  232.     }

  233.   }

  234. 

  235.   &.gin--navigation-top-bar .toolbar-button.toolbar-button--icon--dots {

  236.     display: block;

  237.     width: 2rem;

  238.     height: 2rem;

  239.     padding: 0.375rem;

  240.     cursor: pointer;

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

  242.     border-radius: var(--gin-border-m);

  243.     background: transparent;

  244.     margin-inline: calc(var(--space-xxs) * -1);

  245. 

  246.     &:hover,

  247.     &:focus {

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

  249. 

  250.       &::before {

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

  252.       }

  253.     }

  254. 

  255.     &[aria-expanded="true"],

  256.     &.is-active {

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

  258. 

  259.       &::before {

  260.         background-color: var(--gin-color-primary-active);

  261.       }

  262.     }

  263. 

  264.     @media (prefers-reduced-motion: no-preference) {

  265.       transition: background var(--gin-transition-fast);

  266.     }

  267.   }

  268. 

  269.   .toolbar-button--large {

  270.     font-weight: var(--font-weight-bold);

  271.   }

  272. 

  273.   *:focus,

  274.   &.gin--navigation-top-bar .button:focus,

  275.   &.gin--navigation-top-bar .local-actions__item *:focus,

  276.   &.gin--navigation-top-bar .toolbar-button.toolbar-button:focus,

  277.   .local-actions__item *:focus,

  278.   .admin-toolbar__logo:focus,

  279.   .toolbar-button.toolbar-button:focus,

  280.   .admin-toolbar__expand-button:focus {

  281.     outline: none;

  282.     box-shadow: var(--focus-ring);

  283.   }

  284. 

  285.   .toolbar-button.current {

  286.     background-color: var(--gin-bg-item-hover);

  287. 

  288.     &:hover {

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

  290.     }

  291. 

  292.     &:active,

  293.     &:focus,

  294.     &:hover:focus {

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

  296.     }

  297. 

  298.     &.is-active {

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

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

  301. 

  302.       &::before {

  303.         color: var(--gin-color-primary) !important;

  304.       }

  305.     }

  306.   }

  307. 

  308.   .toolbar-button:has(+ .toolbar-popover__wrapper .is-active) {

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

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

  311. 

  312.     &::before {

  313.       color: var(--gin-color-primary) !important;

  314.     }

  315.   }

  316. 

  317.   .toolbar-button__icon {

  318.     margin: -1px;

  319.     color: var(--gin-icon-color);

  320.     stroke-width: 0.03125rem;

  321.     stroke: currentColor;

  322.     inline-size: 1.375rem;

  323.     block-size: 1.375rem;

  324.   }

  325. 

  326.   .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon path:not(:first-of-type) {

  327.     stroke-width: 1.325rem;

  328.   }

  329. 

  330.   .toolbar-button--icon--dots path {

  331.     stroke-width: 0.5rem;

  332.   }

  333. 

  334.   .admin-toolbar__expand-button {

  335.     margin-block-start: calc(var(--space-xs) * -1);

  336. 

  337.     &,

  338.     &:hover {

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

  340.       border-color: var(--gin-border-color);

  341.     }

  342.   }

  343. 

  344.   .toolbar-popover--expanded {

  345.     background-color: transparent;

  346. 

  347.     > .toolbar-button {

  348.       background-color: var(--gin-bg-item-hover);

  349.     }

  350.   }

  351. 

  352.   .gin--dark-mode .toolbar-popover__wrapper {

  353.     border-inline-start: 2px solid var(--gin-border-color-secondary);

  354.   }

  355. 

  356.   .admin-toolbar__tooltip {

  357.     color: #fff;

  358.     background-color: var(--gin-tooltip-bg);

  359.     font-size: var(--font-size-xs);

  360.   }

  361. 

  362.   .toolbar-block__list-item[id*="navigation-link-admin-toolbar-toolsextra-links"] {

  363.     display: none;

  364.   }

  365. 

  366.   #toolbar-item-announcement {

  367.     display: none;

  368.   }

  369. 

  370.   .gin-secondary-toolbar {

  371.     .toolbar-id--toolbar-icon-user {

  372.       display: none !important;

  373.     }

  374. 

  375.     .toolbar-menu {

  376.       gap: 0;

  377.     }

  378. 

  379.     .toolbar-menu__trigger {

  380.       display: none;

  381.     }

  382. 

  383.     .toolbar-tray .menu-item + .menu-item {

  384.       border-inline-start: none;

  385.     }

  386.   }

  387. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.