[Summary view] [Print] [Text view]

   1  // Header
   2  
   3  .container-header {
   4    position: relative;
   5    z-index: 10;
   6    background-color: var(--cassiopeia-color-primary);
   7    background-image: $cassiopeia-header-grad;
   8    box-shadow: 0 5px 5px hsla(0, 0%, 0%, .03) inset;
   9  
  10    @include media-breakpoint-down(lg) {
  11      position: relative !important;
  12    }
  13  
  14    .grid-child {
  15      padding: $cassiopeia-grid-gutter * .5;
  16    }
  17  
  18    nav {
  19      padding: 0;
  20      margin-top: $cassiopeia-grid-gutter * .5;
  21    }
  22  
  23    .site-description {
  24      font-size: 1rem;
  25      color: $white;
  26      white-space: normal;
  27    }
  28  
  29    .navbar-brand {
  30      position: relative;
  31      display: inline-block;
  32      margin-inline-end: auto;
  33      font-size: 2rem;
  34      color: $white;
  35  
  36      a {
  37        color: $white;
  38      }
  39  
  40      &:hover,
  41      &:focus {
  42        color: scale-color($white, $lightness: -6%);
  43      }
  44    }
  45  
  46    .container-nav {
  47      flex-wrap: wrap;
  48      justify-content: space-between;
  49      padding-bottom: $cassiopeia-grid-gutter;
  50  
  51      @include media-breakpoint-down(md) {
  52        .container-search,
  53        nav {
  54          margin-top: $cassiopeia-grid-gutter;
  55        }
  56      }
  57  
  58      .container-search:only-child {
  59        margin-left: auto;
  60      }
  61    }
  62  
  63    .navbar-collapse {
  64      &.show {
  65        display: flex;
  66        flex-wrap: wrap;
  67        justify-content: space-between;
  68      }
  69    }
  70  
  71    .mod-menu {
  72      flex: 1 0 100%;
  73      padding: 0;
  74      margin: 0;
  75      color: $white;
  76      list-style: none;
  77  
  78      @include media-breakpoint-up(lg) {
  79        display: flex;
  80        flex: 1 1 0%;
  81        flex-direction: row;
  82      }
  83  
  84      > li {
  85        position: relative;
  86  
  87        @include media-breakpoint-up(lg) {
  88          + li {
  89            margin-left: 1.55em;
  90          }
  91        }
  92  
  93        > a,
  94        > span {
  95          position: relative;
  96          color: currentColor;
  97          text-decoration: none;
  98        }
  99  
 100        &::after {
 101          @include media-breakpoint-up(lg) {
 102            position: absolute;
 103            right: 50%;
 104            bottom: 0;
 105            left: 50%;
 106            display: block;
 107            height: 2px;
 108            margin: auto;
 109            content: "";
 110            background: transparent;
 111            opacity: .2;
 112            transition: all .2s ease, background-color .2s ease;
 113          }
 114        }
 115  
 116        &.active::after,
 117        &:hover::after {
 118          right: 2px;
 119          left: 0;
 120          background: $white;
 121        }
 122  
 123        @include media-breakpoint-down(lg) {
 124          &.active > a,
 125          &.active > span,
 126          > a:hover {
 127            text-decoration: underline;
 128          }
 129        }
 130      }
 131  
 132      .parent {
 133        > ul {
 134          display: none;
 135          color: $gray-900;
 136        }
 137      }
 138    }
 139  
 140    @if $metismenu==true {
 141      .metismenu > li {
 142        + li {
 143          margin-left: 0;
 144        }
 145  
 146        > a::after,
 147        > button::before {
 148  
 149          @include media-breakpoint-up(lg) {
 150            position: absolute;
 151            right: 50%;
 152            bottom: 0;
 153            left: 50%;
 154            display: block;
 155            height: 2px;
 156            margin: auto;
 157            content: "";
 158            background: transparent;
 159            opacity: .2;
 160            transition: all .2s ease, background-color .2s ease;
 161          }
 162        }
 163  
 164        > a:hover::after,
 165        > button:hover::before,
 166        &.active > a::after,
 167        &.active > button::before {
 168          right: 0;
 169          left: 0;
 170          background: $white;
 171        }
 172  
 173        > button.mm-toggler-link:hover::before,
 174        &.active > button.mm-toggler-link::before {
 175          right: 0;
 176          left: .5em;
 177  
 178          [dir="rtl"] & {
 179            right: .5em;
 180            left: 0;
 181          }
 182        }
 183      }
 184  
 185      .metismenu > li.level-1 {
 186        &.active > a,
 187        &.active > button,
 188        > a:hover,
 189        > button:hover {
 190  
 191          @include media-breakpoint-up(lg) {
 192            text-decoration: none;
 193          }
 194        }
 195  
 196        > ul {
 197          min-width: 12rem;
 198        }
 199      }
 200    }
 201  
 202    .navbar-toggler {
 203      color: $white;
 204      cursor: pointer;
 205      border: 1px solid $white;
 206  
 207      .fas {
 208        font-size: 1.5rem;
 209      }
 210    }
 211  
 212    .container-search {
 213      margin-top: $cassiopeia-grid-gutter * .5;
 214    }
 215  
 216    .mod-finder {
 217      color: $white;
 218  
 219      a {
 220        color: $white;
 221  
 222        &:hover, &:focus {
 223          color: darken($white, 10%);
 224        }
 225      }
 226  
 227      .awesomplete {
 228        color: var(--body-color);
 229  
 230        > ul {
 231          background: linear-gradient(to bottom right, $white, hsla(0,0%,100%,.9));
 232        }
 233      }
 234    }
 235  }