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: 11;
  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     position: relative;
  51     display: inline-block;
  52     cursor: pointer;
  53     > * {
  54       vertical-align: top;
  55     }
  56     > span {
  57       padding-left: $-xs;
  58       display: inline-block;
  59       padding-top: $-xxs;
  60     }
  61     > svg {
  62       padding-top: 4px;
  63       font-size: 18px;
  64     }
  65     @include between($l, $xl) {
  66       padding-left: $-xs;
  67       .name {
  68         display: none;
  69       }
  70     }
  71   }
  72 }
  73
  74 .header *, .primary-background * {
  75   outline-color: #FFF;
  76 }
  77
  78
  79 .header-search {
  80   display: inline-block;
  81 }
  82 header .search-box {
  83   display: inline-block;
  84   margin-top: 10px;
  85   input {
  86     background-color: rgba(0, 0, 0, 0.2);
  87     border: 1px solid rgba(255, 255, 255, 0.2);
  88     border-radius: 40px;
  89     color: #EEE;
  90     z-index: 2;
  91     padding-left: 40px;
  92     &:focus {
  93       outline: none;
  94       border: 1px solid rgba(255, 255, 255, 0.6);
  95     }
  96   }
  97   button {
  98     fill: #EEE;
  99     z-index: 1;
 100     left: 16px;
 101     svg {
 102       margin-right: 0;
 103     }
 104   }
 105   ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 106     color: #DDD;
 107   }
 108   ::-moz-placeholder { /* Firefox 19+ */
 109     color: #DDD;
 110   }
 111   @include between($l, $xl) {
 112     max-width: 200px;
 113   }
 114 }
 115
 116 .logo {
 117   display: inline-block;
 118   &:hover {
 119     color: #FFF;
 120     text-decoration: none;
 121   }
 122 }
 123 .logo-text {
 124   display: inline-block;
 125   font-size: 1.8em;
 126   color: #fff;
 127   font-weight: 400;
 128   padding: 14px $-l 14px 0;
 129   vertical-align: top;
 130   line-height: 1;
 131 }
 132 .logo-image {
 133   margin: $-xs $-s $-xs 0;
 134   vertical-align: top;
 135   height: 43px;
 136 }
 137
 138 .mobile-menu-toggle {
 139   color: #FFF;
 140   fill: #FFF;
 141   font-size: 2em;
 142   border: 2px solid rgba(255, 255, 255, 0.8);
 143   border-radius: 4px;
 144   padding: 0 $-xs;
 145   position: absolute;
 146   right: $-m;
 147   top: 13px;
 148   line-height: 1;
 149   cursor: pointer;
 150   user-select: none;
 151   svg {
 152     margin: 0;
 153     bottom: -2px;
 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   cursor: pointer;
 218   &:first-child {
 219     border-right: 1px solid #DDD;
 220   }
 221   &.active {
 222     border-bottom-color: currentColor;
 223   }
 224 }
 225
 226 .breadcrumbs {
 227   display: flex;
 228   flex-direction: row;
 229   align-items: center;
 230   justify-content: flex-start;
 231   flex-wrap: wrap;
 232   opacity: 0.7;
 233   .icon-list-item {
 234     width: auto;
 235     padding-top: $-xs;
 236     padding-bottom: $-xs;
 237   }
 238   .separator {
 239     display: inline-block;
 240     fill: #aaa;
 241     font-size: 1.6em;
 242     line-height: 0.8;
 243     margin: -2px 0 0;
 244   }
 245   &:hover, &:focus-within {
 246     opacity: 1;
 247   }
 248 }
 249
 250 @include smaller-than($l) {
 251   .breadcrumbs .icon-list-item {
 252     padding: $-xs;
 253     > span + span {
 254       display: none;
 255     }
 256     > span:first-child {
 257       margin-right: 0;
 258     }
 259   }
 260 }
 261
 262 .breadcrumb-listing {
 263   position: relative;
 264   .breadcrumb-listing-toggle {
 265     padding: 6px;
 266     border: 1px solid transparent;
 267     border-radius: 4px;
 268     &:hover {
 269       border-color: #DDD;
 270     }
 271   }
 272   .svg-icon {
 273     margin-right: 0;
 274   }
 275 }
 276
 277 .breadcrumb-listing-dropdown {
 278   box-shadow: $bs-med;
 279   overflow: hidden;
 280   min-height: 100px;
 281   width: 240px;
 282   display: none;
 283   position: absolute;
 284   z-index: 80;
 285   right: -$-m;
 286   .breadcrumb-listing-search .svg-icon {
 287     position: absolute;
 288     left: $-s;
 289     top: 11px;
 290     fill: #888;
 291     pointer-events: none;
 292   }
 293   .breadcrumb-listing-entity-list {
 294     max-height: 400px;
 295     overflow-y: scroll;
 296     text-align: left;
 297   }
 298   input {
 299     padding-left: $-xl;
 300     border-radius: 0;
 301     border: 0;
 302     border-bottom: 1px solid #DDD;
 303   }
 304 }
 305
 306 @include smaller-than($m) {
 307   .breadcrumb-listing-dropdown {
 308     position: fixed;
 309     right: auto;
 310     left: $-m;
 311   }
 312   .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
 313     max-height: 240px;
 314   }
 315 }
 316
 317 .faded {
 318   a, button, span, span > div {
 319     color: #666;
 320     fill: #666;
 321   }
 322   .text-button {
 323     opacity: 0.5;
 324     transition: all ease-in-out 120ms;
 325     &:hover {
 326       opacity: 1;
 327       text-decoration: none;
 328     }
 329   }
 330 }
 331
 332 .faded span.faded-text {
 333   display: inline-block;
 334   padding: $-s;
 335 }
 336
 337 .action-buttons .text-button {
 338   display: inline-block;
 339   padding: $-xs $-s;
 340   &:last-child {
 341     padding-right: 0;
 342   }
 343   &:first-child {
 344     padding-left: 0;
 345   }
 346 }
 347
 348
 349 .action-buttons .dropdown-container:last-child a {
 350   padding-right: 0;
 351   padding-left: $-s;
 352 }
 353 .action-buttons {
 354   text-align: right;
 355   &.text-left {
 356     text-align: left;
 357     .text-button {
 358       padding-right: $-m;
 359       padding-left: 0;
 360     }
 361   }
 362   &.text-center {
 363     text-align: center;
 364   }
 365 }
 366
 367 @include smaller-than($m) {
 368   .action-buttons .text-button {
 369     padding: $-xs $-xs;
 370   }
 371   .action-buttons .dropdown-container:last-child a {
 372     padding-left: $-xs;
 373   }
 374 }
 375
 376 .nav-tabs {
 377   text-align: center;
 378   a, .tab-item {
 379     padding: $-m;
 380     display: inline-block;
 381     color: #666;
 382     fill: #666;
 383     cursor: pointer;
 384     &.selected {
 385       border-bottom: 2px solid $primary;
 386     }
 387   }
 388 }