static/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         @include media-breakpoint-up(lg) {
 218                 color: $red_900;
 219                 &:after {
 220                         content: "";
 221                         border-bottom: 2px solid $red_900;
 222                         position: absolute;
 223                         width: 100%;
 224                         left: 0;
 225                         top: 44px;
 226                         padding: inherit;
 227                         transform: scale(1);
 228                 }
 229         }
 230 }
 231
 232 #sidebar {
 233         padding: 0;
 234         @include media-breakpoint-down(sm) {
 235                 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
 236                                 0 1px 2px 0 rgba(0, 0, 0, 0.23);
 237                 position: fixed;
 238                 top: 52px;
 239                 z-index: 200;
 240                 background-color: white;
 241         }
 242         ul {
 243                 list-style: none;
 244                 &.features_nav {
 245                         padding: 0 0 24px 0;
 246                         overflow-x: auto;
 247                         &.fixed {
 248                                 position: fixed;
 249                                 top: 100px;
 250                                 outline: 1px solid grey;
 251                         }
 252                 }
 253                 ul {
 254                         margin: 0;
 255                         padding-left: 0;
 256                         li:last-child {
 257                                 margin-bottom: 0;
 258                         }
 259                 }
 260                 li {
 261                         padding: 0 16px;
 262                         margin: 8px 0;
 263                         a.nav-link {
 264                                 padding: inherit;
 265                                 color: $blue-grey-900;
 266                                 height: 32px;
 267                                 padding: 0 8px;
 268                                 line-height: 2;
 269                                 &.active {
 270                                         color: $red_900;
 271                                         border-left: 2px solid $red_900;
 272                                         padding: 0 8px 0 6px;
 273                                 }
 274                         }
 275                 }
 276         }
 277 }
 278
 279 // Feature mobile Menu
 280
 281 /* Fix for Android */
 282 body {
 283         -webkit-animation: bugfix infinite 1s;
 284 }
 285 @-webkit-keyframes bugfix {
 286         from { padding: 0; }
 287         to { padding: 0; }
 288 }
 289
 290 /* default checkbox */
 291 input[type=checkbox] {
 292         position: absolute;
 293         top: -9999px;
 294         left: -9999px;
 295 }
 296
 297 label {
 298         cursor: pointer;
 299         user-select: none;
 300 }
 301
 302 nav[role="dropdown"] {
 303         label { display: none; }
 304 }
 305
 306 @media screen and (max-width: 44em) {
 307         nav[role="dropdown"] {
 308                 ul {
 309                         height: 48px;
 310                         overflow: hidden;
 311                 }
 312
 313                 label {
 314                         position: relative;
 315                         display: block;
 316                         width: 100%;
 317                 }
 318
 319                 label:after {
 320                         font-family: FontAwesome;
 321                         font-size: 24px;
 322                         content: "\f107";
 323                         position: absolute;
 324                         top: 0;
 325                         right: 0;
 326                         z-index: 9999;
 327                         width: 100%;
 328                         height: 56px;
 329                         padding: 12px 12px 0;
 330                         text-align: right;
 331                 }
 332
 333                 input:checked ~ label:after {
 334                         content: "\f106";
 335                 }
 336
 337                 input:checked ~ ul {
 338                         display: block;
 339                         height: 40vh;
 340                         overflow-y: scroll;
 341                 }
 342         }
 343 }