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