media-library-vertical-tabs.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/css/components/media-library-vertical-tabs.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/*
 * @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));
  -webkit-text-decoration: none;
  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. */
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: 0;
  }

  &:hover {
    -webkit-text-decoration: none;
    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.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. /*

  9.  * @file

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

  11.  * add multiple types of media.

  12.  */

  13. 

  14. .media-library-menu {

  15.   position: relative;

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

  17.   margin: 0;

  18.   list-style: none;

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

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

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

  22. }

  23. 

  24. .media-library-menu__item {

  25.   margin: 0;

  26.   padding: 0;

  27. 

  28.   &::before {

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

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

  31.     display: block;

  32.     width: 100%;

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

  34.     content: "";

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

  36.   }

  37. 

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

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

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

  41.   }

  42. }

  43. 

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

  45. 

  46. .media-library-menu__link {

  47.   position: relative;

  48.   display: block;

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

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

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

  52.   -webkit-text-decoration: none;

  53.   text-decoration: none;

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

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

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

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

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

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

  60.   background-color: transparent;

  61.   text-shadow: none;

  62. 

  63.   /* Menu link states. */

  64.   &:focus {

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

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

  67.     -webkit-text-decoration: none;

  68.     text-decoration: none;

  69.     outline: 0;

  70.   }

  71. 

  72.   &:hover {

  73.     -webkit-text-decoration: none;

  74.     text-decoration: none;

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

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

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

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

  79.   }

  80. 

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

  82.   &::before {

  83.     position: absolute;

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

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

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

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

  88.     inset-inline-end: 0;

  89.     content: "";

  90.     pointer-events: none;

  91.     background-clip: padding-box;

  92.   }

  93. 

  94.   &:focus::after {

  95.     position: absolute;

  96.     inset: 0;

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

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

  99.     content: "";

  100.     pointer-events: none;

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

  102.     border-inline-end: 0;

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

  104.   }

  105. 

  106.   &.active {

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

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

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

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

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

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

  113. 

  114.     &:hover {

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

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

  117.     }

  118. 

  119.     &::before {

  120.       z-index: 1;

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

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

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

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

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

  126.     }

  127. 

  128.     &:hover::before {

  129.       background: none;

  130.     }

  131.   }

  132. 

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

  134.   &:active,

  135.   &:hover,

  136.   &:focus,

  137.   &.active,

  138.   &:hover:focus,

  139.   &.active:hover,

  140.   &.active:focus {

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

  142.     border-inline-end: 0 none;

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

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

  145.     box-shadow: none;

  146.     text-shadow: none;

  147.   }

  148. }

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