Layout von Websiten mit Bootstrap und Foundation
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.scss 2.1KB

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