Problem/Motivation

Custom themes may implement a different box-sizing model using a snippet like this:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

When this is the case, the Admin toolbar tools icon changes dimensions when switching from the default theme to the admin theme:

Proposed resolution

Harden the css for the Admin toolbar tools icon, so the dimensions for the icon are consistent across themes using a different box-sizing model.

Remaining tasks

  1. Write a patch
  2. Review
  3. Commit

User interface changes

The dimensions for the icon are consistent across themes using a different box-sizing model.

API changes

None.

Data model changes

None.

Release notes snippet

The dimensions for the icon are consistent across themes using a different box-sizing model.

CommentFileSizeAuthor
#2 admin_toolbar-harden_tools_icon_css-3026302-2.patch774 bytesidebr
admin-toolbar-icon-dimensions.gif179.27 KBidebr

Comments

idebr created an issue. See original summary.

idebr’s picture

idebr commented
Status: Active » Needs review
StatusFileSize
new admin_toolbar-harden_tools_icon_css-3026302-2.patch774 bytes

Attached patch hardens the css for the Admin toolbar tools icon, so its dimensions are consistent across themes using different box-sizing models.

adriancid’s picture

adriancid
Primary language Spanish
Location Qc, Canada 🇨🇦
commented

Thanks @idebr I will check this now and thanks for use the Issue Summary Template.

adriancid’s picture

adriancid
Primary language Spanish
Location Qc, Canada 🇨🇦
commented

Hi @idebr can you give an admin theme to test the problem, I tried with 3 different admin themes but I can't reproduce the problem.

idebr’s picture

idebr commented

All themes that ship with Drupal Core use the same boxing model (box-sizing: content-box;), so this issue cannot be reproduced with any Core theme.

An example of a theme using a different box-sizing module is the default theme that ships with the Open Social distribution. Its basetheme contains the following snippet: 

*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

https://cgit.drupalcode.org/social/tree/themes/socialbase/assets/css/bas...

A demo site is available at https://demo.getopensocial.com/ (Log in as admin following this link: https://demo.getopensocial.com/user/login/4 )

  • adriancid committed cc53720 on 8.x-1.x authored by idebr 
    Issue #3026302 by idebr, adriancid: Admin toolbar icon width/height...
adriancid’s picture

adriancid
Primary language Spanish
Location Qc, Canada 🇨🇦
commented
Status: Needs review » Fixed

@idebr thanks for this

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.