_navs.scss 1.5 KB

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