static/scss/bootstrap-4.0.0-alpha.6/docs/assets/scss/_sidebar.scss

   1 //
   2 // Side navigation
   3 //
   4
   5 .bd-sidebar {
   6   @include media-breakpoint-up(md) {
   7     padding-left: 1rem;
   8   }
   9 }
  10
  11 .bd-search {
  12   position: relative;
  13   margin-bottom: 1.5rem;
  14
  15   .form-control {
  16     height: 2.45rem;
  17     padding-top: .4rem;
  18     padding-bottom: .4rem;
  19     background-color: #fafafa;
  20
  21     &:focus {
  22       background-color: #fff;
  23     }
  24   }
  25 }
  26
  27 .bd-search-results {
  28   right: 0;
  29   display: block;
  30   padding: 0;
  31   overflow: hidden;
  32   font-size: .9rem;
  33
  34   &:empty {
  35     display: none;
  36   }
  37
  38   .dropdown-item {
  39     padding-right: .75rem;
  40     padding-left: .75rem;
  41
  42     &:first-child { margin-top: .25rem; }
  43     &:last-child { margin-bottom: .25rem; }
  44   }
  45
  46   .no-results {
  47     padding: .75rem 1rem;
  48     color: #7a7a7a;
  49     text-align: center;
  50     white-space: normal; // Undo .dropdown-item defaults
  51   }
  52 }
  53
  54
  55 .bd-sidenav {
  56   display: none;
  57 }
  58
  59 .bd-toc-link {
  60   display: block;
  61   padding: .25rem .75rem;
  62   color: $gray;
  63 }
  64 .bd-toc-link:hover,
  65 .bd-toc-link:focus {
  66   color: $brand-primary;
  67   text-decoration: none;
  68 }
  69 .active > .bd-toc-link {
  70   font-weight: 500;
  71   color: $gray-dark;
  72 }
  73 .active > .bd-sidenav {
  74   display: block;
  75 }
  76
  77 .bd-toc-item.active {
  78   margin-top: 1rem;
  79   margin-bottom: 1rem;
  80 }
  81 .bd-toc-item:first-child {
  82   margin-top: 0;
  83 }
  84 .bd-toc-item:last-child {
  85   margin-bottom: 2rem;
  86 }
  87
  88 // All levels of nav
  89 .bd-sidebar .nav > li > a {
  90   display: block;
  91   padding: .25rem .75rem;
  92   font-size: 90%;
  93   color: #99979c;
  94 }
  95 .bd-sidebar .nav > li > a:hover,
  96 .bd-sidebar .nav > li > a:focus {
  97   color: $brand-primary;
  98   text-decoration: none;
  99   background-color: transparent;
 100 }
 101 .bd-sidebar .nav > .active > a,
 102 .bd-sidebar .nav > .active:hover > a,
 103 .bd-sidebar .nav > .active:focus > a {
 104   font-weight: 500;
 105   color: $gray-dark;
 106   background-color: transparent;
 107 }