tabs.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  2. 11.x core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  3. 11.x core/themes/olivero/css/components/tabs.css
  4. 11.x core/themes/claro/css/components/tabs.css
  5. 11.x core/themes/starterkit_theme/css/components/tabs.css
  6. 11.x core/themes/admin/css/components/tabs.css
  7. 11.x core/themes/default_admin/migration/css/components/tabs.css
  8. 11.x core/themes/default_admin/css/components/tabs.css
Same filename and directory in other branches
  1. 8.9.x core/assets/vendor/jquery.ui/themes/base/tabs.css
  2. 10 core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  3. 10 core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  4. 10 core/themes/olivero/css/components/tabs.css
  5. 10 core/themes/claro/css/components/tabs.css
  6. 10 core/themes/starterkit_theme/css/components/tabs.css
  7. 9 core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  8. 9 core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  9. 9 core/profiles/demo_umami/themes/umami/css/classy/components/tabs.css
  10. 9 core/themes/olivero/css/components/tabs.css
  11. 9 core/themes/seven/css/components/tabs.css
  12. 9 core/themes/seven/css/classy/components/tabs.css
  13. 9 core/themes/claro/css/components/tabs.css
  14. 9 core/themes/bartik/css/components/tabs.css
  15. 9 core/themes/bartik/css/classy/components/tabs.css
  16. 9 core/themes/starterkit_theme/css/components/tabs.css
  17. 9 core/themes/classy/css/components/tabs.css
  18. 8.9.x core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  19. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/tabs.css
  20. 8.9.x core/themes/seven/css/components/tabs.css
  21. 8.9.x core/themes/seven/css/classy/components/tabs.css
  22. 8.9.x core/themes/claro/css/components/tabs.css
  23. 8.9.x core/themes/bartik/css/components/tabs.css
  24. 8.9.x core/themes/bartik/css/classy/components/tabs.css
  25. 8.9.x core/themes/classy/css/components/tabs.css
  26. main core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  27. main core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  28. main core/themes/olivero/css/components/tabs.css
  29. main core/themes/claro/css/components/tabs.css
  30. main core/themes/starterkit_theme/css/components/tabs.css
  31. main core/themes/admin/migration/css/components/tabs.css
  32. main core/themes/admin/css/components/tabs.css
  33. main core/themes/default_admin/migration/css/components/tabs.css
  34. main core/themes/default_admin/css/components/tabs.css
.tabs {
  box-shadow: none;
}

.tabs-wrapper,
.horizontal-tabs ul.horizontal-tabs-list {
  padding: 0 var(--gin-spacing-xs);
  margin-inline: calc(var(--gin-spacing-xs) * -1);
}

@media (min-width: 48em) {
  .tabs-wrapper,
  .horizontal-tabs ul.horizontal-tabs-list {
    padding: 0;
  }
}

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

.gin--dark-mode .tabs-wrapper:not(.is-horizontal) .tabs__tab {
  border-color: #8e929c;
  background-color: var(--gin-bg-item-hover);
}

.vertical-tabs__items {
  z-index: inherit;
}

.gin--dark-mode .tabs {
  border-color: var(--gin-border-color-layer2);
}

.gin--dark-mode .tabs .tabs__tab,
.gin--dark-mode .tabs .tabs__tab.is-active {
  border-color: var(--gin-border-color-layer2);
  background-color: transparent;
}

.tabs__link,
.gin-details__summary,
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a {
  color: var(--gin-color-text);
  font-size: var(--gin-font-size);
  font-weight: var(--gin-font-weight-semibold);
  padding-block: calc(var(--gin-spacing-l) - var(--gin-spacing-xxs));
}

.tabs__link strong,
.gin-details__summary strong,
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a strong {
  font-weight: inherit;
}

.tabs__link.is-active,
.gin-details__summary[aria-expanded="true"],
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button.selected a {
  font-weight: var(--gin-font-weight-semibold);
}

.is-horizontal .tabs__link:hover,
.is-horizontal .tabs__link:focus,
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a:hover,
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a:focus {
  color: var(--gin-color-primary);
  background: var(--gin-bg-item-hover);
}

.gin-details {
  color: var(--gin-color-text);
  border: 1px solid var(--gin-border-color);
  border-radius: var(--gin-border-m);
  box-shadow: none;
}

.gin-details__summary::after {
  border-radius: var(--gin-border-m);
}

.gin-details__summary:hover {
  color: var(--gin-color-primary);
  background-color: var(--gin-bg-item-hover);
}

.is-horizontal .tabs--primary,
.is-horizontal .tabs--secondary,
.horizontal-tabs ul.horizontal-tabs-list {
  position: relative;
}

@media (min-width: 48em) {
  .is-horizontal .tabs--primary,
  .is-horizontal .tabs--secondary,
  .horizontal-tabs ul.horizontal-tabs-list {
    overflow-x: auto;
    width: 100%;
    padding-block: 0.3125rem var(--gin-spacing-l);
    padding-inline: var(--gin-spacing-xs);
    margin-block-end: calc(var(--gin-spacing-xl) * -1);
  }

  .gin--edit-form .is-horizontal .tabs--primary,
  .gin--edit-form .is-horizontal .tabs--secondary,
  .gin--edit-form .horizontal-tabs ul.horizontal-tabs-list {
    padding-block-start: 0.4rem;
  }
}

.is-horizontal .tabs--primary::after,
.is-horizontal .tabs--secondary::after,
.horizontal-tabs ul.horizontal-tabs-list::after {
  position: absolute;
  display: block;
  width: 100%;
  max-width: calc(100% + var(--gin-spacing-xs));
  content: "";
  pointer-events: none;
  inset-block-end: 0;
  inset-inline-start: 0;
  border-block-end: 1px solid var(--gin-border-color);
}

@media (prefers-reduced-motion: no-preference) {
  .is-horizontal .tabs--primary::after,
  .is-horizontal .tabs--secondary::after,
  .horizontal-tabs ul.horizontal-tabs-list::after {
    transition: var(--gin-transition);
  }
}

@media (min-width: 48em) {
  .is-horizontal .tabs--primary::after,
  .is-horizontal .tabs--secondary::after,
  .horizontal-tabs ul.horizontal-tabs-list::after {
    inset-inline-start: var(--gin-spacing-xs);
    inset-block-end: var(--gin-spacing-l);
    max-width: calc(100% - var(--gin-spacing-m));
  }
}

.is-horizontal .tabs--primary .tabs__tab,
.is-horizontal .tabs--primary .horizontal-tab-button,
.is-horizontal .tabs--secondary .tabs__tab,
.is-horizontal .tabs--secondary .horizontal-tab-button,
.horizontal-tabs ul.horizontal-tabs-list .tabs__tab,
.horizontal-tabs ul.horizontal-tabs-list .horizontal-tab-button {
  position: relative;
}

.is-horizontal .tabs--primary .tabs__tab:focus-within::after,
.is-horizontal .tabs--primary .horizontal-tab-button:focus-within::after,
.is-horizontal .tabs--secondary .tabs__tab:focus-within::after,
.is-horizontal .tabs--secondary .horizontal-tab-button:focus-within::after,
.horizontal-tabs ul.horizontal-tabs-list .tabs__tab:focus-within::after,
.horizontal-tabs ul.horizontal-tabs-list .horizontal-tab-button:focus-within::after {
  position: absolute;
  z-index: 3;
  display: block;
  width: calc(100% + var(--gin-spacing-xs));
  height: 4px;
  content: "";
  background: var(--gin-bg-app);
  inset-block-end: calc(var(--gin-spacing-xxs) * -1);
  inset-inline-start: calc(var(--gin-spacing-xxs) * -1);
}

.is-horizontal .tabs--primary .horizontal-tab-button:focus-within::after,
.is-horizontal .tabs--secondary .horizontal-tab-button:focus-within::after,
.horizontal-tabs ul.horizontal-tabs-list .horizontal-tab-button:focus-within::after {
  background: var(--gin-bg-layer);
}

.horizontal-tabs ul.horizontal-tabs-list::before {
  z-index: 1;
  background: var(--gin-bg-layer);
}

.horizontal-tabs ul.horizontal-tabs-list::after {
  inset-inline-start: var(--gin-spacing-xs);
  max-width: calc(100% - var(--gin-spacing-m));
}

@media (min-width: 48em) {
  .is-horizontal .tabs--primary,
  .is-horizontal .tabs--secondary {
    margin-inline: 0;
  }
}

@media (min-width: 48em) {
  .tabs--primary {
    margin-block-end: 0;
  }
}

@media (min-width: 48em) {
  .is-horizontal .tabs--primary::after {
    border-block-end: 0 none;
  }

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

@media (max-width: 47.99em) {
  .is-horizontal .tabs--primary .tabs__tab {
    border-block-end: 1px solid var(--gin-border-color-layer2);
    background-color: var(--gin-bg-layer);
  }

  .is-horizontal .tabs--primary .tabs__tab[data-original-order="0"] {
    border-block-end: none;
  }
}

@media (min-width: 48em) {
  .is-horizontal .tabs--primary .tabs__tab:focus-within::after {
    display: none;
  }
}

.is-horizontal .tabs--primary .tabs__link {
  height: 100%;
  min-height: var(--gin-spacing-xxl);
}

@media (min-width: 48em) {
  .is-horizontal .tabs--primary .tabs__link {
    min-height: 2rem;
    margin-inline-end: 0.25em;
    border-radius: 2rem;
    font-size: var(--gin-font-size);
    padding-block: calc(var(--gin-spacing-xs) - 2px);
    padding-inline: var(--gin-spacing-s);
  }
}

@media (min-width: 48em) {
  .is-horizontal .tabs--primary .tabs__link.is-active {
    color: var(--gin-color-primary-active);
    border: 1.5px solid currentColor;
  }
}

.is-horizontal .tabs--primary .tabs__link.is-active::before {
  display: none;
}

.tabs__trigger svg {
  stroke: var(--gin-color-primary);
}

@media (min-width: 48em) {
  .is-horizontal .tabs--secondary {
    margin-block-start: var(--gin-spacing-m);
  }

  .is-horizontal .tabs--secondary::before {
    width: 100%;
  }
}

.is-horizontal .tabs--secondary .tabs__link {
  min-height: 2.5rem;
  padding-block: var(--gin-spacing-xs) var(--gin-spacing-m);
  padding-inline: var(--gin-spacing-m);
  border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
  font-size: var(--gin-font-size-s);
}

.horizontal-tabs {
  position: static !important;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-block-start: calc(var(--gin-spacing-m) * -1);
  border: 0 none;
}

.horizontal-tabs ul.horizontal-tabs-list {
  overflow: hidden;
  border-inline-end: 0 none;
  border-block-end: 0 none;
  background: none;
}

@media (min-width: 48em) {
  .horizontal-tabs ul.horizontal-tabs-list::after {
    inset-inline-start: var(--gin-spacing-xs);
    max-width: calc(100% - var(--gin-spacing-m));
  }
}

.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button {
  border-inline-end: 0 none;
  border-block-end: 0 none;
  background: none;
}

.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a {
  padding-block: var(--gin-spacing-xs) var(--gin-spacing-m);
  padding-inline: var(--gin-spacing-m);
  border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
  font-size: var(--gin-font-size-s);
}

.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a::before {
  position: absolute;
  display: block;
  content: "";
}

.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button.selected a {
  color: var(--gin-color-primary);
}

.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button.selected a::before {
  z-index: 1;
  border-inline: none;
  width: 100%;
  height: 3px;
  border-block-end: 3px solid var(--gin-color-primary);
  inset-block-start: auto;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
}

.horizontal-tabs .horizontal-tabs {
  margin-block-start: var(--gin-spacing-m);
}

.horizontal-tabs .horizontal-tabs-panes,
.horizontal-tabs [data-horizontal-tabs-panes] {
  width: 100%;
}

.horizontal-tabs .horizontal-tabs-pane {
  padding: 0;
  box-shadow: none;
}

.horizontal-tabs .horizontal-tabs-pane > .details-wrapper {
  margin: 0;
}

.horizontal-tabs .horizontal-tabs-pane > .details-wrapper > .gin-details__description {
  margin-block-start: var(--gin-spacing-m);
}

.gin-details__description {
  max-width: var(--gin-max-line-length);
}

.gin-details__summary::before,
.gin-details[open] > .gin-details__summary::before {
  inset-inline-start: 1.125rem;
  background: var(--gin-color-text);
  -webkit-mask-image: url("../../media/sprite.svg#handle-view");
  mask-image: url("../../media/sprite.svg#handle-view");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (forced-colors: active) {
  .gin-details__summary::before,
  .gin-details[open] > .gin-details__summary::before {
    background-color: buttonBorder;
  }
}

@media (forced-colors: active) {
  [dir="ltr"] .gin-details__summary::before {
    transform: rotate(90deg);
  }

  [dir="rtl"] .gin-details__summary::before {
    transform: rotate(-90deg);
  }
}

@media (forced-colors: active) {
  .gin-details[open] > .gin-details__summary::before {
    margin-block-start: -6px;
  }

  [dir="ltr"] .gin-details[open] > .gin-details__summary::before {
    transform: rotate(270deg);
  }

  [dir="rtl"] .gin-details[open] > .gin-details__summary::before {
    transform: rotate(-270deg);
  }
}

.gin-details__summary:hover::before,
.gin-details__summary:hover:focus::before,
.gin-details[open] > .gin-details__summary:hover::before,
.gin-details[open] > .gin-details__summary:focus::before,
.gin-details[open] > .gin-details__summary--accordion::before,
.gin-details[open] > .gin-details__summary--accordion-item::before,
.gin-details[open] > .gin-details__summary--vertical-tabs-item::before {
  background: var(--gin-color-primary);
}

@media (forced-colors: active) {
  .gin-details__summary:hover::before,
  .gin-details__summary:hover:focus::before,
  .gin-details[open] > .gin-details__summary:hover::before,
  .gin-details[open] > .gin-details__summary:focus::before,
  .gin-details[open] > .gin-details__summary--accordion::before,
  .gin-details[open] > .gin-details__summary--accordion-item::before,
  .gin-details[open] > .gin-details__summary--vertical-tabs-item::before {
    background-color: linkText;
  }
}

.gin-details__description {
  color: var(--gin-color-text-light);
}

.gin-details__wrapper--accordion,
.gin-details__wrapper--accordion-item,
.gin-details__wrapper--vertical-tabs-item {
  border-block-start: 1px solid var(--gin-border-color);
  background: var(--gin-bg-app);
}

.gin--dark-mode .gin-details,
.gin--dark-mode .gin-details__summary--accordion,
.gin--dark-mode .gin-details__summary--accordion-item,
.gin--dark-mode .gin-details__summary--vertical-tabs-item {
  background-color: transparent;
}

.gin--dark-mode .gin-details {
  border-color: var(--gin-border-color);
}

.gin--dark-mode .vertical-tabs__items {
  border: 0 none;
  background: none;
}

.gin--dark-mode .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
  border-color: transparent;
  background: var(--gin-bg-app);
}

.gin--dark-mode .vertical-tabs__menu-link {
  color: var(--gin-color-text);
}

.gin--dark-mode .vertical-tabs__menu-link-summary {
  color: var(--gin-color-text-light);
}

.gin--dark-mode .vertical-tabs .gin-details__wrapper {
  background: var(--gin-bg-app);
}

.vertical-tabs__items {
  border-radius: var(--gin-border-m);
}

@media (min-width: 64em) {
  .vertical-tabs__items {
    border-start-start-radius: 0;
  }
}

.vertical-tabs__items .vertical-tabs__item {
  border-radius: 0;
}

@media (min-width: 85em) {
  .vertical-tabs__items .vertical-tabs__item {
    border-start-end-radius: var(--gin-border-m);
    border-end-end-radius: var(--gin-border-m);
    border-end-start-radius: var(--gin-border-m);
  }

  .vertical-tabs__items .vertical-tabs__item ~ .vertical-tabs__item {
    border-start-start-radius: var(--gin-border-m);
  }
}

@media (min-width: 64em) {
  .vertical-tabs__items .vertical-tabs__item .gin-details__summary {
    padding-inline-start: var(--gin-spacing-xxl);
  }

  .vertical-tabs__items .vertical-tabs__item .gin-details__summary::before {
    inset-inline-start: var(--gin-spacing-m);
  }
}

.vertical-tabs__items .vertical-tabs__item > .gin-details__wrapper {
  display: inline-block;
  width: 100%;
}

.vertical-tabs__menu-item-title {
  font-weight: var(--gin-font-weight-bold);
}

.vertical-tabs__menu-item::before,
.vertical-tabs__menu-item::after {
  border-color: var(--gin-border-color);
}

.vertical-tabs__menu-link:hover,
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {
  color: var(--gin-color-primary);
}

.vertical-tabs__menu-link:hover::before,
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {
  background: var(--gin-bg-item-hover);
}

[open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after,
[open] > .gin-details__summary--accordion-item:not(:focus, :active)::after {
  border-inline-start-width: 5px;
}

@media screen and (min-width: 85em) {
  html.js .vertical-tabs__item {
    float: inline-start;
    overflow: visible;
    width: 100%;
  }
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/components/tabs.css

View source 
  1. .tabs {

  2.   box-shadow: none;

  3. }

  4. 

  5. .tabs-wrapper,

  6. .horizontal-tabs ul.horizontal-tabs-list {

  7.   padding: 0 var(--gin-spacing-xs);

  8.   margin-inline: calc(var(--gin-spacing-xs) * -1);

  9. }

  10. 

  11. @media (min-width: 48em) {

  12.   .tabs-wrapper,

  13.   .horizontal-tabs ul.horizontal-tabs-list {

  14.     padding: 0;

  15.   }

  16. }

  17. 

  18. .gin--dark-mode .tabs-wrapper:not(.is-horizontal) .tabs {

  19.   border-color: #8e929c;

  20. }

  21. 

  22. .gin--dark-mode .tabs-wrapper:not(.is-horizontal) .tabs__tab {

  23.   border-color: #8e929c;

  24.   background-color: var(--gin-bg-item-hover);

  25. }

  26. 

  27. .vertical-tabs__items {

  28.   z-index: inherit;

  29. }

  30. 

  31. .gin--dark-mode .tabs {

  32.   border-color: var(--gin-border-color-layer2);

  33. }

  34. 

  35. .gin--dark-mode .tabs .tabs__tab,

  36. .gin--dark-mode .tabs .tabs__tab.is-active {

  37.   border-color: var(--gin-border-color-layer2);

  38.   background-color: transparent;

  39. }

  40. 

  41. .tabs__link,

  42. .gin-details__summary,

  43. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a {

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

  45.   font-size: var(--gin-font-size);

  46.   font-weight: var(--gin-font-weight-semibold);

  47.   padding-block: calc(var(--gin-spacing-l) - var(--gin-spacing-xxs));

  48. }

  49. 

  50. .tabs__link strong,

  51. .gin-details__summary strong,

  52. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a strong {

  53.   font-weight: inherit;

  54. }

  55. 

  56. .tabs__link.is-active,

  57. .gin-details__summary[aria-expanded="true"],

  58. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button.selected a {

  59.   font-weight: var(--gin-font-weight-semibold);

  60. }

  61. 

  62. .is-horizontal .tabs__link:hover,

  63. .is-horizontal .tabs__link:focus,

  64. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a:hover,

  65. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a:focus {

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

  67.   background: var(--gin-bg-item-hover);

  68. }

  69. 

  70. .gin-details {

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

  72.   border: 1px solid var(--gin-border-color);

  73.   border-radius: var(--gin-border-m);

  74.   box-shadow: none;

  75. }

  76. 

  77. .gin-details__summary::after {

  78.   border-radius: var(--gin-border-m);

  79. }

  80. 

  81. .gin-details__summary:hover {

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

  83.   background-color: var(--gin-bg-item-hover);

  84. }

  85. 

  86. .is-horizontal .tabs--primary,

  87. .is-horizontal .tabs--secondary,

  88. .horizontal-tabs ul.horizontal-tabs-list {

  89.   position: relative;

  90. }

  91. 

  92. @media (min-width: 48em) {

  93.   .is-horizontal .tabs--primary,

  94.   .is-horizontal .tabs--secondary,

  95.   .horizontal-tabs ul.horizontal-tabs-list {

  96.     overflow-x: auto;

  97.     width: 100%;

  98.     padding-block: 0.3125rem var(--gin-spacing-l);

  99.     padding-inline: var(--gin-spacing-xs);

  100.     margin-block-end: calc(var(--gin-spacing-xl) * -1);

  101.   }

  102. 

  103.   .gin--edit-form .is-horizontal .tabs--primary,

  104.   .gin--edit-form .is-horizontal .tabs--secondary,

  105.   .gin--edit-form .horizontal-tabs ul.horizontal-tabs-list {

  106.     padding-block-start: 0.4rem;

  107.   }

  108. }

  109. 

  110. .is-horizontal .tabs--primary::after,

  111. .is-horizontal .tabs--secondary::after,

  112. .horizontal-tabs ul.horizontal-tabs-list::after {

  113.   position: absolute;

  114.   display: block;

  115.   width: 100%;

  116.   max-width: calc(100% + var(--gin-spacing-xs));

  117.   content: "";

  118.   pointer-events: none;

  119.   inset-block-end: 0;

  120.   inset-inline-start: 0;

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

  122. }

  123. 

  124. @media (prefers-reduced-motion: no-preference) {

  125.   .is-horizontal .tabs--primary::after,

  126.   .is-horizontal .tabs--secondary::after,

  127.   .horizontal-tabs ul.horizontal-tabs-list::after {

  128.     transition: var(--gin-transition);

  129.   }

  130. }

  131. 

  132. @media (min-width: 48em) {

  133.   .is-horizontal .tabs--primary::after,

  134.   .is-horizontal .tabs--secondary::after,

  135.   .horizontal-tabs ul.horizontal-tabs-list::after {

  136.     inset-inline-start: var(--gin-spacing-xs);

  137.     inset-block-end: var(--gin-spacing-l);

  138.     max-width: calc(100% - var(--gin-spacing-m));

  139.   }

  140. }

  141. 

  142. .is-horizontal .tabs--primary .tabs__tab,

  143. .is-horizontal .tabs--primary .horizontal-tab-button,

  144. .is-horizontal .tabs--secondary .tabs__tab,

  145. .is-horizontal .tabs--secondary .horizontal-tab-button,

  146. .horizontal-tabs ul.horizontal-tabs-list .tabs__tab,

  147. .horizontal-tabs ul.horizontal-tabs-list .horizontal-tab-button {

  148.   position: relative;

  149. }

  150. 

  151. .is-horizontal .tabs--primary .tabs__tab:focus-within::after,

  152. .is-horizontal .tabs--primary .horizontal-tab-button:focus-within::after,

  153. .is-horizontal .tabs--secondary .tabs__tab:focus-within::after,

  154. .is-horizontal .tabs--secondary .horizontal-tab-button:focus-within::after,

  155. .horizontal-tabs ul.horizontal-tabs-list .tabs__tab:focus-within::after,

  156. .horizontal-tabs ul.horizontal-tabs-list .horizontal-tab-button:focus-within::after {

  157.   position: absolute;

  158.   z-index: 3;

  159.   display: block;

  160.   width: calc(100% + var(--gin-spacing-xs));

  161.   height: 4px;

  162.   content: "";

  163.   background: var(--gin-bg-app);

  164.   inset-block-end: calc(var(--gin-spacing-xxs) * -1);

  165.   inset-inline-start: calc(var(--gin-spacing-xxs) * -1);

  166. }

  167. 

  168. .is-horizontal .tabs--primary .horizontal-tab-button:focus-within::after,

  169. .is-horizontal .tabs--secondary .horizontal-tab-button:focus-within::after,

  170. .horizontal-tabs ul.horizontal-tabs-list .horizontal-tab-button:focus-within::after {

  171.   background: var(--gin-bg-layer);

  172. }

  173. 

  174. .horizontal-tabs ul.horizontal-tabs-list::before {

  175.   z-index: 1;

  176.   background: var(--gin-bg-layer);

  177. }

  178. 

  179. .horizontal-tabs ul.horizontal-tabs-list::after {

  180.   inset-inline-start: var(--gin-spacing-xs);

  181.   max-width: calc(100% - var(--gin-spacing-m));

  182. }

  183. 

  184. @media (min-width: 48em) {

  185.   .is-horizontal .tabs--primary,

  186.   .is-horizontal .tabs--secondary {

  187.     margin-inline: 0;

  188.   }

  189. }

  190. 

  191. @media (min-width: 48em) {

  192.   .tabs--primary {

  193.     margin-block-end: 0;

  194.   }

  195. }

  196. 

  197. @media (min-width: 48em) {

  198.   .is-horizontal .tabs--primary::after {

  199.     border-block-end: 0 none;

  200.   }

  201. 

  202.   .gin--high-contrast-mode .is-horizontal .tabs--primary::after {

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

  204.   }

  205. }

  206. 

  207. @media (max-width: 47.99em) {

  208.   .is-horizontal .tabs--primary .tabs__tab {

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

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

  211.   }

  212. 

  213.   .is-horizontal .tabs--primary .tabs__tab[data-original-order="0"] {

  214.     border-block-end: none;

  215.   }

  216. }

  217. 

  218. @media (min-width: 48em) {

  219.   .is-horizontal .tabs--primary .tabs__tab:focus-within::after {

  220.     display: none;

  221.   }

  222. }

  223. 

  224. .is-horizontal .tabs--primary .tabs__link {

  225.   height: 100%;

  226.   min-height: var(--gin-spacing-xxl);

  227. }

  228. 

  229. @media (min-width: 48em) {

  230.   .is-horizontal .tabs--primary .tabs__link {

  231.     min-height: 2rem;

  232.     margin-inline-end: 0.25em;

  233.     border-radius: 2rem;

  234.     font-size: var(--gin-font-size);

  235.     padding-block: calc(var(--gin-spacing-xs) - 2px);

  236.     padding-inline: var(--gin-spacing-s);

  237.   }

  238. }

  239. 

  240. @media (min-width: 48em) {

  241.   .is-horizontal .tabs--primary .tabs__link.is-active {

  242.     color: var(--gin-color-primary-active);

  243.     border: 1.5px solid currentColor;

  244.   }

  245. }

  246. 

  247. .is-horizontal .tabs--primary .tabs__link.is-active::before {

  248.   display: none;

  249. }

  250. 

  251. .tabs__trigger svg {

  252.   stroke: var(--gin-color-primary);

  253. }

  254. 

  255. @media (min-width: 48em) {

  256.   .is-horizontal .tabs--secondary {

  257.     margin-block-start: var(--gin-spacing-m);

  258.   }

  259. 

  260.   .is-horizontal .tabs--secondary::before {

  261.     width: 100%;

  262.   }

  263. }

  264. 

  265. .is-horizontal .tabs--secondary .tabs__link {

  266.   min-height: 2.5rem;

  267.   padding-block: var(--gin-spacing-xs) var(--gin-spacing-m);

  268.   padding-inline: var(--gin-spacing-m);

  269.   border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;

  270.   font-size: var(--gin-font-size-s);

  271. }

  272. 

  273. .horizontal-tabs {

  274.   position: static !important;

  275.   display: flex;

  276.   flex-wrap: wrap;

  277.   width: 100%;

  278.   margin-block-start: calc(var(--gin-spacing-m) * -1);

  279.   border: 0 none;

  280. }

  281. 

  282. .horizontal-tabs ul.horizontal-tabs-list {

  283.   overflow: hidden;

  284.   border-inline-end: 0 none;

  285.   border-block-end: 0 none;

  286.   background: none;

  287. }

  288. 

  289. @media (min-width: 48em) {

  290.   .horizontal-tabs ul.horizontal-tabs-list::after {

  291.     inset-inline-start: var(--gin-spacing-xs);

  292.     max-width: calc(100% - var(--gin-spacing-m));

  293.   }

  294. }

  295. 

  296. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button {

  297.   border-inline-end: 0 none;

  298.   border-block-end: 0 none;

  299.   background: none;

  300. }

  301. 

  302. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a {

  303.   padding-block: var(--gin-spacing-xs) var(--gin-spacing-m);

  304.   padding-inline: var(--gin-spacing-m);

  305.   border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;

  306.   font-size: var(--gin-font-size-s);

  307. }

  308. 

  309. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a::before {

  310.   position: absolute;

  311.   display: block;

  312.   content: "";

  313. }

  314. 

  315. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button.selected a {

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

  317. }

  318. 

  319. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button.selected a::before {

  320.   z-index: 1;

  321.   border-inline: none;

  322.   width: 100%;

  323.   height: 3px;

  324.   border-block-end: 3px solid var(--gin-color-primary);

  325.   inset-block-start: auto;

  326.   inset-block-end: 0;

  327.   inset-inline-start: 0;

  328.   inset-inline-end: 0;

  329. }

  330. 

  331. .horizontal-tabs .horizontal-tabs {

  332.   margin-block-start: var(--gin-spacing-m);

  333. }

  334. 

  335. .horizontal-tabs .horizontal-tabs-panes,

  336. .horizontal-tabs [data-horizontal-tabs-panes] {

  337.   width: 100%;

  338. }

  339. 

  340. .horizontal-tabs .horizontal-tabs-pane {

  341.   padding: 0;

  342.   box-shadow: none;

  343. }

  344. 

  345. .horizontal-tabs .horizontal-tabs-pane > .details-wrapper {

  346.   margin: 0;

  347. }

  348. 

  349. .horizontal-tabs .horizontal-tabs-pane > .details-wrapper > .gin-details__description {

  350.   margin-block-start: var(--gin-spacing-m);

  351. }

  352. 

  353. .gin-details__description {

  354.   max-width: var(--gin-max-line-length);

  355. }

  356. 

  357. .gin-details__summary::before,

  358. .gin-details[open] > .gin-details__summary::before {

  359.   inset-inline-start: 1.125rem;

  360.   background: var(--gin-color-text);

  361.   -webkit-mask-image: url("../../media/sprite.svg#handle-view");

  362.   mask-image: url("../../media/sprite.svg#handle-view");

  363.   -webkit-mask-repeat: no-repeat;

  364.   mask-repeat: no-repeat;

  365.   -webkit-mask-position: center center;

  366.   mask-position: center center;

  367.   -webkit-mask-size: 100% 100%;

  368.   mask-size: 100% 100%;

  369. }

  370. 

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

  372.   .gin-details__summary::before,

  373.   .gin-details[open] > .gin-details__summary::before {

  374.     background-color: buttonBorder;

  375.   }

  376. }

  377. 

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

  379.   [dir="ltr"] .gin-details__summary::before {

  380.     transform: rotate(90deg);

  381.   }

  382. 

  383.   [dir="rtl"] .gin-details__summary::before {

  384.     transform: rotate(-90deg);

  385.   }

  386. }

  387. 

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

  389.   .gin-details[open] > .gin-details__summary::before {

  390.     margin-block-start: -6px;

  391.   }

  392. 

  393.   [dir="ltr"] .gin-details[open] > .gin-details__summary::before {

  394.     transform: rotate(270deg);

  395.   }

  396. 

  397.   [dir="rtl"] .gin-details[open] > .gin-details__summary::before {

  398.     transform: rotate(-270deg);

  399.   }

  400. }

  401. 

  402. .gin-details__summary:hover::before,

  403. .gin-details__summary:hover:focus::before,

  404. .gin-details[open] > .gin-details__summary:hover::before,

  405. .gin-details[open] > .gin-details__summary:focus::before,

  406. .gin-details[open] > .gin-details__summary--accordion::before,

  407. .gin-details[open] > .gin-details__summary--accordion-item::before,

  408. .gin-details[open] > .gin-details__summary--vertical-tabs-item::before {

  409.   background: var(--gin-color-primary);

  410. }

  411. 

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

  413.   .gin-details__summary:hover::before,

  414.   .gin-details__summary:hover:focus::before,

  415.   .gin-details[open] > .gin-details__summary:hover::before,

  416.   .gin-details[open] > .gin-details__summary:focus::before,

  417.   .gin-details[open] > .gin-details__summary--accordion::before,

  418.   .gin-details[open] > .gin-details__summary--accordion-item::before,

  419.   .gin-details[open] > .gin-details__summary--vertical-tabs-item::before {

  420.     background-color: linkText;

  421.   }

  422. }

  423. 

  424. .gin-details__description {

  425.   color: var(--gin-color-text-light);

  426. }

  427. 

  428. .gin-details__wrapper--accordion,

  429. .gin-details__wrapper--accordion-item,

  430. .gin-details__wrapper--vertical-tabs-item {

  431.   border-block-start: 1px solid var(--gin-border-color);

  432.   background: var(--gin-bg-app);

  433. }

  434. 

  435. .gin--dark-mode .gin-details,

  436. .gin--dark-mode .gin-details__summary--accordion,

  437. .gin--dark-mode .gin-details__summary--accordion-item,

  438. .gin--dark-mode .gin-details__summary--vertical-tabs-item {

  439.   background-color: transparent;

  440. }

  441. 

  442. .gin--dark-mode .gin-details {

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

  444. }

  445. 

  446. .gin--dark-mode .vertical-tabs__items {

  447.   border: 0 none;

  448.   background: none;

  449. }

  450. 

  451. .gin--dark-mode .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {

  452.   border-color: transparent;

  453.   background: var(--gin-bg-app);

  454. }

  455. 

  456. .gin--dark-mode .vertical-tabs__menu-link {

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

  458. }

  459. 

  460. .gin--dark-mode .vertical-tabs__menu-link-summary {

  461.   color: var(--gin-color-text-light);

  462. }

  463. 

  464. .gin--dark-mode .vertical-tabs .gin-details__wrapper {

  465.   background: var(--gin-bg-app);

  466. }

  467. 

  468. .vertical-tabs__items {

  469.   border-radius: var(--gin-border-m);

  470. }

  471. 

  472. @media (min-width: 64em) {

  473.   .vertical-tabs__items {

  474.     border-start-start-radius: 0;

  475.   }

  476. }

  477. 

  478. .vertical-tabs__items .vertical-tabs__item {

  479.   border-radius: 0;

  480. }

  481. 

  482. @media (min-width: 85em) {

  483.   .vertical-tabs__items .vertical-tabs__item {

  484.     border-start-end-radius: var(--gin-border-m);

  485.     border-end-end-radius: var(--gin-border-m);

  486.     border-end-start-radius: var(--gin-border-m);

  487.   }

  488. 

  489.   .vertical-tabs__items .vertical-tabs__item ~ .vertical-tabs__item {

  490.     border-start-start-radius: var(--gin-border-m);

  491.   }

  492. }

  493. 

  494. @media (min-width: 64em) {

  495.   .vertical-tabs__items .vertical-tabs__item .gin-details__summary {

  496.     padding-inline-start: var(--gin-spacing-xxl);

  497.   }

  498. 

  499.   .vertical-tabs__items .vertical-tabs__item .gin-details__summary::before {

  500.     inset-inline-start: var(--gin-spacing-m);

  501.   }

  502. }

  503. 

  504. .vertical-tabs__items .vertical-tabs__item > .gin-details__wrapper {

  505.   display: inline-block;

  506.   width: 100%;

  507. }

  508. 

  509. .vertical-tabs__menu-item-title {

  510.   font-weight: var(--gin-font-weight-bold);

  511. }

  512. 

  513. .vertical-tabs__menu-item::before,

  514. .vertical-tabs__menu-item::after {

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

  516. }

  517. 

  518. .vertical-tabs__menu-link:hover,

  519. .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {

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

  521. }

  522. 

  523. .vertical-tabs__menu-link:hover::before,

  524. .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {

  525.   background: var(--gin-bg-item-hover);

  526. }

  527. 

  528. [open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after,

  529. [open] > .gin-details__summary--accordion-item:not(:focus, :active)::after {

  530.   border-inline-start-width: 5px;

  531. }

  532. 

  533. @media screen and (min-width: 85em) {

  534.   html.js .vertical-tabs__item {

  535.     float: inline-start;

  536.     overflow: visible;

  537.     width: 100%;

  538.   }

  539. }

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