--- /dev/null
+#mask {
+ width: 100vw;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, .4);
+ display: none;
+ visibility: hidden;
+ &.open {
+ display: block;
+ visibility: visible;
+ }
+}
+
+.tux {
+ position: absolute;
+ top: 12px;
+ left:50%;
+ transform: translateX(-50%);
+ h1 {
+ font-weight: 300 !important;
+ color: $blue-grey-900;
+ font-size: 20px;
+ line-height: 28px;
+ margin-bottom: 0;
+ strong {
+ font-weight: 700 !important;
+ }
+ }
+ h1:before {
+ content: "";
+ height: 32px;
+ width: 25px;
+ background-image: url('../img/ipfire-tux.png');
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: contain;
+ display: inline-block;
+ position: relative;
+ }
+}
+
+.menu-text {
+ transition: opacity .25s ease-in-out;
+}
+
+.menu-text.hidden {
+ opacity: 0;
+ transition: opacity .35s ease-in-out;
+}
+
+.fixed-top {
+ transition: background-color .25s linear;
+ height: 56px;
+ @include media-breakpoint-up(sm) {
+ height: 72px;
+ }
+ @include media-breakpoint-up(lg) {
+ height: 96px;
+ }
+ .navbar {
+ width: 100%;
+ a {
+ color: $blue-grey-900;
+ @include media-breakpoint-up(sm) {
+ margin-top: 8px;
+ }
+ }
+ .navbar-toggler-left {
+ left: -12px;
+ top: 8px;
+ @include media-breakpoint-up(sm) {
+ top: 17px;
+ }
+ }
+ .btn {
+ margin-top: .15rem;
+ }
+ }
+}
+
+.navbar-brand {
+ font-size: 20px;
+ font-weight: 300;
+ opacity: 0;
+ margin: 0;
+ transition: opacity .7s linear;
+ @include media-breakpoint-up(lg) {
+ opacity: 1;
+ font-size: 36px;
+ }
+ strong {
+ font-weight: 900;
+ }
+ img {
+ margin-right: 4px;
+ transform: translateY(-5px);
+ height: 32px;
+ width: auto;
+ @include media-breakpoint-up(lg) {
+ height: 40px;
+ }
+ }
+}
+
+.scrolled {
+ background-color: rgba(255, 255, 255, .96);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+ height: 56px;
+ @include media-breakpoint-up(sm) {
+ height: 72px;
+ }
+ @include media-breakpoint-up(lg) {
+ height: 96px;
+ }
+ .navbar-brand {
+ opacity: 1;
+ }
+}
+
+.scrolled.fadeout {
+ background-color: rgba(100, 100, 100, .5);
+ a.btn-donate {
+ opacity: .5;
+ }
+ a.navbar-brand {
+ opacity: .5;
+ }
+}
+
+#navbarSupportedContent {
+ width: 100%;
+ @include media-breakpoint-down(md) {
+ background: white;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 256px;
+ height: 100vh;
+ padding-top: 64px;
+ transform: translateX(-256px);
+ transition: all .15s ease-in-out;
+ &.open {
+ transform: translateX(0);
+ transition: all .15s ease-in-out;
+ box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26);
+ }
+ }
+}
+
+.navbar-nav {
+ @include media-breakpoint-up(lg) {
+ padding-top: 2px;
+
+ }
+}
+
+.navbar-nav .nav-link {
+ color: $blue-grey-900;
+ padding: 16px !important;
+ display: block;
+ position: relative;
+ @include media-breakpoint-up(lg) {
+ margin-right: 16px;
+ display: block;
+ position: relative;
+ &:after {
+ content: "";
+ border-bottom: 2px solid $red_900;
+ position: absolute;
+ transform: scaleX(0);
+ width: 100%;
+ left: 0;
+ top: 44px;
+ padding: inherit;
+ transition: transform .3s ease-out, color .3s ease-out;
+ }
+ }
+}
+
+.navbar-nav .nav-link:active {
+ @include media-breakpoint-down(lg) {
+ color: $red_900
+ }
+}
+
+.navbar-nav .nav-link:active:before {
+ @include media-breakpoint-down(lg) {
+ content: "";
+ border-left: 2px solid $red_900;
+ position: absolute;
+ left: 0;
+ height: 36px;
+ transform: translateY(-4px);
+ }
+}
+
+.navbar-nav .nav-link:hover {
+ @include media-breakpoint-up(lg) {
+ color: $red_900;
+ }
+}
+
+.navbar-nav .nav-link:hover:after {
+ @include media-breakpoint-up(lg) {
+ transform: scaleX(1);
+ }
+}
+
+body.About li.nav-item a.about,
+body.Download li.nav-item a.download {
+ @include media-breakpoint-up(lg) {
+ color: $red_900;
+ &:after {
+ content: "";
+ border-bottom: 2px solid $red_900;
+ position: absolute;
+ width: 100%;
+ left: 0;
+ top: 44px;
+ padding: inherit;
+ transform: scale(1);
+ }
+ }
+}
+
+#sidebar {
+ padding: 0;
+ @include media-breakpoint-down(md) {
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
+ 0 1px 2px 0 rgba(0, 0, 0, 0.23);
+ position: fixed;
+ top: 52px;
+ z-index: 9999;
+ background-color: white;
+ }
+ ul {
+ list-style: none;
+ &.features_nav {
+ padding: 0 0 24px 0;
+ overflow-x: auto;
+ &.fixed {
+ position: fixed;
+ top: 100px;
+ outline: 1px solid grey;
+ }
+ }
+ ul {
+ margin: 0;
+ padding-left: 0;
+ li:last-child {
+ margin-bottom: 0;
+ }
+ }
+ li {
+ padding: 0 16px;
+ margin: 8px 0;
+ a.nav-link {
+ padding: inherit;
+ color: $blue-grey-900;
+ height: 32px;
+ padding: 0 8px;
+ line-height: 2;
+ &.active {
+ color: $red_900;
+ border-left: 2px solid $red_900;
+ padding: 0 8px 0 6px;
+ }
+ }
+ }
+ }
+}
+
+// Feature mobile Menu
+
+/* Fix for Android */
+body {
+ -webkit-animation: bugfix infinite 1s;
+}
+@-webkit-keyframes bugfix {
+ from { padding: 0; }
+ to { padding: 0; }
+}
+
+/* default checkbox */
+input[type=checkbox] {
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+}
+
+label {
+ cursor: pointer;
+ user-select: none;
+}
+
+nav[role="dropdown"] {
+ label { display: none; }
+}
+
+@media screen and (max-width: 44em) {
+ nav[role="dropdown"] {
+ ul {
+ height: 48px;
+ overflow: hidden;
+ }
+
+ label {
+ position: relative;
+ display: block;
+ width: 100%;
+ }
+
+ label:after {
+ font-family: FontAwesome;
+ font-size: 24px;
+ content: "\f107";
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 9999;
+ width: 100%;
+ height: 56px;
+ padding: 12px 12px 0;
+ text-align: right;
+ }
+
+ input:checked ~ label:after {
+ content: "\f106";
+ }
+
+ input:checked ~ ul {
+ display: block;
+ height: 40vh;
+ overflow-y: scroll;
+ }
+ }
+}
\ No newline at end of file
projects / people / shoehn / ipfire.org.git / blobdiff