WordPress.org

Make WordPress Core

Changeset 51672


Ignore:
Timestamp:
08/26/2021 06:23:49 PM (7 weeks ago)
Author:
ryelle
Message:

Toolbar: Provide a CSS custom property for the admin bar height.

This new custom property, --wp-admin--admin-bar--height, reflects the admin bar's height and adjusts responsively on smaller screens. It can be used to offset content to avoid overlapping the admin bar, without needing to copy the media query.

This also removes a workaround only needed for Internet Explorer 6 and below.

Props nico23, sabernhardt.
Fixes #52623.

Location:
trunk/src/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/admin-bar.php

    r50834 r51672  
    11681168<style<?php echo $type_attr; ?> media="screen">
    11691169    html { margin-top: 32px !important; }
    1170     * html body { margin-top: 32px !important; }
    11711170    @media screen and ( max-width: 782px ) {
    11721171        html { margin-top: 46px !important; }
    1173         * html body { margin-top: 46px !important; }
    11741172    }
    11751173</style>
  • trunk/src/wp-includes/css/admin-bar.css

    r51644 r51672  
     1html {
     2    --wp-admin--admin-bar--height: 32px;
     3}
     4
    15#wpadminbar * {
    26    height: auto;
     
    730734
    731735@media screen and (max-width: 782px) {
     736    html {
     737        --wp-admin--admin-bar--height: 46px;
     738    }
     739
    732740    /* Toolbar Touchification*/
    733741    html #wpadminbar {
Note: See TracChangeset for help on using the changeset viewer.