diff options
Diffstat (limited to '')
-rw-r--r-- | html/src/components/modal/index.tsx | 27 | ||||
-rw-r--r-- | html/src/components/modal/modal.scss | 81 |
2 files changed, 108 insertions, 0 deletions
diff --git a/html/src/components/modal/index.tsx b/html/src/components/modal/index.tsx new file mode 100644 index 0000000..558a218 --- /dev/null +++ b/html/src/components/modal/index.tsx @@ -0,0 +1,27 @@ +import { h, Component, ComponentChildren } from 'preact'; + +import './modal.scss'; + +interface Props { + show: boolean; + children: ComponentChildren; +} + +export class Modal extends Component<Props> { + constructor(props: Props) { + super(props); + } + + render({ show, children }: Props) { + return ( + show && ( + <div className="modal"> + <div className="modal-background" /> + <div className="modal-content"> + <div className="box">{children}</div> + </div> + </div> + ) + ); + } +} diff --git a/html/src/components/modal/modal.scss b/html/src/components/modal/modal.scss new file mode 100644 index 0000000..a99873b --- /dev/null +++ b/html/src/components/modal/modal.scss @@ -0,0 +1,81 @@ +.modal { + bottom: 0; + left: 0; + right: 0; + top: 0; + align-items: center; + display: flex; + overflow: hidden; + position: fixed; + z-index: 40; +} + +.modal-background { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + background-color: #4a4a4acc; +} + +.modal-content { + margin: 0 20px; + max-height: calc(100vh - 160px); + overflow: auto; + position: relative; + width: 100%; + + .box { + background-color: #fff; + color: #4a4a4a; + display: block; + padding: 1.25rem; + } + + header { + font-weight: bold; + text-align: center; + padding-bottom: 10px; + margin-bottom: 10px; + border-bottom: 1px solid #ddd; + } + + .file-input { + height: .01em; + left: 0; + outline: none; + position: absolute; + top: 0; + width: .01em; + } + + .file-cta { + cursor: pointer; + background-color: #f5f5f5; + color: #6200ee; + outline: none; + align-items: center; + box-shadow: none; + display: inline-flex; + height: 2.25em; + justify-content: flex-start; + line-height: 1.5; + position: relative; + vertical-align: top; + border-color: #dbdbdb; + border-radius: 3px; + font-size: 1em; + font-weight: 500; + padding: calc(.375em - 1px) 1em; + white-space: nowrap; + } +} + +@media print, screen and (min-width: 769px) { + .modal-content { + margin: 0 auto; + max-height: calc(100vh - 40px); + width: 640px; + } +} |