|
- import { css } from '@tesseract-design/goofy-goober';
-
- export const ContentBase = () => css.cx(
- css`
- box-sizing: border-box;
- `,
- css.media('(min-width: 1080px)')(
- css`
- padding-right: calc(50% - (var(--base-width) * 0.5));
- `
- ),
- );
-
- export const SidebarBase = () => css.cx(
- css`
- box-sizing: border-box;
- background-color: var(--color-background, white);
- `,
- // prevent collapse of margin
- css`
- &::after {
- content: '';
- display: block;
- padding-bottom: 1px;
- margin-top: -1px;
- box-sizing: border-box;
- }
- & > * {
- display: block;
- width: 100%;
- height: 100%;
- }
- `,
- css.media('(min-width: 1080px)')(
- css`
- position: absolute;
- top: 0;
- right: 0;
- width: calc(50% - var(--base-width) * 0.5);
- height: 100%;
- `,
- ),
- )
-
- export const SidebarMainContent = () => css.cx(
- css`
- position: relative;
- z-index: 1;
- `
- )
-
- export const SidebarMainContainer = () => css.cx(
- css`
- padding: 0 1rem;
- box-sizing: border-box;
- width: 100%;
- max-width: calc(var(--base-width) * 2);
- margin: 0 auto;
- `,
- css.media('(min-width: 1080px)')(
- css`
- margin-left: 0;
- width: var(--base-width);
- `,
- ),
- )
-
- export const ContentContainer = () => css.cx(
- css`
- padding: 0 1rem;
- box-sizing: border-box;
- width: 100%;
- max-width: calc(var(--base-width) * 2);
- margin: 0 auto;
- `,
- css.media('(min-width: 1080px)')(
- css`
- margin-right: 0;
- `,
- ),
- )
-
- // TODO port from original viewfinder package
|