roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-05-07 01:02:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(design-system): redesign tab-view around quick nav (#194)

Browse source 
* feat(design-system): redesign tab-view around quick nav

* fix tests
This commit is contained in:
41666 2021-03-23 00:00:34 -04:00 • committed by GitHub
parent a5f819bc3e
commit 57d83699d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 272 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

89
packages/design-system/atoms/tab-view/TabView.styled.ts
View file

@ -1,42 +1,69 @@
import { onTablet } 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 { onSmallScreen } from '../breakpoints';
import { palette } from '../colors';
import { transitions } from '../timings';
import { text500 } from '../typography';
export const TabViewStyled = styled.div``;
export const TabViewStyled = styled.div`
display: flex;
flex-direction: row;
overflow: hidden;
${onSmallScreen(
css`
flex-direction: column;
`
)}
`;
export const TabTitleRow = styled.div`
display: flex;
border-bottom: 1px solid ${palette.taupe100};
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
flex: 1;
width: 23vw;
position: fixed;
${onSmallScreen(
css`
position: unset;
max-width: 100vw;
`
)}
`;
export const TabTitle = styled.div<{ selected: boolean }>`
flex: 1;
text-align: center;
padding: 0.7em 1em;
border-bottom: 3px solid transparent;
transition: border-color ${transitions.in2out}s ease-in-out,
color ${transitions.in2out}s ease-in-out;
padding: 7px;
cursor: pointer;
color: ${palette.taupe500};
transition: background-color ${transitions.actionable}s ease-in-out;
border-radius: 2px;
margin-bottom: 5px;
&:hover {
background-color: ${palette.taupe400};
}
${(props) =>
props.selected
? css`
color: unset;
border-bottom-color: ${palette.taupe500};
`
: css`
&:hover {
border-bottom-color: ${palette.taupe300};
color: unset;
}
`};
${onTablet(css`
padding: 0.45em 1em;
`)}
props.selected &&
css`
background-color: ${palette.taupe300};
`}
`;
export const TabContent = styled.div``;
export const TabContent = styled.div`
padding-left: 1em;
margin-left: 23vw;
flex: 1;
${onSmallScreen(
css`
padding-left: 0;
margin-left: 0;
position: unset;
max-width: 100vw;
`
)}
`;
export const TabContentTitle = styled.div`
${text500}
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 10px;
`;