vertical-tabs.css

Same filename in this branch
  1. 7.x misc/vertical-tabs.css
Same filename in other branches
  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/seven/css/components/vertical-tabs.css
  5. 9 core/themes/claro/css/components/vertical-tabs.css
  6. 9 core/themes/stable/css/core/vertical-tabs.css
  7. 8.9.x core/misc/vertical-tabs.css
  8. 8.9.x core/themes/seven/css/components/vertical-tabs.css
  9. 8.9.x core/themes/claro/css/components/vertical-tabs.css
  10. 8.9.x core/themes/stable/css/core/vertical-tabs.css
  11. 10 core/misc/vertical-tabs.css
  12. 10 core/themes/olivero/css/components/vertical-tabs.css
  13. 10 core/themes/stable9/css/core/vertical-tabs.css
  14. 10 core/themes/claro/css/components/vertical-tabs.css
  15. 11.x core/misc/vertical-tabs.css
  16. 11.x core/themes/olivero/css/components/vertical-tabs.css
  17. 11.x core/themes/stable9/css/core/vertical-tabs.css
  18. 11.x core/themes/claro/css/components/vertical-tabs.css
/**
 * Override of misc/vertical-tabs.css.
 */
div.vertical-tabs {
  background: #fff url(images/fc.png) repeat-y 0 0; /* LTR */
  border: 1px solid #ccc;
  margin: 10px 0;
  position: relative;
}
fieldset.vertical-tabs-pane {
  border: 0;
  padding: 0;
  margin: 0;
}
div.vertical-tabs .vertical-tabs-list {
  border-bottom: 1px solid #ccc;
  float: left; /* LTR */
  font-size: 1em;
  line-height: 1;
  margin: 0 -100% -1px 0; /* LTR */
  padding: 0;
  width: 240px;
}
div.vertical-tabs ul li.vertical-tab-button {
  list-style: none;
  list-style-image: none;
  margin: 0;
}
div.vertical-tabs ul li.vertical-tab-button a {
  border-top: 1px solid #ccc;
  display: block;
  padding: 10px;
}
div.vertical-tabs ul li.first a {
  border-top: 0;
}
div.vertical-tabs ul li.vertical-tab-button strong {
  font-size: 0.923em;
}
div.vertical-tabs ul li.vertical-tab-button .summary {
  color: #666;
  display: block;
  font-size: 0.846em;
  padding-top: 0.4em;
}
div.vertical-tabs ul li.vertical-tab-button a:hover,
div.vertical-tabs ul li.vertical-tab-button a:focus {
  background: #d5d5d5;
  text-decoration: none;
  outline: 0;
}
div.vertical-tabs ul li.selected a,
div.vertical-tabs ul li.selected a:hover,
div.vertical-tabs ul li.selected a:focus,
div.vertical-tabs ul li.selected a:active {
  background: #fff;
  border-right-color: #fff; /* LTR */
  border-top: 1px solid #ccc;
}
div.vertical-tabs ul li.first.selected a,
div.vertical-tabs ul li.first.selected a:hover {
  border-top: 0;
}
div.vertical-tabs ul li.selected a:focus strong {
  text-decoration: underline;
}
div.vertical-tabs .vertical-tabs-panes {
  margin: 0 0 0 265px; /* LTR */
  padding: 10px 15px 10px 0; /* LTR */
}
fieldset.vertical-tabs-pane legend {
  display: none;
}
fieldset.vertical-tabs-pane fieldset legend {
  display: block;
}
.vertical-tabs-pane .fieldset-wrapper > div:first-child {
  padding-top: 5px;
}

/**
 * Prevent text inputs from overflowing when container is too narrow. "width" is
 * applied to override hardcoded cols or size attributes and used in conjunction
 * with "box-sizing" to prevent box model issues from occurring in most browsers.
*/
.vertical-tabs .form-type-textfield input {
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
* html .vertical-tabs .form-type-textfield,
* html .vertical-tabs .form-textarea-wrapper {
  width: 95%; /* IE6 */
}

File

themes/seven/vertical-tabs.css

View source
  1. /**
  2. * Override of misc/vertical-tabs.css.
  3. */
  4. div.vertical-tabs {
  5. background: #fff url(images/fc.png) repeat-y 0 0; /* LTR */
  6. border: 1px solid #ccc;
  7. margin: 10px 0;
  8. position: relative;
  9. }
  10. fieldset.vertical-tabs-pane {
  11. border: 0;
  12. padding: 0;
  13. margin: 0;
  14. }
  15. div.vertical-tabs .vertical-tabs-list {
  16. border-bottom: 1px solid #ccc;
  17. float: left; /* LTR */
  18. font-size: 1em;
  19. line-height: 1;
  20. margin: 0 -100% -1px 0; /* LTR */
  21. padding: 0;
  22. width: 240px;
  23. }
  24. div.vertical-tabs ul li.vertical-tab-button {
  25. list-style: none;
  26. list-style-image: none;
  27. margin: 0;
  28. }
  29. div.vertical-tabs ul li.vertical-tab-button a {
  30. border-top: 1px solid #ccc;
  31. display: block;
  32. padding: 10px;
  33. }
  34. div.vertical-tabs ul li.first a {
  35. border-top: 0;
  36. }
  37. div.vertical-tabs ul li.vertical-tab-button strong {
  38. font-size: 0.923em;
  39. }
  40. div.vertical-tabs ul li.vertical-tab-button .summary {
  41. color: #666;
  42. display: block;
  43. font-size: 0.846em;
  44. padding-top: 0.4em;
  45. }
  46. div.vertical-tabs ul li.vertical-tab-button a:hover,
  47. div.vertical-tabs ul li.vertical-tab-button a:focus {
  48. background: #d5d5d5;
  49. text-decoration: none;
  50. outline: 0;
  51. }
  52. div.vertical-tabs ul li.selected a,
  53. div.vertical-tabs ul li.selected a:hover,
  54. div.vertical-tabs ul li.selected a:focus,
  55. div.vertical-tabs ul li.selected a:active {
  56. background: #fff;
  57. border-right-color: #fff; /* LTR */
  58. border-top: 1px solid #ccc;
  59. }
  60. div.vertical-tabs ul li.first.selected a,
  61. div.vertical-tabs ul li.first.selected a:hover {
  62. border-top: 0;
  63. }
  64. div.vertical-tabs ul li.selected a:focus strong {
  65. text-decoration: underline;
  66. }
  67. div.vertical-tabs .vertical-tabs-panes {
  68. margin: 0 0 0 265px; /* LTR */
  69. padding: 10px 15px 10px 0; /* LTR */
  70. }
  71. fieldset.vertical-tabs-pane legend {
  72. display: none;
  73. }
  74. fieldset.vertical-tabs-pane fieldset legend {
  75. display: block;
  76. }
  77. .vertical-tabs-pane .fieldset-wrapper > div:first-child {
  78. padding-top: 5px;
  79. }
  80. /**
  81. * Prevent text inputs from overflowing when container is too narrow. "width" is
  82. * applied to override hardcoded cols or size attributes and used in conjunction
  83. * with "box-sizing" to prevent box model issues from occurring in most browsers.
  84. */
  85. .vertical-tabs .form-type-textfield input {
  86. width: 100%;
  87. -moz-box-sizing: border-box;
  88. -webkit-box-sizing: border-box;
  89. box-sizing: border-box;
  90. }
  91. * html .vertical-tabs .form-type-textfield,
  92. * html .vertical-tabs .form-textarea-wrapper {
  93. width: 95%; /* IE6 */
  94. }

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