_nav.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. // Base class
  2. //
  3. // Kickstart any navigation component with a set of style resets. Works with
  4. // `<nav>`s or `<ul>`s.
  5. .nav {
  6. padding-left: 0;
  7. margin-bottom: 0;
  8. list-style: none;
  9. }
  10. .nav-link {
  11. display: inline-block;
  12. @include hover-focus {
  13. text-decoration: none;
  14. }
  15. // Disabled state lightens text and removes hover/tab effects
  16. &.disabled {
  17. color: $nav-disabled-link-color;
  18. @include plain-hover-focus {
  19. color: $nav-disabled-link-hover-color;
  20. cursor: $cursor-disabled;
  21. background-color: $nav-disabled-link-hover-bg;
  22. }
  23. }
  24. }
  25. // Nav inline
  26. .nav-inline {
  27. .nav-item {
  28. display: inline-block;
  29. }
  30. .nav-item + .nav-item,
  31. .nav-link + .nav-link {
  32. margin-left: $nav-item-inline-spacer;
  33. }
  34. }
  35. //
  36. // Tabs
  37. //
  38. .nav-tabs {
  39. border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  40. @include clearfix();
  41. .nav-item {
  42. float: left;
  43. // Make the list-items overlay the bottom border
  44. margin-bottom: -$nav-tabs-border-width;
  45. + .nav-item {
  46. margin-left: $nav-item-margin;
  47. }
  48. }
  49. .nav-link {
  50. display: block;
  51. padding: $nav-link-padding;
  52. border: $nav-tabs-border-width solid transparent;
  53. @include border-top-radius($nav-tabs-border-radius);
  54. @include hover-focus {
  55. border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
  56. }
  57. &.disabled {
  58. @include plain-hover-focus {
  59. color: $nav-disabled-link-color;
  60. background-color: transparent;
  61. border-color: transparent;
  62. }
  63. }
  64. }
  65. .nav-link.active,
  66. .nav-item.open .nav-link {
  67. @include plain-hover-focus {
  68. color: $nav-tabs-active-link-hover-color;
  69. background-color: $nav-tabs-active-link-hover-bg;
  70. border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
  71. }
  72. }
  73. .dropdown-menu {
  74. // Make dropdown border overlap tab border
  75. margin-top: -$nav-tabs-border-width;
  76. // Remove the top rounded corners here since there is a hard edge above the menu
  77. @include border-top-radius(0);
  78. }
  79. }
  80. //
  81. // Pills
  82. //
  83. .nav-pills {
  84. @include clearfix();
  85. .nav-item {
  86. float: left;
  87. + .nav-item {
  88. margin-left: $nav-item-margin;
  89. }
  90. }
  91. .nav-link {
  92. display: block;
  93. padding: $nav-link-padding;
  94. @include border-radius($nav-pills-border-radius);
  95. }
  96. .nav-link.active,
  97. .nav-item.open .nav-link {
  98. @include plain-hover-focus {
  99. color: $nav-pills-active-link-color;
  100. cursor: default;
  101. background-color: $nav-pills-active-link-bg;
  102. }
  103. }
  104. }
  105. .nav-stacked {
  106. .nav-item {
  107. display: block;
  108. float: none;
  109. + .nav-item {
  110. margin-top: $nav-item-margin;
  111. margin-left: 0;
  112. }
  113. }
  114. }
  115. //
  116. // Tabbable tabs
  117. //
  118. // Hide tabbable panes to start, show them when `.active`
  119. .tab-content {
  120. > .tab-pane {
  121. display: none;
  122. }
  123. > .active {
  124. display: block;
  125. }
  126. }