diff --git a/examples/web/react/components/modal/modal.css b/examples/web/react/components/modal/modal.css index f1e5fd397a5bcd9d204f17b9f1c9c16b2bce0fbd..bcc2c27ca6885de37f72e0dcbeed5d466fae82ba 100644 --- a/examples/web/react/components/modal/modal.css +++ b/examples/web/react/components/modal/modal.css @@ -33,6 +33,7 @@ -moz-opacity: 1.0; -khtml-opacity: 1.0; -webkit-opacity: 1.0; + pointer-events: initial; transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); -o-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); -ms-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); @@ -49,12 +50,12 @@ -moz-border-radius: 6px 6px 6px 6px; -khtml-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); - -o-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); - -ms-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); - -khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); - -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); + -o-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); + -ms-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); + -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); margin-top: 30px; max-width: 100%; padding: 24px 24px 24px 24px; diff --git a/examples/web/react/components/modal/modal.tsx b/examples/web/react/components/modal/modal.tsx index 4ed686608c0bd83a3f0452ac6c1add2980081514..c72f676188cba2db6d04e100e553d47e4b4fbbe5 100644 --- a/examples/web/react/components/modal/modal.tsx +++ b/examples/web/react/components/modal/modal.tsx @@ -9,6 +9,7 @@ type ModalProps = { title?: string; text?: string; visible?: boolean; + overlayClose?: boolean; style?: string[]; onConfirm?: () => void; onCancel?: () => void; @@ -18,6 +19,7 @@ export const Modal: FC<ModalProps> = ({ title = "Alert", text = "Do you confirm the following operation?", visible = false, + overlayClose = true, style = [], onConfirm, onCancel @@ -38,9 +40,15 @@ export const Modal: FC<ModalProps> = ({ const getTextHtml = (separator = /\n/g) => ({ __html: text.replace(separator, "<br/>") }); + const onWindowClick = ( + event: React.MouseEvent<HTMLDivElement, MouseEvent> + ) => { + if (!overlayClose) return; + event.stopPropagation(); + }; return ( - <div className={classes()}> - <div className="modal-window"> + <div className={classes()} onClick={onCancel}> + <div className="modal-window" onClick={onWindowClick}> <div className="modal-top-buttons"> <Button text={""} diff --git a/examples/web/react/components/tiles/tiles.css b/examples/web/react/components/tiles/tiles.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..59b7d18240ad1bc4ea361b700e70c75c911782de 100644 --- a/examples/web/react/components/tiles/tiles.css +++ b/examples/web/react/components/tiles/tiles.css @@ -0,0 +1,11 @@ +.tiles > .canvas { + background-color: #1b1a17; + border: 2px solid #50cb93; + box-sizing: content-box; + -o-box-sizing: content-box; + -ms-box-sizing: content-box; + -moz-box-sizing: content-box; + -khtml-box-sizing: content-box; + -webkit-box-sizing: content-box; + padding: 8px 8px 8px 8px; +} diff --git a/examples/web/react/components/tiles/tiles.tsx b/examples/web/react/components/tiles/tiles.tsx index 7556be8d0dc1379083a03d7fda1f8ef2b72f9c0e..a74354d7c9bdbfe4bd8759c0836d90ccd497be2c 100644 --- a/examples/web/react/components/tiles/tiles.tsx +++ b/examples/web/react/components/tiles/tiles.tsx @@ -17,7 +17,7 @@ export const Tiles: FC<TilesProps> = ({ interval = 500, style = [] }) => { - const classes = () => ["title", ...style].join(" "); + const classes = () => ["tiles", ...style].join(" "); const onCanvas = (structure: CanvasStructure) => { setInterval(() => { for (let index = 0; index < 384; index++) {