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