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 .grid {
   6   grid-template-columns: auto min-content auto;
   7 }
   8
   9 header {
  10   position: relative;
  11   display: block;
  12   z-index: 2;
  13   top: 0;
  14   background-color: $primary-dark;
  15   color: #fff;
  16   fill: #fff;
  17   border-bottom: 1px solid #DDD;
  18   box-shadow: $bs-card;
  19   padding: $-xxs 0;
  20   .links {
  21     display: inline-block;
  22     vertical-align: top;
  23   }
  24   .links a {
  25     display: inline-block;
  26     padding: $-m;
  27     color: #FFF;
  28     fill: #FFF;
  29   }
  30   .dropdown-container {
  31     padding-left: $-m;
  32     padding-right: 0;
  33   }
  34   .avatar, .user-name {
  35     display: inline-block;
  36   }
  37   .avatar {
  38     width: 30px;
  39     height: 30px;
  40   }
  41   .user-name {
  42     vertical-align: top;
  43     padding-top: $-m;
  44     position: relative;
  45     top: -3px;
  46     display: inline-block;
  47     cursor: pointer;
  48     > * {
  49       vertical-align: top;
  50     }
  51     > span {
  52       padding-left: $-xs;
  53       display: inline-block;
  54       padding-top: $-xxs;
  55     }
  56     > svg {
  57       padding-top: 4px;
  58       font-size: 18px;
  59     }
  60     @include between($l, $xl) {
  61       padding-left: $-xs;
  62       .name {
  63         display: none;
  64       }
  65     }
  66   }
  67 }
  68
  69
  70
  71 .header-search {
  72   display: inline-block;
  73 }
  74 header .search-box {
  75   display: inline-block;
  76   margin-top: 10px;
  77   input {
  78     background-color: rgba(0, 0, 0, 0.2);
  79     border: 1px solid rgba(255, 255, 255, 0.2);
  80     border-radius: 40px;
  81     color: #EEE;
  82     z-index: 2;
  83     padding-left: 40px;
  84   }
  85   button {
  86     fill: #EEE;
  87     z-index: 1;
  88     left: 16px;
  89     svg {
  90       margin-right: 0;
  91     }
  92   }
  93   ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  94     color: #DDD;
  95   }
  96   ::-moz-placeholder { /* Firefox 19+ */
  97     color: #DDD;
  98   }
  99   :-ms-input-placeholder { /* IE 10+ */
 100     color: #DDD;
 101   }
 102   :-moz-placeholder { /* Firefox 18- */
 103     color: #DDD;
 104   }
 105   @include between($l, $xl) {
 106     max-width: 200px;
 107   }
 108 }
 109
 110 .logo {
 111   display: inline-block;
 112   &:hover {
 113     color: #FFF;
 114     text-decoration: none;
 115   }
 116 }
 117 .logo-text {
 118   display: inline-block;
 119   font-size: 1.8em;
 120   color: #fff;
 121   font-weight: 400;
 122   padding: 14px $-l 14px 0;
 123   vertical-align: top;
 124   line-height: 1;
 125 }
 126 .logo-image {
 127   margin: $-xs $-s $-xs 0;
 128   vertical-align: top;
 129   height: 43px;
 130 }
 131
 132 .mobile-menu-toggle {
 133   color: #FFF;
 134   fill: #FFF;
 135   font-size: 2em;
 136   border: 2px solid rgba(255, 255, 255, 0.8);
 137   border-radius: 4px;
 138   padding: 0 $-xs;
 139   position: absolute;
 140   right: $-m;
 141   top: 8px;
 142   line-height: 1;
 143   cursor: pointer;
 144   user-select: none;
 145   svg {
 146     margin: 0;
 147   }
 148 }
 149
 150 @include smaller-than($l) {
 151   header .header-links {
 152     display: none;
 153     background-color: #FFF;
 154     z-index: 10;
 155     right: $-m;
 156     border-radius: 4px;
 157     overflow: hidden;
 158     position: absolute;
 159     box-shadow: $bs-hover;
 160     margin-top: -$-xs;
 161     &.show {
 162       display: block;
 163     }
 164   }
 165   header .links a, header .dropdown-container ul li a {
 166     text-align: left;
 167     display: block;
 168     padding: $-s $-m;
 169     color: $text-dark;
 170     fill: $text-dark;
 171     svg {
 172       margin-right: $-s;
 173     }
 174     &:hover {
 175       background-color: #EEE;
 176       color: #444;
 177       fill: #444;
 178       text-decoration: none;
 179     }
 180   }
 181   header .dropdown-container {
 182     display: block;
 183     padding-left: 0;
 184   }
 185   header .links {
 186     display: block;
 187   }
 188   header .dropdown-container ul {
 189     display: block !important;
 190     position: relative;
 191     background-color: transparent;
 192     border: 0;
 193     padding: 0;
 194     margin: 0;
 195     box-shadow: none;
 196   }
 197 }
 198
 199 .breadcrumbs {
 200   display: flex;
 201   flex-direction: row;
 202   align-items: center;
 203 }
 204
 205 .breadcrumbs .separator {
 206   fill: #aaa;
 207   font-size: 1.6em;
 208   line-height: 0.8;
 209   margin: 0 $-xs;
 210   margin-top: -2px;
 211 }
 212
 213 .faded {
 214   a, button, span, span > div {
 215     color: #666;
 216     fill: #666;
 217   }
 218   .text-button {
 219     opacity: 0.5;
 220     transition: all ease-in-out 120ms;
 221     &:hover {
 222       opacity: 1;
 223       text-decoration: none;
 224     }
 225   }
 226 }
 227
 228 .faded span.faded-text {
 229   display: inline-block;
 230   padding: $-s;
 231 }
 232
 233 .faded-small {
 234   color: #000;
 235   fill: #000;
 236   font-size: 0.9em;
 237   background-color: $primary-faded;
 238 }
 239
 240 .toolbar {
 241   position: relative;
 242   > .grid > div {
 243     opacity: 0.8;
 244     transition: opacity ease-in-out 120ms;
 245     &:hover {
 246       opacity: 1;
 247     }
 248   }
 249   .text-button {
 250     color: #666;
 251     fill: #666;
 252   }
 253 }
 254
 255 .action-buttons .text-button {
 256   display: inline-block;
 257   padding: $-xs $-s;
 258   &:last-child {
 259     padding-right: 0;
 260   }
 261   &:first-child {
 262     padding-left: 0;
 263   }
 264 }
 265
 266
 267 .action-buttons .dropdown-container:last-child a {
 268   padding-right: 0;
 269   padding-left: $-s;
 270 }
 271 .action-buttons {
 272   text-align: right;
 273   &.text-left {
 274     text-align: left;
 275     .text-button {
 276       padding-right: $-m;
 277       padding-left: 0;
 278     }
 279   }
 280   &.text-center {
 281     text-align: center;
 282   }
 283 }
 284
 285 @include smaller-than($m) {
 286   .action-buttons .text-button {
 287     padding: $-xs $-xs;
 288   }
 289   .action-buttons .dropdown-container:last-child a {
 290     padding-left: $-xs;
 291   }
 292   .toolbar .col-xs-1:first-child {
 293     padding-right: 0;
 294   }
 295 }
 296
 297 .nav-tabs {
 298   text-align: center;
 299   a, .tab-item {
 300     padding: $-m;
 301     display: inline-block;
 302     color: #666;
 303     fill: #666;
 304     cursor: pointer;
 305     &.selected {
 306       border-bottom: 2px solid $primary;
 307     }
 308   }
 309 }
 310 .faded-small .nav-tabs a {
 311   padding: $-s $-m;
 312 }