webapp/src/app/@theme/components/header/header.component.scss

   1 @import '../../styles/themes';
   2 @import '~bootstrap/scss/mixins/breakpoints';
   3 @import '~@nebular/theme/styles/global/bootstrap/breakpoints';
   4
   5 @include nb-install-component() {
   6   display: flex;
   7   justify-content: space-between;
   8   width: 100%;
   9
  10   .left {
  11     display: flex;
  12     width: 100%;
  13     order: 0;
  14     flex-direction: row;
  15   }
  16   .right {
  17     order: 1;
  18     flex-direction: row-reverse;
  19   }
  20
  21   .logo-containter {
  22     display: flex;
  23     align-items: center;
  24   }
  25
  26   .control-item {
  27     display: block;
  28   }
  29
  30   .header-container {
  31     display: flex;
  32     align-items: center;
  33     width: 100%;
  34
  35     .navigation {
  36       padding-right: nb-theme(padding);
  37       font-size: 2.5rem;
  38       text-decoration: none;
  39
  40       i {
  41         display: block;
  42       }
  43
  44     }
  45
  46     .logo {
  47       padding: 0 nb-theme(padding);
  48       font-size: 1.75rem;
  49       font-weight: nb-theme(font-weight-bolder);
  50       border-left: 1px solid nb-theme(separator);
  51       white-space: nowrap;
  52
  53       span {
  54         font-weight: nb-theme(font-weight-normal);
  55       }
  56     }
  57   }
  58
  59   .toggle-layout /deep/ a {
  60     display: block;
  61     text-decoration: none;
  62     line-height: 1;
  63
  64     i {
  65       color: nb-theme(color-fg-highlight);
  66       font-size: 2.25rem;
  67     }
  68   }
  69
  70   @include media-breakpoint-down(md) {
  71
  72     nb-action:not(.toggle-layout) {
  73       border: none;
  74     }
  75
  76     .control-item {
  77       display: none;
  78     }
  79
  80     .toggle-layout {
  81       padding: 0;
  82     }
  83   }
  84
  85   @include media-breakpoint-down(sm) {
  86
  87     nb-user /deep/ .user-name {
  88       display: none;
  89     }
  90   }
  91
  92   @include media-breakpoint-down(is) {
  93
  94     .header-container {
  95       .logo {
  96         font-size: 1.25rem;
  97       }
  98     }
  99
 100     .toggle-layout {
 101       display: none;
 102     }
 103
 104     nb-action:not(.toggle-layout) {
 105       padding: 0;
 106     }
 107   }
 108
 109   @include media-breakpoint-down(xs) {
 110     .right /deep/ {
 111       display: none;
 112     }
 113   }
 114 }
 115