toolbar-message.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/* cspell:ignore wght */

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  .toolbar-message {
    z-index: 1;
    display: flex;
    align-items: start;
    cursor: pointer;
    text-align: start;
    -webkit-text-decoration: none;
    text-decoration: none;
    overflow-wrap: break-word;
    color: var(--admin-toolbar-color-gray-800);
    border: 0;
    border-radius: var(--admin-toolbar-space-8);
    background-color: var(--admin-toolbar-color-gray-050);
    font-size: var(--admin-toolbar-font-size-info-sm);
    line-height: var(--admin-toolbar-line-height-info-sm);
    padding-inline: calc(0.75 * var(--admin-toolbar-rem));
    padding-block: calc(0.75 * var(--admin-toolbar-rem));
    font-variation-settings: "wght" 700;
    gap: calc(0.5 * var(--admin-toolbar-rem));
  }

  .toolbar-message__icon {
    flex-shrink: 0;
    inline-size: var(--admin-toolbar-space-20);
    block-size: var(--admin-toolbar-space-20);
  }

  html:not([data-admin-toolbar="expanded"]) & .toolbar-message__label {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    white-space: nowrap;
    clip-path: inset(50%);
    opacity: 0;
  }

  html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] & .toolbar-message__label {
    display: none;
  }
}

File

View on git.drupalcode.org

core/modules/navigation/css/components/toolbar-message.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /* cspell:ignore wght */

  9. 

  10. :is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  11.   .toolbar-message {

  12.     z-index: 1;

  13.     display: flex;

  14.     align-items: start;

  15.     cursor: pointer;

  16.     text-align: start;

  17.     -webkit-text-decoration: none;

  18.     text-decoration: none;

  19.     overflow-wrap: break-word;

  20.     color: var(--admin-toolbar-color-gray-800);

  21.     border: 0;

  22.     border-radius: var(--admin-toolbar-space-8);

  23.     background-color: var(--admin-toolbar-color-gray-050);

  24.     font-size: var(--admin-toolbar-font-size-info-sm);

  25.     line-height: var(--admin-toolbar-line-height-info-sm);

  26.     padding-inline: calc(0.75 * var(--admin-toolbar-rem));

  27.     padding-block: calc(0.75 * var(--admin-toolbar-rem));

  28.     font-variation-settings: "wght" 700;

  29.     gap: calc(0.5 * var(--admin-toolbar-rem));

  30.   }

  31. 

  32.   .toolbar-message__icon {

  33.     flex-shrink: 0;

  34.     inline-size: var(--admin-toolbar-space-20);

  35.     block-size: var(--admin-toolbar-space-20);

  36.   }

  37. 

  38.   html:not([data-admin-toolbar="expanded"]) & .toolbar-message__label {

  39.     position: absolute;

  40.     overflow: hidden;

  41.     clip: rect(0 0 0 0);

  42.     width: 1px;

  43.     height: 1px;

  44.     white-space: nowrap;

  45.     clip-path: inset(50%);

  46.     opacity: 0;

  47.   }

  48. 

  49.   html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] & .toolbar-message__label {

  50.     display: none;

  51.   }

  52. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.