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