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: 4px;
  60       font-size: 18px;
  61     }
  62     @include smaller-than($screen-md) {
  63       padding-left: $-xs;
  64       .name {
  65         display: none;
  66       }
  67     }
  68   }
  69   @include smaller-than($screen-md) {
  70     text-align: center;
  71     .float.right {
  72       float: none;
  73     }
  74   }
  75   @include smaller-than($screen-sm) {
  76     .links a {
  77       padding: $-s;
  78     }
  79     form.search-box {
  80       margin-top: 0;
  81     }
  82     .user-name {
  83       padding-top: $-s;
  84     }
  85   }
  86   .dropdown-container {
  87     font-size: 0.9em;
  88   }
  89 }
  90
  91 form.search-box {
  92   margin-top: $-l *0.9;
  93   display: inline-block;
  94   position: relative;
  95   text-align: left;
  96   input {
  97     background-color: transparent;
  98     border-radius: 24px;
  99     border: 2px solid #EEE;
 100     color: #EEE;
 101     padding-left: $-m;
 102     padding-right: $-l;
 103     outline: 0;
 104   }
 105   button {
 106     vertical-align: top;
 107     margin-left: -$-l;
 108     color: #FFF;
 109     top: 6px;
 110     right: 4px;
 111     display: inline-block;
 112     position: absolute;
 113     &:hover {
 114       color: #FFF;
 115     }
 116   }
 117 }
 118
 119 .logo {
 120   display: inline-block;
 121   &:hover {
 122     color: #FFF;
 123     text-decoration: none;
 124   }
 125 }
 126 .logo-text {
 127   display: inline-block;
 128   font-size: 1.8em;
 129   color: #fff;
 130   font-weight: 400;
 131   padding: $-l $-l $-l 0;
 132   vertical-align: top;
 133   line-height: 1;
 134 }
 135 .logo-image {
 136   margin: $-m $-s $-m 0;
 137   vertical-align: top;
 138   height: 43px;
 139 }
 140
 141 .breadcrumbs span.sep {
 142   color: #aaa;
 143   padding: 0 $-xs;
 144 }
 145
 146 .faded {
 147   a, button, span, span > div {
 148     color: #666;
 149   }
 150   .text-button {
 151     opacity: 0.5;
 152     transition: all ease-in-out 120ms;
 153     &:hover {
 154       opacity: 1;
 155       text-decoration: none;
 156     }
 157   }
 158 }
 159
 160 .faded span.faded-text {
 161   display: inline-block;
 162   padding: $-s;
 163 }
 164
 165 .faded-small {
 166   color: #000;
 167   font-size: 0.9em;
 168   background-color: $primary-faded;
 169 }
 170
 171 .breadcrumbs .text-button, .action-buttons .text-button {
 172   display: inline-block;
 173   padding: $-s;
 174   &:last-child {
 175     padding-right: 0;
 176   }
 177   &:first-child {
 178     padding-left: 0;
 179   }
 180 }
 181 .action-buttons .dropdown-container:last-child a {
 182   padding-right: 0;
 183   padding-left: $-s;
 184 }
 185 .action-buttons {
 186   text-align: right;
 187   &.text-left {
 188     text-align: left;
 189     .text-button {
 190       padding-right: $-m;
 191       padding-left: 0;
 192     }
 193   }
 194   &.text-center {
 195     text-align: center;
 196   }
 197 }
 198
 199 .nav-tabs {
 200   text-align: center;
 201   a, .tab-item {
 202     padding: $-m;
 203     display: inline-block;
 204     color: #666;
 205     cursor: pointer;
 206     &.selected {
 207       border-bottom: 2px solid $primary;
 208     }
 209   }
 210 }