You are here

Home » API reference » Views Bootstrap 8.3

tabs.css in Views Bootstrap 8.3

Same filename and directory in other branches
  1. 7.3 css/tabs.css
/* 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/tabs.css
View source 
  1. /* custom inclusion of right, left and below tabs, staacked tabs */

  2. 

  3. .tabs-below > .nav-tabs,

  4. .tabs-right > .nav-tabs,

  5. .tabs-left > .nav-tabs,

  6. .tabs-below > .nav-pills,

  7. .tabs-right > .nav-pills,

  8. .tabs-left > .nav-pills {

  9.   border-bottom: 0;

  10. }

  11. 

  12. .nav-tabs.nav-stacked > li > a {

  13.   border: 1px solid #ddd;

  14. }

  15. 

  16. .nav-tabs.nav-stacked {

  17.   border-bottom: 0 none;

  18. }

  19. 

  20. .nav-tabs.nav-stacked > li {

  21.   margin-bottom: -3px;

  22. }

  23. 

  24. .nav-pills {

  25.   margin-bottom: 20px;

  26. }

  27. 

  28. .tab-content > .tab-pane,

  29. .pill-content > .pill-pane {

  30.   display: none;

  31. }

  32. 

  33. .tab-content > .active,

  34. .pill-content > .active {

  35.   display: block;

  36. }

  37. 

  38. .tabs-below > .nav-tabs {

  39.   border-top: 1px solid #ddd;

  40. }

  41. 

  42. .tabs-below > .nav-tabs > li {

  43.   margin-top: -1px;

  44.   margin-bottom: 0;

  45. }

  46. 

  47. .tabs-below > .nav-tabs > li > a {

  48.   -webkit-border-radius: 0 0 4px 4px;

  49.   -moz-border-radius: 0 0 4px 4px;

  50.   border-radius: 0 0 4px 4px;

  51. }

  52. 

  53. .tabs-below > .nav-tabs > li > a:hover,

  54. .tabs-below > .nav-tabs > li > a:focus {

  55.   border-top-color: #ddd;

  56.   border-bottom-color: transparent;

  57. }

  58. 

  59. .tabs-below > .nav-tabs > .active > a,

  60. .tabs-below > .nav-tabs > .active > a:hover,

  61. .tabs-below > .nav-tabs > .active > a:focus {

  62.   border-color: transparent #ddd #ddd #ddd;

  63. }

  64. 

  65. .tabs-left > .nav-tabs > li,

  66. .tabs-right > .nav-tabs > li,

  67. .tabs-left > .nav-pills > li,

  68. .tabs-right > .nav-pills > li {

  69.   float: none;

  70. }

  71. 

  72. .tabs-left > .nav-tabs > li > a,

  73. .tabs-right > .nav-tabs > li > a,

  74. .tabs-left > .nav-pills > li > a,

  75. .tabs-right > .nav-pills > li > a {

  76.   min-width: 74px;

  77.   margin-right: 0;

  78.   margin-bottom: 3px;

  79. }

  80. 

  81. .tabs-left > .nav-tabs {

  82.   float: left;

  83.   margin-right: 19px;

  84.   border-right: 1px solid #ddd;

  85. }

  86. 

  87. .tabs-left > .nav-pills {

  88.   float: left;

  89.   margin-right: 19px;

  90. }

  91. 

  92. .tabs-left > .nav-tabs > li > a {

  93.   margin-right: -1px;

  94.   -webkit-border-radius: 4px 0 0 4px;

  95.   -moz-border-radius: 4px 0 0 4px;

  96.   border-radius: 4px 0 0 4px;

  97. }

  98. 

  99. .tabs-left > .nav-tabs > li > a:hover,

  100. .tabs-left > .nav-tabs > li > a:focus {

  101.   border-color: #eeeeee #dddddd #eeeeee #eeeeee;

  102. }

  103. 

  104. .tabs-left > .nav-tabs .active > a,

  105. .tabs-left > .nav-tabs .active > a:hover,

  106. .tabs-left > .nav-tabs .active > a:focus {

  107.   border-color: #ddd transparent #ddd #ddd;

  108.   *border-right-color: #ffffff;

  109. }

  110. 

  111. .tabs-right > .nav-tabs {

  112.   float: right;

  113.   margin-left: 19px;

  114.   border-left: 1px solid #ddd;

  115. }

  116. 

  117. .tabs-right > .nav-pills {

  118.   float: right;

  119.   margin-left: 19px;

  120. }

  121. 

  122. .tabs-right > .nav-tabs > li > a {

  123.   margin-left: -1px;

  124.   -webkit-border-radius: 0 4px 4px 0;

  125.   -moz-border-radius: 0 4px 4px 0;

  126.   border-radius: 0 4px 4px 0;

  127. }

  128. 

  129. .tabs-right > .nav-tabs > li > a:hover,

  130. .tabs-right > .nav-tabs > li > a:focus {

  131.   border-color: #eeeeee #eeeeee #eeeeee #dddddd;

  132. }

  133. 

  134. .tabs-right > .nav-tabs .active > a,

  135. .tabs-right > .nav-tabs .active > a:hover,

  136. .tabs-right > .nav-tabs .active > a:focus {

  137.   border-color: #ddd #ddd #ddd transparent;

  138.   *border-left-color: #ffffff;

  139. }

  140. 

  141. .tabs-left > .tab-content,

  142. .tabs-right > .tab-content {

  143.   overflow-x: hidden;

  144. }