vertical-tabs.css

Same filename in this branch
  1. 10 core/misc/vertical-tabs.css
  2. 10 core/themes/stable9/css/core/vertical-tabs.css
  3. 10 core/themes/claro/css/components/vertical-tabs.css
Same filename in other branches
  1. 7.x misc/vertical-tabs.css
  2. 7.x themes/seven/vertical-tabs.css
  3. 9 core/misc/vertical-tabs.css
  4. 9 core/themes/olivero/css/components/vertical-tabs.css
  5. 9 core/themes/stable9/css/core/vertical-tabs.css
  6. 9 core/themes/seven/css/components/vertical-tabs.css
  7. 9 core/themes/claro/css/components/vertical-tabs.css
  8. 9 core/themes/stable/css/core/vertical-tabs.css
  9. 8.9.x core/misc/vertical-tabs.css
  10. 8.9.x core/themes/seven/css/components/vertical-tabs.css
  11. 8.9.x core/themes/claro/css/components/vertical-tabs.css
  12. 8.9.x core/themes/stable/css/core/vertical-tabs.css
  13. 11.x core/misc/vertical-tabs.css
  14. 11.x core/themes/olivero/css/components/vertical-tabs.css
  15. 11.x core/themes/stable9/css/core/vertical-tabs.css
  16. 11.x core/themes/claro/css/components/vertical-tabs.css

Vertical Tabs.

File

core/themes/olivero/css/components/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. * @file
  9. * Vertical Tabs.
  10. */
  11. :root {
  12. --vertical-tabs-menu-width: 15rem;
  13. --vertical-tabs-menu-border-width: 1px;
  14. }
  15. @media (min-width: 62.5rem) {
  16. .vertical-tabs {
  17. display: flex;
  18. }
  19. }
  20. .vertical-tabs__menu {
  21. position: relative;
  22. align-self: flex-start;
  23. margin: 0;
  24. margin-inline-start: 0;
  25. margin-inline-end: 0;
  26. list-style: none;
  27. border-width: var(--vertical-tabs-menu-border-width);
  28. border-style: solid;
  29. border-color: var(--color--gray-95);
  30. }
  31. @media (min-width: 62.5rem) {
  32. .vertical-tabs__menu {
  33. width: var(--vertical-tabs-menu-width);
  34. border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width);
  35. }
  36. }
  37. .vertical-tabs__panes {
  38. margin-block-start: calc(var(--vertical-tabs-menu-border-width) * -1);
  39. }
  40. @media (min-width: 62.5rem) {
  41. .vertical-tabs__panes {
  42. width: calc(100% - var(--vertical-tabs-menu-width));
  43. margin-block-start: 0;
  44. }
  45. }
  46. @media (min-width: 62.5rem) {
  47. .vertical-tabs__pane {
  48. min-height: 100%;
  49. }
  50. }
  51. .vertical-tabs__pane.olivero-details {
  52. margin: 0;
  53. border-radius: 0;
  54. box-shadow: none;
  55. }
  56. .vertical-tabs__pane > summary {
  57. display: none;
  58. }
  59. .vertical-tabs__menu-item:nth-child(n + 2) {
  60. border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95);
  61. }
  62. .vertical-tabs__menu-item a {
  63. display: block;
  64. padding-block: var(--sp0-5);
  65. padding-inline-start: var(--sp0-75);
  66. padding-inline-end: var(--sp0-75);
  67. -webkit-text-decoration: none;
  68. text-decoration: none;
  69. color: var(--color-text-primary-loud);
  70. background-color: var(--color--gray-95);
  71. }
  72. .vertical-tabs__menu-item a:focus,
  73. .vertical-tabs__menu-item a:hover,
  74. .vertical-tabs__menu-item a:active {
  75. background-color: var(--color--gray-100);
  76. }
  77. .vertical-tabs__menu-item.is-selected {
  78. background-color: var(--color--white);
  79. }
  80. @media (min-width: 62.5rem) {
  81. .vertical-tabs__menu-item.is-selected {
  82. margin-inline-end: calc(var(--vertical-tabs-menu-border-width) * -1);
  83. padding-inline-end: var(--vertical-tabs-menu-border-width);
  84. }
  85. }
  86. .vertical-tabs__menu-item.is-selected a {
  87. background-color: transparent;
  88. }
  89. .vertical-tabs__menu-item-summary {
  90. display: block;
  91. font-size: var(--font-size-s);
  92. line-height: var(--line-height-s);
  93. }

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