|
- import { css } from '@tesseract-design/goofy-goober';
- import {LayoutArgs} from '../common';
-
- export const ContentBase = () => css.cx(
- css`
- box-sizing: border-box;
- padding-bottom: var(--size-menu, 4rem);
- `,
- css.media('(min-width: 1080px)')(
- css`
- padding-left: calc(50% - var(--base-width) * 0.5);
- padding-bottom: 0;
- `,
- ),
- )
-
- export const SidebarBase = () => css.cx(
- css`
- box-sizing: border-box;
- overflow: hidden;
- display: contents;
- left: calc(var(--base-width) * -1);
- `,
- css.media('(min-width: 1080px)')(
- css`
- position: fixed;
- top: 0;
- left: 0;
- width: calc(50% - var(--base-width) * 0.5);
- height: 100%;
- display: block;
- `,
- ),
- )
-
- export const SidebarMain = ({
- mainSidebarOpen,
- }: LayoutArgs) => css.cx(
- css`
- box-sizing: border-box;
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- padding-top: inherit;
- padding-bottom: var(--size-menu, 4rem);
- z-index: 2;
- background-color: var(--color-background, white);
- > * {
- display: block;
- width: 100%;
- height: 100%;
- background-color: var(--color-background, white);
- }
- `,
- css.dynamic({
- right: mainSidebarOpen ? 0 : '100%',
- }),
- css.media('(min-width: 1080px)')(
- css`
- position: absolute;
- right: 0;
- width: calc(var(--base-width) - var(--size-menu, 4rem));
- margin-left: 0;
- padding-bottom: 0;
- `,
- ),
- )
-
- export const SidebarMainOverflow = () => css.cx(
- css`
- width: 100%;
- height: 100%;
- overflow: auto; /* overflow: overlay */
- scrollbar-width: none;
- position: relative;
- z-index: 1;
- ::-webkit-scrollbar {
- display: none;
- }
- `
- )
-
- export const SidebarMenu = () => css.cx(
- css`
- box-sizing: border-box;
- overflow: auto; /* overflow: overlay */
- scrollbar-width: none;
- ::-webkit-scrollbar {
- display: none;
- }
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- height: var(--size-menu, 4rem);
- z-index: 1;
- background-color: var(--color-background, white);
- > * {
- display: block;
- width: 100%;
- height: 100%;
- background-color: var(--color-background, white);
- }
- `,
- css.media('(min-width: 1080px)')(
- css`
- top: 0;
- margin-left: auto;
- position: absolute;
- height: 100%;
- padding-top: inherit;
- overflow: auto;
- z-index: auto;
- `,
- ),
- );
-
- export const SidebarMenuSize = () => css.cx(
- css`
- display: flex;
- width: 100%;
- height: 100%;
- max-width: calc(var(--base-width) * 2);
- margin: 0 auto;
- position: relative;
- z-index: 1;
- `,
- css.media('(min-width: 1080px)')(
- css`
- max-width: none;
- margin-right: 0;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-end;
- `,
- ),
- );
-
- export const SidebarMenuGroup = () => css.cx(
- css`
- display: contents;
- `,
- css.media('(min-width: 1080px)')(
- css`
- width: 100%;
- display: block;
- `,
- ),
- );
-
- export const MoreItems = ({
- auxiliaryItemsShown,
- }: LayoutArgs) => css.cx(
- css`
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- padding-top: var(--height-topbar, 4rem);
- padding-bottom: var(--size-menu, 4rem);
- z-index: -1;
- box-sizing: border-box;
- `,
- css.dynamic({
- left: auxiliaryItemsShown ? 0 : '-100%',
- }),
- css.media('(min-width: 1080px)')(
- css`
- display: contents;
- `,
- ),
- );
-
- export const MoreItemsScroll = () => css.cx(
- css`
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: var(--color-background, white);
- `,
- css.media('(min-width: 1080px)')(
- css`
- display: contents;
- `,
- ),
- );
-
- export const MorePrimarySidebarMenuGroup = () => css.cx(
- css`
- display: contents;
- `,
- css.media('(min-width: 1080px)')(
- css`
- width: 100%;
- display: block;
- flex: auto;
- `,
- ),
- );
-
- export const MoreSecondarySidebarMenuGroup = () => css.cx(
- css`
- display: contents;
- `,
- css.media('(min-width: 1080px)')(
- css`
- width: 100%;
- display: block;
- order: 4;
- `,
- ),
- );
-
- export const SidebarMenuItem = () => css.cx(
- css`
- width: 0;
- flex: auto;
- height: var(--size-menu, 4rem);
- > * {
- height: 100%;
- display: flex;
- align-items: center;
- text-decoration: none;
- width: 100%;
- }
- `,
- css.media('(min-width: 1080px)')(
- css`
- width: auto !important;
- flex: 0 1 auto;
- > * {
- height: auto;
- }
- `
- ),
- );
-
- export const MoreSidebarMenuItem = () => css.cx(
- css`
- height: var(--size-menu, 4rem);
- display: block;
- > * {
- height: 100%;
- display: flex;
- align-items: center;
- text-decoration: none;
- width: 100%;
- }
- `,
- css.media('(min-width: 1080px)')(
- css`
- width: auto !important;
- flex: 0 1 auto;
- `,
- ),
- );
-
- export const MoreToggleSidebarMenuItem = () => css.cx(
- css`
- width: 0;
- flex: auto;
- height: var(--size-menu, 4rem);
- > * {
- height: 100%;
- display: flex;
- align-items: center;
- text-decoration: none;
- width: 100%;
- }
- `,
- css.media('(min-width: 1080px)')(
- css`
- display: none;
- `,
- ),
- );
-
- export const SidebarMenuItemIcon = () => css.cx(
- css`
- display: block;
- `,
- css.media('(min-width: 1080px)')(
- css`
- width: var(--size-menu, 4rem);
- height: var(--size-menu, 4rem);
- display: grid;
- place-content: center;
- `,
- ),
- );
-
- export const MoreSidebarMenuItemIcon = () => css.cx(
- css`
- margin-right: 1rem;
- display: block;
- `,
- css.media('(min-width: 1080px)')(
- css`
- width: var(--size-menu, 4rem);
- height: var(--size-menu, 4rem);
- display: grid;
- place-content: center;
- margin-right: 0;
- `,
- ),
- );
-
- export const SidebarMenuContainer = () => css.cx(
- css`
- box-sizing: border-box;
- display: grid;
- place-content: center;
- width: 100%;
- text-align: center;
- `,
- css.media('(min-width: 1080px)')(
- css`
- display: flex;
- justify-content: flex-start;
- align-items: center;
- margin-left: auto;
- padding-right: 1rem;
- text-align: left;
- box-sizing: border-box;
- width: var(--base-width);
- `,
- ),
- )
-
- export const MoreSidebarMenuContainer = () => css.cx(
- css`
- display: flex;
- justify-content: flex-start;
- align-items: center;
- width: calc(var(--base-width) * 2);
- margin: 0 auto;
- padding: 0 1rem;
- text-align: left;
- box-sizing: border-box;
- `,
- css.media('(min-width: 1080px)')(
- css`
- margin-right: 0;
- width: var(--base-width);
- padding-left: 0;
- `,
- ),
- );
-
- export const ContentContainer = () => css.cx(
- css`
- padding: 0 1rem;
- box-sizing: border-box;
- width: 100%;
- max-width: calc(var(--base-width) * 2);
- margin-right: auto;
- margin-left: auto;
- `,
- css.media('(min-width: 1080px)')(
- css`
- margin-left: 0;
- `,
- ),
- );
-
- 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`
- max-width: none;
- `,
- ),
- );
|