You are here

bootstrap_quicktabs.css in Bootstrap Quick Tabs 8

/* custom inclusion of right, left and below tabs, staacked tabs */

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs,
.tabs-below > .nav-pills,
.tabs-right > .nav-pills,
.tabs-left > .nav-pills {
    border-bottom: 0;
}

.nav-tabs.nav-stacked > li > a {
    border: 1px solid #ddd;
}

.nav-tabs.nav-stacked {
    border-bottom: 0 none;
}

.nav-tabs.nav-stacked > li {
    margin-bottom: -3px;
}

.nav-pills {
    margin-bottom: 20px;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: none;
}

.tab-content > .active,
.pill-content > .active {
    display: block;
}

.tabs-below > .nav-tabs {
    border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
    margin-top: -1px;
    margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
    border-top-color: #ddd;
    border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
    border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li,
.tabs-left > .nav-pills > li,
.tabs-right > .nav-pills > li {
    float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a,
.tabs-left > .nav-pills > li > a,
.tabs-right > .nav-pills > li > a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
    float: left;
    margin-right: 19px;
    border-right: 1px solid #ddd;
}

.tabs-left > .nav-pills {
    float: left;
    margin-right: 19px;
}

.tabs-left > .nav-tabs > li > a {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
    border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
    float: right;
    margin-left: 19px;
    border-left: 1px solid #ddd;
}

.tabs-right > .nav-pills {
    float: right;
    margin-left: 19px;
}

.tabs-right > .nav-tabs > li > a {
    margin-left: -1px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
    border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
    border-color: #ddd #ddd #ddd transparent;
    *border-left-color: #ffffff;
}

.tabs-left > .tab-content,
.tabs-right > .tab-content {
    overflow-x: hidden;
}

File

css/bootstrap_quicktabs.css
View source
  1. /* custom inclusion of right, left and below tabs, staacked tabs */
  2. .tabs-below > .nav-tabs,
  3. .tabs-right > .nav-tabs,
  4. .tabs-left > .nav-tabs,
  5. .tabs-below > .nav-pills,
  6. .tabs-right > .nav-pills,
  7. .tabs-left > .nav-pills {
  8. border-bottom: 0;
  9. }
  10. .nav-tabs.nav-stacked > li > a {
  11. border: 1px solid #ddd;
  12. }
  13. .nav-tabs.nav-stacked {
  14. border-bottom: 0 none;
  15. }
  16. .nav-tabs.nav-stacked > li {
  17. margin-bottom: -3px;
  18. }
  19. .nav-pills {
  20. margin-bottom: 20px;
  21. }
  22. .tab-content > .tab-pane,
  23. .pill-content > .pill-pane {
  24. display: none;
  25. }
  26. .tab-content > .active,
  27. .pill-content > .active {
  28. display: block;
  29. }
  30. .tabs-below > .nav-tabs {
  31. border-top: 1px solid #ddd;
  32. }
  33. .tabs-below > .nav-tabs > li {
  34. margin-top: -1px;
  35. margin-bottom: 0;
  36. }
  37. .tabs-below > .nav-tabs > li > a {
  38. -webkit-border-radius: 0 0 4px 4px;
  39. -moz-border-radius: 0 0 4px 4px;
  40. border-radius: 0 0 4px 4px;
  41. }
  42. .tabs-below > .nav-tabs > li > a:hover,
  43. .tabs-below > .nav-tabs > li > a:focus {
  44. border-top-color: #ddd;
  45. border-bottom-color: transparent;
  46. }
  47. .tabs-below > .nav-tabs > .active > a,
  48. .tabs-below > .nav-tabs > .active > a:hover,
  49. .tabs-below > .nav-tabs > .active > a:focus {
  50. border-color: transparent #ddd #ddd #ddd;
  51. }
  52. .tabs-left > .nav-tabs > li,
  53. .tabs-right > .nav-tabs > li,
  54. .tabs-left > .nav-pills > li,
  55. .tabs-right > .nav-pills > li {
  56. float: none;
  57. }
  58. .tabs-left > .nav-tabs > li > a,
  59. .tabs-right > .nav-tabs > li > a,
  60. .tabs-left > .nav-pills > li > a,
  61. .tabs-right > .nav-pills > li > a {
  62. min-width: 74px;
  63. margin-right: 0;
  64. margin-bottom: 3px;
  65. }
  66. .tabs-left > .nav-tabs {
  67. float: left;
  68. margin-right: 19px;
  69. border-right: 1px solid #ddd;
  70. }
  71. .tabs-left > .nav-pills {
  72. float: left;
  73. margin-right: 19px;
  74. }
  75. .tabs-left > .nav-tabs > li > a {
  76. margin-right: -1px;
  77. -webkit-border-radius: 4px 0 0 4px;
  78. -moz-border-radius: 4px 0 0 4px;
  79. border-radius: 4px 0 0 4px;
  80. }
  81. .tabs-left > .nav-tabs > li > a:hover,
  82. .tabs-left > .nav-tabs > li > a:focus {
  83. border-color: #eeeeee #dddddd #eeeeee #eeeeee;
  84. }
  85. .tabs-left > .nav-tabs .active > a,
  86. .tabs-left > .nav-tabs .active > a:hover,
  87. .tabs-left > .nav-tabs .active > a:focus {
  88. border-color: #ddd transparent #ddd #ddd;
  89. *border-right-color: #ffffff;
  90. }
  91. .tabs-right > .nav-tabs {
  92. float: right;
  93. margin-left: 19px;
  94. border-left: 1px solid #ddd;
  95. }
  96. .tabs-right > .nav-pills {
  97. float: right;
  98. margin-left: 19px;
  99. }
  100. .tabs-right > .nav-tabs > li > a {
  101. margin-left: -1px;
  102. -webkit-border-radius: 0 4px 4px 0;
  103. -moz-border-radius: 0 4px 4px 0;
  104. border-radius: 0 4px 4px 0;
  105. }
  106. .tabs-right > .nav-tabs > li > a:hover,
  107. .tabs-right > .nav-tabs > li > a:focus {
  108. border-color: #eeeeee #eeeeee #eeeeee #dddddd;
  109. }
  110. .tabs-right > .nav-tabs .active > a,
  111. .tabs-right > .nav-tabs .active > a:hover,
  112. .tabs-right > .nav-tabs .active > a:focus {
  113. border-color: #ddd #ddd #ddd transparent;
  114. *border-left-color: #ffffff;
  115. }
  116. .tabs-left > .tab-content,
  117. .tabs-right > .tab-content {
  118. overflow-x: hidden;
  119. }