You are here

horizontal-tabs.css in Field Group 8

Same filename and directory in other branches
  1. 8.3 formatters/tabs/horizontal-tabs.css
.horizontal-tabs {
  margin: 0 0 1em 0; /* LTR */
  padding: 0;
  border: 1px solid #ccc;
  position: relative; /* IE6/7 */
}

[dir="rtl"] .horizontal-tabs {
    margin: 0 0 1em 0;
}

.horizontal-tabs .horizontal-tabs-list {
  display: inline-block;
  margin: 0;
  border: 0;
  padding: 0px;
  list-style: none;
  background-color: #dedede;
  border-right: 1px solid #dedede; /* LTR */
  width: 100%;
  height: auto;
  clear: both;
}

[dir="rtl"] .horizontal-tabs .horizontal-tabs-list {
  border-right: 0;
  border-left: 1px solid #dedede;
}

.horizontal-tabs-pane {
  padding: 0 1em;
  border: 0;
}

.horizontal-tabs-pane > summary {
  display: none;
}

/* Layout of each tab */
.horizontal-tabs  .horizontal-tab-button {
  background: #eee;
  border-right: 1px solid #ccc; /* LTR */
  padding: 1px;
  padding-top: 0;
  margin: 0;
  min-width: 5em; /* IE7 */
  float: left; /* LTR */
}

[dir="rtl"] .horizontal-tabs .horizontal-tab-button {
  border-right: 0;
  border-left: 1px solid #ccc;
  float: right;
}

.horizontal-tabs .horizontal-tab-button a {
  display: block;
  text-decoration: none;
  padding: 0.5em 0.6em;
}

.horizontal-tabs .horizontal-tab-button a:hover {
  outline: none;
  background-color: #ededdd;
}

.horizontal-tabs .horizontal-tab-button li:hover,
.horizontal-tabs .horizontal-tab-button li:focus {
  background-color: #ddd;
}

.horizontal-tabs ul.horizontal-tabs-list :focus {
  outline: none;
}

.horizontal-tab-button a:focus strong,
.horizontal-tab-button a:active strong,
.horizontal-tab-button a:hover strong {
  text-decoration: none;
  outline: none;
}

.horizontal-tab-button.selected {
  background-color: #fff;
  padding: 0 0 1px 0;
}

[dir="rtl"] .horizontal-tab-button.selected {
  border-left-width: 0;
  border-right-width: 1px;
}

.horizontal-tabs ul.horizontal-tabs-list li a,
.horizontal-tabs ul.horizontal-tabs-list li.selected a {
  display: block;
  text-decoration: none;
  padding: 0.5em 0.6em 0.3em 0.6em;
  position:relative;
  top: 0px;
}

.horizontal-tab-button .selected strong {
  color: #000;
}

.horizontal-tab-button .summary {
  display: block;
}

.horizontal-tab-button .summary {
  line-height: normal;
  margin-bottom: 0;
}

/**
 * tab content
 */
div.field-group-htabs-wrapper .field-group-format-wrapper {
  clear: both;
  padding: 0 0 0.6em;
}

/*hide*/
.horizontal-tabs .horizontal-tab-hidden {
  display: block;
  position: absolute;
  top: -100000px;
  width: 100%;
}

File

formatters/tabs/horizontal-tabs.css
View source
  1. .horizontal-tabs {
  2. margin: 0 0 1em 0; /* LTR */
  3. padding: 0;
  4. border: 1px solid #ccc;
  5. position: relative; /* IE6/7 */
  6. }
  7. [dir="rtl"] .horizontal-tabs {
  8. margin: 0 0 1em 0;
  9. }
  10. .horizontal-tabs .horizontal-tabs-list {
  11. display: inline-block;
  12. margin: 0;
  13. border: 0;
  14. padding: 0px;
  15. list-style: none;
  16. background-color: #dedede;
  17. border-right: 1px solid #dedede; /* LTR */
  18. width: 100%;
  19. height: auto;
  20. clear: both;
  21. }
  22. [dir="rtl"] .horizontal-tabs .horizontal-tabs-list {
  23. border-right: 0;
  24. border-left: 1px solid #dedede;
  25. }
  26. .horizontal-tabs-pane {
  27. padding: 0 1em;
  28. border: 0;
  29. }
  30. .horizontal-tabs-pane > summary {
  31. display: none;
  32. }
  33. /* Layout of each tab */
  34. .horizontal-tabs .horizontal-tab-button {
  35. background: #eee;
  36. border-right: 1px solid #ccc; /* LTR */
  37. padding: 1px;
  38. padding-top: 0;
  39. margin: 0;
  40. min-width: 5em; /* IE7 */
  41. float: left; /* LTR */
  42. }
  43. [dir="rtl"] .horizontal-tabs .horizontal-tab-button {
  44. border-right: 0;
  45. border-left: 1px solid #ccc;
  46. float: right;
  47. }
  48. .horizontal-tabs .horizontal-tab-button a {
  49. display: block;
  50. text-decoration: none;
  51. padding: 0.5em 0.6em;
  52. }
  53. .horizontal-tabs .horizontal-tab-button a:hover {
  54. outline: none;
  55. background-color: #ededdd;
  56. }
  57. .horizontal-tabs .horizontal-tab-button li:hover,
  58. .horizontal-tabs .horizontal-tab-button li:focus {
  59. background-color: #ddd;
  60. }
  61. .horizontal-tabs ul.horizontal-tabs-list :focus {
  62. outline: none;
  63. }
  64. .horizontal-tab-button a:focus strong,
  65. .horizontal-tab-button a:active strong,
  66. .horizontal-tab-button a:hover strong {
  67. text-decoration: none;
  68. outline: none;
  69. }
  70. .horizontal-tab-button.selected {
  71. background-color: #fff;
  72. padding: 0 0 1px 0;
  73. }
  74. [dir="rtl"] .horizontal-tab-button.selected {
  75. border-left-width: 0;
  76. border-right-width: 1px;
  77. }
  78. .horizontal-tabs ul.horizontal-tabs-list li a,
  79. .horizontal-tabs ul.horizontal-tabs-list li.selected a {
  80. display: block;
  81. text-decoration: none;
  82. padding: 0.5em 0.6em 0.3em 0.6em;
  83. position:relative;
  84. top: 0px;
  85. }
  86. .horizontal-tab-button .selected strong {
  87. color: #000;
  88. }
  89. .horizontal-tab-button .summary {
  90. display: block;
  91. }
  92. .horizontal-tab-button .summary {
  93. line-height: normal;
  94. margin-bottom: 0;
  95. }
  96. /**
  97. * tab content
  98. */
  99. div.field-group-htabs-wrapper .field-group-format-wrapper {
  100. clear: both;
  101. padding: 0 0 0.6em;
  102. }
  103. /*hide*/
  104. .horizontal-tabs .horizontal-tab-hidden {
  105. display: block;
  106. position: absolute;
  107. top: -100000px;
  108. width: 100%;
  109. }