Issue #3438850 by kostyashupenko, ckrina: Admin toolbar header issues

css/components/admin-toolbar.css

@@ -16,8 +16,8 @@
  */
 
 body {
-  --admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
-  --admin-toolbar-sidebar-header: calc(3.75 * var(--admin-toolbar-rem));
+  --admin-toolbar-sidebar-width: var(--admin-toolbar-space-72);
+  --admin-toolbar-sidebar-header: var(--admin-toolbar-space-56);
 }
 
 [data-admin-toolbar="expanded"] body {
@@ -151,6 +151,7 @@ body {
 .admin-toolbar__close-button {
   flex-grow: 0;
   justify-self: end;
+  margin-inline-start: auto;
 }
 
 @media (min-width: 64rem) {
@@ -229,16 +230,33 @@ body {
   align-items: center;
   justify-content: space-between;
   margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1);
-  padding-block: var(--admin-toolbar-space-16);
+  padding-block-start: var(--admin-toolbar-space-16);
   background-color: var(--admin-toolbar-color-white);
 }
 
+.admin-toolbar__header + .toolbar-block {
+  margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
+}
+
+@media (min-width: 64rem) {
+  .admin-toolbar__header + .toolbar-block {
+    margin-block-start: 0;
+  }
+}
+
+@media (min-width: 64rem) {
+  .admin-toolbar__header:not(:has(.admin-toolbar__logo)) {
+    display: none;
+  }
+}
+
 @media (min-width: 64rem) {
   .admin-toolbar__header {
     position: static;
     align-items: start;
     margin-block-start: revert;
     padding-block-start: revert;
+    padding-block-end: 0;
   }
 }
 
@@ -293,7 +311,7 @@ body {
 .admin-toolbar__content {
   display: grid;
   gap: var(--admin-toolbar-space-12);
-  padding: var(--admin-toolbar-space-16);
+  padding: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
 }
 
 @media (min-width: 64rem) {
@@ -303,6 +321,7 @@ body {
     overflow-y: auto;
     flex-direction: column;
     flex-grow: 1;
+    padding-block-start: var(--admin-toolbar-space-16);
     background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)), radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
     background-color: var(--admin-toolbar-color-white);
     background-repeat: no-repeat;

css/components/admin-toolbar.pcss.css

@@ -10,8 +10,8 @@
  * fallback value to the margin-inline-start property of the layout container.
  */
 body {
-  --admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
-  --admin-toolbar-sidebar-header: calc(3.75 * var(--admin-toolbar-rem));
+  --admin-toolbar-sidebar-width: var(--admin-toolbar-space-72);
+  --admin-toolbar-sidebar-header: var(--admin-toolbar-space-56);
 
   [data-admin-toolbar='expanded'] & {
     --admin-toolbar-sidebar-width: 80vw;
@@ -132,6 +132,7 @@ body {
 .admin-toolbar__close-button {
   flex-grow: 0;
   justify-self: end;
+  margin-inline-start: auto;
 
   @media (--admin-toolbar-desktop) {
     display: none;
@@ -202,14 +203,29 @@ body {
   align-items: center;
   justify-content: space-between;
   margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1);
-  padding-block: var(--admin-toolbar-space-16);
+  padding-block-start: var(--admin-toolbar-space-16);
   background-color: var(--admin-toolbar-color-white);
 
+  & + .toolbar-block {
+    margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
+
+    @media (--admin-toolbar-desktop) {
+      margin-block-start: 0;
+    }
+  }
+
+  &:not(:has(.admin-toolbar__logo)) {
+    @media (--admin-toolbar-desktop) {
+      display: none;
+    }
+  }
+
   @media (--admin-toolbar-desktop) {
     position: static;
     align-items: start;
     margin-block-start: revert;
     padding-block-start: revert;
+    padding-block-end: 0;
   }
 }
 
@@ -262,7 +278,7 @@ body {
 .admin-toolbar__content {
   display: grid;
   gap: var(--admin-toolbar-space-12);
-  padding: var(--admin-toolbar-space-16);
+  padding: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
 
   @media (--admin-toolbar-desktop) {
     display: flex;
@@ -270,6 +286,7 @@ body {
     overflow-y: auto;
     flex-direction: column;
     flex-grow: 1;
+    padding-block-start: var(--admin-toolbar-space-16);
     background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
                 linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
                 radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),

css/components/toolbar-popover.css

@@ -31,7 +31,7 @@
   visibility: hidden;
   overflow: auto;
   grid-auto-rows: max-content;
-  padding: var(--admin-toolbar-space-16);
+  padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
   transition: transform var(--admin-toolbar-transiton), visibility var(--admin-toolbar-transiton);
   transform: translateX(-100%);
   transform-origin: 0;
@@ -39,7 +39,7 @@
   inline-size: var(--admin-toolbar-sidebar-width);
   block-size: 100vh;
   gap: var(--admin-toolbar-space-8);
-  inset-block-start: calc(var(--admin-toolbar-sidebar-header) + var(--admin-toolbar-space-12));
+  inset-block-start: var(--admin-toolbar-sidebar-header);
   inset-inline-start: 0;
   /* Hide the drop-shadow on the left side. */
   -webkit-clip-path: inset(0 -10rem 0 0);
@@ -55,6 +55,7 @@
   [data-toolbar-popover-wrapper] {
     --admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);
 
+    padding-block-start: var(--admin-toolbar-space-16);
     transform: translateX(0);
     filter: drop-shadow(0 0 4.5rem rgba(0, 0, 0, 0.2)) drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.04)) drop-shadow(0 0 2.5rem rgba(0, 0, 0, 0.06));
     inline-size: var(--admin-toolbar-popover-width);

css/components/toolbar-popover.pcss.css

@@ -33,7 +33,7 @@
   visibility: hidden;
   overflow: auto;
   grid-auto-rows: max-content;
-  padding: var(--admin-toolbar-space-16);
+  padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16) ;
   transition: transform var(--admin-toolbar-transiton), visibility var(--admin-toolbar-transiton);
   transform: translateX(-100%);
   transform-origin: 0;
@@ -41,9 +41,7 @@
   inline-size: var(--admin-toolbar-sidebar-width);
   block-size: 100vh;
   gap: var(--admin-toolbar-space-8);
-  inset-block-start: calc(
-    var(--admin-toolbar-sidebar-header) + var(--admin-toolbar-space-12)
-  );
+  inset-block-start: var(--admin-toolbar-sidebar-header);
   inset-inline-start: 0;
   /* Hide the drop-shadow on the left side. */
   clip-path: inset(0 -10rem 0 0);
@@ -57,6 +55,7 @@
   @media (--admin-toolbar-desktop) {
     --admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);
 
+    padding-block-start: var(--admin-toolbar-space-16);
     transform: translateX(0);
     filter: drop-shadow(0 0 72px rgba(0, 0, 0, 0.2))
     drop-shadow(0 0 8px rgba(0, 0, 0, 0.04))