tabs.pcss.css

Same filename in this branch
  1. main core/themes/olivero/css/components/tabs.pcss.css
  2. main core/themes/claro/css/components/tabs.pcss.css
  3. main core/themes/admin/css/components/tabs.pcss.css
  4. main core/themes/default_admin/migration/css/components/tabs.pcss.css
Same filename and directory in other branches
  1. 10 core/themes/olivero/css/components/tabs.pcss.css
  2. 10 core/themes/claro/css/components/tabs.pcss.css
  3. 11.x core/themes/olivero/css/components/tabs.pcss.css
  4. 11.x core/themes/claro/css/components/tabs.pcss.css
  5. 9 core/themes/olivero/css/components/tabs.pcss.css
  6. 9 core/themes/claro/css/components/tabs.pcss.css
  7. 8.9.x core/themes/claro/css/components/tabs.pcss.css
  8. 11.x core/themes/admin/css/components/tabs.pcss.css
  9. 11.x core/themes/default_admin/css/components/tabs.pcss.css
  10. 11.x core/themes/default_admin/migration/css/components/tabs.pcss.css
/**
 * Tabs.
 */
@custom-media --tabs-horizontal (min-width: 768px);

:root {
  /**
  * Tabs.
  */
  --tabs-border-radius-size: var(--admin-radius-2xs);
  --tabs--focus-height: 3px;
  --tabs--active-height: 3px;
  --tabs-link-height: 3rem; /* 48px */
  --tabs-secondary-link-height: 2.5rem; /* 40px */
  --tabs-base-border: 1px solid var(--admin-color-border);
  --tabs-trigger-border: 1px solid rgb(216, 217, 224, 0.8);
}

.tabs-wrapper {
  box-sizing: border-box;
  padding: 0 var(--admin-space-xs);
  margin-inline: calc(var(--admin-space-xs) * -1);

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  @media (--tabs-horizontal) {
    display: flex;
    padding: 0;
  }
}

.tabs {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--admin-space-l);
  list-style: none;
  border: var(--tabs-base-border);
  border-radius: var(--tabs-border-radius-size);
  inline-size: 100%;

  &.is-open {
    .tabs__tab.is-active::before {
      border-end-start-radius: 0;
    }
  }

  .is-horizontal & {
    @media (--tabs-horizontal) {
      flex-direction: row;
      align-items: flex-end;
      width: 100%;
      margin: 0;
      border: 0;
      padding-block: 0;
      padding-inline: var(--admin-space-xs);
    }
  }

  .gin--dark-mode & {
    border-color: var(--admin-color-border);

    .tabs-wrapper:not(.is-horizontal) & {
      border-color: #8e929c;
    }
  }
}

.tabs--primary {
  @media (--tabs-horizontal) {
    margin-block-end: 0;

    .gin--high-contrast-mode .is-horizontal &::after {
      border-block-end: 1px solid;
    }
  }
}

.tabs--secondary {
  .is-horizontal & {
    @media (--tabs-horizontal) {
      position: relative; /* Anchor ::after */
      overflow: hidden;
      margin-inline: calc(calc(var(--tabs--focus-height) + 3px) * -1);
      padding-block: calc(var(--tabs--focus-height) + 3px) 0;
      padding-inline: calc(var(--tabs--focus-height) + 3px);
      border-radius: 0;

      &::before {
        width: 100%;
      }

      &::after {
        position: absolute;
        display: block;
        width: 100%;
        max-width: calc(100% - var(--admin-space-m));
        content: "";
        pointer-events: none;
        border-block-end: 1px solid var(--admin-color-border);
        inset-block-end: 0;
        inset-inline-start: 0;
      }

      .tabs__tab {
        font-size: var(--admin-font-size-s);
      }

      .tabs__link {
        min-block-size: var(--tabs-secondary-link-height);
        padding-block: var(--admin-space-xs);

        &:focus {
          min-block-size: var(--tabs-secondary-link-height);
        }
      }
    }
  }
}

.tabs__tab {
  position: relative;
  border-block-end: var(--tabs-base-border);
  background-color: var(--admin-color-bg-surface-nested);
  font-size: var(--admin-font-size-s);
  font-weight: var(--admin-font-weight-semibold);

  &:last-child {
    border-block-end: 0;
  }

  &.is-active {
    display: flex;
    justify-content: space-between;

    /* Vertical line that indicates active state. */
    &::before {
      z-index: 2;
      inset-block-start: -1px;
      inset-inline-start: -1px;
      inline-size: var(--tabs--active-height);
      block-size: calc(100% + 2px);
      border-inline-start: var(--tabs--active-height) solid var(--admin-color-primary);
      border-start-start-radius: var(--tabs-border-radius-size);
    }
  }

  .is-horizontal .tabs--primary & {
    border-block-end: 1px solid var(--admin-color-border);
    background-color: var(--admin-color-bg-surface);

    &:not(:is(.is-active, .tabs.is-open > *)) {
      display: none;

      @media (--tabs-horizontal) {
        display: flex;
      }
    }

    /* Remove the bottom border from the first tab only if the tabs group is closed. */
    &[data-original-order="0"]:not(.tabs.is-open *) {
      border-block-end: none;
    }

    @media (--tabs-horizontal) {
      border-block-end: none;
      background-color: unset;
    }
  }

  .is-horizontal & {
    @media (--tabs-horizontal) {
      display: block;
      border-block: none;
      background: none;
      font-size: var(--admin-font-size-m);

      &.is-active {
        order: 0;

        &::before {
          content: none;
        }
      }
    }
  }

  .gin--dark-mode & {
    &,
    &.is-active {
      border-color: var(--admin-color-border);
      background-color: transparent;
    }

    .tabs-wrapper:not(.is-horizontal) & {
      border-color: #8e929c;
      background-color: var(--admin-color-bg-item-hover);
    }
  }
}

.tabs__link {
  display: flex;
  flex-grow: 1;
  align-items: center;
  text-decoration: none;
  color: var(--admin-color-text);
  /* font-weight: var(--admin-font-weight-semibold); */
  background-color: var(--admin-color-bg-surface);
  line-height: 1.2rem;
  padding-block: var(--admin-space-s);
  padding-inline: var(--admin-space-l);

  &:hover {
    text-decoration: none;
    color: var(--admin-color-text);
  }

  &.is-active {
    position: relative;

    &:hover {
      color: var(--admin-color-text);
    }

    &::before {
      position: absolute;
      z-index: 2;
      top: -1px;
      width: var(--tabs--active-height);
      height: calc(100% + 2px);
      content: "";
      border-inline-start: 3px solid var(--admin-color-link);
      inset-inline-start: -1px;
      border-start-start-radius: var(--tabs-border-radius-size);
    }

    @media (--tabs-horizontal) {
      &::before {
        content: none;
      }
    }
  }

  &:not(.is-active):focus {
    z-index: 3;
  }

  .is-horizontal .tabs--primary & {
    height: 100%;
    min-height: 2rem;
    margin-inline-end: 0.25em;
    font-size: var(--admin-font-size-m);
    padding-block: calc(var(--admin-space-l) - var(--admin-space-2xs));
    padding-inline: var(--admin-space-l);

    &.is-active {
      color: var(--admin-color-primary-active);
    }

    @media (--tabs-horizontal) {
      min-height: 2rem;
      margin-inline-end: 0.25em;
      border-radius: 2rem;
      font-size: var(--admin-font-size-m);
      padding-block: calc(var(--admin-space-xs) - 2px);
      padding-inline: var(--admin-space-s);

      &.is-active {
        border: solid 1px transparent; /* Forced-colors mode. */
        background: var(--admin-color-primary-soft);
      }
    }
  }

  .is-horizontal .tabs--secondary & {
    @media (--tabs-horizontal) {
      padding: var(--admin-space-m);
      border-radius: var(--admin-radius-m) var(--admin-radius-m) 0 0;

      &.is-active {
        color: var(--admin-color-primary);

        &::before {
          all: revert;
          position: absolute;
          content: "";
          inset: auto 0 0;
          border-block-end: var(--tabs--active-height) solid var(--admin-color-primary);
        }
      }
    }
  }

  .is-horizontal &:is(:hover, :focus) {
    color: var(--admin-color-primary);
    background: var(--admin-color-bg-item-hover);
  }

  @media (--tabs-horizontal) {
    text-align: center;
    text-wrap: balance;
    background: unset;
  }
}

.tabs__trigger {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  padding-inline-end: 1px;
  cursor: pointer;
  text-align: center;
  border: 0;
  border-inline-start: var(--tabs-trigger-border);
  background-color: var(--admin-color-bg-surface);
  line-height: inherit;
  appearance: none;
  inline-size: var(--tabs-link-height);

  &:focus {
    z-index: 1;
  }

  path {
    fill: currentColor;
    stroke: currentColor;
  }

  .is-horizontal & {
    @media (--tabs-horizontal) {
      display: none;
    }
  }

  @media (forced-colors: active) {
    svg path {
      fill: currentColor;
    }
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/css/components/tabs.pcss.css

View source 
  1. /**

  2.  * Tabs.

  3.  */

  4. @custom-media --tabs-horizontal (min-width: 768px);

  5. 

  6. :root {

  7.   /**

  8.   * Tabs.

  9.   */

  10.   --tabs-border-radius-size: var(--admin-radius-2xs);

  11.   --tabs--focus-height: 3px;

  12.   --tabs--active-height: 3px;

  13.   --tabs-link-height: 3rem; /* 48px */

  14.   --tabs-secondary-link-height: 2.5rem; /* 40px */

  15.   --tabs-base-border: 1px solid var(--admin-color-border);

  16.   --tabs-trigger-border: 1px solid rgb(216, 217, 224, 0.8);

  17. }

  18. 

  19. .tabs-wrapper {

  20.   box-sizing: border-box;

  21.   padding: 0 var(--admin-space-xs);

  22.   margin-inline: calc(var(--admin-space-xs) * -1);

  23. 

  24.   *,

  25.   *::before,

  26.   *::after {

  27.     box-sizing: border-box;

  28.   }

  29. 

  30.   @media (--tabs-horizontal) {

  31.     display: flex;

  32.     padding: 0;

  33.   }

  34. }

  35. 

  36. .tabs {

  37.   display: flex;

  38.   flex-direction: column;

  39.   margin: 0 0 var(--admin-space-l);

  40.   list-style: none;

  41.   border: var(--tabs-base-border);

  42.   border-radius: var(--tabs-border-radius-size);

  43.   inline-size: 100%;

  44. 

  45.   &.is-open {

  46.     .tabs__tab.is-active::before {

  47.       border-end-start-radius: 0;

  48.     }

  49.   }

  50. 

  51.   .is-horizontal 
  52.   }

  53. 

  54.   .gin--dark-mode 
  55.   }

  56. }

  57. 

  58. .tabs--primary {

  59.   @media (--tabs-horizontal) {

  60.     margin-block-end: 0;

  61. 

  62.     .gin--high-contrast-mode .is-horizontal &::after {

  63.       border-block-end: 1px solid;

  64.     }

  65.   }

  66. }

  67. 

  68. .tabs--secondary {

  69.   .is-horizontal 
  70. 

  71.       &::after {

  72.         position: absolute;

  73.         display: block;

  74.         width: 100%;

  75.         max-width: calc(100% - var(--admin-space-m));

  76.         content: "";

  77.         pointer-events: none;

  78.         border-block-end: 1px solid var(--admin-color-border);

  79.         inset-block-end: 0;

  80.         inset-inline-start: 0;

  81.       }

  82. 

  83.       .tabs__tab {

  84.         font-size: var(--admin-font-size-s);

  85.       }

  86. 

  87.       .tabs__link {

  88.         min-block-size: var(--tabs-secondary-link-height);

  89.         padding-block: var(--admin-space-xs);

  90. 

  91.         &:focus {

  92.           min-block-size: var(--tabs-secondary-link-height);

  93.         }

  94.       }

  95.     }

  96.   }

  97. }

  98. 

  99. .tabs__tab {

  100.   position: relative;

  101.   border-block-end: var(--tabs-base-border);

  102.   background-color: var(--admin-color-bg-surface-nested);

  103.   font-size: var(--admin-font-size-s);

  104.   font-weight: var(--admin-font-weight-semibold);

  105. 

  106.   &:last-child {

  107.     border-block-end: 0;

  108.   }

  109. 

  110.   &.is-active {

  111.     display: flex;

  112.     justify-content: space-between;

  113. 

  114.     /* Vertical line that indicates active state. */

  115.     &::before {

  116.       z-index: 2;

  117.       inset-block-start: -1px;

  118.       inset-inline-start: -1px;

  119.       inline-size: var(--tabs--active-height);

  120.       block-size: calc(100% + 2px);

  121.       border-inline-start: var(--tabs--active-height) solid var(--admin-color-primary);

  122.       border-start-start-radius: var(--tabs-border-radius-size);

  123.     }

  124.   }

  125. 

  126.   .is-horizontal .tabs--primary 
  127.     }

  128. 

  129.     /* Remove the bottom border from the first tab only if the tabs group is closed. */

  130.     &[data-original-order="0"]:not(.tabs.is-open *) {

  131.       border-block-end: none;

  132.     }

  133. 

  134.     @media (--tabs-horizontal) {

  135.       border-block-end: none;

  136.       background-color: unset;

  137.     }

  138.   }

  139. 

  140.   .is-horizontal 
  141.       }

  142.     }

  143.   }

  144. 

  145.   .gin--dark-mode 
  146. 

  147.     .tabs-wrapper:not(.is-horizontal) 
  148.   }

  149. }

  150. 

  151. .tabs__link {

  152.   display: flex;

  153.   flex-grow: 1;

  154.   align-items: center;

  155.   text-decoration: none;

  156.   color: var(--admin-color-text);

  157.   /* font-weight: var(--admin-font-weight-semibold); */

  158.   background-color: var(--admin-color-bg-surface);

  159.   line-height: 1.2rem;

  160.   padding-block: var(--admin-space-s);

  161.   padding-inline: var(--admin-space-l);

  162. 

  163.   &:hover {

  164.     text-decoration: none;

  165.     color: var(--admin-color-text);

  166.   }

  167. 

  168.   &.is-active {

  169.     position: relative;

  170. 

  171.     &:hover {

  172.       color: var(--admin-color-text);

  173.     }

  174. 

  175.     &::before {

  176.       position: absolute;

  177.       z-index: 2;

  178.       top: -1px;

  179.       width: var(--tabs--active-height);

  180.       height: calc(100% + 2px);

  181.       content: "";

  182.       border-inline-start: 3px solid var(--admin-color-link);

  183.       inset-inline-start: -1px;

  184.       border-start-start-radius: var(--tabs-border-radius-size);

  185.     }

  186. 

  187.     @media (--tabs-horizontal) {

  188.       &::before {

  189.         content: none;

  190.       }

  191.     }

  192.   }

  193. 

  194.   &:not(.is-active):focus {

  195.     z-index: 3;

  196.   }

  197. 

  198.   .is-horizontal .tabs--primary 
  199. 

  200.     @media (--tabs-horizontal) {

  201.       min-height: 2rem;

  202.       margin-inline-end: 0.25em;

  203.       border-radius: 2rem;

  204.       font-size: var(--admin-font-size-m);

  205.       padding-block: calc(var(--admin-space-xs) - 2px);

  206.       padding-inline: var(--admin-space-s);

  207. 

  208.       &.is-active {

  209.         border: solid 1px transparent; /* Forced-colors mode. */

  210.         background: var(--admin-color-primary-soft);

  211.       }

  212.     }

  213.   }

  214. 

  215.   .is-horizontal .tabs--secondary 
  216.       }

  217.     }

  218.   }

  219. 

  220.   .is-horizontal &:is(:hover, :focus) {

  221.     color: var(--admin-color-primary);

  222.     background: var(--admin-color-bg-item-hover);

  223.   }

  224. 

  225.   @media (--tabs-horizontal) {

  226.     text-align: center;

  227.     text-wrap: balance;

  228.     background: unset;

  229.   }

  230. }

  231. 

  232. .tabs__trigger {

  233.   display: flex;

  234.   flex-shrink: 0;

  235.   align-items: center;

  236.   justify-content: center;

  237.   margin: 0;

  238.   padding: 0;

  239.   padding-inline-end: 1px;

  240.   cursor: pointer;

  241.   text-align: center;

  242.   border: 0;

  243.   border-inline-start: var(--tabs-trigger-border);

  244.   background-color: var(--admin-color-bg-surface);

  245.   line-height: inherit;

  246.   appearance: none;

  247.   inline-size: var(--tabs-link-height);

  248. 

  249.   &:focus {

  250.     z-index: 1;

  251.   }

  252. 

  253.   path {

  254.     fill: currentColor;

  255.     stroke: currentColor;

  256.   }

  257. 

  258.   .is-horizontal 
  259.   }

  260. 

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

  262.     svg path {

  263.       fill: currentColor;

  264.     }

  265.   }

  266. }

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