media-library-vertical-tabs.pcss.css

/*
 * @file
 * The vertical tabs within the media library that show when you're able to
 * add multiple types of media.
 */

.media-library-menu {
  position: relative;
  width: var(--vertical-tabs-menu-width);
  margin: 0;
  list-style: none;
  color: var(--color-text);
  border-color: var(--gin-border-color);
  background-color: var(--gin-bg-app);
}

.media-library-menu__item {
  margin: 0;
  padding: 0;

  &::before {
    z-index: var(--vertical-tabs-menu--z-index);
    /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
    display: block;
    width: 100%;
    margin-block-start: calc(var(--vertical-tabs-menu-separator-size) * -1);
    content: "";
    border-block-start: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
  }

  /* On active items, extend by 1px to remove right border. */
  &:has(.media-library-menu__link.active) {
    width: calc(100% + 1px);
  }
}

/* Tab links within the vertical tabs. */
.media-library-menu__link {
  position: relative;
  display: block;
  margin-block-start: calc(var(--vertical-tabs-border-size) * -1);
  padding: var(--space-s);
  padding-inline-start: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
  text-decoration: none;
  color: var(--gin-color-text);
  border: var(--vertical-tabs-border-size) solid var(--gin-border-color);
  border-inline-end-width: 0;
  border-inline-start-width: var(--vertical-tabs-menu-link--active-border-size);
  border-start-start-radius: var(--vertical-tabs-border-radius);
  border-end-start-radius: var(--vertical-tabs-border-radius);
  background-color: transparent;
  text-shadow: none;

  /* Menu link states. */
  &:focus {
    z-index: calc(var(--vertical-tabs-menu--z-index) + 3);
    /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
    text-decoration: none;
    outline: 0;
  }

  &:hover {
    text-decoration: none;
    color: var(--color-absolutezero);
    /* These borders are necessary to replace the dividing lines while in the hover state. */
    border-block: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
    background: var(--color-bgblue-hover);
  }

  /* This pseudo element provides the background for the hover state. */
  &::before {
    position: absolute;
    z-index: calc(var(--vertical-tabs-menu--z-index) - 1);
    /* This should be on a lower level than the menu-item separator lines. */
    inset-block: calc(var(--vertical-tabs-border-size) * -1);
    inset-inline-start: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
    inset-inline-end: 0;
    content: "";
    pointer-events: none;
    background-clip: padding-box;
  }

  &:focus::after {
    position: absolute;
    inset: 0;
    margin-block: calc(var(--vertical-tabs-border-size) * -1);
    margin-inline: calc(var(--vertical-tabs-menu-link--active-border-size) * -1) 0;
    content: "";
    pointer-events: none;
    border: var(--gin-border-xs) solid var(--gin-color-focus);
    border-inline-end: 0;
    border-radius: var(--vertical-tabs-border-radius);
  }

  &.active {
    z-index: calc(var(--vertical-tabs-menu--z-index) + 2);
    /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
    color: var(--color-absolutezero);
    border-color: var(--vertical-tabs-border-color) transparent;
    background-color: var(--color-white);
    box-shadow: var(--vertical-tabs-shadow);

    &:hover {
      color: var(--color-absolutezero-hover);
      background-color: var(--color-bgblue-hover);
    }

    &::before {
      z-index: 1;
      /* The blue active-tab indication should be on a higher level than the green focus border. */
      border-inline-start: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
      border-inline-start-color: var(--gin-color-primary);
      border-start-start-radius: var(--base-border-radius);
      border-end-start-radius: var(--base-border-radius);
    }

    &:hover::before {
      background: none;
    }
  }

  /* Gin state overrides — must come after base states so source-order cascade wins. */
  &:active,
  &:hover,
  &:focus,
  &.active,
  &:hover:focus,
  &.active:hover,
  &.active:focus {
    color: var(--gin-color-primary);
    border-inline-end: 0 none;
    border-block-end: 1px solid var(--gin-border-color);
    background-color: var(--gin-bg-layer);
    box-shadow: none;
    text-shadow: none;
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/css/components/media-library-vertical-tabs.pcss.css

View source 
  1. /*

  2.  * @file

  3.  * The vertical tabs within the media library that show when you're able to

  4.  * add multiple types of media.

  5.  */

  6. 

  7. .media-library-menu {

  8.   position: relative;

  9.   width: var(--vertical-tabs-menu-width);

  10.   margin: 0;

  11.   list-style: none;

  12.   color: var(--color-text);

  13.   border-color: var(--gin-border-color);

  14.   background-color: var(--gin-bg-app);

  15. }

  16. 

  17. .media-library-menu__item {

  18.   margin: 0;

  19.   padding: 0;

  20. 

  21.   &::before {

  22.     z-index: var(--vertical-tabs-menu--z-index);

  23.     /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */

  24.     display: block;

  25.     width: 100%;

  26.     margin-block-start: calc(var(--vertical-tabs-menu-separator-size) * -1);

  27.     content: "";

  28.     border-block-start: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);

  29.   }

  30. 

  31.   /* On active items, extend by 1px to remove right border. */

  32.   &:has(.media-library-menu__link.active) {

  33.     width: calc(100% + 1px);

  34.   }

  35. }

  36. 

  37. /* Tab links within the vertical tabs. */

  38. .media-library-menu__link {

  39.   position: relative;

  40.   display: block;

  41.   margin-block-start: calc(var(--vertical-tabs-border-size) * -1);

  42.   padding: var(--space-s);

  43.   padding-inline-start: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));

  44.   text-decoration: none;

  45.   color: var(--gin-color-text);

  46.   border: var(--vertical-tabs-border-size) solid var(--gin-border-color);

  47.   border-inline-end-width: 0;

  48.   border-inline-start-width: var(--vertical-tabs-menu-link--active-border-size);

  49.   border-start-start-radius: var(--vertical-tabs-border-radius);

  50.   border-end-start-radius: var(--vertical-tabs-border-radius);

  51.   background-color: transparent;

  52.   text-shadow: none;

  53. 

  54.   /* Menu link states. */

  55.   &:focus {

  56.     z-index: calc(var(--vertical-tabs-menu--z-index) + 3);

  57.     /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */

  58.     text-decoration: none;

  59.     outline: 0;

  60.   }

  61. 

  62.   &:hover {

  63.     text-decoration: none;

  64.     color: var(--color-absolutezero);

  65.     /* These borders are necessary to replace the dividing lines while in the hover state. */

  66.     border-block: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);

  67.     background: var(--color-bgblue-hover);

  68.   }

  69. 

  70.   /* This pseudo element provides the background for the hover state. */

  71.   &::before {

  72.     position: absolute;

  73.     z-index: calc(var(--vertical-tabs-menu--z-index) - 1);

  74.     /* This should be on a lower level than the menu-item separator lines. */

  75.     inset-block: calc(var(--vertical-tabs-border-size) * -1);

  76.     inset-inline-start: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);

  77.     inset-inline-end: 0;

  78.     content: "";

  79.     pointer-events: none;

  80.     background-clip: padding-box;

  81.   }

  82. 

  83.   &:focus::after {

  84.     position: absolute;

  85.     inset: 0;

  86.     margin-block: calc(var(--vertical-tabs-border-size) * -1);

  87.     margin-inline: calc(var(--vertical-tabs-menu-link--active-border-size) * -1) 0;

  88.     content: "";

  89.     pointer-events: none;

  90.     border: var(--gin-border-xs) solid var(--gin-color-focus);

  91.     border-inline-end: 0;

  92.     border-radius: var(--vertical-tabs-border-radius);

  93.   }

  94. 

  95.   &.active {

  96.     z-index: calc(var(--vertical-tabs-menu--z-index) + 2);

  97.     /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */

  98.     color: var(--color-absolutezero);

  99.     border-color: var(--vertical-tabs-border-color) transparent;

  100.     background-color: var(--color-white);

  101.     box-shadow: var(--vertical-tabs-shadow);

  102. 

  103.     &:hover {

  104.       color: var(--color-absolutezero-hover);

  105.       background-color: var(--color-bgblue-hover);

  106.     }

  107. 

  108.     &::before {

  109.       z-index: 1;

  110.       /* The blue active-tab indication should be on a higher level than the green focus border. */

  111.       border-inline-start: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);

  112.       border-inline-start-color: var(--gin-color-primary);

  113.       border-start-start-radius: var(--base-border-radius);

  114.       border-end-start-radius: var(--base-border-radius);

  115.     }

  116. 

  117.     &:hover::before {

  118.       background: none;

  119.     }

  120.   }

  121. 

  122.   /* Gin state overrides — must come after base states so source-order cascade wins. */

  123.   &:active,

  124.   &:hover,

  125.   &:focus,

  126.   &.active,

  127.   &:hover:focus,

  128.   &.active:hover,

  129.   &.active:focus {

  130.     color: var(--gin-color-primary);

  131.     border-inline-end: 0 none;

  132.     border-block-end: 1px solid var(--gin-border-color);

  133.     background-color: var(--gin-bg-layer);

  134.     box-shadow: none;

  135.     text-shadow: none;

  136.   }

  137. }

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