_nav.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. // Base class
  2. //
  3. // Kickstart any navigation component with a set of style resets. Works with
  4. // `<nav>`s or `<ul>`s.
  5. .nav {
  6. display: flex;
  7. flex-wrap: wrap;
  8. padding-left: 0;
  9. margin-bottom: 0;
  10. list-style: none;
  11. }
  12. .nav-link {
  13. display: block;
  14. padding: $nav-link-padding-y $nav-link-padding-x;
  15. @include hover-focus {
  16. text-decoration: none;
  17. }
  18. // Disabled state lightens text
  19. &.disabled {
  20. color: $nav-link-disabled-color;
  21. }
  22. }
  23. //
  24. // Tabs
  25. //
  26. .nav-tabs {
  27. border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  28. .nav-item {
  29. margin-bottom: -$nav-tabs-border-width;
  30. }
  31. .nav-link {
  32. border: $nav-tabs-border-width solid transparent;
  33. @include border-top-radius($nav-tabs-border-radius);
  34. @include hover-focus {
  35. border-color: $nav-tabs-link-hover-border-color;
  36. }
  37. &.disabled {
  38. color: $nav-link-disabled-color;
  39. background-color: transparent;
  40. border-color: transparent;
  41. }
  42. }
  43. .nav-link.active,
  44. .nav-item.show .nav-link {
  45. color: $nav-tabs-link-active-color;
  46. background-color: $nav-tabs-link-active-bg;
  47. border-color: $nav-tabs-link-active-border-color;
  48. }
  49. .dropdown-menu {
  50. // Make dropdown border overlap tab border
  51. margin-top: -$nav-tabs-border-width;
  52. // Remove the top rounded corners here since there is a hard edge above the menu
  53. @include border-top-radius(0);
  54. }
  55. }
  56. //
  57. // Pills
  58. //
  59. .nav-pills {
  60. .nav-link {
  61. @include border-radius($nav-pills-border-radius);
  62. }
  63. .nav-link.active,
  64. .show > .nav-link {
  65. color: $nav-pills-link-active-color;
  66. background-color: $nav-pills-link-active-bg;
  67. }
  68. }
  69. //
  70. // Justified variants
  71. //
  72. .nav-fill {
  73. .nav-item {
  74. flex: 1 1 auto;
  75. text-align: center;
  76. }
  77. }
  78. .nav-justified {
  79. .nav-item {
  80. flex-basis: 0;
  81. flex-grow: 1;
  82. text-align: center;
  83. }
  84. }
  85. // Tabbable tabs
  86. //
  87. // Hide tabbable panes to start, show them when `.active`
  88. .tab-content {
  89. > .tab-pane {
  90. display: none;
  91. }
  92. > .active {
  93. display: block;
  94. }
  95. }