toolbar-button.css

Same filename and directory in other branches
  1. 10 core/modules/navigation/components/toolbar-button/toolbar-button.css

Toolbar button styles.

File

View on git.drupalcode.org

core/modules/navigation/components/toolbar-button/toolbar-button.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. /* cspell:ignore csvg cpath wght */

  8. /**

  9.  * @file

  10.  * Toolbar button styles.

  11.  */

  12. [data-drupal-admin-styles] {

  13.   --toolbar-button-outline-offset: 0;

  14.   --toolbar-button-bg: transparent;

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

  16.   /* Hover styles. */

  17.   --toolbar-button-hover-bg: var(--admin-toolbar-color-gray-050);

  18.   --toolbar-button-hover-color: var(--admin-toolbar-color-gray-990);

  19.   /* Focus variables. */

  20.   --toolbar-button-focus-color: var(--admin-toolbar-color-blue-700);

  21.   /* Current variables */

  22.   --toolbar-button-current-bg: var(--admin-toolbar-color-gray-050);

  23.   --toolbar-button-current-color: var(--admin-toolbar-color-blue-700);

  24.   /* Active child variables. */

  25.   --toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);

  26.   --toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);

  27.   /* Icon */

  28.   --toolbar-button-icon-size: var(--admin-toolbar-space-20);

  29. }

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

  31.   .toolbar-button {

  32.     z-index: 1;

  33.     flex-grow: 0;

  34.     align-items: center;

  35.     min-height: var(--admin-toolbar-space-40);

  36.     cursor: pointer;

  37.     text-align: start;

  38.     -webkit-text-decoration: none;

  39.     text-decoration: none;

  40.     overflow-wrap: break-word;

  41.     color: var(--toolbar-button-color);

  42.     border: 0;

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

  44.     background-color: var(--toolbar-button-bg);

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

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

  47.     padding-inline: var(--admin-toolbar-space-16);

  48.     padding-block: var(--admin-toolbar-space-10);

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

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

  51. 

  52.     &:has(+ .toolbar-popover__wrapper .is-active) {

  53.       color: var(--toolbar-button-has-active-child-color);

  54.       background-color: var(--toolbar-button-has-active-child-bg);

  55. 

  56.       @media (forced-colors: active) {

  57.         position: relative;

  58. 

  59.         &::before {

  60.           position: absolute;

  61.           inset-block-start: 0;

  62.           inset-inline-end: calc(100% + 0.3125rem);

  63.           width: 0;

  64.           height: 100%;

  65.           content: "";

  66.           border-inline-start: solid 0.25rem canvasText;

  67.         }

  68.       }

  69.     }

  70. 

  71.     .top-bar__actions 
  72. 

  73.     &[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber),

  74.     &[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) {

  75.       .toolbar-button__icon {

  76.         fill: transparent;

  77.         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e  %3cstyle%3e    %40keyframes spinner%7bto%7btransform:rotate(360deg)%7d%7d  %3c/style%3e  %3cpath d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 19a8 8 0 1 1 8-8 8 8 0 0 1-8 8Z' opacity='.25'/%3e  %3cpath d='M10.14 1.16a11 11 0 0 0-9 8.92A1.59 1.59 0 0 0 2.46 12a1.52 1.52 0 0 0 1.65-1.3 8 8 0 0 1 6.66-6.61A1.42 1.42 0 0 0 12 2.69a1.57 1.57 0 0 0-1.86-1.53Z' style='animation:spinner .75s infinite linear' transform-origin='center'/%3e%3c/svg%3e");

  78.       }

  79. 

  80.       & + .ajax-progress--throbber,

  81.       & + .ajax-progress-throbber {

  82.         display: none;

  83.       }

  84.     }

  85. 

  86.     &:hover {

  87.       z-index: 20;

  88.       color: var(--toolbar-button-hover-color);

  89.       outline: 2px solid var(--admin-toolbar-color-blue-200);

  90.       outline-offset: var(--toolbar-button-outline-offset);

  91.       background-color: var(--toolbar-button-hover-bg);

  92.     }

  93. 

  94.     &:focus {

  95.       z-index: 10;

  96.       color: var(--toolbar-button-focus-color);

  97.       outline: 2px solid var(--admin-toolbar-color-focus);

  98.       outline-offset: var(--toolbar-button-outline-offset);

  99.     }

  100. 

  101.     &.current {

  102.       color: var(--toolbar-button-current-color);

  103.       background-color: var(--toolbar-button-current-bg);

  104. 

  105.       @media (forced-colors: active) {

  106.         position: relative;

  107. 

  108.         &::before {

  109.           position: absolute;

  110.           inset-block-start: 0;

  111.           inset-inline-end: calc(100% + 0.3125rem);

  112.           width: 0;

  113.           height: 100%;

  114.           content: "";

  115.           border-inline-start: solid 0.25rem canvasText;

  116.         }

  117.       }

  118.     }

  119.   }

  120. 

  121.   /* Dark color modifier for submenus title */

  122.   .toolbar-button--dark {

  123.     color: var(--admin-toolbar-color-gray-990);

  124.   }

  125. 

  126.   .toolbar-button--large {

  127.     padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);

  128.     font-size: var(--admin-toolbar-font-size-info-lg);

  129.     line-height: var(--admin-toolbar-line-height-info-lg);

  130.   }

  131. 

  132.   .toolbar-button--non-interactive {

  133.     &:hover,

  134.     &:focus,

  135.     &:hover:focus {

  136.       z-index: 1;

  137.       cursor: auto;

  138.       color: var(--toolbar-button-color);

  139.       outline: 0;

  140.       background-color: var(--toolbar-button-bg);

  141.     }

  142.   }

  143. 

  144.   .toolbar-button--small-offset {

  145.     --toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));

  146.   }

  147. 

  148.   /* Class starts with `toolbar-button--icon`  */

  149.   [class*="toolbar-button--icon"] {

  150.     padding-inline: var(--admin-toolbar-space-10);

  151.   }

  152. 

  153.   [class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon)) {

  154.     &::before {

  155.       flex-shrink: 0;

  156.       content: attr(data-icon-text) / "";

  157.       text-align: center;

  158.       color: currentColor;

  159.       font-size: calc(0.75 * var(--admin-toolbar-rem));

  160.       inline-size: var(--toolbar-button-icon-size);

  161.     }

  162.   }

  163. 

  164.   .toolbar-button--primary {

  165.     --toolbar-button-color: var(--admin-toolbar-color-white);

  166.     --toolbar-button-bg: var(--admin-toolbar-color-blue-450);

  167.     --toolbar-button-hover-color: var(--admin-toolbar-color-white);

  168.     --toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);

  169.     --toolbar-button-focus-color: var(--admin-toolbar-color-white);

  170.   }

  171. 

  172.   .toolbar-button--weight--400 {

  173.     font-variation-settings: "wght" 400;

  174.   }

  175. 

  176.   /* Set 0 specificity */

  177.   :where(.toolbar-button) {

  178.     display: flex;

  179.     flex-grow: 1;

  180.   }

  181. 

  182.   .toolbar-button--expand--down {

  183.     &[aria-expanded="true"] {

  184.       &:focus,

  185.       &:hover {

  186.         border-bottom-right-radius: 0;

  187.         border-bottom-left-radius: 0;

  188.       }

  189.     }

  190.   }

  191. 

  192.   [dir="ltr"] & .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon {

  193.     scale: -1 1;

  194.   }

  195. 

  196.   .toolbar-button--collapsible {

  197.     & .toolbar-button__chevron {

  198.       display: none;

  199.     }

  200. 

  201.     & .toolbar-button__label {

  202.       position: absolute;

  203.       overflow: hidden;

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

  205.       width: 1px;

  206.       height: 1px;

  207.       white-space: nowrap;

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

  209.       opacity: 0;

  210.     }

  211. 

  212.     [data-admin-toolbar="expanded"] 
  213. 

  214.       & .toolbar-button__label {

  215.         position: relative;

  216.         clip: revert;

  217.         width: auto;

  218.         height: auto;

  219.         white-space: wrap;

  220.         clip-path: none;

  221.         opacity: 1;

  222.       }

  223.     }

  224. 

  225.     [data-admin-toolbar-animating] 
  226.     }

  227.   }

  228. 

  229.   .toolbar-button__chevron {

  230.     flex-shrink: 0;

  231.     margin-inline-start: auto;

  232.     transition: rotate var(--admin-toolbar-transition);

  233.     fill: currentColor;

  234.     block-size: var(--admin-toolbar-space-16);

  235.     inline-size: var(--admin-toolbar-space-16);

  236. 

  237.     :where([dir="rtl"]) 
  238. 

  239.     .toolbar-button--expand--down 
  240. 

  241.     .toolbar-button--expand--down[aria-expanded="true"] 
  242.   }

  243. 

  244.   .toolbar-button__icon {

  245.     --icon-color: currentColor;

  246. 

  247.     fill: var(--icon-color);

  248.     flex-shrink: 0;

  249.     inline-size: var(--toolbar-button-icon-size);

  250.     block-size: var(--toolbar-button-icon-size);

  251. 

  252.     @media (forced-colors: active) {

  253.       --icon-color: canvasText;

  254. 

  255.       &,

  256.       path {

  257.         &[fill]:not([fill="none"]) {

  258.           fill: var(--icon-color);

  259.         }

  260. 

  261.         &[stroke]:not([stroke="none"]) {

  262.           stroke: var(--icon-color);

  263.         }

  264.       }

  265.     }

  266.   }

  267. 

  268.   button.toolbar-button .toolbar-button__icon {

  269.     @media (forced-colors: active) {

  270.       --icon-color: buttonText;

  271.     }

  272.   }

  273. 

  274.   a.toolbar-button .toolbar-button__icon {

  275.     @media (forced-colors: active) {

  276.       --icon-color: linkText;

  277.     }

  278.   }

  279. }

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