message.css

Same filename and directory in other branches
  1. 11.x core/modules/navigation/components/message/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;
    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[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.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.     text-align: start;

  16.     -webkit-text-decoration: none;

  17.     text-decoration: none;

  18.     overflow-wrap: break-word;

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

  20.     border: 0;

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

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

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

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

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

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

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

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

  29.   }

  30. 

  31.   .toolbar-message[href] {

  32.     cursor: pointer;

  33.   }

  34. 

  35.   .toolbar-message__icon {

  36.     flex-shrink: 0;

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

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

  39.   }

  40. 

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

  42.     position: absolute;

  43.     overflow: hidden;

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

  45.     width: 1px;

  46.     height: 1px;

  47.     white-space: nowrap;

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

  49.     opacity: 0;

  50.   }

  51. 

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

  53.     display: none;

  54.   }

  55. }

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