vertical-tabs.css

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

Override of misc/vertical-tabs.css.

File

core/themes/seven/css/components/vertical-tabs.css

View source
  1. /**
  2. * @file
  3. * Override of misc/vertical-tabs.css.
  4. */
  5. .vertical-tabs {
  6. position: relative;
  7. margin: 10px 0;
  8. border: 1px solid #bdbdbd;
  9. border-radius: 4px;
  10. background: #e6e5e1;
  11. }
  12. .vertical-tabs__menu {
  13. float: left; /* LTR */
  14. width: 240px;
  15. margin: 0 -100% -1px 0; /* LTR */
  16. padding: 0;
  17. list-style-type: none;
  18. border-bottom: 1px solid #ccc;
  19. line-height: 1;
  20. }
  21. [dir="rtl"] .vertical-tabs__menu {
  22. float: right;
  23. margin: 0 0 -1px -100%;
  24. }
  25. .vertical-tabs__menu-item {
  26. position: relative;
  27. }
  28. .vertical-tabs__menu-item.is-selected {
  29. z-index: 1;
  30. overflow-x: hidden;
  31. width: 100%;
  32. border-right: 1px solid #fcfcfa; /* LTR */
  33. border-bottom: 1px solid #b3b2ad;
  34. box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
  35. }
  36. .vertical-tabs__menu-item.last {
  37. border-bottom: none;
  38. }
  39. .vertical-tabs__menu-item.first a {
  40. border-top-left-radius: 4px; /* LTR */
  41. }
  42. [dir="rtl"] .vertical-tabs__menu-item.first a {
  43. border-top-left-radius: 0;
  44. border-top-right-radius: 4px;
  45. }
  46. [dir="rtl"] .vertical-tabs__menu-item.is-selected {
  47. border-right: none;
  48. border-left: 1px solid #fcfcfa;
  49. }
  50. .vertical-tabs__menu-item:focus,
  51. .vertical-tabs__menu-item:active {
  52. z-index: 2;
  53. }
  54. .vertical-tabs__menu-item a {
  55. display: block;
  56. padding: 10px 15px 15px;
  57. text-decoration: none;
  58. border-bottom: 1px solid #b3b2ad;
  59. background-color: #f2f2f0;
  60. text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  61. }
  62. .vertical-tabs__menu-item:last-child a {
  63. border-bottom: 0;
  64. }
  65. .vertical-tabs__menu-item.is-selected a,
  66. .vertical-tabs__menu-item a:hover,
  67. .vertical-tabs__menu-item a:focus {
  68. background: #fcfcfa;
  69. text-shadow: none;
  70. }
  71. .vertical-tabs__menu-item a:focus {
  72. outline: none;
  73. }
  74. .vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title {
  75. text-decoration: underline;
  76. }
  77. .vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
  78. .vertical-tabs__menu-item.is-selected a:focus .vertical-tabs__menu-item-title {
  79. text-decoration: none;
  80. }
  81. .vertical-tabs__menu-item.is-selected a {
  82. padding-left: 11px; /* LTR */
  83. text-decoration: none;
  84. color: #004f80;
  85. border-bottom: none;
  86. }
  87. [dir=rtl] .vertical-tabs__menu-item.is-selected a {
  88. padding-right: 11px;
  89. padding-left: 15px;
  90. }
  91. .vertical-tabs__menu-item.is-selected a:hover,
  92. .vertical-tabs__menu-item.is-selected a:focus {
  93. color: #007ecc;
  94. }
  95. [data-vertical-tabs-panes] {
  96. background-color: #fcfcfa;
  97. }
  98. .vertical-tabs__panes {
  99. margin: 0 0 0 240px; /* LTR */
  100. padding: 10px 15px 10px 15px;
  101. border-left: 1px solid #a6a5a1; /* LTR */
  102. border-top-right-radius: 4px; /* LTR */
  103. border-bottom-right-radius: 4px; /* LTR */
  104. }
  105. [dir="rtl"] .vertical-tabs__panes {
  106. margin: 0 240px 0 0;
  107. border-right: 1px solid #a6a5a1;
  108. border-left: none;
  109. border-radius: 4px 0 0 4px;
  110. }
  111. .vertical-tabs__panes:after {
  112. display: table;
  113. clear: both;
  114. content: "";
  115. }
  116. .vertical-tabs__pane {
  117. margin: 0;
  118. padding: 0;
  119. color: #595959;
  120. border: 0;
  121. }
  122. .vertical-tabs__menu-item-summary {
  123. display: block;
  124. padding-top: 0.4em;
  125. color: #666;
  126. }
  127. .vertical-tabs__pane > summary {
  128. display: none;
  129. }

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