diff --git a/public/styles/components/_body-section.scss b/public/styles/components/_body-section.scss index 2e5adae..a376b73 100644 --- a/public/styles/components/_body-section.scss +++ b/public/styles/components/_body-section.scss @@ -3,7 +3,7 @@ * Body Section. * * Dependencies: - * styles/settings/colors.scss + * styles/tools/_shadow.scss * * Version: * 1.0.0 - 2018/05/13 @@ -11,6 +11,7 @@ $c-body-section--padding: 1em; .c-body-section { + @extend %t-dp--shadow; background: $s-color--background; padding: $c-body-section--padding; } diff --git a/public/styles/index.scss b/public/styles/index.scss index a93c25b..2b78023 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -43,6 +43,7 @@ @import './tools/_absolute-centering.scss'; @import './tools/_input.scss'; +@import './tools/_shadow.scss'; //Resets diff --git a/public/styles/objects/_background.scss b/public/styles/objects/_background.scss index b0a8330..de63874 100644 --- a/public/styles/objects/_background.scss +++ b/public/styles/objects/_background.scss @@ -3,6 +3,7 @@ * Styles for the background of the site. * * Dependencies: + * styles/settings/z.scss * styles/tools/_absolute-centering.scss * * Version: @@ -14,7 +15,7 @@ left: 0; width: 100%; height: 100%; - z-index: -1; + z-index: $s-z--background; //Civil Twilight &--style-twilight { diff --git a/public/styles/objects/_navbar.scss b/public/styles/objects/_navbar.scss index 973a5e5..58034bd 100644 --- a/public/styles/objects/_navbar.scss +++ b/public/styles/objects/_navbar.scss @@ -28,6 +28,7 @@ $o-navbar--link-thickness: 5px; &__nav { @extend %t-flexbox; @include t-align-items(stretch); + @extend %t-dp--shadow; background: $s-color--navbar; color: white; } @@ -53,12 +54,13 @@ $o-navbar--link-thickness: 5px; 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%) + @include t-translate-y(90%) transition: height 0.2s $s-animation--ease-out; content: " "; diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss index 7b2beef..8dd3518 100644 --- a/public/styles/settings/colors.scss +++ b/public/styles/settings/colors.scss @@ -28,6 +28,7 @@ $s-color--swatch-blue: #BAE1FF; */ $s-color--background: white; +$s-color--shadow: rgba(0, 0, 0, 0.5); //Hyperlink Colors $s-color--link: #FC78DE; diff --git a/public/styles/settings/z.scss b/public/styles/settings/z.scss index 2d58f14..348e0d6 100644 --- a/public/styles/settings/z.scss +++ b/public/styles/settings/z.scss @@ -6,4 +6,5 @@ * 1.0.0 - 2018/05/07 */ +$s-z--background: -1; $s-z--navbar: 10; //Navbar diff --git a/public/styles/tools/_input.scss b/public/styles/tools/_input.scss index b8cd4cd..19004ad 100644 --- a/public/styles/tools/_input.scss +++ b/public/styles/tools/_input.scss @@ -53,7 +53,7 @@ $t-input--style-dp__padding: 1em; background: $s-color--input-default__bottom; 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) @include t-box-shadow( @@ -76,7 +76,7 @@ $t-input--style-dp__padding: 1em; background: $s-color--input-default__top; border: $s-color--input-default__border; 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 @include t-box-shadow( diff --git a/public/styles/tools/_shadow.scss b/public/styles/tools/_shadow.scss new file mode 100644 index 0000000..0ffe191 --- /dev/null +++ b/public/styles/tools/_shadow.scss @@ -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 + ); +}