src/scss/_nav.scss

   1 #mask {
   2         width: 100vw;
   3         height: 100vh;
   4         position: fixed;
   5         top: 0;
   6         left: 0;
   7         background-color: rgba(0, 0, 0, .4);
   8         display: none;
   9         visibility: hidden;
  10         &.open {
  11                 display: block;
  12                 visibility: visible;
  13                 z-index: 250;
  14         }
  15 }
  16
  17 .tux {
  18         position: absolute;
  19         top: 12px;
  20         left:50%;
  21         transform: translateX(-50%);
  22         h1 {
  23                 font-weight: 300 !important;
  24                 color: $blue-grey-900;
  25                 font-size: 20px;
  26                 line-height: 28px;
  27                 margin-bottom: 0;
  28                 strong {
  29                         font-weight: 700 !important;
  30                 }
  31         }
  32         h1:before {
  33                 content: "";
  34                 height: 32px;
  35                 width: 25px;
  36                 background-image: url('../img/ipfire-tux.png');
  37                 background-repeat: no-repeat;
  38                 background-position: center center;
  39                 background-size: contain;
  40                 display: inline-block;
  41                 position: relative;
  42         }
  43 }
  44
  45 .menu-text {
  46         transition: opacity .25s ease-in-out;
  47 }
  48
  49 .menu-text.hidden {
  50         opacity: 0;
  51         transition: opacity .35s ease-in-out;
  52 }
  53
  54 .fixed-top {
  55         transition: background-color .25s linear;
  56         height: 56px;
  57         @include media-breakpoint-up(sm) {
  58                 height: 72px;
  59         }
  60         @include media-breakpoint-up(lg) {
  61                 height: 96px;
  62         }
  63         .navbar {
  64                 width: 100%;
  65                 z-index: 500;
  66                 a {
  67                         color: $blue-grey-900;
  68                         @include media-breakpoint-up(sm) {
  69                                 margin-top: 8px;
  70                         }
  71                 }
  72                 .navbar-toggler-left {
  73                         left: -12px;
  74                         top: 8px;
  75                         @include media-breakpoint-up(sm) {
  76                                 top: 17px;
  77                         }
  78                 }
  79                 .btn {
  80                         margin-top: .15rem;
  81                 }
  82         }
  83 }
  84
  85 .navbar-brand {
  86         font-size: 20px;
  87         font-weight: 300;
  88         opacity: 0;
  89         margin: 0;
  90         transition: opacity .7s linear;
  91         @include media-breakpoint-up(lg) {
  92                 opacity: 1;
  93                 font-size: 36px;
  94         }
  95         strong {
  96                 font-weight: 900;
  97         }
  98         img {
  99                 margin-right: 4px;
 100                 transform: translateY(-5px);
 101                 height: 32px;
 102                 width: auto;
 103                 @include media-breakpoint-up(lg) {
 104                         height: 40px;
 105                 }
 106         }
 107 }
 108
 109 .scrolled {
 110         background-color: rgba(255, 255, 255, .96);
 111         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
 112         height: 56px;
 113         @include media-breakpoint-up(sm) {
 114                 height: 72px;
 115         }
 116         @include media-breakpoint-up(lg) {
 117                 height: 96px;
 118         }
 119         .navbar-brand {
 120                 opacity: 1;
 121         }
 122 }
 123
 124 .scrolled.fadeout {
 125         background-color: rgba(100, 100, 100, .5);
 126         a.btn-donate {
 127                 opacity: .5;
 128         }
 129         a.navbar-brand {
 130                 opacity: .5;
 131         }
 132 }
 133
 134 #navbarSupportedContent {
 135         width: 100%;
 136         @include media-breakpoint-down(md) {
 137                 background: white;
 138                 position: fixed;
 139                 top: 0;
 140                 left: 0;
 141                 width: 256px;
 142                 height: 100vh;
 143                 padding-top: 64px;
 144                 transform: translateX(-256px);
 145                 transition: all .15s ease-in-out;
 146                 &.open {
 147                         transform: translateX(0);
 148                         transition: all .15s ease-in-out;
 149                         box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26);
 150                 }
 151         }
 152 }
 153
 154 .navbar-nav {
 155         @include media-breakpoint-up(lg) {
 156                 padding-top: 2px;
 157
 158         }
 159 }
 160
 161 .navbar-nav .nav-link {
 162         color: $blue-grey-900;
 163         padding: 16px !important;
 164         display: block;
 165         position: relative;
 166         @include media-breakpoint-up(lg) {
 167                 margin-right: 16px;
 168                 display: block;
 169                 position: relative;
 170                 &:after {
 171                         content: "";
 172                         border-bottom: 2px solid $red_900;
 173                         position: absolute;
 174                         transform: scaleX(0);
 175                         width: 100%;
 176                         left: 0;
 177                         top: 44px;
 178                         padding: inherit;
 179                         transition: transform .3s ease-out, color .3s ease-out;
 180                 }
 181         }
 182 }
 183
 184 .navbar-nav .nav-link:active {
 185         @include media-breakpoint-down(lg) {
 186                 color: $red_900
 187         }
 188 }
 189
 190 .navbar-nav .nav-link:active:before {
 191         @include media-breakpoint-down(lg) {
 192                 content: "";
 193                 border-left: 2px solid $red_900;
 194                 position: absolute;
 195                 left: 0;
 196                 height: 36px;
 197                 transform: translateY(-4px);
 198         }
 199 }
 200
 201 .navbar-nav .nav-link:hover {
 202         @include media-breakpoint-up(lg) {
 203                 color: $red_900;
 204         }
 205 }
 206
 207 .navbar-nav .nav-link:hover:after {
 208         @include media-breakpoint-up(lg) {
 209                 transform: scaleX(1);
 210         }
 211 }
 212
 213 body.About li.nav-item a.about,
 214 body.Download li.nav-item a.download,
 215 body.Support li.nav-item a.support,
 216 body.Involved li.nav-item a.community,
 217 body.Phonebook li.nav-item a.phonebook,
 218 body.Diagnosis li.nav-item a.diagnosis {
 219         @include media-breakpoint-up(lg) {
 220                 color: $red_900;
 221                 &:after {
 222                         content: "";
 223                         border-bottom: 2px solid $red_900;
 224                         position: absolute;
 225                         width: 100%;
 226                         left: 0;
 227                         top: 44px;
 228                         padding: inherit;
 229                         transform: scale(1);
 230                 }
 231         }
 232 }
 233
 234 #sidebar {
 235         padding: 0;
 236         @include media-breakpoint-down(sm) {
 237                 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
 238                                 0 1px 2px 0 rgba(0, 0, 0, 0.23);
 239                 position: fixed;
 240                 top: 52px;
 241                 z-index: 200;
 242                 background-color: white;
 243         }
 244         ul {
 245                 list-style: none;
 246                 &.features_nav {
 247                         padding: 0 0 24px 0;
 248                         overflow-x: auto;
 249                         &.fixed {
 250                                 position: fixed;
 251                                 top: 100px;
 252                                 outline: 1px solid grey;
 253                         }
 254                 }
 255                 ul {
 256                         margin: 0;
 257                         padding-left: 0;
 258                         li:last-child {
 259                                 margin-bottom: 0;
 260                         }
 261                 }
 262                 li {
 263                         padding: 0 16px;
 264                         margin: 8px 0;
 265                         a.nav-link {
 266                                 padding: inherit;
 267                                 color: $blue-grey-900;
 268                                 height: 32px;
 269                                 padding: 0 8px;
 270                                 line-height: 2;
 271                                 &.active {
 272                                         color: $red_900;
 273                                         border-left: 2px solid $red_900;
 274                                         padding: 0 8px 0 6px;
 275                                 }
 276                         }
 277                 }
 278         }
 279 }
 280
 281 // Feature mobile Menu
 282
 283 /* Fix for Android */
 284 body {
 285         -webkit-animation: bugfix infinite 1s;
 286 }
 287 @-webkit-keyframes bugfix {
 288         from { padding: 0; }
 289         to { padding: 0; }
 290 }
 291
 292 /* default checkbox */
 293 input[type=checkbox] {
 294         position: absolute;
 295         top: -9999px;
 296         left: -9999px;
 297 }
 298
 299 label {
 300         cursor: pointer;
 301         user-select: none;
 302 }
 303
 304 nav[role="dropdown"] {
 305         label { display: none; }
 306 }
 307
 308 @media screen and (max-width: 44em) {
 309         nav[role="dropdown"] {
 310                 ul {
 311                         height: 48px;
 312                         overflow: hidden;
 313                 }
 314
 315                 label {
 316                         position: relative;
 317                         display: block;
 318                         width: 100%;
 319                 }
 320
 321                 label:after {
 322                         font-family: FontAwesome;
 323                         font-size: 24px;
 324                         content: "\f107";
 325                         position: absolute;
 326                         top: 0;
 327                         right: 0;
 328                         z-index: 9999;
 329                         width: 100%;
 330                         height: 56px;
 331                         padding: 12px 12px 0;
 332                         text-align: right;
 333                 }
 334
 335                 input:checked ~ label:after {
 336                         content: "\f106";
 337                 }
 338
 339                 input:checked ~ ul {
 340                         display: block;
 341                         height: 40vh;
 342                         overflow-y: scroll;
 343                 }
 344         }
 345 }