mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-18 02:19:09 +00:00
add editor wiring and styling updates
This commit is contained in:
parent
1c38ab145c
commit
8cf3b2c78d
20 changed files with 434 additions and 53 deletions
|
@ -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;
|
||||
`}
|
||||
`;
|
||||
|
|
|
@ -22,8 +22,9 @@ export const TabTitleRow = styled.div`
|
|||
position: fixed;
|
||||
${onSmallScreen(
|
||||
css`
|
||||
width: fit-content;
|
||||
position: unset;
|
||||
max-width: 100vw;
|
||||
max-width: 98vw;
|
||||
`
|
||||
)}
|
||||
`;
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue