[SITE] new mobile menu (plain CSS) & removed animation assets of bootstrap
This commit is contained in:
parent
2ecf9ea656
commit
1544f888ca
21 changed files with 176 additions and 124 deletions
2
assets/scss/foundation.scss
vendored
2
assets/scss/foundation.scss
vendored
|
@ -22,7 +22,7 @@
|
|||
@import "buttons";
|
||||
|
||||
// Components
|
||||
@import "animation";
|
||||
//@import "animation";
|
||||
//@import "dropdown";
|
||||
//@import "button-group";
|
||||
//@import "input-group";
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -47,6 +47,6 @@ main {
|
|||
|
||||
@include media-breakpoint-down(xs) {
|
||||
main {
|
||||
padding-top: 16vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue