toolbar-message.pcss.css

Same filename and directory in other branches
  1. 11.x core/modules/navigation/css/components/toolbar-message.pcss.css
/* 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;
    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.pcss.css

View source 
  1. /* cspell:ignore wght */

  2. 

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

  4.   .toolbar-message {

  5.     z-index: 1;

  6.     display: flex;

  7.     align-items: start;

  8.     cursor: pointer;

  9.     text-align: start;

  10.     text-decoration: none;

  11.     overflow-wrap: break-word;

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

  13.     border: 0;

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

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

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

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

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

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

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

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

  22.   }

  23. 

  24.   .toolbar-message__icon {

  25.     flex-shrink: 0;

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

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

  28.   }

  29. 

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

  31.     position: absolute;

  32.     overflow: hidden;

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

  34.     width: 1px;

  35.     height: 1px;

  36.     white-space: nowrap;

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

  38.     opacity: 0;

  39.   }

  40. 

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

  42.     display: none;

  43.   }

  44. }

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