top-bar.pcss.css

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

:root {
  --admin-toolbar-top-bar-height: calc(4 * var(--admin-toolbar-rem));
}

.top-bar {
  position: relative;
  z-index: var(--admin-toolbar-z-index-top-bar);
  display: flex;
  display: none;
  background-color: white;
  box-shadow: 0 0 8px 0 var(--admin-toolbar-color-shadow-15);
  font-family: var(--admin-toolbar-font-family);
  padding-inline: var(--admin-toolbar-space-4);
  padding-block: var(--admin-toolbar-space-4);

  @media (--admin-toolbar-desktop) {
    block-size: var(--admin-toolbar-top-bar-height);
    position: fixed;
    inset-block-start: var(--drupal-displace-offset-top, 0);
    inset-inline-start: 0;
    width: 100vw;
    padding-block: var(--admin-toolbar-space-12);
    padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
    box-shadow:
      0 0 40px 0 var(--admin-toolbar-color-shadow-6),
      0 4px 4px 0 var(--admin-toolbar-color-shadow-8);

    [dir="rtl"] & {
      padding-inline: calc(var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
    }
  }
}

.top-bar:has(.top-bar__tools:not(:empty), .top-bar__context:not(:empty), .top-bar__actions:not(:empty)) {
  display: block;

  ~ .dialog-off-canvas-main-canvas {
    @media (--admin-toolbar-desktop) {
      margin-block-start: var(--admin-toolbar-top-bar-height);
    }
  }
}

.top-bar__actions {
  display: flex;
  gap: 0.5rem;

  @media (--admin-toolbar-desktop) {
    justify-content: end;
    gap: var(--admin-toolbar-space-4);
  }
}

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

.top-bar__controls {
  display: none;

  @media (--admin-toolbar-desktop) {
    display: flex;
    gap: var(--admin-toolbar-space-8);
  }
}

.top-bar__context {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: start;
}

.top-bar__tools {
  display: flex;
  gap: 0.5rem;
}

File

core/modules/navigation/css/components/top-bar.pcss.css

View source 
  1. @import "../base/media-queries.pcss.css";

  2. 

  3. :root {

  4.   --admin-toolbar-top-bar-height: calc(4 * var(--admin-toolbar-rem));

  5. }

  6. 

  7. .top-bar {

  8.   position: relative;

  9.   z-index: var(--admin-toolbar-z-index-top-bar);

  10.   display: flex;

  11.   display: none;

  12.   background-color: white;

  13.   box-shadow: 0 0 8px 0 var(--admin-toolbar-color-shadow-15);

  14.   font-family: var(--admin-toolbar-font-family);

  15.   padding-inline: var(--admin-toolbar-space-4);

  16.   padding-block: var(--admin-toolbar-space-4);

  17. 

  18.   @media (--admin-toolbar-desktop) {

  19.     block-size: var(--admin-toolbar-top-bar-height);

  20.     position: fixed;

  21.     inset-block-start: var(--drupal-displace-offset-top, 0);

  22.     inset-inline-start: 0;

  23.     width: 100vw;

  24.     padding-block: var(--admin-toolbar-space-12);

  25.     padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);

  26.     box-shadow:

  27.       0 0 40px 0 var(--admin-toolbar-color-shadow-6),

  28.       0 4px 4px 0 var(--admin-toolbar-color-shadow-8);

  29. 

  30.     [dir="rtl"] 
  31.   }

  32. }

  33. 

  34. .top-bar:has(.top-bar__tools:not(:empty), .top-bar__context:not(:empty), .top-bar__actions:not(:empty)) {

  35.   display: block;

  36. 

  37.   ~ .dialog-off-canvas-main-canvas {

  38.     @media (--admin-toolbar-desktop) {

  39.       margin-block-start: var(--admin-toolbar-top-bar-height);

  40.     }

  41.   }

  42. }

  43. 

  44. .top-bar__actions {

  45.   display: flex;

  46.   gap: 0.5rem;

  47. 

  48.   @media (--admin-toolbar-desktop) {

  49.     justify-content: end;

  50.     gap: var(--admin-toolbar-space-4);

  51.   }

  52. }

  53. 

  54. .top-bar__content {

  55.   display: grid;

  56.   grid-auto-flow: column;

  57.   align-items: center;

  58.   justify-content: space-between;

  59.   gap: var(--admin-toolbar-space-16);

  60.   width: 100%;

  61. }

  62. 

  63. .top-bar__controls {

  64.   display: none;

  65. 

  66.   @media (--admin-toolbar-desktop) {

  67.     display: flex;

  68.     gap: var(--admin-toolbar-space-8);

  69.   }

  70. }

  71. 

  72. .top-bar__context {

  73.   display: flex;

  74.   gap: 0.5rem;

  75.   align-items: center;

  76.   justify-content: start;

  77. }

  78. 

  79. .top-bar__tools {

  80.   display: flex;

  81.   gap: 0.5rem;

  82. }