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 "../../../css/base/media-queries.pcss.css";

  9. 

  10. /* This block copied from system-admin-layout.pcss.css */

  11. @media screen and (min-width: 38em) {

  12.   .toolbar-tray-open:not(.toolbar-vertical) .layout-container,

  13.   body:not(.toolbar-tray-open) .layout-container {

  14.     margin-right: 3em;

  15.     margin-left: 3em;

  16.   }

  17. 

  18.   .toolbar-tray-open:not(.toolbar-vertical) .layout-row,

  19.   body:not(.toolbar-tray-open) .layout-row {

  20.     margin-right: -1.5em;

  21.     margin-left: -1.5em;

  22.   }

  23. 

  24.   .toolbar-tray-open:not(.toolbar-vertical) .layout-column,

  25.   body:not(.toolbar-tray-open) .layout-column {

  26.     float: left;

  27.     /* LTR */

  28.     box-sizing: border-box;

  29.     padding-right: 1.5em;

  30.     padding-left: 1.5em;

  31.   }

  32. 

  33.   [dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .layout-column,

  34.   [dir="rtl"] body:not(.toolbar-tray-open) .layout-column {

  35.     float: right;

  36.   }

  37. 

  38.   .toolbar-tray-open:not(.toolbar-vertical) .layout-column--half,

  39.   body:not(.toolbar-tray-open) .layout-column--half {

  40.     width: 50%;

  41.   }

  42. 

  43.   .toolbar-tray-open:not(.toolbar-vertical) .layout-column--quarter,

  44.   body:not(.toolbar-tray-open) .layout-column--quarter {

  45.     width: 25%;

  46.   }

  47. 

  48.   .toolbar-tray-open:not(.toolbar-vertical) .layout-column--three-quarter,

  49.   body:not(.toolbar-tray-open) .layout-column--three-quarter {

  50.     width: 75%;

  51.   }

  52. }

  53. 

  54. body.gin--toolbar {

  55.   margin-inline-start: 0;

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

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

  58. }

  59. 

  60. .toolbar-tray-open:not(.toolbar-vertical) .layout-container,

  61. body:not(.toolbar-tray-open) .layout-container {

  62.   margin-inline: var(--gin-spacing-m);

  63. 

  64.   @media (--admin-small) {

  65.     margin-inline: var(--gin-spacing-xl);

  66.   }

  67. 

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

  69.     margin-inline: min(5vw, var(--gin-spacing-xxl));

  70. 

  71.     .layout-container {

  72.       margin-inline: 0;

  73.     }

  74.   }

  75. }

  76. 

  77. .toolbar {

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

  79. }

  80. 

  81. .toolbar .toolbar-bar {

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

  83. 

  84.   box-shadow: none;

  85. 

  86.   .toolbar-tab > .toolbar-item {

  87.     white-space: nowrap;

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

  89.   }

  90. 

  91.   .contextual-toolbar-tab.toolbar-tab {

  92.     float: inline-end;

  93.   }

  94. 

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

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

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

  98. 

  99.     &::before {

  100.       background-color: #fff;

  101.     }

  102.   }

  103. 

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

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

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

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

  108.     background-image: none;

  109. 

  110.     &::before {

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

  112.     }

  113. 

  114.     .gin--dark-mode 
  115.     }

  116.   }

  117. 

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

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

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

  121.     background-position: center center;

  122.     background-size: 14px 14px;

  123.   }

  124. 

  125.   .toolbar-icon.toolbar-handle,

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

  127.   .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle {

  128.     &::before {

  129.       transform: rotate(90deg);

  130. 

  131.       &:dir(rtl) {

  132.         transform: rotate(-90deg);

  133.       }

  134.     }

  135. 

  136.     &.open::before {

  137.       transform: rotate(-90deg);

  138. 

  139.       &:dir(rtl) {

  140.         transform: rotate(90deg);

  141.       }

  142.     }

  143.   }

  144. 

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

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

  147.     &,

  148.     &.is-active,

  149.     &:focus {

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

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

  152.     }

  153. 

  154.     &::before,

  155.     &.is-active::before,

  156.     &:focus::before {

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

  158.     }

  159.   }

  160. 

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

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

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

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

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

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

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

  168.     mask-repeat: no-repeat;

  169.     mask-position: center center;

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

  171. 

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

  173.       background: linktext !important;

  174.     }

  175.   }

  176. 

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

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

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

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

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

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

  183.     mask-size: 26px 26px;

  184.   }

  185. 

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

  187.     &::before {

  188.       padding-inline: 0;

  189.       margin-inline-start: 0;

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

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

  192.       mask-position: center center;

  193.     }

  194. 

  195.     &.is-active {

  196.       background-color: transparent;

  197. 

  198.       &::after {

  199.         display: none;

  200.       }

  201.     }

  202.   }

  203. 

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

  205.     padding-block-start: 0;

  206.   }

  207. 

  208.   .toolbar-icon::before,

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

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

  211.   }

  212. 

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

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

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

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

  217.   }

  218. 

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

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

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

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

  223.   }

  224. 

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

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

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

  228.   }

  229. 

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

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

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

  233.   }

  234. 

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

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

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

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

  239.   }

  240. 

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

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

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

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

  245.   }

  246. 

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

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

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

  250.   }

  251. 

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

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

  254.   }

  255. 

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

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

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

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

  260.   }

  261. 

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

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

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

  265.   }

  266. 

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

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

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

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

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

  272.   }

  273. 

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

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

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

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

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

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

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

  281.   }

  282. 

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

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

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

  286.   }

  287. 

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

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

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

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

  292.   }

  293. 

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

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

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

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

  298.   }

  299. 

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

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

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

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

  304.   }

  305. 

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

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

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

  309.   }

  310. 

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

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

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

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

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

  316.   }

  317. 

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

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

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

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

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

  323.   }

  324. 

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

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

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

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

  329.   }

  330. 

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

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

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

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

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

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

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

  338.   }

  339. 

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

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

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

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

  344.   }

  345. 

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

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

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

  349.   }

  350. 

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

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

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

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

  355.   }

  356. 

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

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

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

  360.   }

  361. 

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

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

  364.   }

  365. 

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

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

  368.   }

  369. 

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

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

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

  373.   }

  374. 

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

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

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

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

  379.   }

  380. 

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

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

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

  384.   }

  385. 

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

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

  388.   }

  389. 

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

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

  392.   }

  393. 

  394.   .toolbar-icon-escape-admin {

  395.     display: none;

  396.   }

  397. 

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

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

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

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

  402.   }

  403. 

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

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

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

  407.   }

  408. 

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

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

  411.     .user-menu {

  412.       flex-grow: 1;

  413.       flex-shrink: 0;

  414.       text-align: end;

  415. 

  416.       .toolbar-menu {

  417.         text-align: start;

  418.       }

  419.     }

  420.   }

  421. 

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

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

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

  425.       background-size: 90% auto;

  426.     }

  427.   }

  428. 

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

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

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

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

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

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

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

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

  437.     }

  438. 

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

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

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

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

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

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

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

  446.     }

  447.   }

  448. }

  449. 

  450. .toolbar-horizontal .toolbar-tray {

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

  452.   box-shadow: none;

  453. 

  454.   a,

  455.   span {

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

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

  458. 

  459.     &:hover,

  460.     &:active,

  461.     &:focus,

  462.     &.is-active {

  463.       text-decoration: none;

  464.     }

  465.   }

  466. 

  467.   .menu-item {

  468.     a:hover,

  469.     a:focus {

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

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

  472.     }

  473. 

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

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

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

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

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

  479.     }

  480. 

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

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

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

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

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

  486.     }

  487. 

  488.     a:focus {

  489.       box-shadow:

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

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

  492.     }

  493. 

  494.     & + .menu-item {

  495.       border-inline-start: 0 none;

  496. 

  497.       &:last-child {

  498.         border-inline-end: 0 none;

  499.       }

  500.     }

  501. 

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

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

  504.       display: none;

  505.     }

  506.   }

  507. 

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

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

  510.     background-color: transparent;

  511.   }

  512. }

  513. 

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

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

  516. }

  517. 

  518. .toolbar .toolbar-tray-horizontal {

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

  520.     border-block-start: 0;

  521.   }

  522. 

  523.   .menu-item:last-child {

  524.     border-inline: 0;

  525.   }

  526. }

  527. 

  528. .toolbar .toolbar-tray-vertical {

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

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

  531.   box-shadow: none;

  532. 

  533.   .menu-item + .menu-item {

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

  535.   }

  536. 

  537.   .menu-item + .menu-item__spacer {

  538.     border-block-start: 0 none;

  539.   }

  540. 

  541.   .menu-item .toolbar-menu,

  542.   .menu-item:last-child {

  543.     border-block-end: 0 none;

  544.   }

  545. 

  546.   .menu-item .toolbar-logo {

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

  548.   }

  549. 

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

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

  552.   }

  553. 

  554.   .level-2 .toolbar-menu {

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

  556.   }

  557. 

  558.   .level-3 .toolbar-menu {

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

  560.   }

  561. }

  562. 

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

  564.   .toolbar-menu ul ul {

  565.     border-color: transparent;

  566.   }

  567. 

  568.   .level-1 .toolbar-menu {

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

  570.   }

  571. 

  572.   .level-2 .toolbar-menu {

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

  574.   }

  575. 

  576.   .level-3 .toolbar-menu {

  577.     background: #5a5a61;

  578.   }

  579. }

  580. 

  581. .toolbar-tray-horizontal {

  582.   .menu-item.hover-intent,

  583.   .menu-item:focus-within,

  584.   .menu-item--expanded {

  585.     background-color: transparent;

  586.   }

  587. 

  588.   ul li.menu-item .menu-item {

  589.     border-block-end: 0 none;

  590.     background: transparent;

  591.     border-inline: none;

  592.   }

  593. 

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

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

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

  597.   }

  598. }

  599. 

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

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

  602. 

  603.   &:hover::before {

  604.     background: #fff;

  605.   }

  606. }

  607. 

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

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

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

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

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

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

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

  615.   background-image: none;

  616. }

  617. 

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

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

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

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

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

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

  624.   position: absolute;

  625.   display: block;

  626.   width: 16px;

  627.   height: 16px;

  628.   content: "";

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

  630.   inset-inline-end: 0;

  631.   inset-block-start: 18px;

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

  633.   mask-repeat: no-repeat;

  634.   mask-position: center center;

  635.   mask-size: 14px 14px;

  636. 

  637.   &:dir(rtl) {

  638.     transform: scaleX(-1);

  639.   }

  640. }

  641. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  667. }

  668. 

  669. .toolbar .toolbar-tray-vertical .toolbar-menu {

  670.   a,

  671.   span {

  672.     display: block;

  673.     padding-inline-start: 3.25em;

  674.     padding-block: 1.5em;

  675. 

  676.     &:visited,

  677.     &:hover,

  678.     &:focus {

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

  680.     }

  681.   }

  682. 

  683.   a:focus,

  684.   span:focus {

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

  686.   }

  687. 

  688.   a.is-active::before,

  689.   span.is-active::before {

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

  691.   }

  692. }

  693. 

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

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

  696.   background: none;

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

  698.   mask-repeat: no-repeat;

  699.   mask-position: center center;

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

  701. }

  702. 

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

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

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

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

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

  708.   }

  709. }

  710. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  726.     background: #fff;

  727.   }

  728. }

  729. 

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

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

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

  733. 

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

  735.     background: linktext !important;

  736.   }

  737. }

  738. 

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

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

  741.   inset-inline-start: 0.55rem;

  742. }

  743. 

  744. #toolbar-item-administration-tray {

  745.   .toolbar-logo {

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

  747. 

  748.     img {

  749.       max-width: 100px;

  750.       max-height: 35px;

  751.       object-fit: contain;

  752.       object-position: center;

  753.     }

  754.   }

  755. }

  756. 

  757. #toolbar-item-user,

  758. #toolbar-item-user-secondary {

  759.   display: inline-block;

  760.   min-width: unset;

  761.   vertical-align: top;

  762. 

  763.   &.icon-user {

  764.     margin-block-start: 2px;

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

  766.     padding-inline-start: 0;

  767.   }

  768. }

  769. 

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

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

  772.   .menu-item__tools,

  773.   .toolbar-logo {

  774.     display: none;

  775.   }

  776. }

  777. 

  778. .menu-item__announcements_feed-announcement {

  779.   display: none !important;

  780. }

  781. 

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

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

  784. }

  785. 

  786. #admin-toolbar-search-input {

  787.   box-sizing: border-box;

  788.   width: 245px;

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

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

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

  792.   border-radius: 25px;

  793.   background-color: #fff;

  794. 

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

  796.     box-shadow: none;

  797.   }

  798. 

  799.   .gin--dark-mode 
  800.   }

  801. }

  802. 

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

  804.   position: relative;

  805.   margin: 0;

  806. 

  807.   &::before {

  808.     position: absolute;

  809.     display: block;

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

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

  812.     content: "";

  813.     opacity: 0.75;

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

  815.     inset-block-start: 11px;

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

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

  818.     mask-size: 100% 100%;

  819.     mask-position: center center;

  820. 

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

  822.       background-color: buttonBorder;

  823.     }

  824.   }

  825. }

  826. 

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

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

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

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

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

  832. 

  833.   &.ui-widget-content {

  834.     overflow-y: auto;

  835.     border: 0 none;

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

  837.   }

  838. 

  839.   .ui-menu-item {

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

  841. 

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

  843.       display: none;

  844.     }

  845.   }

  846. 

  847.   .ui-menu-item-wrapper {

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

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

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

  851.     line-height: 1.3;

  852. 

  853.     &.ui-state-active {

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

  855.       border: 0 none;

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

  857. 

  858.       a {

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

  860.       }

  861.     }

  862.   }

  863. }

  864. 

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

  866.   .toolbar-icon.toolbar-handle,

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

  868.     position: absolute;

  869.     inset-inline-end: 0.5rem;

  870.     inset-block-start: 1.1875rem;

  871.     width: 1rem;

  872.     height: 1rem;

  873.     padding: 0;

  874. 

  875.     &::before {

  876.       inset-block-start: 0;

  877.       inset-inline-start: 0;

  878.       mask-size: 12px 12px;

  879.     }

  880.   }

  881. }

  882. 

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

  884.   position: absolute;

  885.   inset-block-start: 0;

  886.   inset-inline-end: 0;

  887.   width: 39px;

  888.   height: 100%;

  889.   padding: 0;

  890.   background: none;

  891. 

  892.   &:focus {

  893.     box-shadow:

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

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

  896.   }

  897. 

  898.   &::before {

  899.     display: none !important;

  900.   }

  901. }

  902. 

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

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

  905.   width: 100%;

  906. }

  907. 

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

  909.   border-inline-end: 0;

  910.   background-color: transparent;

  911. 

  912.   .menu-item + .menu-item {

  913.     border-inline: 0;

  914.   }

  915. 

  916.   &.toolbar-tray {

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

  918.   }

  919. }

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