toolbar.pcss.css

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

Styles for the admin toolbar and its trays.

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/components/toolbar.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Styles for the admin toolbar and its trays.

  4.  */

  5. 

  6. /* cspell:ignore tmgmt */

  7. 

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

  9. 

  10. body.gin--toolbar {

  11.   margin-inline-start: 0;

  12.   padding-block-start: var(--gin-toolbar-y-offset) !important;

  13.   padding-inline-start: var(--gin-toolbar-x-offset, 256px) !important;

  14. }

  15. 

  16. .toolbar {

  17.   font-family: var(--gin-font);

  18. }

  19. 

  20. .toolbar .toolbar-bar {

  21.   --icon: url("../../media/icons/toolbar/fallback.svg"); /* Default icon, aka --basic */

  22. 

  23.   box-shadow: none;

  24. 

  25.   .toolbar-tab > .toolbar-item {

  26.     white-space: nowrap;

  27.     font-weight: var(--font-weight-normal);

  28.   }

  29. 

  30.   .contextual-toolbar-tab.toolbar-tab {

  31.     float: inline-end;

  32.   }

  33. 

  34.   .toolbar-tab > .toolbar-icon:hover,

  35.   .toolbar-tab > .responsive-preview-icon:hover {

  36.     background: rgb(255, 255, 255, 0.1);

  37. 

  38.     &::before {

  39.       background-color: #fff;

  40.     }

  41.   }

  42. 

  43.   .toolbar-tab > .toolbar-icon.is-active,

  44.   .toolbar-tab > .is-active.responsive-preview-icon {

  45.     color: var(--gin-color-button-text);

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

  47.     background-image: none;

  48. 

  49.     &::before {

  50.       background-color: var(--gin-color-button-text);

  51.     }

  52. 

  53.     .gin--dark-mode 
  54.     }

  55.   }

  56. 

  57.   .toolbar-icon.toolbar-handle::before,

  58.   .toolbar-handle.responsive-preview-icon::before,

  59.   .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle::before {

  60.     background-position: center center;

  61.     background-size: 14px 14px;

  62.   }

  63. 

  64.   .toolbar-icon.toolbar-handle,

  65.   .toolbar-handle.responsive-preview-icon,

  66.   .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle {

  67.     &::before {

  68.       transform: rotate(90deg);

  69. 

  70.       &:dir(rtl) {

  71.         transform: rotate(-90deg);

  72.       }

  73.     }

  74. 

  75.     &.open::before {

  76.       transform: rotate(-90deg);

  77. 

  78.       &:dir(rtl) {

  79.         transform: rotate(90deg);

  80.       }

  81.     }

  82.   }

  83. 

  84.   .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,

  85.   .toolbar-tab > .toolbar-icon-edit.toolbar-item.responsive-preview-icon {

  86.     &,

  87.     &.is-active,

  88.     &:focus {

  89.       color: var(--gin-bg-app);

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

  91.     }

  92. 

  93.     &::before,

  94.     &.is-active::before,

  95.     &:focus::before {

  96.       background: var(--gin-bg-app);

  97.     }

  98.   }

  99. 

  100.   #toolbar-item-administration-search::before,

  101.   .toolbar-menu-administration .toolbar-icon::before,

  102.   .toolbar-menu-administration .responsive-preview-icon::before,

  103.   .toolbar-tab > .toolbar-icon-edit.toolbar-item::before,

  104.   .toolbar-icon-toggle-vertical::before,

  105.   .toolbar-icon-toggle-horizontal::before {

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

  107.     mask-repeat: no-repeat;

  108.     mask-position: center center;

  109.     mask-size: var(--gin-icon-size-toolbar) var(--gin-icon-size-toolbar);

  110. 

  111.     @media (forced-colors: active) {

  112.       background: linktext !important;

  113.     }

  114.   }

  115. 

  116.   #toolbar-item-administration-search.toolbar-icon-default::before,

  117.   .toolbar-menu-administration .toolbar-icon.toolbar-icon-default::before,

  118.   .toolbar-menu-administration .toolbar-icon-default.responsive-preview-icon::before,

  119.   .toolbar-tab > .toolbar-icon-edit.toolbar-item.toolbar-icon-default::before,

  120.   .toolbar-icon-toggle-vertical.toolbar-icon-default::before,

  121.   .toolbar-icon-toggle-horizontal.toolbar-icon-default::before {

  122.     mask-size: 26px 26px;

  123.   }

  124. 

  125.   #toolbar-item-administration-tray .toolbar-icon-admin-toolbar-tools-help.toolbar-icon-default {

  126.     &::before {

  127.       padding-inline: 0;

  128.       margin-inline-start: 0;

  129.       background-color: var(--gin-color-text);

  130.       mask-image: url("../../media/icons/general/gin.svg");

  131.       mask-position: center center;

  132.     }

  133. 

  134.     &.is-active {

  135.       background-color: transparent;

  136. 

  137.       &::after {

  138.         display: none;

  139.       }

  140.     }

  141.   }

  142. 

  143.   .toolbar-icon-default::before {

  144.     padding-block-start: 0;

  145.   }

  146. 

  147.   .toolbar-icon::before,

  148.   .responsive-preview-icon::before {

  149.     mask-image: var(--icon);

  150.   }

  151. 

  152.   .toolbar-link--admin-toolbar-tools-help::before,

  153.   .toolbar-button--icon--admin-toolbar-tools-help::before,

  154.   .toolbar-button--icon--navigation-extra-tools-help::before {

  155.     --icon: url("../../media/icons/general/tool.svg");

  156.   }

  157. 

  158.   .toolbar-icon-system-themes-page::before,

  159.   .toolbar-link--system-themes-page::before,

  160.   .toolbar-button--icon--system-themes-page::before {

  161.     --icon: url("../../media/icons/toolbar/appearance.svg");

  162.   }

  163. 

  164.   .toolbar-link--blocks::before,

  165.   .toolbar-button--icon--navigation-blocks::before {

  166.     --icon: url("../../media/icons/navigation/blocks.svg");

  167.   }

  168. 

  169.   .toolbar-link--bookmarks::before,

  170.   .toolbar-button--icon--bookmarks::before {

  171.     --icon: url("../../media/icons/navigation/bookmarks.svg");

  172.   }

  173. 

  174.   .toolbar-icon-shortcut::before,

  175.   .toolbar-button--icon--shortcuts::before {

  176.     --icon: url("../../media/icons/toolbar-meta/shortcut.svg");

  177.   }

  178. 

  179.   .toolbar-icon-system-admin-config::before,

  180.   .toolbar-link--system-admin-config::before,

  181.   .toolbar-button--icon--system-admin-config::before {

  182.     --icon: url("../../media/icons/toolbar/config.svg");

  183.   }

  184. 

  185.   .toolbar-icon-system-admin-content::before,

  186.   .toolbar-link--content::before,

  187.   .toolbar-button--icon--navigation-content::before {

  188.     --icon: url("../../media/icons/toolbar/content.svg");

  189.   }

  190. 

  191.   .toolbar-link--create::before,

  192.   .toolbar-button--icon--navigation-create::before {

  193.     --icon: url("../../media/icons/navigation/create.svg");

  194.   }

  195. 

  196.   .toolbar-button--icon--thin-pencil::before {

  197.     --icon: url("../../media/icons/toolbar/edit.svg");

  198.   }

  199. 

  200.   .toolbar-icon-system-modules-list::before,

  201.   .toolbar-link--system-modules-list::before,

  202.   .toolbar-button--icon--system-modules-list::before {

  203.     --icon: url("../../media/icons/navigation/extend-new.svg");

  204.   }

  205. 

  206.   .toolbar-link--files::before,

  207.   .toolbar-button--icon--navigation-files::before {

  208.     --icon: url("../../media/icons/navigation/files.svg");

  209.   }

  210. 

  211.   .toolbar-icon-help-main::before,

  212.   .toolbar-icon-help::before,

  213.   .toolbar-link--help::before,

  214.   .toolbar-button--icon--help::before {

  215.     --icon: url("../../media/icons/toolbar/help.svg");

  216.   }

  217. 

  218.   .toolbar-icon-commerce-admin-commerce::before,

  219.   .toolbar-link--commerce-admin-commerce::before,

  220.   .toolbar-button--icon--commerce-admin-commerce::before,

  221.   .toolbar-icon-commerce-inbox::before,

  222.   .toolbar-link---commerce-inbox::before,

  223.   .toolbar-button--icon--commerce-inbox::before {

  224.     --icon: url("../../media/icons/toolbar/commerce.svg");

  225.   }

  226. 

  227.   .toolbar-link--media::before,

  228.   .toolbar-button--icon--navigation-media::before {

  229.     --icon: url("../../media/icons/navigation/media.svg");

  230.   }

  231. 

  232.   .toolbar-icon-entity-user-collection::before,

  233.   .toolbar-link--entity-user-collection::before,

  234.   .toolbar-button--icon--entity-user-collection::before {

  235.     --icon: url("../../media/icons/navigation/people-new.svg");

  236.   }

  237. 

  238.   .toolbar-icon-system-admin-reports::before,

  239.   .toolbar-link--system-admin-reports::before,

  240.   .toolbar-button--icon--system-admin-reports::before {

  241.     --icon: url("../../media/icons/toolbar/reports.svg");

  242.   }

  243. 

  244.   .toolbar-icon-system-admin-structure::before,

  245.   .toolbar-link--system-admin-structure::before,

  246.   .toolbar-button--icon--system-admin-structure::before {

  247.     --icon: url("../../media/icons/toolbar/structure.svg");

  248.   }

  249. 

  250.   .toolbar-link--sidebar-toggle[aria-expanded="false"]::before,

  251.   .toolbar-link--sidebar-toggle[aria-expanded="true"]::before {

  252.     --icon: url("../../media/icons/navigation/chevron-down.svg");

  253.   }

  254. 

  255.   .toolbar-icon-user::before,

  256.   .toolbar-link--user::before,

  257.   .toolbar-button--icon--user::before,

  258.   .toolbar-button--icon--navigation-user-links-user-wrapper::before {

  259.     --icon: url("../../media/icons/toolbar-meta/user.svg");

  260.   }

  261. 

  262.   .toolbar-icon-announcements-feed-announcement::before,

  263.   .toolbar-icon-announce::before,

  264.   .toolbar-link--announcements-feed-announcement::before,

  265.   .toolbar-button--icon--announcements-feed-announcement::before {

  266.     --icon: url("../../media/icons/navigation/announcement.svg");

  267.   }

  268. 

  269.   .toolbar-icon-system-admin-group::before,

  270.   .toolbar-link--system-admin-group::before,

  271.   .toolbar-button--icon--system-admin-group::before {

  272.     --icon: url("../../media/icons/toolbar/group.svg");

  273.   }

  274. 

  275.   .toolbar-icon-tmgmt-admin-tmgmt::before,

  276.   .toolbar-link--tmgmt-admin-tmgmt::before,

  277.   .toolbar-icon-language::before,

  278.   .toolbar-link--language::before,

  279.   .toolbar-button--icon--tmgmt-admin-tmgmt::before,

  280.   .toolbar-button--icon--language::before {

  281.     --icon: url("../../media/icons/toolbar/tmgmt.svg");

  282.   }

  283. 

  284.   .toolbar-icon-bat-admin::before,

  285.   .toolbar-link--bat-admin::before,

  286.   .toolbar-button--icon--bat-admin::before {

  287.     --icon: url("../../media/icons/toolbar/bat.svg");

  288.   }

  289. 

  290.   .toolbar-icon-menu::before,

  291.   .toolbar-button--icon--burger::before {

  292.     --icon: url("../../media/icons/toolbar/hamburger.svg");

  293.   }

  294. 

  295.   #toolbar-item-administration-search::before,

  296.   #admin-toolbar-mobile-search-tab .toolbar-icon::before,

  297.   #admin-toolbar-mobile-search-tab .responsive-preview-icon::before {

  298.     --icon: url("../../media/icons/toolbar-meta/search.svg");

  299.   }

  300. 

  301.   .toolbar-icon-devel::before,

  302.   .toolbar-button--icon--devel::before {

  303.     --icon: url("../../media/icons/toolbar-meta/devel.svg");

  304.   }

  305. 

  306.   .toolbar-icon-rebuild-cache-access::before {

  307.     --icon: url("../../media/icons/toolbar-meta/rebuild-cache.svg");

  308.   }

  309. 

  310.   .responsive-preview-icon::before {

  311.     --icon: url("../../media/icons/toolbar-meta/responsive-preview.svg");

  312.   }

  313. 

  314.   .toolbar-icon-environment::before,

  315.   .toolbar-button--icon--environment::before {

  316.     --icon: url("../../media/icons/status-report/server.svg");

  317.   }

  318. 

  319.   .toolbar-icon-toggle-vertical::before,

  320.   .toolbar-button--icon--back::before {

  321.     /* cspell:disable-next-line */

  322.     --icon: url("../../media/icons/toolbar/nav-toggle-toleft.svg");

  323.   }

  324. 

  325.   .toolbar-icon-toggle-horizontal::before {

  326.     /* cspell:disable-next-line */

  327.     --icon: url("../../media/icons/toolbar/nav-toggle-totop.svg");

  328.   }

  329. 

  330.   .toolbar-button--icon--cross::before {

  331.     --icon: url("../../media/icons/general/close.svg");

  332.   }

  333. 

  334.   .toolbar-button--icon--navigation-trash {

  335.     --icon: url("../../media/icons/toolbar/trash-module.svg");

  336.   }

  337. 

  338.   .toolbar-icon-escape-admin {

  339.     display: none;

  340.   }

  341. 

  342.   .toolbar-icon-edit::before,

  343.   .toolbar-tab > .toolbar-icon-edit.toolbar-item::before {

  344.     mask-image: url("../../media/icons/toolbar/edit.svg");

  345.     mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);

  346.   }

  347. 

  348.   .toolbar-icon-local-tasks::before {

  349.     mask-image: url("../../media/icons/toolbar/local-tasks.svg");

  350.     mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);

  351.   }

  352. 

  353.   /* cspell:disable-next-line */

  354.   @media (--admin-xsmall) {

  355.     .user-menu {

  356.       flex-grow: 1;

  357.       flex-shrink: 0;

  358.       text-align: end;

  359. 

  360.       .toolbar-menu {

  361.         text-align: start;

  362.       }

  363.     }

  364.   }

  365. 

  366.   @media only screen and (--admin-compact) {

  367.     .toolbar-tab > .toolbar-icon::before,

  368.     .toolbar-tab > .responsive-preview-icon::before {

  369.       background-size: 90% auto;

  370.     }

  371.   }

  372. 

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

  374.     #toolbar-item-administration-search:hover::before,

  375.     .toolbar-menu-administration .toolbar-icon:hover::before,

  376.     .toolbar-menu-administration .responsive-preview-icon:hover::before,

  377.     .toolbar-tab > .toolbar-icon-edit.toolbar-item:hover::before,

  378.     .toolbar-icon-toggle-vertical:hover::before,

  379.     .toolbar-icon-toggle-horizontal:hover::before {

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

  381.     }

  382. 

  383.     #toolbar-item-administration-search.is-active:hover::before,

  384.     .toolbar-menu-administration .toolbar-icon.is-active:hover::before,

  385.     .toolbar-menu-administration .is-active.responsive-preview-icon:hover::before,

  386.     .toolbar-tab > .toolbar-icon-edit.toolbar-item.is-active:hover::before,

  387.     .toolbar-icon-toggle-vertical.is-active:hover::before,

  388.     .toolbar-icon-toggle-horizontal.is-active:hover::before {

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

  390.     }

  391.   }

  392. }

  393. 

  394. .toolbar-horizontal .toolbar-tray {

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

  396.   box-shadow: none;

  397. 

  398.   a,

  399.   span {

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

  401.     font-weight: var(--font-weight-normal);

  402. 

  403.     &:hover,

  404.     &:active,

  405.     &:focus,

  406.     &.is-active {

  407.       text-decoration: none;

  408.     }

  409.   }

  410. 

  411.   .menu-item {

  412.     a:hover,

  413.     a:focus {

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

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

  416.     }

  417. 

  418.     a:hover .toolbar-icon::before,

  419.     a:hover .responsive-preview-icon::before,

  420.     a:focus .toolbar-icon::before,

  421.     a:focus .responsive-preview-icon::before {

  422.       background-color: var(--gin-color-title);

  423.     }

  424. 

  425.     a:hover .toolbar-icon.is-active::before,

  426.     a:hover .is-active.responsive-preview-icon::before,

  427.     a:focus .toolbar-icon.is-active::before,

  428.     a:focus .is-active.responsive-preview-icon::before {

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

  430.     }

  431. 

  432.     a:focus {

  433.       box-shadow:

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

  435.         inset 0 0 0 4px var(--gin-color-focus);

  436.     }

  437. 

  438.     & + .menu-item {

  439.       border-inline-start: 0 none;

  440. 

  441.       &:last-child {

  442.         border-inline-end: 0 none;

  443.       }

  444.     }

  445. 

  446.     .menu-item .toolbar-icon::before,

  447.     .menu-item .responsive-preview-icon::before {

  448.       display: none;

  449.     }

  450.   }

  451. 

  452.   .menu-item--no-link:hover,

  453.   .menu-item--no-link a:focus {

  454.     background-color: transparent;

  455.   }

  456. }

  457. 

  458. .gin--dark-mode.toolbar-horizontal .toolbar-tray {

  459.   border-block-end: 1px solid var(--gin-border-color-layer);

  460. }

  461. 

  462. .toolbar .toolbar-tray-horizontal {

  463.   ul ul li.menu-item:first-child {

  464.     border-block-start: 0;

  465.   }

  466. 

  467.   .menu-item:last-child {

  468.     border-inline: 0;

  469.   }

  470. }

  471. 

  472. .toolbar .toolbar-tray-vertical {

  473.   border-inline-end: 1px solid var(--gin-border-color);

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

  475.   box-shadow: none;

  476. 

  477.   .menu-item + .menu-item {

  478.     border-block-start: 1px solid var(--gin-border-color-layer);

  479.   }

  480. 

  481.   .menu-item + .menu-item__spacer {

  482.     border-block-start: 0 none;

  483.   }

  484. 

  485.   .menu-item .toolbar-menu,

  486.   .menu-item:last-child {

  487.     border-block-end: 0 none;

  488.   }

  489. 

  490.   .menu-item .toolbar-logo {

  491.     padding-inline-start: var(--space-m);

  492.   }

  493. 

  494.   .level-1.menu-item:last-child {

  495.     border-block-end: 1px solid var(--gin-border-color-layer);

  496.   }

  497. 

  498.   .level-2 .toolbar-menu {

  499.     background-color: var(--gin-toolbar-bg-level2);

  500.   }

  501. 

  502.   .level-3 .toolbar-menu {

  503.     background-color: var(--gin-toolbar-bg-level3);

  504.   }

  505. }

  506. 

  507. .gin--dark-mode .toolbar .toolbar-tray-vertical {

  508.   .toolbar-menu ul ul {

  509.     border-color: transparent;

  510.   }

  511. 

  512.   .level-1 .toolbar-menu {

  513.     background: var(--gin-bg-layer2);

  514.   }

  515. 

  516.   .level-2 .toolbar-menu {

  517.     background: var(--gin-bg-layer3);

  518.   }

  519. 

  520.   .level-3 .toolbar-menu {

  521.     background: #5a5a61;

  522.   }

  523. }

  524. 

  525. .toolbar-tray-horizontal {

  526.   .menu-item.hover-intent,

  527.   .menu-item:focus-within,

  528.   .menu-item--expanded {

  529.     background-color: transparent;

  530.   }

  531. 

  532.   ul li.menu-item .menu-item {

  533.     border-block-end: 0 none;

  534.     background: transparent;

  535.     border-inline: none;

  536.   }

  537. 

  538.   ul li.menu-item--expanded.hover-intent ul,

  539.   ul li.menu-item--expanded:focus-within ul {

  540.     box-shadow: 0 8px 14px rgb(0, 0, 0, 0.15);

  541.   }

  542. }

  543. 

  544. #toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item {

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

  546. 

  547.   &:hover::before {

  548.     background: #fff;

  549.   }

  550. }

  551. 

  552. .toolbar .toolbar-icon.toolbar-handle::before,

  553. .toolbar .toolbar-handle.responsive-preview-icon::before,

  554. .toolbar .toolbar-icon.toolbar-handle.open::before,

  555. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle::before,

  556. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before,

  557. .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,

  558. .toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {

  559.   background-image: none;

  560. }

  561. 

  562. .toolbar .toolbar-icon.toolbar-handle::before,

  563. .toolbar .toolbar-handle.responsive-preview-icon::before,

  564. .toolbar .toolbar-icon.toolbar-handle.open::before,

  565. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle::before,

  566. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before,

  567. .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded::before {

  568.   position: absolute;

  569.   display: block;

  570.   width: 16px;

  571.   height: 16px;

  572.   content: "";

  573.   background-color: var(--gin-color-disabled);

  574.   inset-inline-end: 0;

  575.   inset-block-start: 18px;

  576.   mask-image: url("../../media/icons/general/handle.svg");

  577.   mask-repeat: no-repeat;

  578.   mask-position: center center;

  579.   mask-size: 14px 14px;

  580. 

  581.   &:dir(rtl) {

  582.     transform: scaleX(-1);

  583.   }

  584. }

  585. 

  586. .toolbar .toolbar-icon.toolbar-handle.menu-item--active-trail::before,

  587. .toolbar .toolbar-handle.menu-item--active-trail.responsive-preview-icon::before,

  588. .toolbar .toolbar-icon.toolbar-handle:hover::before,

  589. .toolbar .toolbar-handle.responsive-preview-icon:hover::before,

  590. .toolbar .toolbar-icon.toolbar-handle:focus::before,

  591. .toolbar .toolbar-handle.responsive-preview-icon:focus::before,

  592. .toolbar .toolbar-icon.toolbar-handle:focus-within::before,

  593. .toolbar .toolbar-handle.responsive-preview-icon:focus-within::before,

  594. .toolbar .toolbar-icon.toolbar-handle.open.menu-item--active-trail::before,

  595. .toolbar .toolbar-icon.toolbar-handle.open:hover::before,

  596. .toolbar .toolbar-icon.toolbar-handle.open:focus::before,

  597. .toolbar .toolbar-icon.toolbar-handle.open:focus-within::before,

  598. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.menu-item--active-trail::before,

  599. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:hover::before,

  600. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:focus::before,

  601. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:focus-within::before,

  602. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open.menu-item--active-trail::before,

  603. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:hover::before,

  604. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:focus::before,

  605. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:focus-within::before,

  606. .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded.menu-item--active-trail::before,

  607. .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded:hover::before,

  608. .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded:focus::before,

  609. .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded:focus-within::before {

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

  611. }

  612. 

  613. .toolbar .toolbar-tray-vertical .toolbar-menu {

  614.   a,

  615.   span {

  616.     display: block;

  617.     padding-inline-start: 3.25em;

  618.     padding-block: 1.5em;

  619. 

  620.     &:visited,

  621.     &:hover,

  622.     &:focus {

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

  624.     }

  625.   }

  626. 

  627.   a:focus,

  628.   span:focus {

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

  630.   }

  631. 

  632.   a.is-active::before,

  633.   span.is-active::before {

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

  635.   }

  636. }

  637. 

  638. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before,

  639. .toolbar .toolbar-bar .toolbar-tab > .responsive-preview-icon::before {

  640.   background: none;

  641.   background-color: rgb(255, 255, 255, 0.75);

  642.   mask-repeat: no-repeat;

  643.   mask-position: center center;

  644.   mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);

  645. }

  646. 

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

  648.   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before,

  649.   .toolbar .toolbar-bar .toolbar-tab > .is-active.responsive-preview-icon::before,

  650.   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active:hover::before {

  651.     background-color: var(--gin-color-button-text);

  652.   }

  653. }

  654. 

  655. @media (--admin-to-medium) {

  656.   .toolbar-secondary .toolbar-bar .toolbar-icon:hover::before,

  657.   .toolbar-secondary .toolbar-bar .responsive-preview-icon:hover::before,

  658.   .toolbar-secondary .toolbar-bar .toolbar-icon.is-active::before,

  659.   .toolbar-secondary .toolbar-bar .is-active.responsive-preview-icon::before,

  660.   .toolbar-icon-edit:hover::before,

  661.   .toolbar-icon-edit.is-active::before,

  662.   .toolbar-icon-menu:hover::before,

  663.   .toolbar-icon-menu.is-active::before,

  664.   .toolbar-icon-local-tasks:hover::before,

  665.   .toolbar-icon-local-tasks.is-active::before,

  666.   #toolbar-item-administration-search:hover::before,

  667.   #toolbar-item-administration-search.is-active::before,

  668.   .toolbar-tab > .toolbar-icon-edit.toolbar-item:hover::before,

  669.   .toolbar-tab > .toolbar-icon-edit.toolbar-item.is-active::before {

  670.     background: #fff;

  671.   }

  672. }

  673. 

  674. .toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon::before,

  675. .toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .responsive-preview-icon::before {

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

  677. 

  678.   @media (forced-colors: active) {

  679.     background: linktext !important;

  680.   }

  681. }

  682. 

  683. .toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item::before,

  684. .toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item.responsive-preview-icon::before {

  685.   inset-inline-start: 0.55rem;

  686. }

  687. 

  688. #toolbar-item-administration-tray {

  689.   .toolbar-logo {

  690.     padding-block: var(--space-xs);

  691. 

  692.     img {

  693.       max-width: 100px;

  694.       max-height: 35px;

  695.       object-fit: contain;

  696.       object-position: center;

  697.     }

  698.   }

  699. }

  700. 

  701. #toolbar-item-user,

  702. #toolbar-item-user-secondary {

  703.   display: inline-block;

  704.   min-width: unset;

  705.   vertical-align: top;

  706. 

  707.   &.icon-user {

  708.     margin-block-start: 2px;

  709.     margin-inline-start: var(--space-xs);

  710.     padding-inline-start: 0;

  711.   }

  712. }

  713. 

  714. [data-toolbar-tray="toolbar-item-devel-tray"] {

  715.   .toolbar-icon-admin-toolbar-tools-help,

  716.   .menu-item__tools,

  717.   .toolbar-logo {

  718.     display: none;

  719.   }

  720. }

  721. 

  722. .menu-item__announcements_feed-announcement {

  723.   display: none !important;

  724. }

  725. 

  726. .responsive-preview-icon::before {

  727.   mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);

  728. }

  729. 

  730. #admin-toolbar-search-input {

  731.   box-sizing: border-box;

  732.   width: 245px;

  733.   padding-inline-start: calc(var(--space-xl) + var(--space-xs));

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

  735.   border: 1px solid var(--gin-border-color);

  736.   border-radius: 25px;

  737.   background-color: #fff;

  738. 

  739.   &:not(:hover, :focus) {

  740.     box-shadow: none;

  741.   }

  742. 

  743.   .gin--dark-mode 
  744.   }

  745. }

  746. 

  747. #admin-toolbar-search-tab .js-form-type-search {

  748.   position: relative;

  749.   margin: 0;

  750. 

  751.   &::before {

  752.     position: absolute;

  753.     display: block;

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

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

  756.     content: "";

  757.     opacity: 0.75;

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

  759.     inset-block-start: 11px;

  760.     inset-inline-start: var(--space-m);

  761.     mask-image: url("../../media/icons/toolbar-meta/search.svg");

  762.     mask-size: 100% 100%;

  763.     mask-position: center center;

  764. 

  765.     @media (forced-colors: active) {

  766.       background-color: buttonBorder;

  767.     }

  768.   }

  769. }

  770. 

  771. .ui-autocomplete.admin-toolbar-search-autocomplete-list {

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

  773.   border-radius: var(--gin-border-l);

  774.   background-color: var(--gin-bg-layer3);

  775.   box-shadow: var(--gin-shadow-l2);

  776. 

  777.   &.ui-widget-content {

  778.     overflow-y: auto;

  779.     border: 0 none;

  780.     padding-block: var(--space-xs);

  781.   }

  782. 

  783.   .ui-menu-item {

  784.     padding: 0 var(--space-xs);

  785. 

  786.     span.admin-toolbar-search-url {

  787.       display: none;

  788.     }

  789.   }

  790. 

  791.   .ui-menu-item-wrapper {

  792.     padding: var(--space-xs) var(--space-m);

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

  794.     font-size: var(--font-size-s);

  795.     line-height: 1.3;

  796. 

  797.     &.ui-state-active {

  798.       color: var(--gin-color-button-text);

  799.       border: 0 none;

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

  801. 

  802.       a {

  803.         color: var(--gin-color-button-text);

  804.       }

  805.     }

  806.   }

  807. }

  808. 

  809. .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box {

  810.   .toolbar-icon.toolbar-handle,

  811.   .toolbar-handle.responsive-preview-icon {

  812.     position: absolute;

  813.     inset-inline-end: 0.5rem;

  814.     inset-block-start: 1.1875rem;

  815.     width: 1rem;

  816.     height: 1rem;

  817.     padding: 0;

  818. 

  819.     &::before {

  820.       inset-block-start: 0;

  821.       inset-inline-start: 0;

  822.       mask-size: 12px 12px;

  823.     }

  824.   }

  825. }

  826. 

  827. .toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box .toolbar-handle {

  828.   position: absolute;

  829.   inset-block-start: 0;

  830.   inset-inline-end: 0;

  831.   width: 39px;

  832.   height: 100%;

  833.   padding: 0;

  834.   background: none;

  835. 

  836.   &:focus {

  837.     box-shadow:

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

  839.       inset 0 0 0 4px var(--gin-color-focus);

  840.   }

  841. 

  842.   &::before {

  843.     display: none !important;

  844.   }

  845. }

  846. 

  847. .toolbar-tray-horizontal .toolbar-icon:not(.toolbar-handle),

  848. .toolbar-tray-horizontal .responsive-preview-icon:not(.toolbar-handle) {

  849.   width: 100%;

  850. }

  851. 

  852. .toolbar-loading #toolbar-item-administration-tray {

  853.   border-inline-end: 0;

  854.   background-color: transparent;

  855. 

  856.   .menu-item + .menu-item {

  857.     border-inline: 0;

  858.   }

  859. 

  860.   &.toolbar-tray {

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

  862.   }

  863. }

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