navigation.pcss.css

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

Navigation layout overrides for the admin toolbar.

File

View on git.drupalcode.org

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

View source 
  1. /**

  2.  * @file

  3.  * Navigation layout overrides for the admin toolbar.

  4.  */

  5. 

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

  7. 

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

  9. 

  10. :root {

  11.   --gin-toolbar-height: 48px;

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

  13.   --gin-scroll-offset: 72px;

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

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

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

  17.   --gin-icon-size-toolbar: 20px;

  18. 

  19.   @media (--admin-medium) {

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

  21.     --gin-toolbar-secondary-height: 52px;

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

  23.     --gin-scroll-offset: 130px;

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

  25.   }

  26. }

  27. 

  28. html.admin-toolbar-expanded {

  29.   @media (--admin-medium) {

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

  31.   }

  32. }

  33. 

  34. body.gin--navigation {

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

  36. }

  37. 

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

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

  40. 

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

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

  43.   }

  44. }

  45. 

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

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

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

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

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

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

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

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

  54. }

  55. 

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

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

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

  59.   }

  60. 

  61.   .toolbar-menu__link {

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

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

  64.     font-variation-settings: unset;

  65.     &:hover::before {

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

  67.     }

  68. 

  69.     &,

  70.     &:hover,

  71.     &:active {

  72.       outline: none;

  73.       box-shadow: none;

  74.     }

  75. 

  76.     &:hover {

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

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

  79.     }

  80. 

  81.     &:active,

  82.     &:focus,

  83.     &:hover:focus {

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

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

  86.     }

  87. 

  88.     &:focus {

  89.       outline: none;

  90.       box-shadow:

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

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

  93.     }

  94.   }

  95. 

  96.   &.admin-toolbar {

  97.     top: 0;

  98.     height: 100%;

  99. 

  100.     .toolbar-button {

  101.       min-height: unset;

  102.       padding-inline: 10px;

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

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

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

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

  107.       font-variation-settings: unset;

  108. 

  109.       &,

  110.       &:hover,

  111.       &:active {

  112.         outline: none;

  113.         box-shadow: none;

  114.       }

  115. 

  116.       &:hover {

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

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

  119.       }

  120. 

  121.       &:active,

  122.       &:focus,

  123.       &:hover:focus {

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

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

  126.       }

  127.     }

  128. 

  129.     .toolbar-button--primary {

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

  131.     }

  132.   }

  133. 

  134.   .admin-toolbar__header {

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

  136. 

  137.     @media (--admin-large) {

  138.       padding-block-start: 0;

  139.     }

  140.   }

  141. 

  142.   .admin-toolbar__content {

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

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

  145. 

  146.     @media (--admin-large) {

  147.       margin-block-start: 0;

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

  149.     }

  150.   }

  151. 

  152.   .admin-toolbar__footer {

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

  154.   }

  155. 

  156.   .admin-toolbar__footer,

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

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

  159.   }

  160. 

  161.   .admin-toolbar__logo {

  162.     border-radius: 10px;

  163.     line-height: 0;

  164. 

  165.     svg rect {

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

  167.     }

  168. 

  169.     svg path {

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

  171.     }

  172. 

  173.     &:hover svg rect {

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

  175.     }

  176. 

  177.     &:active svg rect,

  178.     &:focus svg rect {

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

  180.     }

  181.   }

  182. 

  183.   #navigation-link-navigationcreate {

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

  185. 

  186.     &:first-child {

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

  188. 

  189.       &::after {

  190.         display: block;

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

  192.         content: "";

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

  194.       }

  195.     }

  196.   }

  197. 

  198.   .toolbar-block__list {

  199.     gap: 0;

  200.   }

  201. 

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

  203.     min-height: auto;

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

  205.     border: 0 none;

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

  207.     outline: none;

  208. 

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

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

  211.     }

  212.   }

  213. 

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

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

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

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

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

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

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

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

  222. 

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

  224. 

  225.     &:dir(rtl) {

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

  227.     }

  228.   }

  229. 

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

  231.     display: block;

  232.     width: 32px;

  233.     height: 32px;

  234.     padding: 6px;

  235.     cursor: pointer;

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

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

  238.     background: transparent;

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

  240. 

  241.     &:hover,

  242.     &:focus {

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

  244. 

  245.       &::before {

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

  247.       }

  248.     }

  249. 

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

  251.     &.is-active {

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

  253. 

  254.       &::before {

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

  256.       }

  257.     }

  258. 

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

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

  261.     }

  262.   }

  263. 

  264.   .toolbar-button--large {

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

  266.   }

  267. 

  268.   *:focus,

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

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

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

  272.   .local-actions__item *:focus,

  273.   .admin-toolbar__logo:focus,

  274.   .toolbar-button.toolbar-button:focus,

  275.   .admin-toolbar__expand-button:focus {

  276.     outline: none;

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

  278.   }

  279. 

  280.   .toolbar-button.current {

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

  282. 

  283.     &:hover {

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

  285.     }

  286. 

  287.     &:active,

  288.     &:focus,

  289.     &:hover:focus {

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

  291.     }

  292. 

  293.     &.is-active {

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

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

  296. 

  297.       &::before {

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

  299.       }

  300.     }

  301.   }

  302. 

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

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

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

  306. 

  307.     &::before {

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

  309.     }

  310.   }

  311. 

  312.   .toolbar-button__icon {

  313.     margin: -1px;

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

  315.     stroke-width: 0.03125rem;

  316.     stroke: currentColor;

  317.     inline-size: 22px;

  318.     block-size: 22px;

  319.   }

  320. 

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

  322.     stroke-width: 1.325rem;

  323.   }

  324. 

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

  326.     stroke-width: 0.5rem;

  327.   }

  328. 

  329.   .admin-toolbar__expand-button {

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

  331. 

  332.     &,

  333.     &:hover {

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

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

  336.     }

  337.   }

  338. 

  339.   .toolbar-popover--expanded {

  340.     background-color: transparent;

  341. 

  342.     > .toolbar-button {

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

  344.     }

  345.   }

  346. 

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

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

  349.   }

  350. 

  351.   .admin-toolbar__tooltip {

  352.     color: #fff;

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

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

  355.   }

  356. 

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

  358.     display: none;

  359.   }

  360. 

  361.   #toolbar-item-announcement {

  362.     display: none;

  363.   }

  364. 

  365.   .gin-secondary-toolbar {

  366.     .toolbar-id--toolbar-icon-user {

  367.       display: none !important;

  368.     }

  369. 

  370.     .toolbar-menu {

  371.       gap: 0;

  372.     }

  373. 

  374.     .toolbar-menu__trigger {

  375.       display: none;

  376.     }

  377. 

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

  379.       border-inline-start: none;

  380.     }

  381.   }

  382. }

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