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   }
  94   button {
  95     color: #EEE;
  96     fill: #EEE;
  97   }
  98   ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  99     color: #DDD;
 100   }
 101   ::-moz-placeholder { /* Firefox 19+ */
 102     color: #DDD;
 103   }
 104   :-ms-input-placeholder { /* IE 10+ */
 105     color: #DDD;
 106   }
 107   :-moz-placeholder { /* Firefox 18- */
 108     color: #DDD;
 109   }
 110   @include smaller-than($screen-lg) {
 111     max-width: 250px;
 112   }
 113   @include smaller-than($l) {
 114     max-width: 200px;
 115   }
 116 }
 117
 118 @include smaller-than($s) {
 119   .header-search {
 120     display: block;
 121   }
 122 }
 123
 124 .logo {
 125   display: inline-block;
 126   &:hover {
 127     color: #FFF;
 128     text-decoration: none;
 129   }
 130 }
 131 .logo-text {
 132   display: inline-block;
 133   font-size: 1.8em;
 134   color: #fff;
 135   font-weight: 400;
 136   padding: 14px $-l 14px 0;
 137   vertical-align: top;
 138   line-height: 1;
 139 }
 140 .logo-image {
 141   margin: $-xs $-s $-xs 0;
 142   vertical-align: top;
 143   height: 43px;
 144 }
 145
 146 .breadcrumbs span.sep {
 147   color: #aaa;
 148   padding: 0 $-xs;
 149 }
 150 .faded {
 151   a, button, span, span > div {
 152     color: #666;
 153     fill: #666;
 154   }
 155   .text-button {
 156     opacity: 0.5;
 157     transition: all ease-in-out 120ms;
 158     &:hover {
 159       opacity: 1;
 160       text-decoration: none;
 161     }
 162   }
 163 }
 164
 165 .faded span.faded-text {
 166   display: inline-block;
 167   padding: $-s;
 168 }
 169
 170 .faded-small {
 171   color: #000;
 172   fill: #000;
 173   font-size: 0.9em;
 174   background-color: $primary-faded;
 175 }
 176
 177 .toolbar-container {
 178   background-color: #FFF;
 179 }
 180
 181 .breadcrumbs .text-button, .action-buttons .text-button {
 182   display: inline-block;
 183   padding: $-s;
 184   &:last-child {
 185     padding-right: 0;
 186   }
 187   &:first-child {
 188     padding-left: 0;
 189   }
 190 }
 191
 192
 193 .action-buttons .dropdown-container:last-child a {
 194   padding-right: 0;
 195   padding-left: $-s;
 196 }
 197 .action-buttons {
 198   text-align: right;
 199   &.text-left {
 200     text-align: left;
 201     .text-button {
 202       padding-right: $-m;
 203       padding-left: 0;
 204     }
 205   }
 206   &.text-center {
 207     text-align: center;
 208   }
 209 }
 210
 211 @include smaller-than($m) {
 212   .breadcrumbs .text-button, .action-buttons .text-button {
 213     padding: $-xs $-xs;
 214   }
 215   .action-buttons .dropdown-container:last-child a {
 216     padding-left: $-xs;
 217   }
 218   .breadcrumbs .text-button {
 219     font-size: 0;
 220   }
 221   .breadcrumbs .text-button svg {
 222     font-size: $fs-m;
 223   }
 224   .breadcrumbs a i {
 225     font-size: $fs-m;
 226     padding-right: 0;
 227   }
 228   .breadcrumbs span.sep {
 229     padding: 0 $-xxs;
 230   }
 231   .toolbar .col-xs-1:first-child {
 232     padding-right: 0;
 233   }
 234 }
 235
 236 .nav-tabs {
 237   text-align: center;
 238   a, .tab-item {
 239     padding: $-m;
 240     display: inline-block;
 241     color: #666;
 242     fill: #666;
 243     cursor: pointer;
 244     &.selected {
 245       border-bottom: 2px solid $primary;
 246     }
 247   }
 248 }
 249 .faded-small .nav-tabs a {
 250   padding: $-s $-m;
 251 }