toolbar-message.pcss.css

/* cspell:ignore wght */

.toolbar-message {
  z-index: 1;
  display: flex;
  align-items: start;
  cursor: pointer;
  text-align: start;
  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.pcss.css

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

  2. 

  3. .toolbar-message {

  4.   z-index: 1;

  5.   display: flex;

  6.   align-items: start;

  7.   cursor: pointer;

  8.   text-align: start;

  9.   text-decoration: none;

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

  24.   flex-shrink: 0;

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

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

  27. }

  28. 

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

  30.   position: absolute;

  31.   overflow: hidden;

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

  33.   width: 1px;

  34.   height: 1px;

  35.   white-space: nowrap;

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

  37.   opacity: 0;

  38. }

  39. 

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

  41.   display: none;

  42. }

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