You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

139 lines
2.6 KiB

  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. @include font-size($nav-link-font-size);
  16. font-weight: $nav-link-font-weight;
  17. color: $nav-link-color;
  18. text-decoration: if($link-decoration == none, null, none);
  19. @include transition($nav-link-transition);
  20. &:hover,
  21. &:focus {
  22. color: $nav-link-hover-color;
  23. text-decoration: if($link-hover-decoration == underline, none, null);
  24. }
  25. // Disabled state lightens text
  26. &.disabled {
  27. color: $nav-link-disabled-color;
  28. pointer-events: none;
  29. cursor: default;
  30. }
  31. }
  32. //
  33. // Tabs
  34. //
  35. .nav-tabs {
  36. border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  37. .nav-link {
  38. margin-bottom: -$nav-tabs-border-width;
  39. background: none;
  40. border: $nav-tabs-border-width solid transparent;
  41. @include border-top-radius($nav-tabs-border-radius);
  42. &:hover,
  43. &:focus {
  44. border-color: $nav-tabs-link-hover-border-color;
  45. // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
  46. isolation: isolate;
  47. }
  48. &.disabled {
  49. color: $nav-link-disabled-color;
  50. background-color: transparent;
  51. border-color: transparent;
  52. }
  53. }
  54. .nav-link.active,
  55. .nav-item.show .nav-link {
  56. color: $nav-tabs-link-active-color;
  57. background-color: $nav-tabs-link-active-bg;
  58. border-color: $nav-tabs-link-active-border-color;
  59. }
  60. .dropdown-menu {
  61. // Make dropdown border overlap tab border
  62. margin-top: -$nav-tabs-border-width;
  63. // Remove the top rounded corners here since there is a hard edge above the menu
  64. @include border-top-radius(0);
  65. }
  66. }
  67. //
  68. // Pills
  69. //
  70. .nav-pills {
  71. .nav-link {
  72. background: none;
  73. border: 0;
  74. @include border-radius($nav-pills-border-radius);
  75. }
  76. .nav-link.active,
  77. .show > .nav-link {
  78. color: $nav-pills-link-active-color;
  79. @include gradient-bg($nav-pills-link-active-bg);
  80. }
  81. }
  82. //
  83. // Justified variants
  84. //
  85. .nav-fill {
  86. > .nav-link,
  87. .nav-item {
  88. flex: 1 1 auto;
  89. text-align: center;
  90. }
  91. }
  92. .nav-justified {
  93. > .nav-link,
  94. .nav-item {
  95. flex-basis: 0;
  96. flex-grow: 1;
  97. text-align: center;
  98. }
  99. }
  100. .nav-fill,
  101. .nav-justified {
  102. .nav-item .nav-link {
  103. width: 100%; // Make sure button will grow
  104. }
  105. }
  106. // Tabbable tabs
  107. //
  108. // Hide tabbable panes to start, show them when `.active`
  109. .tab-content {
  110. > .tab-pane {
  111. display: none;
  112. }
  113. > .active {
  114. display: block;
  115. }
  116. }