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.

197 lines
5.1 KiB

8 months ago
  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. // scss-docs-start nav-css-vars
  7. --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  8. --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  9. @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  10. --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  11. --#{$prefix}nav-link-color: #{$nav-link-color};
  12. --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  13. --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
  14. // scss-docs-end nav-css-vars
  15. display: flex;
  16. flex-wrap: wrap;
  17. padding-left: 0;
  18. margin-bottom: 0;
  19. list-style: none;
  20. }
  21. .nav-link {
  22. display: block;
  23. padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
  24. @include font-size(var(--#{$prefix}nav-link-font-size));
  25. font-weight: var(--#{$prefix}nav-link-font-weight);
  26. color: var(--#{$prefix}nav-link-color);
  27. text-decoration: if($link-decoration == none, null, none);
  28. background: none;
  29. border: 0;
  30. @include transition($nav-link-transition);
  31. &:hover,
  32. &:focus {
  33. color: var(--#{$prefix}nav-link-hover-color);
  34. text-decoration: if($link-hover-decoration == underline, none, null);
  35. }
  36. &:focus-visible {
  37. outline: 0;
  38. box-shadow: $nav-link-focus-box-shadow;
  39. }
  40. // Disabled state lightens text
  41. &.disabled,
  42. &:disabled {
  43. color: var(--#{$prefix}nav-link-disabled-color);
  44. pointer-events: none;
  45. cursor: default;
  46. }
  47. }
  48. //
  49. // Tabs
  50. //
  51. .nav-tabs {
  52. // scss-docs-start nav-tabs-css-vars
  53. --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  54. --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  55. --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  56. --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  57. --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  58. --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  59. --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
  60. // scss-docs-end nav-tabs-css-vars
  61. border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
  62. .nav-link {
  63. margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
  64. border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
  65. @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
  66. &:hover,
  67. &:focus {
  68. // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
  69. isolation: isolate;
  70. border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
  71. }
  72. }
  73. .nav-link.active,
  74. .nav-item.show .nav-link {
  75. color: var(--#{$prefix}nav-tabs-link-active-color);
  76. background-color: var(--#{$prefix}nav-tabs-link-active-bg);
  77. border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
  78. }
  79. .dropdown-menu {
  80. // Make dropdown border overlap tab border
  81. margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
  82. // Remove the top rounded corners here since there is a hard edge above the menu
  83. @include border-top-radius(0);
  84. }
  85. }
  86. //
  87. // Pills
  88. //
  89. .nav-pills {
  90. // scss-docs-start nav-pills-css-vars
  91. --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  92. --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  93. --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
  94. // scss-docs-end nav-pills-css-vars
  95. .nav-link {
  96. @include border-radius(var(--#{$prefix}nav-pills-border-radius));
  97. }
  98. .nav-link.active,
  99. .show > .nav-link {
  100. color: var(--#{$prefix}nav-pills-link-active-color);
  101. @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
  102. }
  103. }
  104. //
  105. // Underline
  106. //
  107. .nav-underline {
  108. // scss-docs-start nav-underline-css-vars
  109. --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
  110. --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
  111. --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
  112. // scss-docs-end nav-underline-css-vars
  113. gap: var(--#{$prefix}nav-underline-gap);
  114. .nav-link {
  115. padding-right: 0;
  116. padding-left: 0;
  117. border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
  118. &:hover,
  119. &:focus {
  120. border-bottom-color: currentcolor;
  121. }
  122. }
  123. .nav-link.active,
  124. .show > .nav-link {
  125. font-weight: $font-weight-bold;
  126. color: var(--#{$prefix}nav-underline-link-active-color);
  127. border-bottom-color: currentcolor;
  128. }
  129. }
  130. //
  131. // Justified variants
  132. //
  133. .nav-fill {
  134. > .nav-link,
  135. .nav-item {
  136. flex: 1 1 auto;
  137. text-align: center;
  138. }
  139. }
  140. .nav-justified {
  141. > .nav-link,
  142. .nav-item {
  143. flex-basis: 0;
  144. flex-grow: 1;
  145. text-align: center;
  146. }
  147. }
  148. .nav-fill,
  149. .nav-justified {
  150. .nav-item .nav-link {
  151. width: 100%; // Make sure button will grow
  152. }
  153. }
  154. // Tabbable tabs
  155. //
  156. // Hide tabbable panes to start, show them when `.active`
  157. .tab-content {
  158. > .tab-pane {
  159. display: none;
  160. }
  161. > .active {
  162. display: block;
  163. }
  164. }