vertical-tabs.css

Same filename in this branch
  1. 8.9.x core/themes/seven/css/components/vertical-tabs.css
  2. 8.9.x core/themes/claro/css/components/vertical-tabs.css
  3. 8.9.x core/themes/stable/css/core/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. 10 core/misc/vertical-tabs.css
  10. 10 core/themes/olivero/css/components/vertical-tabs.css
  11. 10 core/themes/stable9/css/core/vertical-tabs.css
  12. 10 core/themes/claro/css/components/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/misc/vertical-tabs.css

View source
  1. /**
  2. * @file
  3. * Vertical Tabs.
  4. */
  5. .vertical-tabs {
  6. margin: 1em 0 1em 15em; /* LTR */
  7. border: 1px solid #ccc;
  8. }
  9. [dir="rtl"] .vertical-tabs {
  10. margin-right: 15em;
  11. margin-left: 0;
  12. }
  13. .vertical-tabs__menu {
  14. float: left; /* LTR */
  15. width: 15em;
  16. margin: -1px 0 -1px -15em; /* LTR */
  17. padding: 0;
  18. list-style: none;
  19. border-top: 1px solid #ccc;
  20. }
  21. [dir="rtl"] .vertical-tabs__menu {
  22. float: right;
  23. margin-right: -15em;
  24. margin-left: 0;
  25. }
  26. .vertical-tabs__pane {
  27. margin: 0;
  28. border: 0;
  29. }
  30. .vertical-tabs__pane > summary {
  31. display: none;
  32. }
  33. /* Layout of each tab. */
  34. .vertical-tabs__menu-item {
  35. border: 1px solid #ccc;
  36. border-top: 0;
  37. background: #eee;
  38. }
  39. .vertical-tabs__menu-item a {
  40. display: block;
  41. padding: 0.5em 0.6em;
  42. text-decoration: none;
  43. }
  44. .vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title,
  45. .vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
  46. .vertical-tabs__menu-item a:hover .vertical-tabs__menu-item-title {
  47. text-decoration: underline;
  48. }
  49. .vertical-tabs__menu-item a:hover {
  50. outline: 1px dotted;
  51. }
  52. .vertical-tabs__menu-item.is-selected {
  53. border-right-width: 0; /* LTR */
  54. background-color: #fff;
  55. }
  56. [dir="rtl"] .vertical-tabs__menu-item.is-selected {
  57. border-right-width: 1px;
  58. border-left-width: 0;
  59. }
  60. .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title {
  61. color: #000;
  62. }
  63. .vertical-tabs__menu-item-summary {
  64. display: block;
  65. margin-bottom: 0;
  66. line-height: normal;
  67. }

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