initial

joplin notion extension/Web Development/CSS/Snippets/Overlay.md

@@ -0,0 +1,154 @@
+Overlay
+
+```html
+ <div className="Overlay">
+      <div className="OverlayBox">
+        <div className="message">
+          <h3>This will delete your question. Are you sure?</h3>
+        </div>
+
+        <div className="actionSection">
+          <div className="ok">
+            <button className="okbtn">Ok</button>
+          </div>
+          <div className="cancel">
+            <button className="cancelbtn">Cancel</button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+```
+
+```scss
+.Overlay {
+  // to overlay over all others
+  z-index: 10;
+  display: flex;
+  position: fixed;
+  //   position: absolute;
+  top: 0;
+  //   position: relative;
+  width: 100vw;
+  min-height: 100vh;
+  min-height: 100%;
+  //   height: 100vh;
+  //   min-height: fit-content;
+  //   height: min(100vh, fit-content);
+  background-color: rgba($color: #000000, $alpha: 0.8);
+
+  .OverlayBox {
+    // when height is too so reducing its height to make it scrollable. has issues but best workaround
+    max-height: 100vh;
+    overflow-y: auto;
+    justify-content: center;
+    align-items: center;
+
+    background-color: white;
+    width: 300px;
+    aspect-ratio: 2/1;
+    // position: fixed;
+    // position: absolute;
+    position: relative;
+
+    // inset: 0;
+
+    margin: auto;
+    padding: 0.5rem;
+    border: 10px solid grey;
+    border-radius: 4px;
+    box-shadow: 0 4px 8px rgba($color: white, $alpha: 0.2);
+
+    .message {
+      color: $navColor;
+    }
+
+    .actionSection {
+      
+      width: 100%;
+      display: flex;
+      
+      // occupying rest of space so to push ok and cancel at end 
+      r// both horizontally and vertically
+      flex: 1;
+      align-items: flex-end;
+      justify-content: flex-end;
+
+      .ok,
+      .cancel {
+        margin: 0.3rem;
+
+        button {
+          @include buttonDim;
+          padding: 0.4rem;
+          width: 4rem;
+        }
+      }
+
+      .ok button:hover {
+        background-color: $correct-ans-color;
+      }
+
+      .cancel button:hover {
+        background-color: $wrong-ans-color;
+      }
+    }
+  }
+}
+
+@include media-xs-400-height {
+  .Overlay {
+    .OverlayBox {
+      //   max-width: 300px;
+    }
+  }
+}
+
+
+```
+
+```jsx
+ import "./Overlay.scss";
+
+function Overlay(props) {
+  const { isOverlayVisible, setIsOverlayVisible, message, children } = props;
+
+  console.log("children :", children);
+
+  const cancelEvent = () => {
+    setIsOverlayVisible(false);
+  };
+
+  const okEvent = () => {
+    setIsOverlayVisible(false);
+  };
+
+  //   if no children elements then children will be empty object
+  return (
+    <div className="Overlay">
+      <div className="OverlayBox">
+        <div className="message">
+          <h3>{message}</h3>
+        </div>
+    	{children ? children : <></>}
+
+        <div className="actionSection">
+          <div className="ok">
+            <button className="okbtn" onClick={okEvent}>
+              Ok
+            </button>
+          </div>
+          <div className="cancel">
+            <button className="cancelbtn" onClick={cancelEvent}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Overlay;
+
+```