vertical-tabs.css

div.vertical-tabs {
  margin: 1em 0 1em 15em; /* LTR */
  border: 1px solid #ccc;
  position: relative; /* IE6/7 */
}
.vertical-tabs ul.vertical-tabs-list {
  width: 15em;
  list-style: none;
  list-style-image: none; /* IE6 */
  border-top: 1px solid #ccc;
  padding: 0;
  position: relative; /* IE6 */
  margin: -1px 0 -1px -15em; /* LTR */
  float: left; /* LTR */
}
.vertical-tabs fieldset.vertical-tabs-pane {
  margin: 0 !important;
  padding: 0 1em;
  border: 0;
}
fieldset.vertical-tabs-pane legend {
  display: none;
}
fieldset.vertical-tabs-pane fieldset legend {
  display: block;
}

/* Layout of each tab */
.vertical-tabs ul.vertical-tabs-list li {
  background: #eee;
  border: 1px solid #ccc;
  border-top: 0;
  padding: 0;
  margin: 0;
  min-width: 0; /* IE7 */
}
.vertical-tabs ul.vertical-tabs-list li a {
  display: block;
  text-decoration: none;
  padding: 0.5em 0.6em;
}
.vertical-tabs ul.vertical-tabs-list li a:focus strong,
.vertical-tabs ul.vertical-tabs-list li a:active strong,
.vertical-tabs ul.vertical-tabs-list li a:hover strong {
  text-decoration: underline;
}
.vertical-tabs ul.vertical-tabs-list li a:hover {
  outline: 1px dotted;
}
.vertical-tabs ul.vertical-tabs-list li.selected {
  background-color: #fff;
  border-right-width: 0; /* LTR */
}
.vertical-tabs ul.vertical-tabs-list .selected strong {
  color: #000;
}
.vertical-tabs ul.vertical-tabs-list .summary {
  display: block;
}
.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary {
  line-height: normal;
  margin-bottom: 0;
}

/**
 * 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

View on git.drupalcode.org

misc/vertical-tabs.css

View source 
  1. 

  2. div.vertical-tabs {

  3.   margin: 1em 0 1em 15em; /* LTR */

  4.   border: 1px solid #ccc;

  5.   position: relative; /* IE6/7 */

  6. }

  7. .vertical-tabs ul.vertical-tabs-list {

  8.   width: 15em;

  9.   list-style: none;

  10.   list-style-image: none; /* IE6 */

  11.   border-top: 1px solid #ccc;

  12.   padding: 0;

  13.   position: relative; /* IE6 */

  14.   margin: -1px 0 -1px -15em; /* LTR */

  15.   float: left; /* LTR */

  16. }

  17. .vertical-tabs fieldset.vertical-tabs-pane {

  18.   margin: 0 !important;

  19.   padding: 0 1em;

  20.   border: 0;

  21. }

  22. fieldset.vertical-tabs-pane legend {

  23.   display: none;

  24. }

  25. fieldset.vertical-tabs-pane fieldset legend {

  26.   display: block;

  27. }

  28. 

  29. /* Layout of each tab */

  30. .vertical-tabs ul.vertical-tabs-list li {

  31.   background: #eee;

  32.   border: 1px solid #ccc;

  33.   border-top: 0;

  34.   padding: 0;

  35.   margin: 0;

  36.   min-width: 0; /* IE7 */

  37. }

  38. .vertical-tabs ul.vertical-tabs-list li a {

  39.   display: block;

  40.   text-decoration: none;

  41.   padding: 0.5em 0.6em;

  42. }

  43. .vertical-tabs ul.vertical-tabs-list li a:focus strong,

  44. .vertical-tabs ul.vertical-tabs-list li a:active strong,

  45. .vertical-tabs ul.vertical-tabs-list li a:hover strong {

  46.   text-decoration: underline;

  47. }

  48. .vertical-tabs ul.vertical-tabs-list li a:hover {

  49.   outline: 1px dotted;

  50. }

  51. .vertical-tabs ul.vertical-tabs-list li.selected {

  52.   background-color: #fff;

  53.   border-right-width: 0; /* LTR */

  54. }

  55. .vertical-tabs ul.vertical-tabs-list .selected strong {

  56.   color: #000;

  57. }

  58. .vertical-tabs ul.vertical-tabs-list .summary {

  59.   display: block;

  60. }

  61. .vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary {

  62.   line-height: normal;

  63.   margin-bottom: 0;

  64. }

  65. 

  66. /**

  67.  * Prevent text inputs from overflowing when container is too narrow. "width" is

  68.  * applied to override hardcoded cols or size attributes and used in conjunction

  69.  * with "box-sizing" to prevent box model issues from occurring in most browsers.

  70. */

  71. .vertical-tabs .form-type-textfield input {

  72.   width: 100%;

  73.   -moz-box-sizing: border-box;

  74.   -webkit-box-sizing: border-box;

  75.   box-sizing: border-box;

  76. }

  77. * html .vertical-tabs .form-type-textfield,

  78. * html .vertical-tabs .form-textarea-wrapper {

  79.   width: 95%; /* IE6 */

  80. }

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