154 lines
No EOL
3.1 KiB
Markdown
154 lines
No EOL
3.1 KiB
Markdown
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;
|
|
|
|
``` |