navs.less 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. // Prevents weird looking tabs on big reports
  2. .nav-justified > li > a {
  3. padding-left: 4px;
  4. padding-right: 4px;
  5. margin-right: 1px;
  6. white-space: nowrap;
  7. }
  8. // Give a little padding to multi row tabs
  9. .nav-justified {
  10. padding: 10px 0 0 0;
  11. }
  12. .nav-justified {
  13. // Reset tabs to collapsed on @screen-sm-min sizes.
  14. @media (min-width: @screen-sm-min) {
  15. > li {
  16. display: block;
  17. width: 100%;
  18. float: none;
  19. > a {
  20. text-align: center;
  21. margin-bottom: 5px;
  22. }
  23. }
  24. }
  25. // Ok to show tabs on medium screens
  26. @media (min-width: @screen-md) {
  27. border: 0;
  28. border-radius: 0;
  29. > li {
  30. display: table-cell;
  31. width: 1%;
  32. > a {
  33. margin-bottom: 0;
  34. }
  35. }
  36. }
  37. }
  38. .nav-tabs-justified {
  39. > li > a {
  40. // Override margin from .nav-tabs
  41. margin-right: 1px;
  42. border-radius: @border-radius-base;
  43. }
  44. > .active > a,
  45. > .active > a:hover,
  46. > .active > a:focus {
  47. border: 1px solid @nav-tabs-justified-link-border-color;
  48. }
  49. @media (min-width: @screen-sm-min) {
  50. > li > a {
  51. border: 1px solid @nav-tabs-justified-link-border-color;
  52. border-radius: @border-radius-base;
  53. }
  54. }
  55. @media (min-width: @screen-md-min) {
  56. > li > a {
  57. border-bottom: 1px solid @nav-tabs-justified-link-border-color;
  58. border-radius: @border-radius-base @border-radius-base 0 0;
  59. }
  60. > .active > a,
  61. > .active > a:hover,
  62. > .active > a:focus {
  63. border-bottom-color: @nav-tabs-justified-active-link-border-color;
  64. }
  65. }
  66. }