v3/packages/design-system/molecules/user-popover/UserPopover.styled.ts

33 lines
735 B
TypeScript

import { palette } from '@roleypoly/design-system/atoms/colors';
import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled from 'styled-components';
export const Base = styled.div`
text-align: right;
display: flex;
flex-direction: column;
user-select: none;
`;
export const NavAction = styled.div`
height: 2.25em;
display: flex;
align-items: center;
justify-content: flex-end;
transition: color ${transitions.actionable}s ease-in-out;
color: ${palette.taupe500};
box-sizing: border-box;
&:hover {
cursor: pointer;
color: ${palette.taupe600};
}
svg {
font-size: 120%;
box-sizing: content-box;
padding: 5px 8px;
position: relative;
top: 0.1em;
}
`;