_navs.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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. margin-right: -$nav-tabs-border-width;
  25. @include hover-focus {
  26. border-color: $gray-200 $nav-tabs-border-color $gray-200 $gray-200;
  27. }
  28. }
  29. .nav-link.active,
  30. .nav-item.show .nav-link {
  31. border-color: $gray-300 $nav-tabs-link-active-bg $gray-300 $gray-300;
  32. }
  33. &.nav-tabs-right {
  34. border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
  35. border-right: 0;
  36. .nav-link {
  37. margin-left: -$nav-tabs-border-width;
  38. @include hover-focus {
  39. border-color: $gray-200 $gray-200 $gray-200 $nav-tabs-border-color;
  40. }
  41. }
  42. .nav-link.active,
  43. .nav-item.show .nav-link {
  44. border-color: $gray-300 $gray-300 $gray-300 $nav-tabs-link-active-bg;
  45. }
  46. }
  47. }
  48. // Color variants
  49. @each $color, $value in $theme-colors {
  50. @if $color == dark or $color == light {
  51. .navbar-#{$color} {
  52. background-color: $value;
  53. }
  54. }
  55. }
  56. @each $color, $value in $theme-colors {
  57. @if $color != dark and $color != light {
  58. .navbar-#{$color} {
  59. background-color: $value;
  60. }
  61. }
  62. }
  63. @each $color, $value in $colors {
  64. .navbar-#{$color} {
  65. background-color: $value;
  66. }
  67. }