git.roojs.org Git - roojs1/blob - scss/startbootstrap-sb-admin-2/navs/_topbar.scss

   1 // Topbar
   2 .topbar {
   3   height: $topbar-base-height;
   4   #sidebarToggleTop {
   5     height: 2.5rem;
   6     width: 2.5rem;
   7     &:hover {
   8       background-color: $gray-200;
   9     }
  10     &:active {
  11       background-color: $gray-300;
  12     }
  13   }
  14   .navbar-search {
  15     width: 25rem;
  16     input {
  17       font-size: 0.85rem;
  18       height: auto;
  19     }
  20   }
  21   .topbar-divider {
  22     width: 0;
  23     border-right: 1px solid $border-color;
  24     height: calc(#{$topbar-base-height} - 2rem);
  25     margin: auto 1rem;
  26   }
  27   .nav-item {
  28     .nav-link {
  29       height: $topbar-base-height;
  30       display: flex;
  31       align-items: center;
  32       padding: 0 0.75rem;
  33       &:focus {
  34         outline: none;
  35       }
  36     }
  37     &:focus {
  38       outline: none;
  39     }
  40   }
  41   .dropdown {
  42     position: static;
  43     .dropdown-menu {
  44       width: calc(100% - #{$grid-gutter-width});
  45       right: $grid-gutter-width / 2;
  46     }
  47   }
  48   .dropdown-list {
  49     padding: 0;
  50     border: none;
  51     overflow: hidden;
  52     .dropdown-header {
  53       background-color: $primary;
  54       border: 1px solid $primary;
  55       padding-top: 0.75rem;
  56       padding-bottom: 0.75rem;
  57       color: $white;
  58     }
  59     .dropdown-item {
  60       white-space: normal;
  61       padding-top: 0.5rem;
  62       padding-bottom: 0.5rem;
  63       border-left: 1px solid $border-color;
  64       border-right: 1px solid $border-color;
  65       border-bottom: 1px solid $border-color;
  66       line-height: 1.3rem;
  67       .dropdown-list-image {
  68         position: relative;
  69         height: 2.5rem;
  70         width: 2.5rem;
  71         img {
  72           height: 2.5rem;
  73           width: 2.5rem;
  74         }
  75         .status-indicator {
  76           background-color: $gray-200;
  77           height: 0.75rem;
  78           width: 0.75rem;
  79           border-radius: 100%;
  80           position: absolute;
  81           bottom: 0;
  82           right: 0;
  83           border: .125rem solid $white;
  84         }
  85       }
  86       .text-truncate {
  87         max-width: 10rem;
  88       }
  89       &:active {
  90         background-color: $gray-200;
  91         color: $gray-900;
  92       }
  93     }
  94   }
  95   @include media-breakpoint-up(sm) {
  96     .dropdown {
  97       position: relative;
  98       .dropdown-menu {
  99         width: auto;
 100         right: 0;
 101       }
 102     }
 103     .dropdown-list {
 104       width: 20rem !important;
 105       .dropdown-item {
 106         .text-truncate {
 107           max-width: 13.375rem;
 108         }
 109       }
 110     }
 111   }
 112 }
 113
 114 .topbar.navbar-dark {
 115   .navbar-nav {
 116     .nav-item {
 117       .nav-link {
 118         color: fade-out($white, 0.2);
 119         &:hover {
 120           color: $white;
 121         }
 122         &:active {
 123           color: $white;
 124         }
 125       }
 126     }
 127   }
 128 }
 129
 130 .topbar.navbar-light {
 131   .navbar-nav {
 132     .nav-item {
 133       .nav-link {
 134         color: $gray-400;
 135         &:hover {
 136           color: $gray-500;
 137         }
 138         &:active {
 139           color: $gray-600;
 140         }
 141       }
 142     }
 143   }
 144 }