resources/tools/dash/app/pal/static/sass/bootstrap/_nav.scss

   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
   6 .nav {
   7   // scss-docs-start nav-css-vars
   8   --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
   9   --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  10   @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  11   --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  12   --#{$prefix}nav-link-color: #{$nav-link-color};
  13   --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  14   --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
  15   // scss-docs-end nav-css-vars
  16
  17   display: flex;
  18   flex-wrap: wrap;
  19   padding-left: 0;
  20   margin-bottom: 0;
  21   list-style: none;
  22 }
  23
  24 .nav-link {
  25   display: block;
  26   padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
  27   @include font-size(var(--#{$prefix}nav-link-font-size));
  28   font-weight: var(--#{$prefix}nav-link-font-weight);
  29   color: var(--#{$prefix}nav-link-color);
  30   text-decoration: if($link-decoration == none, null, none);
  31   @include transition($nav-link-transition);
  32
  33   &:hover,
  34   &:focus {
  35     color: var(--#{$prefix}nav-link-hover-color);
  36     text-decoration: if($link-hover-decoration == underline, none, null);
  37   }
  38
  39   // Disabled state lightens text
  40   &.disabled {
  41     color: var(--#{$prefix}nav-link-disabled-color);
  42     pointer-events: none;
  43     cursor: default;
  44   }
  45 }
  46
  47 //
  48 // Tabs
  49 //
  50
  51 .nav-tabs {
  52   // scss-docs-start nav-tabs-css-vars
  53   --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  54   --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  55   --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  56   --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  57   --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  58   --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  59   --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
  60   // scss-docs-end nav-tabs-css-vars
  61
  62   border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
  63
  64   .nav-link {
  65     margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
  66     background: none;
  67     border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
  68     @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
  69
  70     &:hover,
  71     &:focus {
  72       // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
  73       isolation: isolate;
  74       border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
  75     }
  76
  77     &.disabled,
  78     &:disabled {
  79       color: var(--#{$prefix}nav-link-disabled-color);
  80       background-color: transparent;
  81       border-color: transparent;
  82     }
  83   }
  84
  85   .nav-link.active,
  86   .nav-item.show .nav-link {
  87     color: var(--#{$prefix}nav-tabs-link-active-color);
  88     background-color: var(--#{$prefix}nav-tabs-link-active-bg);
  89     border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
  90   }
  91
  92   .dropdown-menu {
  93     // Make dropdown border overlap tab border
  94     margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
  95     // Remove the top rounded corners here since there is a hard edge above the menu
  96     @include border-top-radius(0);
  97   }
  98 }
  99
 100
 101 //
 102 // Pills
 103 //
 104
 105 .nav-pills {
 106   // scss-docs-start nav-pills-css-vars
 107   --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
 108   --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
 109   --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
 110   // scss-docs-end nav-pills-css-vars
 111
 112   .nav-link {
 113     background: none;
 114     border: 0;
 115     @include border-radius(var(--#{$prefix}nav-pills-border-radius));
 116
 117     &:disabled {
 118       color: var(--#{$prefix}nav-link-disabled-color);
 119       background-color: transparent;
 120       border-color: transparent;
 121     }
 122   }
 123
 124   .nav-link.active,
 125   .show > .nav-link {
 126     color: var(--#{$prefix}nav-pills-link-active-color);
 127     @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
 128   }
 129 }
 130
 131
 132 //
 133 // Justified variants
 134 //
 135
 136 .nav-fill {
 137   > .nav-link,
 138   .nav-item {
 139     flex: 1 1 auto;
 140     text-align: center;
 141   }
 142 }
 143
 144 .nav-justified {
 145   > .nav-link,
 146   .nav-item {
 147     flex-basis: 0;
 148     flex-grow: 1;
 149     text-align: center;
 150   }
 151 }
 152
 153 .nav-fill,
 154 .nav-justified {
 155   .nav-item .nav-link {
 156     width: 100%; // Make sure button will grow
 157   }
 158 }
 159
 160
 161 // Tabbable tabs
 162 //
 163 // Hide tabbable panes to start, show them when `.active`
 164
 165 .tab-content {
 166   > .tab-pane {
 167     display: none;
 168   }
 169   > .active {
 170     display: block;
 171   }
 172 }