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