YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styled nav on smaller screens

Browse Source
This commit is contained in:
Dominic Masters
2018-02-23 22:30:53 +11:00
parent a383113644
commit c52685b9bc
2 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/styles/components/_navbar.scss
View File

@ -3,26 +3,38 @@
* Styles for Navbar * Styles for Navbar
* *
* Dependencies: * Dependencies:
* styles/settings/responsive.scss
* styles/tools/_box-shadow.scss * styles/tools/_box-shadow.scss
* styles/tools/_responsive.scss
* *
* Version: * Version:
* 1.0.0 - 2018/02/23 * 1.0.0 - 2018/02/23
*/ */
$c-navbar--z-index: 100; $c-navbar--z-index: 100;
.c-navbar { .c-navbar {
width: 90%;
position: fixed; position: fixed;
top:3em; top: 0;
left: 0; left: 0;
width: 100%;
background: white; background: white;
z-index: $c-navbar--z-index; z-index: $c-navbar--z-index;
left: 1%;
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
} }
.c-navbar__menu-button { .c-navbar__menu-button {
font-size: 2em; font-size: 1.5em;
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
} }
@include t-media-query($s-xsmall-up) {
.c-navbar__menu-button {
font-size: 2em;
}
}
@include t-media-query($s-small-up) {
.c-navbar {
width: 90%;
top:3em;
left: 1%;
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
}

1
public/styles/index.scss
View File

@ -15,6 +15,7 @@
//Tools //Tools
@import './tools/_box-shadow.scss'; @import './tools/_box-shadow.scss';
@import './tools/_gradients.scss'; @import './tools/_gradients.scss';
@import './tools/_responsive.scss';
//Resets //Resets
@import './../../node_modules/normalize.css/normalize.css'; @import './../../node_modules/normalize.css/normalize.css';