mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-21 09:38:01 +02:00
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { ThemeAppearance } from '@joplin/lib/themes/type';
|
|
import styled from 'styled-components';
|
|
|
|
// Need to use `attrs` otherwise styled-components creates many instances of the
|
|
// style when the component is resized.
|
|
// https://github.com/styled-components/styled-components/issues/1212
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
|
|
export const StyledWrapperRoot: any = styled.div.attrs((props: any) => ({
|
|
style: {
|
|
width: props.size.width,
|
|
height: props.size.height,
|
|
},
|
|
}))`
|
|
position: relative;
|
|
display: flex;
|
|
`;
|
|
|
|
export const StyledMoveOverlay = styled.div`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 100;
|
|
background-color: ${props => props.theme.appearance === ThemeAppearance.Light ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)'};
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
`;
|
|
|
|
export const MoveModeRootWrapper = styled.div`
|
|
position:relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`;
|
|
|
|
export const MoveModeRootMessage = styled.div`
|
|
position:absolute;
|
|
bottom: 10px;
|
|
z-index:200;
|
|
background-color: ${props => props.theme.backgroundColor};
|
|
padding: 10px;
|
|
border-radius: 5;
|
|
`;
|