89 lines
1.4 KiB
TypeScript
89 lines
1.4 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Modal } from '@wordpress/components';
|
|
import styled from '@emotion/styled';
|
|
|
|
const StyledModal = styled( Modal )`
|
|
max-width: 600px;
|
|
border-radius: 4px;
|
|
@media ( min-width: 600px ) {
|
|
min-width: 560px;
|
|
}
|
|
|
|
.components-modal__header {
|
|
padding: 12px 24px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
position: relative;
|
|
height: auto;
|
|
width: auto;
|
|
margin: 0 -24px 16px;
|
|
|
|
@media ( max-width: 599px ) {
|
|
button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.components-modal__content {
|
|
margin: 0;
|
|
padding: 0 24px;
|
|
|
|
@media ( max-width: 599px ) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
hr:last-of-type {
|
|
margin-top: auto;
|
|
}
|
|
}
|
|
|
|
.components-base-control {
|
|
label {
|
|
margin-top: 8px;
|
|
text-transform: none !important;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const StyledFooter = styled.div`
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
border-top: 1px solid #e0e0e0;
|
|
margin: 24px -24px 0;
|
|
padding: 24px;
|
|
|
|
> * {
|
|
&:not( :first-of-type ) {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.button-link-delete {
|
|
margin-right: auto;
|
|
color: #d63638;
|
|
}
|
|
`;
|
|
|
|
const SettingsModal = ( {
|
|
children,
|
|
actions,
|
|
title,
|
|
onRequestClose,
|
|
...props
|
|
}: {
|
|
children: React.ReactNode;
|
|
actions: React.ReactNode;
|
|
title: string;
|
|
onRequestClose: () => void;
|
|
} ): JSX.Element => (
|
|
<StyledModal title={ title } onRequestClose={ onRequestClose } { ...props }>
|
|
{ children }
|
|
<StyledFooter>{ actions }</StyledFooter>
|
|
</StyledModal>
|
|
);
|
|
|
|
export default SettingsModal;
|