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

use css media queries rather than JS media queries

Browse source
This commit is contained in:
41666 2021-04-03 19:06:36 -04:00
parent 600aa3e075
commit 335a444295
4 changed files with 33 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

21
packages/design-system/atoms/quick-nav/QuickNav.styled.ts
View file

@ -1,6 +1,22 @@
import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
import { palette } from '@roleypoly/design-system/atoms/colors';
import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled, { css } from 'styled-components';
import { palette } from '../colors';
import { transitions } from '../timings';
export const HideIfSmall = styled.div`
display: initial;
${onSmallScreen(css`
display: none;
`)}
`;
export const HideIfNotSmall = styled.div`
display: none;
${onSmallScreen(css`
display: initial;
`)}
`;
export const NavItem = styled.div<{ selected: boolean }>`
padding: 7px;
@ -35,6 +51,7 @@ export const DropdownNavOpener = styled.div`
cursor: pointer;
border-radius: 2px;
transition: background-color ${transitions.actionable}s ease-in-out;
width: 98vw;
&:hover {
background-color: ${palette.taupe300};