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

Converted some objects to components.

Browse Source
This commit is contained in:
Dominic Masters
2018-06-19 06:54:20 +10:00
parent aafc15402d
commit 37c938af07
9 changed files with 39 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/styles/components/_app.scss Normal file
View File

@ -0,0 +1,17 @@
/*
* App
* App styles for the app container.
*
* Dependencies:
* styles/tools/flex.scss
*
* Version:
* 1.0.0 - 2018/05/03
*/
.c-app {
position: relative;
height: 100vh;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}

96
public/styles/components/_hamburger-menu.scss Normal file
View File

@ -0,0 +1,96 @@
/*
* Hamburger Menu
* Mobile-Centric openable menu with a hamburger icon to toggle.
*
* Dependencies:
* styles/settings/animation.scss
* styles/settings/colors.scss
* styles/settings/z.scss
*
* Version:
* 1.0.0 - 2018/06/12
*/
$c-hamburger-menu--max: 200%;
$c-hamburger-menu--pos-x: 100%;
$c-hamburger-menu--pos-y: 0%;
@include t-keyframes(c-hamburger-menu--open) {
from { clip-path: circle(0% at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
to { clip-path: circle($c-hamburger-menu--max at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
}
@include t-keyframes(c-hamburger-menu--close) {
from { clip-path: circle($c-hamburger-menu--max at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
to { clip-path: circle(0% at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
}
.c-hamburger-menu {
&__menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $s-color--menu__background;
transition: all 1s $s-animation--ease-out;
z-index: $s-z--menu;
@include t-animation-fill-mode(forwards);
@include t-animation-timing-function($s-animation--ease-out);
@include t-animation-duration(0.4s);
}
&__links {
@extend %t-list-blank;
padding: 1em;
}
&__link {
@extend %t-list-litem-blank;
display: block;
font-size: 1.25em;
width: 100%;
position: relative;
border: 1px solid red;
&-link {
position: relative;
display: block;
padding: 1.5em 0;
}
&:hover:before {
//@include t-translate-x(5%); Disabled due to not being needed on mobile
}
}
&__button {
position: relative;//Helps us win the Z-Fight
width: 100%;
height: 100%;
padding: 0.5em;
cursor: pointer;
z-index: $s-z--menu-button;
}
&__icon {
display: block;
}
&.is-open {
.c-hamburger-menu__menu {
display: block;
@include t-animation-name(c-hamburger-menu--open);
}
}
&.is-closing {
.c-hamburger-menu__menu {
display: block;
@include t-animation-name(c-hamburger-menu--close);
}
}
}

15
public/styles/components/_main.scss Normal file
View File

@ -0,0 +1,15 @@
/*
* Main
* Styles for the main container
*
* Version:
* 1.0.0 - 2018/05/07
*/
.c-main {
position: relative;
min-height: 100vh;
width: 100%;
@extend %t-flexbox;
@include t-flex-direction(column);
}

112
public/styles/components/_navbar.scss Normal file
View File

@ -0,0 +1,112 @@
/*
* Navbar
* Navigation bar at the top of the screen.
*
* Dependencies:
* styles/settings/colors.scss
* styles/settings/typography.scss
* styles/settings/z.scss
* styles/tools/flex.scss
* styles/tool/list.scss
*
* Version:
* 1.0.0 - 2018/05/03
*/
$c-navbar--link-thickness: 5px;
.c-navbar {
z-index: $s-z--navbar;
&.is-stuck {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
&__nav {
@extend %t-flexbox;
@include t-align-items(stretch);
@extend %t-dp--shadow;
background: $s-color--navbar;
color: white;
}
//Logo
&__logo-container {
width: 100%;
padding: 0.5em;
}
&__logo {
width: 7em;
}
//Links
&__link {
@include t-align-items(center);
@extend %s-font--style-button;
display: none;
position: relative;
padding: 1em;
color: $s-color--navbar__text;
&:after {
@extend %t-dp--shadow;
position: absolute;
width: 100%;
height: 0px;
left: 0;
bottom: 0px;
@include t-translate-y(100%)
transition: height 0.2s $s-animation--ease-out;
content: " ";
}
&.is-active:after {
background: $s-color--navbar__bar-hover;
height: $c-navbar--link-thickness;
}
&:hover {
color: $s-color--navbar__text-hover;
&:after {
background: $s-color--navbar__bar-hover;
height: $c-navbar--link-thickness;
}
}
}
&__hamburger {
}
@include t-media-query($s-xsmall-up) {
&__hamburger {
display: none;
}
&__logo {
width: 10em;
}
&__link {
@include t-flexbox();
}
}
@include t-media-query($s-small-up) {
&__logo {
width: 12em;
}
}
@include t-media-query($s-medium-up) {
&.is-stuck {
top: 5%;
}
}
}