add editor wiring and styling updates

This commit is contained in:
41666 2021-07-05 12:04:46 -05:00
parent 1c38ab145c
commit 8cf3b2c78d
20 changed files with 434 additions and 53 deletions

View file

@ -1,13 +1,6 @@
import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
import styled, { css } from 'styled-components';
export const HalfsiesContainer = styled.div`
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
`;
export const HalfsiesItem = styled.div`
box-sizing: border-box;
flex: 1 1 100%;
@ -15,3 +8,16 @@ export const HalfsiesItem = styled.div`
flex: 1 2 50%;
`)}
`;
export const HalfsiesContainer = styled.div<{ center?: boolean }>`
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
${({ center }) =>
center &&
css`
align-content: center;
`}
`;

View file

@ -22,8 +22,9 @@ export const TabTitleRow = styled.div`
position: fixed;
${onSmallScreen(
css`
width: fit-content;
position: unset;
max-width: 100vw;
max-width: 98vw;
`
)}
`;

View file

@ -10,6 +10,7 @@ import {
export type TabViewProps = {
children: React.ReactNode[];
initialTab?: number;
masthead?: React.ReactNode;
};
type TabProps = {
@ -39,6 +40,7 @@ export const TabView = (props: TabViewProps) => {
return (
<TabViewStyled>
<TabTitleRow>
{props.masthead && props.masthead}
<QuickNav
currentNavItem={tabNames[currentTab]}
navItems={tabNames}