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

Cleaned more code, still untested.

Browse Source
This commit is contained in:
Dominic Masters
2018-10-24 09:06:18 +11:00
parent 7030a513de
commit f1b10e223e
28 changed files with 183 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/styles/components/_app.scss
View File

@ -1,13 +0,0 @@
/*
* App
* App styles for the app container.
*
* Dependencies:
* styles/tools/flex.scss
*
* Version:
* 1.0.0 - 2018/05/03
*/
.c-app {
overflow-x: hidden;//Temporary until I find time to find the overflowing element
}

18
public/styles/components/_body-section.scss
View File

@ -1,18 +0,0 @@
/*
* Body Section
* Body Section.
*
* Dependencies:
* styles/settings/colors.scss
* styles/tools/_shadow.scss
*
* Version:
* 1.0.0 - 2018/05/13
*/
$c-body-section--padding: 1em;
.c-body-section {
@extend %t-dp--shadow;
background: $s-color--background;
padding: $c-body-section--padding;
}

15
public/styles/components/_clear-section.scss
View File

@ -1,15 +0,0 @@
/*
* Clear section
* Simple section that is designed to clear pass the navbar (and some).
* Can also be used to add spacing between sections.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/06/05
*/
.c-clear-section {
width: 100%;
padding-bottom: 15%;
position: relative;
}

104
public/styles/components/_hamburger-menu.scss
View File

@ -1,104 +0,0 @@
/*
* 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-top: 3em;
}
&__link {
@extend %t-list-litem-blank;
display: block;
font-size: 1.25em;
width: 100%;
position: relative;
background-size: 150%;
&-link {
position: relative;
display: block;
padding: 1.5em;
}
&--home {
background-image: url($s-asset--directory+'images/patterns/game-show.svg');
}
&--contact {
background-image: url($s-asset--directory+'images/patterns/lemon-triangle.svg');
}
&: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);
}
}
}

60
public/styles/components/_image-section.scss
View File

@ -1,60 +0,0 @@
/*
* Image Section
* Styles for Image Sections, usually contains videos (hmmmm).
*
* Dependencies:
*
* Version:
* 1.1.0 - 2018/08/14
*/
.c-image-section {
&__image {
display: block;
width: 100%;
}
&.is-full {
position: relative;
.c-image-section__image {
@include t-absolute-fill();
object-fit: cover;
object-position: bottom center;
}
}
&__content {
@include t-absolute-fill();
&-inner {
position: relative;
height: 100%;
width: 100%;
}
}
//Background Image
&.is-background {
position: relative;
.c-image-section {
&__image {
@include t-absolute-fill();
object-fit: cover;
object-position: bottom center;
}
&__content {
position: relative;
&-inner {
position: relative;
height: 100%;
width: 100%;
}
}
}
}
}

8
public/styles/components/_main.scss
View File

@ -1,8 +0,0 @@
/*
* Main
* Styles for the main container
*
* Version:
* 1.0.0 - 2018/05/07
*/
.c-main {}

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

@ -1,115 +0,0 @@
/*
* 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.1.0 - 2018/08/14
*/
$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 {
//To Allow the logo to go over the top of the menu!~
position: relative;
z-index: $s-z--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%;
}
}
}

26
public/styles/components/_page.scss
View File

@ -1,26 +0,0 @@
/*
* Page
* Styles for the base Page elements.
*
* Dependencies:
* styles/settings/responsive.scss
*
* Version:
* 1.0.0 - 2018/05/05
*/
.c-page {
@include t-flex-grow(1);
&__boundary {
max-width: $s-screen-boundary;
margin: 0 auto;
&.is-full {
position: relative;
height: 100%;
}
&.is-small {
max-width: $s-screen-boundary / 2;
}
}
}

17
public/styles/components/_section.scss
View File

@ -1,17 +0,0 @@
/*
* Section
* Styles for the base section component.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/05/07
*/
.c-section {
//border: 1px solid red;
width: 100%;
&.is-full {
height: 100vh;
}
}

36
public/styles/components/_split-section.scss
View File

@ -1,36 +0,0 @@
/*
* Split section
* Simple Section that is split into multiple columns
*
* Dependencies:
* styles/tools/_flex.scss
*
* Version:
* 1.0.0 - 2018/05/28
*/
$c-split-section__split--padding: 1em;
.c-split-section {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
&.is-stretched {
@include t-align-items(stretch);
}
&.is-center {
@include t-align-items(center);
}
&__split {
width: 100%;
&.is-padded {
padding: $c-split-section__split--padding;
}
}
@include t-media-query($s-small-up) {
@include t-flex-wrap(nowrap);
}
}

19
public/styles/components/_video-section.scss
View File

@ -1,19 +0,0 @@
/*
* Video Section
* Styles for Video Sections, usually contains videos.
*
* Dependencies:
* styles/tools/_absolute-centering.scss
*
* Version:
* 1.0.0 - 2018/05/03
*/
.c-video-section {
position: relative;
&__video {
@include t-absolute-fill();
object-fit: cover;
object-position: center;
}
}