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 */

.toolbar-message {
  z-index: 1;
  display: flex;
  align-items: start;
  cursor: pointer;
  text-align: start;
  -webkit-text-decoration: none;
  text-decoration: none;
  word-break: 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

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. .toolbar-message {

  11.   z-index: 1;

  12.   display: flex;

  13.   align-items: start;

  14.   cursor: pointer;

  15.   text-align: start;

  16.   -webkit-text-decoration: none;

  17.   text-decoration: none;

  18.   word-break: 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__icon {

  32.   flex-shrink: 0;

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

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

  35. }

  36. 

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

  38.   position: absolute;

  39.   overflow: hidden;

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

  41.   width: 1px;

  42.   height: 1px;

  43.   white-space: nowrap;

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

  45.   opacity: 0;

  46. }

  47. 

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

  49.   display: none;

  50. }

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