BookStack Code Mirror - bookstack/blob - resources/assets/sass/_header.scss

   1 /**
   2  * Includes the main navigation header and the faded toolbar.
   3  */
   4
   5 header {
   6   display: block;
   7   z-index: 2;
   8   top: 0;
   9   background-color: $primary-dark;
  10   color: #fff;
  11   .padded {
  12     padding: $-m;
  13   }
  14   border-bottom: 1px solid #DDD;
  15   //margin-bottom: $-l;
  16   .links {
  17     display: inline-block;
  18     vertical-align: top;
  19     margin-right: $-xl;
  20     @include smaller-than($screen-md) {
  21       margin-right: $-m;
  22     }
  23   }
  24   .links a {
  25     display: inline-block;
  26     padding: $-l;
  27     color: #FFF;
  28     &:last-child {
  29       padding-right: 0;
  30     }
  31     @include smaller-than($screen-md) {
  32       padding: $-l $-s;
  33     }
  34   }
  35   .avatar, .user-name {
  36     display: inline-block;
  37   }
  38   .avatar {
  39     //margin-top: (45px/2);
  40     width: 30px;
  41     height: 30px;
  42   }
  43   .user-name {
  44     vertical-align: top;
  45     padding-top: $-l;
  46     display: inline-block;
  47     cursor: pointer;
  48     > * {
  49       vertical-align: top;
  50     }
  51     > span, > i {
  52       padding-left: $-xs;
  53       display: inline-block;
  54     }
  55     > span {
  56       padding-top: $-xxs;
  57     }
  58     > i {
  59       padding-top: $-xs*1.2;
  60     }
  61     @include smaller-than($screen-md) {
  62       padding-left: $-xs;
  63       .name {
  64         display: none;
  65       }
  66       i {
  67         font-size: 2em;
  68         padding-left: 0;
  69         padding-top: 0;
  70       }
  71     }
  72   }
  73   @include smaller-than($screen-md) {
  74     text-align: center;
  75     .float.right {
  76       float: none;
  77     }
  78   }
  79   @include smaller-than($screen-sm) {
  80     .links a {
  81       padding: $-s;
  82     }
  83     form.search-box {
  84       margin-top: 0;
  85     }
  86     .user-name {
  87       padding-top: $-s;
  88     }
  89   }
  90   .dropdown-container {
  91     font-size: 0.9em;
  92   }
  93 }
  94
  95 form.search-box {
  96   margin-top: $-l *0.9;
  97   display: inline-block;
  98   position: relative;
  99   text-align: left;
 100   input {
 101     background-color: transparent;
 102     border-radius: 24px;
 103     border: 2px solid #EEE;
 104     color: #EEE;
 105     padding-left: $-m;
 106     padding-right: $-l;
 107     outline: 0;
 108   }
 109   button {
 110     vertical-align: top;
 111     margin-left: -$-l;
 112     color: #FFF;
 113     top: 6px;
 114     right: 4px;
 115     display: inline-block;
 116     position: absolute;
 117     &:hover {
 118       color: #FFF;
 119     }
 120   }
 121 }
 122
 123 .logo {
 124   display: inline-block;
 125   &:hover {
 126     color: #FFF;
 127     text-decoration: none;
 128   }
 129 }
 130 .logo-text {
 131   display: inline-block;
 132   font-size: 1.8em;
 133   color: #fff;
 134   font-weight: 400;
 135   padding: $-l $-l $-l 0;
 136   vertical-align: top;
 137   line-height: 1;
 138 }
 139 .logo-image {
 140   margin: $-m $-s $-m 0;
 141   vertical-align: top;
 142   height: 43px;
 143 }
 144
 145 .breadcrumbs span.sep {
 146   color: #aaa;
 147   padding: 0 $-xs;
 148 }
 149
 150 .faded {
 151   a, button, span, span > div {
 152     color: #666;
 153   }
 154   .text-button {
 155     opacity: 0.5;
 156     transition: all ease-in-out 120ms;
 157     &:hover {
 158       opacity: 1;
 159       text-decoration: none;
 160     }
 161   }
 162 }
 163
 164 .faded span.faded-text {
 165   display: inline-block;
 166   padding: $-s;
 167   opacity: 0.5;
 168 }
 169
 170 .faded-small {
 171   color: #000;
 172   font-size: 0.9em;
 173   background-color: $primary-faded;
 174 }
 175
 176 .breadcrumbs .text-button, .action-buttons .text-button {
 177   display: inline-block;
 178   padding: $-s;
 179   &:last-child {
 180     padding-right: 0;
 181   }
 182 }
 183 .action-buttons {
 184   text-align: right;
 185   &.text-left {
 186     text-align: left;
 187     .text-button {
 188       padding-right: $-m;
 189       padding-left: 0;
 190     }
 191   }
 192   &.text-center {
 193     text-align: center;
 194   }
 195 }
 196
 197 .setting-nav {
 198   text-align: center;
 199   a {
 200     padding: $-m;
 201     display: inline-block;
 202     color: #666;
 203     &.selected {
 204       border-bottom: 2px solid $primary;
 205     }
 206   }
 207 }