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