_navs.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. //
  2. // Component: Nav
  3. //
  4. .nav-pills {
  5. .nav-link {
  6. color: $gray-600;
  7. &:not(.active):hover {
  8. color: theme-color('primary');
  9. }
  10. }
  11. .nav-item {
  12. &.dropdown.show {
  13. .nav-link:hover {
  14. color: $dropdown-link-active-color;
  15. }
  16. }
  17. }
  18. }
  19. // Vertical Tabs
  20. .nav-tabs.flex-column {
  21. border-bottom: 0;
  22. border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
  23. .nav-link {
  24. border-bottom-left-radius: $nav-tabs-border-radius;
  25. border-top-right-radius: 0;
  26. margin-right: -$nav-tabs-border-width;
  27. @include hover-focus {
  28. border-color: $gray-200 transparent $gray-200 $gray-200;
  29. }
  30. }
  31. .nav-link.active,
  32. .nav-item.show .nav-link {
  33. border-color: $gray-300 transparent $gray-300 $gray-300;
  34. }
  35. &.nav-tabs-right {
  36. border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
  37. border-right: 0;
  38. .nav-link {
  39. border-bottom-left-radius: 0;
  40. border-bottom-right-radius: $nav-tabs-border-radius;
  41. border-top-left-radius: 0;
  42. border-top-right-radius: $nav-tabs-border-radius;
  43. margin-left: -$nav-tabs-border-width;
  44. @include hover-focus {
  45. border-color: $gray-200 $gray-200 $gray-200 transparent;
  46. }
  47. }
  48. .nav-link.active,
  49. .nav-item.show .nav-link {
  50. border-color: $gray-300 $gray-300 $gray-300 transparent;
  51. }
  52. }
  53. }
  54. .navbar-no-expand {
  55. flex-direction: row;
  56. .nav-link {
  57. padding-left: $navbar-nav-link-padding-x;
  58. padding-right: $navbar-nav-link-padding-x;
  59. }
  60. }
  61. // Color variants
  62. @each $color, $value in $theme-colors {
  63. @if $color == dark or $color == light {
  64. .navbar-#{$color} {
  65. background-color: $value;
  66. }
  67. }
  68. }
  69. @each $color, $value in $theme-colors {
  70. @if $color != dark and $color != light {
  71. .navbar-#{$color} {
  72. background-color: $value;
  73. }
  74. }
  75. }
  76. @each $color, $value in $colors {
  77. .navbar-#{$color} {
  78. background-color: $value;
  79. }
  80. }