roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-17 01:59:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency

Browse source
This commit is contained in:
41666 2021-03-13 22:49:01 -05:00
parent a931f8c69c
commit 9b71a24e2d
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

134
packages/design-system/atoms/popover/Popover.styled.ts
View file

@ -4,87 +4,87 @@ import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled, { css } from 'styled-components';
type PopoverStyledProps = {
active: boolean;
preferredWidth?: number;
active: boolean;
preferredWidth?: number;
};
export const PopoverBase = styled.div<PopoverStyledProps>`
box-sizing: border-box;
position: absolute;
background-color: ${palette.taupe100};
padding: 5px;
border: 2px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
z-index: 10;
transition: opacity ${transitions.out2in}s ease-in,
transform ${transitions.out2in}s ease-in;
min-width: ${(props) => props.preferredWidth || 320}px;
max-width: 100vw;
${(props) =>
!props.active &&
css`
transform: translateY(-2vh);
opacity: 0;
pointer-events: none;
`}
${onSmallScreen(
css`
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
min-width: unset;
width: 100vw;
height: 100vh;
`
)};
box-sizing: border-box;
position: absolute;
background-color: ${palette.taupe100};
padding: 5px;
border: 2px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
z-index: 10;
transition: opacity ${transitions.out2in}s ease-in,
transform ${transitions.out2in}s ease-in;
min-width: ${(props) => props.preferredWidth || 320}px;
max-width: 100vw;
${(props) =>
!props.active &&
css`
transform: translateY(-2vh);
opacity: 0;
pointer-events: none;
`}
${onSmallScreen(
css`
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
min-width: unset;
width: 100vw;
height: 100vh;
`
)};
`;
export const DefocusHandler = styled.div<PopoverStyledProps>`
background-color: rgba(0, 0, 0, 0.01);
position: fixed;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
${(props) =>
!props.active &&
css`
display: none;
pointer-events: none;
`}
background-color: rgba(0, 0, 0, 0.01);
position: fixed;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
${(props) =>
!props.active &&
css`
display: none;
pointer-events: none;
`}
`;
export const PopoverHead = styled.div`
display: flex;
align-items: center;
display: flex;
align-items: center;
`;
export const PopoverHeadCloser = styled.div`
flex: 0;
font-size: 2em;
cursor: pointer;
margin-right: 10px;
border-radius: 2em;
min-width: 1.4em;
height: 1.4em;
display: flex;
align-items: center;
justify-content: center;
${onTablet(
css`
display: none;
`
)}
flex: 0;
font-size: 2em;
cursor: pointer;
margin-right: 10px;
border-radius: 2em;
min-width: 1.4em;
height: 1.4em;
display: flex;
align-items: center;
justify-content: center;
${onTablet(
css`
display: none;
`
)}
&:hover {
background: rgba(0, 0, 0, 0.1);
}
&:hover {
background: rgba(0, 0, 0, 0.1);
}
`;
export const PopoverContent = styled.div`
padding: 5px;
overflow-y: hidden;
padding: 5px;
overflow-y: hidden;
`;