|
- import { css } from '@tesseract-design/goofy-goober';
- import {LayoutArgs, Span} from '../common';
-
- export const Base = () => css.cx(
- css`
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: var(--height-topbar, 4rem);
- z-index: 3;
- & > * {
- display: block;
- width: 100%;
- height: 100%;
- background-color: var(--color-background, white);
- }
- & ~ * {
- padding-top: var(--height-topbar, 4rem);
- }
- ~ main ~ * {
- padding-top: 0;
- }
- `,
- css.media('(min-width: 1080px)')(
- css`
- ~ main ~ * {
- padding-top: var(--height-topbar, 4rem);
- }
- `
- )
- );
-
- export const Container = ({
- span,
- }: LayoutArgs) => css.cx(
- css`
- padding: 0 1rem;
- box-sizing: border-box;
- margin: 0 auto;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- position: relative;
- z-index: 1;
- `,
- css.if(span === Span.NARROW)(
- css`
- max-width: var(--base-width);
- `
- ),
- css.if(span === Span.NORMAL)(
- css`
- max-width: calc(var(--base-width) * 2);
- `
- ),
- css.if(span === Span.WIDE)(
- css.media('(min-width: 1080px)')(
- css`
- max-width: calc(var(--base-width) * 3);
- `
- )
- ),
- );
-
- export const CenterContainer = () => css.cx(
- css`
- flex: auto;
- padding: 0 1rem;
- box-sizing: border-box;
- `,
- css.nest(':first-child')(
- css`
- padding-left: 0;
- `
- )
- )
-
- export const ActionContainer = () => css.cx(
- css`
- display: flex;
- align-items: center;
- justify-content: flex-end;
- height: 100%;
- white-space: nowrap;
- `,
- css.media('(min-width: 720px)')(
- css`
- min-width: 8rem;
- `
- )
- );
-
- export const LinkContainer = () => css.cx(
- css`
- width: var(--height-topbar, 4rem);
- height: 100%;
- & > * {
- width: 100%;
- height: 100%;
- display: inline-grid;
- place-content: center;
- }
- `
- );
-
- export const MenuLinkContainer = () => css.cx(
- css`
- width: var(--height-topbar, 4rem);
- height: 100%;
- & > * {
- width: 100%;
- height: 100%;
- display: inline-grid;
- place-content: center;
- }
- `,
- css.media('(min-width: 1080px)')(
- css`
- position: absolute;
- left: -999999px;
- `
- )
- );
|