No Description
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.

_nav-pills.scss 1.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. //
  2. // Nav pills
  3. //
  4. // General styles
  5. .nav-pills {
  6. .nav-item:not(:last-child) {
  7. padding-right: $nav-pills-space-x;
  8. }
  9. .nav-link {
  10. padding: $nav-pills-padding-y $nav-pills-padding-x;
  11. color: $nav-pills-link-color;
  12. font-weight: 500;
  13. font-size: $font-size-sm;
  14. box-shadow: $nav-pills-box-shadow;
  15. background-color: $nav-pills-bg;
  16. transition: $transition-base;
  17. &:hover {
  18. color: $nav-pills-link-hover-color;
  19. }
  20. }
  21. .nav-link.active,
  22. .show > .nav-link {
  23. color: $nav-pills-link-active-color;
  24. background-color: $nav-pills-link-active-bg;
  25. }
  26. @include media-breakpoint-down(xs) {
  27. .nav-item {
  28. margin-bottom: $spacer;
  29. }
  30. }
  31. }
  32. @include media-breakpoint-down(sm) {
  33. .nav-pills:not(.nav-pills-circle) {
  34. .nav-item {
  35. padding-right: 0;
  36. }
  37. }
  38. }
  39. // Rounded circle nav pills
  40. .nav-pills-circle {
  41. .nav-link {
  42. text-align: center;
  43. height: 60px;
  44. width: 60px;
  45. padding: 0;
  46. line-height: 60px;
  47. border-radius: 50%;
  48. }
  49. .nav-link-icon {
  50. i, svg {
  51. font-size: 1rem;
  52. }
  53. }
  54. }