feat: add inset shadow to work vie page header

johannesjo · Oct 29, 2018 · 6fa1bb5 · 6fa1bb5
1 parent e6ca6b3
commit 6fa1bb5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/src/_variables.scss b/src/_variables.scss
@@ -29,10 +29,13 @@ $layout-gt-md: 1280px;
 $layout-gt-lg: 1920px;
 //$layout-xl: 1920px;
 
+
 $shadow-key-umbra-opacity: 0.2 !default;
 $shadow-key-penumbra-opacity: 0.14 !default;
 $shadow-ambient-shadow-opacity: 0.12 !default;
 
+$header-inset-shadow: inset 0 -4px 4px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+
 $whiteframe-shadow-1dp: 0px 1px 3px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 1px 1px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-2dp: 0px 1px 5px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-3dp: 0px 1px 8px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 3px 4px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;

diff --git a/src/app/pages/work-view/work-view-page.component.scss b/src/app/pages/work-view/work-view-page.component.scss
@@ -3,6 +3,7 @@
 .work-view-header {
   color: #ffffff;
   margin-bottom: $s;
+  box-shadow: $header-inset-shadow;
 
   @media(max-width: $layout-xs) {
     .label {