feat(glass): add overlay to blur

adriancarriger · Feb 15, 2018 · c92be6c · c92be6c
1 parent a88110c
commit c92be6c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -60,6 +60,7 @@ declare global {
   namespace JSXElements {
     export interface FrostedGlassAttributes extends HTMLAttributes {
       blurAmount?: string;
+      overlayColor?: string;
       uuid?: string;
     }
   }

diff --git a/src/components/frosted-glass/frosted-glass.scss b/src/components/frosted-glass/frosted-glass.scss
@@ -16,6 +16,16 @@ frosted-glass {
     position: absolute;
     width: 100vw;
   }
+
+  .overlay {
+    background-color: transparent;
+    bottom: 0;
+    content: '';
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
 }
 
 .glass-content {

diff --git a/src/components/frosted-glass/frosted-glass.tsx b/src/components/frosted-glass/frosted-glass.tsx
@@ -9,6 +9,7 @@ import { tempClosest } from '../../util';
 export class FrostedGlass {
   @Element() el: HTMLElement;
   @Prop() uuid: string;
+  @Prop() overlayColor: string;
   @Prop() blurAmount = '15px';
   @State() blurOffsetLeft = 0;
   @State() blurOffsetTop = 0;
@@ -58,6 +59,7 @@ export class FrostedGlass {
           top: `-${this.blurOffsetTop}px`,
           transform: `translateY(-${this.scrollOffset}px)`
         }}></div>
+        <div style={{'background-color': this.overlayColor}} class="overlay"></div>
       </div>,
       <div class={`glass-content${this.isFixed ? ' fixed': ''}`}><slot /></div>
     ]

diff --git a/src/index.html b/src/index.html
@@ -192,7 +192,7 @@
         </ul>
       </frosted-glass>
       <div class="hero-container">
-        <frosted-glass class="hero-value-add">
+        <frosted-glass overlay-color="#ffffff52" class="hero-value-add">
           <h1><span class="hero-focus">Frosted Glass</span></h1>
           <div class="hero-details">next level street art gastropub flannel keytar sartorial sustainable ennui Brooklyn kitsch artisan typewriter</div>
           <button class="hero-cta">Order now</button>