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   fill: #fff;
  12   .padded {
  13     padding: $-m;
  14   }
  15   border-bottom: 1px solid #DDD;
  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: $-m $-l;
  27     color: #FFF;
  28     fill: #FFF;
  29     &:last-child {
  30       padding-right: 0;
  31     }
  32     @include smaller-than($screen-md) {
  33       padding: $-m $-s;
  34     }
  35   }
  36   .avatar, .user-name {
  37     display: inline-block;
  38   }
  39   .avatar {
  40     width: 30px;
  41     height: 30px;
  42   }
  43   .user-name {
  44     vertical-align: top;
  45     padding-top: $-m;
  46     position: relative;
  47     top: -3px;
  48     display: inline-block;
  49     cursor: pointer;
  50     > * {
  51       vertical-align: top;
  52     }
  53     > span {
  54       padding-left: $-xs;
  55       display: inline-block;
  56       padding-top: $-xxs;
  57     }
  58     > svg {
  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-sm) {
  70     text-align: center;
  71     .float.right {
  72       float: none;
  73     }
  74     .links a {
  75       padding: $-s;
  76     }
  77     .user-name {
  78       padding-top: $-s;
  79     }
  80   }
  81 }
  82
  83 .header-search {
  84   display: inline-block;
  85 }
  86 header .search-box {
  87   display: inline-block;
  88   margin-top: 10px;
  89   input {
  90     background-color: rgba(0, 0, 0, 0.2);
  91     border: 1px solid rgba(255, 255, 255, 0.3);
  92     color: #EEE;
  93     z-index: 2;
  94   }
  95   button {
  96     fill: #EEE;
  97     z-index: 1;
  98     svg {
  99       margin-right: 0;
 100     }
 101   }
 102   ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 103     color: #DDD;
 104   }
 105   ::-moz-placeholder { /* Firefox 19+ */
 106     color: #DDD;
 107   }
 108   :-ms-input-placeholder { /* IE 10+ */
 109     color: #DDD;
 110   }
 111   :-moz-placeholder { /* Firefox 18- */
 112     color: #DDD;
 113   }
 114   @include smaller-than($screen-lg) {
 115     max-width: 250px;
 116   }
 117   @include smaller-than($l) {
 118     max-width: 200px;
 119   }
 120 }
 121
 122 @include smaller-than($s) {
 123   .header-search {
 124     display: block;
 125   }
 126 }
 127
 128 .logo {
 129   display: inline-block;
 130   &:hover {
 131     color: #FFF;
 132     text-decoration: none;
 133   }
 134 }
 135 .logo-text {
 136   display: inline-block;
 137   font-size: 1.8em;
 138   color: #fff;
 139   font-weight: 400;
 140   padding: 14px $-l 14px 0;
 141   vertical-align: top;
 142   line-height: 1;
 143 }
 144 .logo-image {
 145   margin: $-xs $-s $-xs 0;
 146   vertical-align: top;
 147   height: 43px;
 148 }
 149
 150 .breadcrumbs span.sep {
 151   color: #aaa;
 152   padding: 0 $-xs;
 153 }
 154 .faded {
 155   a, button, span, span > div {
 156     color: #666;
 157     fill: #666;
 158   }
 159   .text-button {
 160     opacity: 0.5;
 161     transition: all ease-in-out 120ms;
 162     &:hover {
 163       opacity: 1;
 164       text-decoration: none;
 165     }
 166   }
 167 }
 168
 169 .faded span.faded-text {
 170   display: inline-block;
 171   padding: $-s;
 172 }
 173
 174 .faded-small {
 175   color: #000;
 176   fill: #000;
 177   font-size: 0.9em;
 178   background-color: $primary-faded;
 179 }
 180
 181 .toolbar-container {
 182   background-color: #FFF;
 183 }
 184
 185 .breadcrumbs .text-button, .action-buttons .text-button {
 186   display: inline-block;
 187   padding: $-s;
 188   &:last-child {
 189     padding-right: 0;
 190   }
 191   &:first-child {
 192     padding-left: 0;
 193   }
 194 }
 195
 196
 197 .action-buttons .dropdown-container:last-child a {
 198   padding-right: 0;
 199   padding-left: $-s;
 200 }
 201 .action-buttons {
 202   text-align: right;
 203   &.text-left {
 204     text-align: left;
 205     .text-button {
 206       padding-right: $-m;
 207       padding-left: 0;
 208     }
 209   }
 210   &.text-center {
 211     text-align: center;
 212   }
 213 }
 214
 215 @include smaller-than($m) {
 216   .breadcrumbs .text-button, .action-buttons .text-button {
 217     padding: $-xs $-xs;
 218   }
 219   .action-buttons .dropdown-container:last-child a {
 220     padding-left: $-xs;
 221   }
 222   .breadcrumbs .text-button {
 223     font-size: 0;
 224   }
 225   .breadcrumbs .text-button svg {
 226     font-size: $fs-m;
 227   }
 228   .breadcrumbs a i {
 229     font-size: $fs-m;
 230     padding-right: 0;
 231   }
 232   .breadcrumbs span.sep {
 233     padding: 0 $-xxs;
 234   }
 235   .toolbar .col-xs-1:first-child {
 236     padding-right: 0;
 237   }
 238 }
 239
 240 .nav-tabs {
 241   text-align: center;
 242   a, .tab-item {
 243     padding: $-m;
 244     display: inline-block;
 245     color: #666;
 246     fill: #666;
 247     cursor: pointer;
 248     &.selected {
 249       border-bottom: 2px solid $primary;
 250     }
 251   }
 252 }
 253 .faded-small .nav-tabs a {
 254   padding: $-s $-m;
 255 }