codekingpro/portable-devtools

1// Base class2//3// Kickstart any navigation component with a set of style resets. Works with4// `<nav>`s, `<ul>`s or `<ol>`s.5 6.nav {7  display: flex;8  flex-wrap: wrap;9  padding-left: 0;10  margin-bottom: 0;11  list-style: none;12}13 14.nav-link {15  display: block;16  padding: $nav-link-padding-y $nav-link-padding-x;17  text-decoration: if($link-decoration == none, null, none);18 19  @include hover-focus() {20    text-decoration: none;21  }22 23  // Disabled state lightens text24  &.disabled {25    color: $nav-link-disabled-color;26    pointer-events: none;27    cursor: default;28  }29}30 31//32// Tabs33//34 35.nav-tabs {36  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;37 38  .nav-link {39    margin-bottom: -$nav-tabs-border-width;40    background-color: transparent;41    border: $nav-tabs-border-width solid transparent;42    @include border-top-radius($nav-tabs-border-radius);43 44    @include hover-focus() {45      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link46      isolation: isolate;47      border-color: $nav-tabs-link-hover-border-color;48    }49 50    &.disabled {51      color: $nav-link-disabled-color;52      background-color: transparent;53      border-color: transparent;54    }55  }56 57  .nav-link.active,58  .nav-item.show .nav-link {59    color: $nav-tabs-link-active-color;60    background-color: $nav-tabs-link-active-bg;61    border-color: $nav-tabs-link-active-border-color;62  }63 64  .dropdown-menu {65    // Make dropdown border overlap tab border66    margin-top: -$nav-tabs-border-width;67    // Remove the top rounded corners here since there is a hard edge above the menu68    @include border-top-radius(0);69  }70}71 72 73//74// Pills75//76 77.nav-pills {78  .nav-link {79    background: none;80    border: 0;81    @include border-radius($nav-pills-border-radius);82  }83 84  .nav-link.active,85  .show > .nav-link {86    color: $nav-pills-link-active-color;87    background-color: $nav-pills-link-active-bg;88  }89}90 91 92//93// Justified variants94//95 96.nav-fill {97  > .nav-link,98  .nav-item {99    flex: 1 1 auto;100    text-align: center;101  }102}103 104.nav-justified {105  > .nav-link,106  .nav-item {107    flex-basis: 0;108    flex-grow: 1;109    text-align: center;110  }111}112 113 114// Tabbable tabs115//116// Hide tabbable panes to start, show them when `.active`117 118.tab-content {119  > .tab-pane {120    display: none;121  }122  > .active {123    display: block;124  }125}126