_nav.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. .nav {
  2. --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
  3. }
  4. .nav-vertical {
  5. &,
  6. .nav {
  7. flex-direction: column;
  8. flex-wrap: nowrap;
  9. }
  10. .nav {
  11. margin-left: 1.25rem;
  12. border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
  13. padding-left: .5rem;
  14. }
  15. .nav-link.active,
  16. .nav-item.show .nav-link {
  17. font-weight: var(--#{$prefix}font-weight-bold);
  18. color: var(--#{$prefix}nav-link-active-color);
  19. }
  20. &.nav-pills {
  21. margin: 0 (-$nav-link-padding-x);
  22. }
  23. }
  24. //
  25. // Nav bordered
  26. //
  27. .nav-bordered {
  28. border-bottom: $nav-bordered-border-width var(--#{$prefix}border-style) $nav-bordered-border-color;
  29. .nav-item {
  30. + .nav-item {
  31. margin-left: $nav-bordered-margin-x;
  32. }
  33. }
  34. .nav-link {
  35. padding-left: 0;
  36. padding-right: 0;
  37. margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
  38. border: 0;
  39. border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
  40. &:hover {
  41. background-color: transparent;
  42. }
  43. }
  44. .nav-link.active,
  45. .nav-item.show .nav-link {
  46. color: $nav-bordered-link-active-color;
  47. border-color: $nav-bordered-link-active-border-color;
  48. }
  49. }
  50. .nav-underline {
  51. .nav-link {
  52. border-radius: 0;
  53. }
  54. }
  55. .nav-link {
  56. display: flex;
  57. @include transition(color $transition-time, background-color $transition-time);
  58. align-items: center;
  59. &:hover,
  60. &:focus {
  61. background-color: var(--#{$prefix}nav-link-hover-bg);
  62. }
  63. }
  64. .nav-link-toggle {
  65. margin-left: auto;
  66. padding: 0 .25rem;
  67. @include transition(transform $transition-time);
  68. @include caret();
  69. &:after {
  70. margin: 0;
  71. }
  72. @at-root .nav-link[aria-expanded="true"] & {
  73. transform: rotate(180deg);
  74. }
  75. }
  76. .nav-link-icon {
  77. width: $nav-link-icon-size;
  78. height: $nav-link-icon-size;
  79. margin-right: .5rem;
  80. color: $nav-link-icon-color;
  81. svg {
  82. display: block;
  83. height: 100%;
  84. }
  85. }
  86. .nav-fill {
  87. .nav-item {
  88. .nav-link {
  89. justify-content: center;
  90. }
  91. }
  92. }