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