_navs.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. //
  2. // Navs
  3. // --------------------------------------------------
  4. // BASE CLASS
  5. // ----------
  6. .nav {
  7. margin: 0;
  8. list-style: none;
  9. }
  10. // Make links block level
  11. .nav > li > a {
  12. display: block;
  13. }
  14. // Redeclare pull classes because of specificity
  15. .nav > .pull-right {
  16. float: right;
  17. }
  18. // TABS AND PILLS
  19. // -------------
  20. // Common styles
  21. .nav-tabs {
  22. @include clearfix();
  23. }
  24. .nav-tabs > li {
  25. float: left;
  26. }
  27. .nav-tabs > li > a {
  28. padding-right: 12px;
  29. padding-left: 12px;
  30. margin-right: 2px;
  31. line-height: 14px; // keeps the overall height an even number
  32. }
  33. // TABS
  34. // ----
  35. // Give the tabs something to sit on
  36. .nav-tabs {
  37. border-bottom: 1px solid $divider-border-color;
  38. padding-left: 10px;
  39. margin: 0 0 10px 0;
  40. }
  41. // Make the list-items overlay the bottom border
  42. .nav-tabs > li {
  43. margin-bottom: -1px;
  44. }
  45. // Active state, and it's :hover/:focus to override normal :hover/:focus
  46. .nav-tabs > .active > a,
  47. .nav-tabs > .active > a:hover,
  48. .nav-tabs > .active > a:focus {
  49. @include border-radius(3px);
  50. border-color: $divider-border-color;
  51. border-bottom: 1px solid $panel-bg;
  52. color: $link-color;
  53. }
  54. // Show/hide tabbable areas
  55. .tab-content > .tab-pane {
  56. display: none;
  57. }
  58. .tab-content > .active {
  59. display: block;
  60. }
  61. // temp hack
  62. .modal-body {
  63. .nav-tabs {
  64. border-bottom: none;
  65. }
  66. .nav-tabs > li > a {
  67. border: none;
  68. border-radius: 0;
  69. &:hover,
  70. &:focus {
  71. border-bottom: 1px solid $blue;
  72. }
  73. }
  74. .nav-tabs > .active > a,
  75. .nav-tabs > .active > a:hover,
  76. .nav-tabs > .active > a:focus {
  77. border: none;
  78. border-bottom: 1px solid $blue;
  79. color: $link-color;
  80. }
  81. }