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

Reset, reset

Browse Source
This commit is contained in:
Dominic Masters
2018-04-28 17:13:56 +10:00
parent 63d1e21b9a
commit 5eb4d7ee4f
124 changed files with 0 additions and 5899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +0,0 @@
/*
* App
* Styles for the App itself
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
.c-app__wrapper {
min-height: 100vh;
width: 100%;
}
.c-app {
width: 100%;
height: 100%;
min-height: 100vh;
overflow-x: hidden;
position: relative;
@extend %t-flexbox;
@include t-flex-wrap(wrap);
@include t-flex-flow(column);
}

44
public/styles/components/_background-layer.scss
View File

@ -1,44 +0,0 @@
/*
* Background Layer
* Styles for the background layer component.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/21
*/
$starSize: 1024px;
$starTime: 4s;
$starSizeMobile: 0.5;
$starTimeMobile: $starTime / $starSizeMobile;
.c-background-layers {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
&__wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
perspective: 0px;
}
.c-background-layer {
width: 100%;
background-repeat: repeat;
position: fixed;
top: 0;
left: 0;
@for $i from 0 through 3 {
&--stars-#{$i} {
height: 200% + (50% * $i);
background-image: url('./../images/stars#{$i}.png');
}
}
}

59
public/styles/components/_footer.scss
View File

@ -1,59 +0,0 @@
/*
* Footer
* Styles for footer element
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/03/03
*/
$c-footer--text-color: $s-color--text;
$c-footer--background-color: $s-color--background-default;
$c-footer--z-index: 10;//Should render over most if not all body elements
.c-footer {
width: 100%;
background: $c-footer--background-color;
@extend %t-flexbox;
@include t-flex-wrap(wrap);
z-index: $c-footer--z-index;
}
.c-footer__copyright {
color: $c-footer--text-color;
}
.c-footer__copyright,
.c-footer__links {
width: 100%;
text-align: center;
padding: 1em;
}
.c-footer__link {
display: block;
}
@include t-media-query($s-small-up) {
.c-footer {
@include t-flex-wrap(nowrap);
}
.c-footer__copyright {
text-align: left;
}
.c-footer__links {
text-align: right;
}
.c-footer__link {
display: inline;
+ #{&}:before {
content: " | ";
}
}
}

36
public/styles/components/_form.scss
View File

@ -1,36 +0,0 @@
/*
* Form
* Styles for form elements
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/07
*/;
$c-form--shadow-offset: 5px;
.c-form {
}
.c-form__label {
display: block;
padding-bottom: 0.25em;
}
.c-form__group {
margin-bottom: 1.5em;
}
//Form input
.c-form-input {
width: 400px;
max-width: 100%;
border: $s-color--border--default;
padding: 0.5em;
@include t-box-shadow(-$c-form--shadow-offset, $c-form--shadow-offset, 0px, rgba(0, 0, 0, 0.5));
}
.c-form-input--multiline {
min-height: 10em;
max-width: 100%;
}

12
public/styles/components/_header.scss
View File

@ -1,12 +0,0 @@
/*
* Header
* Styles for header element
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
.c-header {
position: relative;
}

116
public/styles/components/_menu.scss
View File

@ -1,116 +0,0 @@
/*
* Menu
* Styles for the menu
*
* Dependencies:
* styles/settings/animation.scss
* styles/settings/responsive.scss
* styles/tools/_mixin.absolute-centering.scss
*
* Version:
* 1.0.0 - 2018/03/04
*/
$c-menu--z-index: 1000;
$c-menu--button--z-index: $c-menu--z-index + 10;
$c-menu--list--z-index: $c-menu--z-index + 20;
body.is-menu-open {
overflow: hidden;
}
.c-menu__wrapper {
position: relative;
}
.c-menu__button {
font-size: 1.5em;
padding: 0.5em 0.75em;
position: relative;
z-index: $c-menu--button--z-index;
}
.c-menu {
position: absolute;
top: 50%;
left: 50%;
border-left: 1px solid red;
}
.c-menu__fix {
position: relative;
}
.c-menu__container {
@extend %t-absolute-center-x-y;
width: 0px;
height: 0px;
border-radius: 50%;
z-index: $c-menu--z-index;
background: white;
overflow: hidden;
transition:
width 0.2s $s-animation--ease-out-curve,
height 0.2s $s-animation--ease-out-curve,
;
&.open {
width: 250vmax;
height: 250vmax;
}
}
.c-menu__body {
position: absolute;
top: 50%;
left: 50%;
z-index: $c-menu--list--z-index;
}
.c-menu__groups {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
/*position: absolute;
left: 2em;
top: -1.5em;*/
top: 0l;
width: 100vw;
height: 100vh;
position: fixed;
overflow-y: auto;
}
.c-menu__group {
padding: 1em;
width: 100%;
}
.c-menu__group-title {
}
.c-menu__item {
display: block;
padding: 0.25em 0;
}
@include t-media-query($s-xsmall-up) {
.c-menu__button {
padding: 0.75em 1em;
}
.c-menu__group {
width: 50%;
}
}
@include t-media-query($s-medium-up) {
.c-menu__group {
width: (100% / 3);
}
}
@include t-media-query($s-large-up) {
.c-menu__group {
width: 25%;
}
}

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

@ -1,92 +0,0 @@
/*
* Navbar
* Styles for Navbar
*
* Dependencies:
* styles/settings/colors.scss
* styles/settings/responsive.scss
* styles/tools/_box-shadow.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
* styles/tools/_transform.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
$c-navbar--z-index: 100;
$c-navbar--background: $s-color--background-default;
$c-navbar--link-offset: 5px;
.c-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: $c-navbar--background;
z-index: $c-navbar--z-index;
@extend %t-flexbox;
}
//Logo
.c-navbar__logo-container {
@include t-align-self(center);
width: 12.5em;
}
.c-navbar__logo {
width: 100%;
height: 100%;
}
//Links
.c-navbar__links {
width: 100%;
text-align: right;
display: none;
@include t-justify-content(flex-end);
}
.c-navbar__link {
@extend %s-font--navigation;
font-size: 1.2em;
padding: 0 1.5em;
@extend %t-inline-flex;
@include t-align-items(center);
&.active {
border-bottom: $s-thickness--border-thick solid $s-color--links;
}
}
.c-navbar__link-text {
//vertical-align: middle;
}
@include t-media-query($s-small-up) {
.c-navbar {
width: 90%;
top: 1em;
left: 1em;
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
.c-navbar__links {
@include t-flexbox;
}
.c-navbar__link {
background: $s-color--background-default;
transition: all 0.2s $s-animation--ease-out-curve;
margin-left: $c-navbar--link-offset;
@include t-translate(0em, 0em);
@include t-box-shadow(0px, 0px, 0px, rgba(0, 0, 0, 0.5));
&:hover {
@include t-translate($c-navbar--link-offset, -$c-navbar--link-offset);
@include t-box-shadow(-$c-navbar--link-offset, $c-navbar--link-offset, 0px, rgba(0, 0, 0, 0.5));
}
}
}

73
public/styles/components/_page--style-about.scss
View File

@ -1,73 +0,0 @@
/*
* About Page
* Styles for index page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
//Body Section Margin
.c-about-page__body-section {
margin-bottom: 3em;
}
//About Section
.c-page--style-about__bio-section {
margin-bottom: 5em;
}
.c-page--style-about {
}
.c-page--style-about__profile-container {
}
.c-window--style-about {
max-width: 25em;
margin: 0 auto;
display: block;
width: 90%;
}
.c-page--style-about__profile {
width: 100%;
max-width: 256px;
margin: 0 auto;
}
.c-page--style-about__blurb {
font-size: 1.25em;
}
.c-page--style-about__profile-container {
text-align: center;
}
//Window adjustments for about section
.c-page--style-about__window {
display: block;
width: 90%;
margin: 0 auto;
}
.c-page--style-about__window-text {
width: 100%;
resize: none;
}
//Media queries
@include t-media-query($s-small-up) {
.c-page--style-about__blurb {
}
.c-page--style-about__window-container {
width: 50%;
}
.c-page--style-about__window {
width: 50%;
}
}

35
public/styles/components/_page--style-contact.scss
View File

@ -1,35 +0,0 @@
/*
* Contact Page
* Styles for page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_page.scss
*
* Version:
* 1.0.0 - 2018/03/10
*/
.c-page--style-contact {
}
.c-page--style-container__split {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
}
.c-page--style-container__split-part {
width: 100%;
}
@include t-media-query($s-small-up) {
.c-page--style-container__split {
@include t-flex-wrap(nowrap);
}
.c-page--style-container__split-part {
width: 50%;
}
}

12
public/styles/components/_page--style-index.scss
View File

@ -1,12 +0,0 @@
/*
* Index Page
* Styles for index page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/

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

@ -1,25 +0,0 @@
/*
* Page
* Styles for page elements
*
* Dependencies:
* styles/settings/colors.scss - Used for colors
* styles/tools/_gradients.scss - Used for background gradients.
*
* Version:
* 1.0.0 - 2018/02/24
*/
.c-page {
min-height: 100%;
@include t-flex-grow(1);
@include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
padding-bottom: 5em;
//background-attachment: fixed;
//background-color: #000019;
//background-image: url('./../images/space.png');
//background-repeat: repeat-x;
//background-position: center bottom;
//background-size: (16px / 1) (384px / 1);
}

27
public/styles/components/_scene-component.scss
View File

@ -1,27 +0,0 @@
/*
* Scene Component
* Styles for THREE JS Scene elements.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/04/08
*/
.c-scene-component {
position: relative;
width: 100%;
height: 100%;
}
.c-scene-component__canvas-space {
width: 100%;
height: 100%;
}
.c-scene-component__canvas {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

12
public/styles/components/_section--style-blank-promo.scss
View File

@ -1,12 +0,0 @@
/*
* Blank Promo Section Style
* Styles for blank promo style section
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-blank-promo {
height: 30vmin;
}

26
public/styles/components/_section--style-body.scss
View File

@ -1,26 +0,0 @@
/*
* Section Body Style
* Styles for body style section
*
* Dependencies:
* styles/settings/colors.scss
* styles/settings/responsive.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-body__inner {
background: $s-color--background-default;
}
.c-body-section__wrapper {
padding: 1em;
}
@include t-media-query($s-small-up) {
.c-section--style-body__inner {
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
}

34
public/styles/components/_section--style-split.scss
View File

@ -1,34 +0,0 @@
/*
* Section Style Split
* Styles for split style section
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_section.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
.c-section--style-split {
@include t-flexbox();//Because we're winning a fight
@include t-flex-wrap(wrap);
}
.c-section--style-split__split-part {
width: 100%;
}
@include t-media-query($s-small-up) {
.c-section--style-split {
@include t-flex-wrap(nowrap);
@include t-justify-content(space-around);
@include t-align-items(center);
}
.c-section--style-split__split-part {
width: auto;
}
}

29
public/styles/components/_section--style-title.scss
View File

@ -1,29 +0,0 @@
/*
* Section Title Style
* Styles for title section
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/04/06
*/
$c-section--style-title__title-z-index: 5;
.c-section--style-title {
padding-top: 30vmin;
padding-bottom: 20vmin;
padding-left: 1em;
position: relative;
}
.c-section--style-title__model-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-section--style-title__title {
position: relative;
z-index: $c-section--style-title__title-z-index;
}

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

@ -1,23 +0,0 @@
/*
* Section
* Styles for section elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section {
width: 100%;
display: block;
max-width: $s-layout--page-max;
z-index: 1;
position:relative;
margin: 0 auto;
}
.c-section--full-width {
max-width: none;
}

206
public/styles/components/_w95.scss
View File

@ -1,206 +0,0 @@
@import './w95/settings.scss';
@import './w95/_mixins.scss';
@import './w95/_window.scss';
@import './w95/_title-bar.scss';
@import './w95/_window-button.scss';
@import './w95/_text-field.scss';
@import './w95/_window-menu.scss';
/*$windowBG: #C0C0C0;
$highlight: #0000BF;
$disabled: #808080;
$w95Font: 'MS PGothic', Verdana, Arial, Helvetica, sans-serif;
$imageScale: 1;
@mixin border95($thickness) {
border: (3px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95window.png');
border-image-slice: 3 * $thickness;
}
@mixin button95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button.png');
border-image-slice: 2 * $thickness;
display: inline-block;
color: black;
background-image: url('./../images/95/'+($thickness * $imageScale)+'x/95button_icons.png');
background-color: $windowBG;
background-position: 0px 0px;
background-size: 48px*$thickness 20px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button_inverted.png');
}
&.disabled {
background-position-y: 10px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button.png');
}
}
}
@mixin frame95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95frame.png');
border-image-slice: 2 * $thickness;
}
@mixin window95($scale) {
@extend %no-select;
@include border95($scale);
background: $windowBG;
font-family: $w95Font;
font-size: 12px*$scale;
display: inline-block;
> .load_me_stuff {
position: fixed;
left: -1000vmax;
top: -1000vmax;
border-image-source: url('./../images/95/'+($scale * $imageScale)+'x/95button_inverted.png');
}
> .title {
width: 100%;
color: white;
background: #000080;
padding: 2px * $scale;
font-weight: bold;
margin-bottom: 1px * $scale;
> .icon {
}
> .buttons {
height: 100%;
float: right;
font-size: 0;
> .btn {
@include button95($scale);
width: 16px*$scale;
height: 14px*$scale;
font-size: 12px*$scale;
&.close {
margin-left: 2px*$scale;
background-position-x: 0px*$scale;
}
&.help {
background-position-x: 36px*$scale;
}
&.minimize {
background-position-x: 24px*$scale;
}
&.maximize {
background-position-x: 12px*$scale;
}
}
}
}
> .context-menu {
width: 100%;
overflow: visible;
> .btn {
padding: (1px*$scale) (5px*$scale);
border: 1px*$scale solid transparent;
display: inline-block;
position: relative;
&::first-letter {
text-decoration: underline;
}
&:hover {
border-bottom-color: #868686;
border-right-color: #868686;
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
}
&.active {
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-top-color: #868686;
border-left-color: #868686;
> .menu {
display: block;
}
}
&.disabled {
color: $disabled;
&:hover,.active {
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-left-color: transparent;
}
}
> .menu {
@include border95($scale);
border-top-width: 2px*$scale;
position: absolute;
display: none;
background: $windowBG;
left: -1px*$scale;
margin-top: 2px*$scale;
width: auto;
> .menu-option {
padding-left: 22px*$scale;
padding-right: 22px*$scale;
padding-bottom: 3px*$scale;
padding-top: 1px*$scale;
white-space: nowrap;
&:hover {
background: $highlight;
color: white;
}
&:first-child {font-weight: bold;}
&::first-letter {
text-decoration: underline;
}
&.disabled {
color: $disabled;
&:hover {background: inherit;color: $disabled;}
}
}
}
}
}
&.inactive {
> .title {
background-color: $disabled;
}
}
> .textarea {
@include frame95($scale);
background: white;
color: black;
cursor: text;
}
}
.window {
@include window95(2);
}
*/

52
public/styles/components/w95/_mixins.scss
View File

@ -1,52 +0,0 @@
@mixin border95($thickness) {
border: (3px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95window.png');
border-image-slice: 3 * $thickness;
}
@mixin button95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button.png');
border-image-slice: 2 * $thickness;
display: inline-block;
color: black;
background-image: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button_icons.png');
background-color: $w95WindowBG;
background-position: 0px 0px;
background-size: 48px*$thickness 20px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button_inverted.png');
}
&.disabled {
background-position-y: 10px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button.png');
}
}
}
@mixin frame95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95frame.png');
border-image-slice: 2 * $thickness;
}
@mixin window95($scale) {
@extend %no-select;
@include border95($scale);
background: $w95WindowBG;
font-family: $w95Font;
font-size: 12px*$scale;
display: inline-block;
&.inactive {
> .title {
background-color: $w95Disabled;
}
}
}

6
public/styles/components/w95/_text-field.scss
View File

@ -1,6 +0,0 @@
.c-text-field {
@include frame95($w95Scale);
background: white;
color: black;
cursor: text;
}

8
public/styles/components/w95/_title-bar.scss
View File

@ -1,8 +0,0 @@
.c-title-bar {
width: 100%;
color: white;
background: #000080;
padding: 2px * $w95Scale;
font-weight: bold;
margin-bottom: 1px * $w95Scale;
}

29
public/styles/components/w95/_window-button.scss
View File

@ -1,29 +0,0 @@
.c-window-buttons {
height: 100%;
float: right;
font-size: 0;
}
.c-window-btn {
@include button95($w95Scale);
width: 16px*$w95Scale;
height: 14px*$w95Scale;
font-size: 12px*$w95Scale;
&.close {
margin-left: 2px*$w95Scale;
background-position-x: 0px*$w95Scale;
}
&.help {
background-position-x: 36px*$w95Scale;
}
&.minimize {
background-position-x: 24px*$w95Scale;
}
&.maximize {
background-position-x: 12px*$w95Scale;
}
}

78
public/styles/components/w95/_window-menu.scss
View File

@ -1,78 +0,0 @@
.c-context-menu {
width: 100%;
overflow: visible;
}
.c-context-menu__btn {
padding: (1px*$w95Scale) (5px*$w95Scale);
border: 1px*$w95Scale solid transparent;
display: inline-block;
position: relative;
&::first-letter {
text-decoration: underline;
}
&:hover {
border-bottom-color: #868686;
border-right-color: #868686;
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
}
&.active {
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-top-color: #868686;
border-left-color: #868686;
> .c-context-menu__menu {
display: block;
}
}
&.disabled {
color: $w95Disabled;
&:hover,.active {
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-left-color: transparent;
}
}
}
.c-context-menu__menu {
@include border95($w95Scale);
border-top-width: 2px*$w95Scale;
position: absolute;
display: none;
background: $w95WindowBG;
left: -1px*$w95Scale;
margin-top: 2px*$w95Scale;
width: auto;
}
.c-context-menu__menu-option {
padding-left: 22px*$w95Scale;
padding-right: 22px*$w95Scale;
padding-bottom: 3px*$w95Scale;
padding-top: 1px*$w95Scale;
white-space: nowrap;
&:hover {
background: $w95Highlight;
color: white;
}
&:first-child {font-weight: bold;}
&::first-letter {
text-decoration: underline;
}
&.disabled {
color: $w95Disabled;
&:hover {background: inherit;color: $w95Disabled;}
}
}

3
public/styles/components/w95/_window.scss
View File

@ -1,3 +0,0 @@
.c-window {
@include window95($w95Scale);
}

7
public/styles/components/w95/settings.scss
View File

@ -1,7 +0,0 @@
$w95WindowBG: #C0C0C0;
$w95Highlight: #0000BF;
$w95Disabled: #808080;
$w95Font: 'MS PGothic', Verdana, Arial, Helvetica, sans-serif;
$w95ImageScale: 1;
$w95Scale: 2;