message.pcss.css

Same filename and directory in other branches
  1. main core/modules/navigation/components/message/message.pcss.css
/* cspell:ignore wght */

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  .toolbar-message {
    z-index: 1;
    display: flex;
    align-items: start;
    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[href] {
    cursor: pointer;
  }

  .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/components/message/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.     text-align: start;

  9.     text-decoration: none;

  10.     overflow-wrap: break-word;

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

  12.     border: 0;

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

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

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

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

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

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

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

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

  21.   }

  22. 

  23.   .toolbar-message[href] {

  24.     cursor: pointer;

  25.   }

  26. 

  27.   .toolbar-message__icon {

  28.     flex-shrink: 0;

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

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

  31.   }

  32. 

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

  34.     position: absolute;

  35.     overflow: hidden;

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

  37.     width: 1px;

  38.     height: 1px;

  39.     white-space: nowrap;

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

  41.     opacity: 0;

  42.   }

  43. 

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

  45.     display: none;

  46.   }

  47. }

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