➕ ⚠️ Add blur behind header

fluid-framework · May 8, 2021 · cfbdd74 · cfbdd74
1 parent 06b29b2
commit cfbdd74
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/objects/_layout.scss b/src/objects/_layout.scss
@@ -20,6 +20,11 @@
     color: $header-color;
     background-color: $header-background;
 
+    @if $enable-experimental-css {
+      -webkit-backdrop-filter: blur($header-blur);
+      backdrop-filter: blur($header-blur);
+    }
+
     @include transition($header-transition);
 
     &.is-collapse {

diff --git a/src/settings/objects/_layout.scss b/src/settings/objects/_layout.scss
@@ -9,6 +9,7 @@
 // Header
 $header-background:                  if($design-theme == light, $white, $dark) !default;
 $header-color:                       clr-auto($header-background) !default;
+$header-blur:                        .2rem !default;
 $header-bordertop:                   $borderwidth-wide solid $primary !default;
 $header-height:                      64px !default;
 $header-padding-x:                   24px !default;