tools/side_chain_tool/web/node_modules/bootstrap/scss/_nav.scss

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