_nav.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. // Base class
  2. //
  3. // Kickstart any navigation component with a set of style resets. Works with
  4. // `<nav>`s, `<ul>`s or `<ol>`s.
  5. .nav {
  6. display: flex;
  7. flex-wrap: wrap;
  8. padding-left: 0;
  9. margin-bottom: 0;
  10. list-style: none;
  11. }
  12. .nav-link {
  13. display: block;
  14. padding: $nav-link-padding-y $nav-link-padding-x;
  15. text-decoration: if($link-decoration == none, null, none);
  16. @include hover-focus() {
  17. text-decoration: none;
  18. }
  19. // Disabled state lightens text
  20. &.disabled {
  21. color: $nav-link-disabled-color;
  22. pointer-events: none;
  23. cursor: default;
  24. }
  25. }
  26. //
  27. // Tabs
  28. //
  29. .nav-tabs {
  30. border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  31. .nav-link {
  32. margin-bottom: -$nav-tabs-border-width;
  33. background-color: transparent;
  34. border: $nav-tabs-border-width solid transparent;
  35. @include border-top-radius($nav-tabs-border-radius);
  36. @include hover-focus() {
  37. // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
  38. isolation: isolate;
  39. border-color: $nav-tabs-link-hover-border-color;
  40. }
  41. &.disabled {
  42. color: $nav-link-disabled-color;
  43. background-color: transparent;
  44. border-color: transparent;
  45. }
  46. }
  47. .nav-link.active,
  48. .nav-item.show .nav-link {
  49. color: $nav-tabs-link-active-color;
  50. background-color: $nav-tabs-link-active-bg;
  51. border-color: $nav-tabs-link-active-border-color;
  52. }
  53. .dropdown-menu {
  54. // Make dropdown border overlap tab border
  55. margin-top: -$nav-tabs-border-width;
  56. // Remove the top rounded corners here since there is a hard edge above the menu
  57. @include border-top-radius(0);
  58. }
  59. }
  60. //
  61. // Pills
  62. //
  63. .nav-pills {
  64. .nav-link {
  65. background: none;
  66. border: 0;
  67. @include border-radius($nav-pills-border-radius);
  68. }
  69. .nav-link.active,
  70. .show > .nav-link {
  71. color: $nav-pills-link-active-color;
  72. background-color: $nav-pills-link-active-bg;
  73. }
  74. }
  75. //
  76. // Justified variants
  77. //
  78. .nav-fill {
  79. > .nav-link,
  80. .nav-item {
  81. flex: 1 1 auto;
  82. text-align: center;
  83. }
  84. }
  85. .nav-justified {
  86. > .nav-link,
  87. .nav-item {
  88. flex-basis: 0;
  89. flex-grow: 1;
  90. text-align: center;
  91. }
  92. }
  93. // Tabbable tabs
  94. //
  95. // Hide tabbable panes to start, show them when `.active`
  96. .tab-content {
  97. > .tab-pane {
  98. display: none;
  99. }
  100. > .active {
  101. display: block;
  102. }
  103. }