Issue #3444391: Center align logo on collapsed toolbar.

Closes #3444391

added 1 commit

• e7769f09 - Add width to logo on collapsed toolbar.

Compare with previous version

few suggestions here.

• no need to rise specificity with html
• probably use same :where in header and logo elements https://git.drupalcode.org/project/drupal/-/blob/11.x/core/modules/navigation/css/components/admin-toolbar.pcss.css?ref_type=heads#L366
• i would better use max-width for img

changed this line in version 3 of the diff

added 1 commit

• 1593eae9 - Issue#3444391: Update the css selector in admin toolbar.

Compare with previous version

added 1 commit

• f4cfd084 - Use :where.

Compare with previous version

sorry for misunderstanding. i meant that probably it should be like:

.admin-toolbar__header {
  its own styles

  :where([data-admin-toolbar="collapsed"]) & {
    context code.
  }

no need to locate it outside of element code.

changed this line in version 5 of the diff

Integrated the collapsed toolbar styles within the .admin-toolbar__logo block to avoid duplication of the :where([data-admin-toolbar="collapsed"]) selector

added 1 commit

• 8c899591 - Update file admin-toolbar.pcss.css

Compare with previous version

added 1 commit

• c8ab8782 - Update styles and fix pipeline.

Compare with previous version

added 1 commit

• 1794cdad - Update styles and fix pipeline.

Compare with previous version

added 128 commits

• 1794cdad...81ff548f - 122 commits from branch project:11.x
• 9a2a1112 - Center align logo on collapsed toolbar.
• c322bc4f - Add width to logo on collapsed toolbar.
• da7db1e5 - Issue#3444391: Update the css selector in admin toolbar.
• 93aef826 - Use :where.
• ba5cab1b - Update file admin-toolbar.pcss.css
• 5142e594 - Update styles and fix pipeline.

Compare with previous version

Just my thoughts - i think that most of logos in the entire world are horizonal, than vertical. Ot at least squares. So i would limit height instead of width, and would make width: auto

And TBH knowing that fact - i find it a bit weird to manipulate with logo sizes in collapsed state. Guess the logo 200x40. In collapsed state it will be 40x8. Becomes too little no?

There is work on another branch to crop images sizes. [#3436526] some cordination between these two efforts should be done.

changed this line in version 9 of the diff

fyi [#3436526] should hopefully be merged very shortly and preps around a max-width (always).

undersized images probably need a centered in the a tag itself as something needs to retain a 40px hit size (normal 'finger size')

changed this line in version 9 of the diff

added 1 commit

• 5f47994d - Set max-width on img container.

Compare with previous version

added 87 commits

• 5f47994d...62f9af40 - 80 commits from branch project:11.x
• 6af48b47 - Center align logo on collapsed toolbar.
• dc0c099b - Add width to logo on collapsed toolbar.
• 04c4d7ca - Issue#3444391: Update the css selector in admin toolbar.
• 9d8605e5 - Use :where.
• ef9b4feb - Update file admin-toolbar.pcss.css
• 2b27bb80 - Update styles and fix pipeline.
• 33145eb7 - Set max-width on img container.

Compare with previous version

i see img ^ always has max-width not related to expanded/collapsed state. maybe remove it there and set only __logo max-width always?

yes, I had fixed max width in the branch with the fix for disconnected file, other use of this in this branch would be unnecessary now. this branch has noise now that it's merged in..

• the a href itself should be 40x40 (size of a finger tip touch), then v/h center the img itself in the href the image and keep it padded should work thru better.
• when/with the logo crop (#3436526) this issue only needs to consider smaller image.

.admin-toolbar__logo {
  ....
  & img {
    display: block;
    max-width: var(--admin-toolbar-space-40);
  }
}