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

Further styled navbar

Browse Source
This commit is contained in:
Dominic Masters
2018-02-23 23:27:36 +11:00
parent f3660a2ab9
commit 184e548dd4
1 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,27 +3,67 @@
* Styles for Navbar * Styles for Navbar
* *
* Dependencies: * Dependencies:
* styles/settings/colors.scss
* styles/settings/responsive.scss * styles/settings/responsive.scss
* styles/tools/_box-shadow.scss * styles/tools/_box-shadow.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss * styles/tools/_responsive.scss
* styles/tools/_transform.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--link-border: $s-border--default;
$c-navbar--background: white;
.c-navbar { .c-navbar {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background: white; background: $c-navbar--background;
z-index: $c-navbar--z-index; z-index: $c-navbar--z-index;
@extend %t-flexbox;
} }
//Menu Button
.c-navbar__menu-button { .c-navbar__menu-button {
font-size: 1.5em; font-size: 1.5em;
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
} }
//Logo
.c-navbar__logo {
}
//Links
.c-navbar__links {
width: 100%;
text-align: right;
}
.c-navbar__link {
@extend %s-font--navigation;
height: 100%;
font-size: 1.2em;
padding: 0 1.5em;
display: inline-table;
background: $c-navbar--background;
transition: all 0.2s $s-animation--ease-out-curve;
&:hover {
}
}
.c-navbar__link-text {
display: table-cell;
vertical-align: middle;
}
//Responsive queries
@include t-media-query($s-xsmall-up) { @include t-media-query($s-xsmall-up) {
.c-navbar__menu-button { .c-navbar__menu-button {
font-size: 2em; font-size: 2em;