1
0
Fork 0

[SITE] new mobile menu (plain CSS) & removed animation assets of bootstrap

This commit is contained in:
Jannik Beyerstedt 2016-10-28 23:32:29 +02:00
parent 2ecf9ea656
commit 1544f888ca
21 changed files with 176 additions and 124 deletions

View file

@ -22,7 +22,7 @@
@import "buttons";
// Components
@import "animation";
//@import "animation";
//@import "dropdown";
//@import "button-group";
//@import "input-group";

View file

@ -15,6 +15,10 @@ body {
margin: 0;
font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
min-width: 300px;
overflow-x: hidden;
}
div.site-wrap {
background-color: $color_bg;
}
h1, h2, h3, h4 {
margin-bottom: 18px;
@ -105,6 +109,9 @@ header {
}
.nav-trigger {
display: none;
}
nav {
box-sizing: border-box;
ul.nav {
@ -147,47 +154,81 @@ nav {
margin: 30px 9px 1px;
}
}
@include media-breakpoint-down(xs) {
nav {
button.navbar-toggler {
float: right;
margin-top: 24px;
font-family: inherit;
font-weight: 300;
}
ul.mobileNav {
color: $color_font_inv;
background-color: $color_bg_inv;
padding: 1rem 1rem;
a {
font-size: 20px;
font-weight: 300;
}
a.active {
color: $color_accent;
font-weight: 700;
}
}
}
// ---- from boostrap ----
// @requires animation.scss and collapse.js, util.js
.navbar-toggler {
$mobileNav_width: 200px;
$mobileNav_button_right: 15px;
nav.mobile {
width: $mobileNav_width;
height: 100%;
position: fixed;
right: -$mobileNav_width;
z-index: 0;
}
.site-wrap {
position: relative;
left: 0;
z-index: 1;
}
@include media-breakpoint-down(xs) {
label[for="nav-trigger"] {
position: absolute;
right: $mobileNav_button_right;
top: 24px;
z-index: 2;
padding: .5rem .75rem;
font-size: $font-size-lg;
line-height: 1;
// background: none;
//border: $border-width solid grey;
//@include border-radius($btn-border-radius);
// @include hover-focus {
// text-decoration: none;
// outline: none;
// }
font-family: inherit;
font-weight: 300;
// button-color
color: #373a3c;
background-color: #fff;
}
nav.mobile {
background-color: $color_bg_inv;
ul.mobileNav {
color: $color_font_inv;
padding: 1rem 1rem;
padding-top: 28px;
li {
margin-bottom: 0.4em;
a {
font-size: 20px;
font-weight: 300;
}
a.active {
color: $color_accent;
font-weight: 700;
}
}
ul>li {
margin-bottom: 0.2em;
}
}
}
.nav-trigger:checked + label {
right: ($mobileNav_width + $mobileNav_button_right);
}
.nav-trigger:checked ~ .site-wrap {
left: -$mobileNav_width;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
.nav-trigger:checked ~ nav.mobile {
right: 0;
}
.nav-trigger + label, nav.mobile {
transition: right 0.2s;
}
.site-wrap {
transition: left 0.2s;
}
}
$footer_logoHeight: 1.4rem;
$footer_margin: 25px;
$footer_height: 70px;

View file

@ -47,6 +47,6 @@ main {
@include media-breakpoint-down(xs) {
main {
padding-top: 16vh;
padding-top: 10vh;
}
}

View file

@ -9,9 +9,11 @@
// change main.scss behavior - inverted color style
body {
background-color: $color_bg_inv;
color: $color_font_inv;
}
div.site-wrap {
background-color: $color_bg_inv;
}
a {
color: $link_color_inv;
&:active, &:hover {
@ -34,8 +36,10 @@ main p {
}
}
@include media-breakpoint-down(xs) {
.navbar-toggler {
color: $nav_fgColor;
label[for="nav-trigger"] {
// button color inverted
color: $nav_fgColor;
background-color: $color_bg_inv;
}
}
footer {