[Summary view] [Print] [Text view]

   1  // Header
   2  .header {
   3    z-index: $zindex-header;
   4    color: $white;
   5    background: var(--template-bg-dark);
   6  
   7    &-inside {
   8      display: flex;
   9      min-height: 54px;
  10    }
  11  
  12    a {
  13      color: $white;
  14  
  15      &:before {
  16        display: none;
  17      }
  18    }
  19  
  20    .logo {
  21      display: flex;
  22      flex-flow: row nowrap;
  23      align-items: center;
  24      width: $sidebar-width;
  25      height: 100%;
  26      padding: 12px 5px;
  27      overflow: hidden;
  28      background-color: var(--template-bg-dark-70);
  29      transition: all .3s ease-in-out;
  30  
  31      &.small {
  32        justify-content: center;
  33        width: $sidebar-width-closed;
  34        transition: all .3s ease-in-out;
  35  
  36        svg,
  37        img {
  38  
  39          &:not(.logo-collapsed) {
  40            display: none;
  41          }
  42  
  43          &.logo-collapsed {
  44            display: inline-block;
  45            width: 20px;
  46            height: 20px;
  47            object-fit: contain;
  48            object-position: center center;
  49          }
  50        }
  51      }
  52  
  53      svg,
  54      img {
  55        width: 150px;
  56        height: 30px;
  57        margin: 0 .35rem;
  58        object-fit: contain;
  59        object-position: left center;
  60  
  61        [dir=rtl] & {
  62          object-position: right center;
  63        }
  64  
  65        &.logo-collapsed {
  66          display: none;
  67        }
  68      }
  69    }
  70  
  71    .page-title {
  72      padding: 0 1rem;
  73      margin: 0;
  74      overflow: hidden;
  75      font-size: 1.2rem;
  76      color: $white;
  77      text-overflow: ellipsis;
  78      white-space: nowrap;
  79  
  80      > span {
  81        margin-inline-end: .25rem;
  82      }
  83    }
  84  
  85    .dropdown-menu {
  86      font-size: .85rem;
  87    }
  88  
  89    .dropdown-header,
  90    .dropdown-item {
  91      padding: .82rem .75rem;
  92      color: $white;
  93      background-color: var(--template-bg-dark-70);
  94  
  95      > span {
  96        margin-inline-end: .5rem;
  97      }
  98  
  99      &:hover {
 100        background-color: var(--template-bg-dark);
 101      }
 102    }
 103  
 104    .dropdown-header {
 105      padding: .75rem;
 106      font-size: inherit;
 107      background-color: var(--template-bg-dark);
 108    }
 109  }
 110  
 111  .header-items {
 112    align-items: center;
 113    justify-content: flex-end;
 114    width: 50%;
 115    margin: 15px;
 116    margin-inline-start: auto;
 117  
 118    .dropdown-toggle {
 119      background-color: transparent;
 120      border: 0;
 121  
 122      &::after {
 123        display: none;
 124      }
 125    }
 126  }
 127  
 128  .header-item {
 129    position: relative;
 130    margin: 0 4px;
 131  }
 132  
 133  .header-item-content {
 134    display: flex;
 135    align-items: center;
 136    line-height: 1rem;
 137    color: $white;
 138    background-color: var(--template-bg-dark-60);
 139    border-radius: 22px;
 140    padding-inline-end: 4px;
 141  
 142    a,
 143    button {
 144      color: $white;
 145      text-decoration: none;
 146    }
 147  
 148    a {
 149      display: flex;
 150    }
 151  
 152    &:not(.no-link):not(.joomlaversion):hover {
 153      background-color: var(--template-bg-dark-50);
 154    }
 155  
 156    &.joomlaversion {
 157      color: var(--bluegray);
 158      background-color: transparent;
 159  
 160      .header-item-text {
 161        padding-inline-end: 12px;
 162      }
 163    }
 164  }
 165  
 166  .header-item-icon {
 167    > * {
 168      display: flex;
 169      align-items: center;
 170      justify-content: center;
 171      width: 28px;
 172      min-width: 28px;
 173      height: 28px;
 174      margin: 4px;
 175      color: $white;
 176      background-color: var(--template-bg-dark);
 177      border-radius: 16px;
 178    }
 179  
 180    span {
 181      margin: 4px;
 182    }
 183  }
 184  
 185  .header-item-count {
 186    margin-inline-end: .5rem;;
 187  }
 188  
 189  .header-item-text {
 190    padding: 0 8px 0 4px;
 191    font-size: .75rem;
 192    white-space: nowrap;
 193  }
 194  
 195  .header-more-btn {
 196    margin: 0 5px;
 197    font-size: 1.7rem;
 198  }
 199  
 200  .header-dd-items {
 201    .header-item-content {
 202      background: transparent;
 203    }
 204  
 205    .header-item-text {
 206      font-size: .75rem;
 207    }
 208  
 209    .dropdown-item {
 210      padding: .5rem .75rem;
 211    }
 212  }
 213  
 214  .header-dd-item {
 215    padding: 3px 6px;
 216  }
 217  
 218  @include media-breakpoint-down(md) {
 219    .header-items {
 220      position: fixed;
 221      bottom: 0;
 222      flex-direction: row-reverse;
 223      width: 100%;
 224      padding: 10px 0;
 225      margin: 0;
 226      background: var(--template-bg-dark);
 227  
 228      .#{$jicon-css-prefix}-angle-down,
 229      .#{$fa-css-prefix}-angle-down {
 230        transform: rotate(180deg);
 231      }
 232    }
 233  }