admin-toolbar-control-bar.pcss.css

Same filename in other branches
  1. 11.x core/modules/navigation/css/components/admin-toolbar-control-bar.pcss.css
@import "../base/media-queries.pcss.css";

:root {
  --admin-toolbar-top-bar-height: var(-admin-toolbar-space-64);
}

.admin-toolbar-control-bar {
  position: relative;
  z-index: var(--admin-toolbar-z-index-admin-toolbar-control-bar);
  display: flex;
  padding: var(--admin-toolbar-space-4);
  border-bottom: 1px solid var(--admin-toolbar-color-gray-100);
  background-color: white;
  font-family: var(--admin-toolbar-font-family);

  @media (--admin-toolbar-desktop) {
    display: none;
  }
}

.admin-toolbar-control-bar__burger {
  align-self: start;

  @media (--admin-toolbar-desktop) {
    display: none;
  }
}

.admin-toolbar-control-bar__content {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-toolbar-space-16);
  width: 100%;
}

File

core/modules/navigation/css/components/admin-toolbar-control-bar.pcss.css

View source
  1. @import "../base/media-queries.pcss.css";
  2. :root {
  3. --admin-toolbar-top-bar-height: var(-admin-toolbar-space-64);
  4. }
  5. .admin-toolbar-control-bar {
  6. position: relative;
  7. z-index: var(--admin-toolbar-z-index-admin-toolbar-control-bar);
  8. display: flex;
  9. padding: var(--admin-toolbar-space-4);
  10. border-bottom: 1px solid var(--admin-toolbar-color-gray-100);
  11. background-color: white;
  12. font-family: var(--admin-toolbar-font-family);
  13. @media (--admin-toolbar-desktop) {
  14. display: none;
  15. }
  16. }
  17. .admin-toolbar-control-bar__burger {
  18. align-self: start;
  19. @media (--admin-toolbar-desktop) {
  20. display: none;
  21. }
  22. }
  23. .admin-toolbar-control-bar__content {
  24. display: grid;
  25. grid-auto-flow: column;
  26. align-items: center;
  27. justify-content: space-between;
  28. gap: var(--admin-toolbar-space-16);
  29. width: 100%;
  30. }

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