You are here

horizontal-tabs.css in Field Group 8.3

Same filename and directory in other branches
  1. 8 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: 0;
  list-style: none;
  background-color: #eee;
  border-bottom: 1px solid #ccc; /* LTR */
  width: 100%;
  height: auto;
  clear: both;
}

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

.horizontal-tabs-panes .horizontal-tabs-pane {
  padding: 0 1em;
  border: 0;
  background-color: unset;
  box-shadow: unset;
}

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

/* Layout of each tab */
.horizontal-tabs  .horizontal-tab-button {
  background: #eee;
  border-right: 1px solid #ccc; /* LTR */
  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: #fff;
}

.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;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

[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.6em 1em;
  position: relative;
  top: 0;
}

.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;
}

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: 0;
  15. list-style: none;
  16. background-color: #eee;
  17. border-bottom: 1px solid #ccc; /* 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-panes .horizontal-tabs-pane {
  27. padding: 0 1em;
  28. border: 0;
  29. background-color: unset;
  30. box-shadow: unset;
  31. }
  32. .horizontal-tabs-pane > summary {
  33. display: none;
  34. }
  35. /* Layout of each tab */
  36. .horizontal-tabs .horizontal-tab-button {
  37. background: #eee;
  38. border-right: 1px solid #ccc; /* LTR */
  39. padding-top: 0;
  40. margin: 0;
  41. min-width: 5em; /* IE7 */
  42. float: left; /* LTR */
  43. }
  44. [dir="rtl"] .horizontal-tabs .horizontal-tab-button {
  45. border-right: 0;
  46. border-left: 1px solid #ccc;
  47. float: right;
  48. }
  49. .horizontal-tabs .horizontal-tab-button a {
  50. display: block;
  51. text-decoration: none;
  52. padding: 0.5em 0.6em;
  53. }
  54. .horizontal-tabs .horizontal-tab-button a:hover {
  55. outline: none;
  56. background-color: #fff;
  57. }
  58. .horizontal-tabs .horizontal-tab-button li:hover,
  59. .horizontal-tabs .horizontal-tab-button li:focus {
  60. background-color: #ddd;
  61. }
  62. .horizontal-tabs ul.horizontal-tabs-list :focus {
  63. outline: none;
  64. }
  65. .horizontal-tab-button a:focus strong,
  66. .horizontal-tab-button a:active strong,
  67. .horizontal-tab-button a:hover strong {
  68. text-decoration: none;
  69. outline: none;
  70. }
  71. .horizontal-tab-button.selected {
  72. background-color: #fff;
  73. border-bottom: 1px solid #fff;
  74. margin-bottom: -1px;
  75. }
  76. [dir="rtl"] .horizontal-tab-button.selected {
  77. border-left-width: 0;
  78. border-right-width: 1px;
  79. }
  80. .horizontal-tabs ul.horizontal-tabs-list li a,
  81. .horizontal-tabs ul.horizontal-tabs-list li.selected a {
  82. display: block;
  83. text-decoration: none;
  84. padding: 0.6em 1em;
  85. position: relative;
  86. top: 0;
  87. }
  88. .horizontal-tab-button .selected strong {
  89. color: #000;
  90. }
  91. .horizontal-tab-button .summary {
  92. display: block;
  93. }
  94. .horizontal-tab-button .summary {
  95. line-height: normal;
  96. margin-bottom: 0;
  97. }
  98. /**
  99. * tab content
  100. */
  101. div.field-group-htabs-wrapper .field-group-format-wrapper {
  102. clear: both;
  103. padding: 0 0 0.6em;
  104. }