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   }
  21   .links a {
  22     display: inline-block;
  23     padding: $-l;
  24     color: #FFF;
  25     &:last-child {
  26       padding-right: 0;
  27     }
  28   }
  29   .avatar, .user-name {
  30     display: inline-block;
  31   }
  32   .avatar {
  33     margin-top: (45px/2);
  34     width: 30px;
  35     height: 30px;
  36   }
  37   .user-name {
  38     vertical-align: top;
  39     padding-top: 25.5px;
  40     padding-left: $-m;
  41     display: inline-block;
  42     cursor: pointer;
  43     i {
  44       padding-left: $-xs;
  45     }
  46   }
  47 }
  48
  49 form.search-box {
  50   margin-top: $-l *0.9;
  51   display: inline-block;
  52   position: relative;
  53   text-align: left;
  54   input {
  55     background-color: transparent;
  56     border-radius: 0;
  57     border: none;
  58     border-bottom: 2px solid #EEE;
  59     color: #EEE;
  60     padding-right: $-l;
  61     outline: 0;
  62   }
  63   button {
  64     vertical-align: top;
  65     margin-left: -$-l;
  66     color: #FFF;
  67     top: 0;
  68     right: 0;
  69     display: inline-block;
  70     position: absolute;
  71     &:hover {
  72       color: #FFF;
  73     }
  74   }
  75 }
  76
  77 .logo {
  78   display: inline-block;
  79   font-size: 1.8em;
  80   color: #fff;
  81   font-weight: 400;
  82   padding: $-l $-l $-l 0;
  83   vertical-align: top;
  84   line-height: 1;
  85   &:hover {
  86     color: #FFF;
  87     text-decoration: none;
  88   }
  89 }
  90
  91 .dropdown-container {
  92   display: inline-block;
  93   vertical-align: top;
  94   position: relative;
  95 }
  96
  97 .dropdown-container ul {
  98   display: none;
  99   position: absolute;
 100   z-index: 999;
 101   top: 0;
 102   right: 0;
 103   margin: $-m 0;
 104   background-color: #FFFFFF;
 105   list-style: none;
 106   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 107   border-radius: 1px;
 108   border: 1px solid #EEE;
 109   min-width: 180px;
 110   padding: $-xs 0;
 111   color: #555;
 112   a {
 113     display: block;
 114     padding: $-xs $-m;
 115     color: #555;
 116     &:hover {
 117       text-decoration: none;
 118       background-color: #EEE;
 119     }
 120     i {
 121       margin-right: $-m;
 122       padding-right: 0;
 123       display: inline;
 124       width: 22px;
 125     }
 126   }
 127   li.border-bottom {
 128     border-bottom: 1px solid #DDD;
 129   }
 130 }
 131
 132 .breadcrumbs span.sep {
 133   color: #aaa;
 134   padding: 0 $-xs;
 135 }
 136
 137 .faded {
 138   a, button, span {
 139     color: #666;
 140   }
 141   .text-button {
 142     opacity: 0.5;
 143     transition: all ease-in-out 120ms;
 144     &:hover {
 145       opacity: 1;
 146       text-decoration: none;
 147     }
 148   }
 149 }
 150
 151 .faded-small {
 152   color: #000;
 153   font-size: 0.9em;
 154   background-color: rgba(21, 101, 192, 0.15);
 155 }
 156
 157 .breadcrumbs .text-button, .action-buttons .text-button {
 158   display: inline-block;
 159   padding: $-s;
 160   &:last-child {
 161     padding-right: 0;
 162   }
 163 }
 164 .action-buttons {
 165   text-align: right;
 166   &.text-left {
 167     text-align: left;
 168     .text-button {
 169       padding-right: $-m;
 170       padding-left: 0;
 171     }
 172   }
 173 }
 174
 175 .setting-nav {
 176   text-align: center;
 177   a {
 178     padding: $-m;
 179     display: inline-block;
 180     color: #666;
 181     &.selected {
 182       border-bottom: 2px solid $primary;
 183     }
 184   }
 185 }