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

Added shadows, moved variables around

Browse Source
This commit is contained in:
Dominic Masters
2018-05-17 17:36:00 +10:00
parent 78a97c83a6
commit c526e3045d
8 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

1
public/styles/index.scss
View File

@ -43,6 +43,7 @@
@import './tools/_absolute-centering.scss'; @import './tools/_absolute-centering.scss';
@import './tools/_input.scss'; @import './tools/_input.scss';
@import './tools/_shadow.scss';
//Resets //Resets

3
public/styles/objects/_background.scss
View File

@ -3,6 +3,7 @@
* Styles for the background of the site. * Styles for the background of the site.
* *
* Dependencies: * Dependencies:
* styles/settings/z.scss
* styles/tools/_absolute-centering.scss * styles/tools/_absolute-centering.scss
* *
* Version: * Version:
@ -14,7 +15,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -1; z-index: $s-z--background;
//Civil Twilight //Civil Twilight
&--style-twilight { &--style-twilight {

4
public/styles/objects/_navbar.scss
View File

@ -28,6 +28,7 @@ $o-navbar--link-thickness: 5px;
&__nav { &__nav {
@extend %t-flexbox; @extend %t-flexbox;
@include t-align-items(stretch); @include t-align-items(stretch);
@extend %t-dp--shadow;
background: $s-color--navbar; background: $s-color--navbar;
color: white; color: white;
} }
@ -53,12 +54,13 @@ $o-navbar--link-thickness: 5px;
color: $s-color--navbar__text; color: $s-color--navbar__text;
&:after { &:after {
@extend %t-dp--shadow;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 0px; height: 0px;
left: 0; left: 0;
bottom: 0px; bottom: 0px;
@include t-translate-y(100%) @include t-translate-y(90%)
transition: height 0.2s $s-animation--ease-out; transition: height 0.2s $s-animation--ease-out;
content: " "; content: " ";

1
public/styles/settings/colors.scss
View File

@ -28,6 +28,7 @@ $s-color--swatch-blue: #BAE1FF;
*/ */
$s-color--background: white; $s-color--background: white;
$s-color--shadow: rgba(0, 0, 0, 0.5);
//Hyperlink Colors //Hyperlink Colors
$s-color--link: #FC78DE; $s-color--link: #FC78DE;

1
public/styles/settings/z.scss
View File

@ -6,4 +6,5 @@
* 1.0.0 - 2018/05/07 * 1.0.0 - 2018/05/07
*/ */
$s-z--background: -1;
$s-z--navbar: 10; //Navbar $s-z--navbar: 10; //Navbar

4
public/styles/tools/_input.scss
View File

@ -53,7 +53,7 @@ $t-input--style-dp__padding: 1em;
background: $s-color--input-default__bottom; background: $s-color--input-default__bottom;
border: $s-color--input-default__border; border: $s-color--input-default__border;
border-radius: $t-input--style-dp__padding / 3; //border-radius: $t-input--style-dp__padding / 3;
//Background Shadow (3D effect) //Background Shadow (3D effect)
@include t-box-shadow( @include t-box-shadow(
@ -76,7 +76,7 @@ $t-input--style-dp__padding: 1em;
background: $s-color--input-default__top; background: $s-color--input-default__top;
border: $s-color--input-default__border; border: $s-color--input-default__border;
transition: all 0.1s $s-animation--ease-out; transition: all 0.1s $s-animation--ease-out;
border-radius: $t-input--style-dp__padding / 3; //border-radius: $t-input--style-dp__padding / 3;
//Shine effect //Shine effect
@include t-box-shadow( @include t-box-shadow(

17
public/styles/tools/_shadow.scss Normal file
View File

@ -0,0 +1,17 @@
/*
* domsPlace Shadows
* Standard Shadows used throughout domsPlace
*
* Dependencies:
* styles/settings/colors.scss
* styles/tools/_box-shadow.scss
*/
%t-dp--shadow {
@include t-box-shadow(
1em,
1em,
0,
0,
$s-color--shadow
);
}