@xyd-js/components 0.1.0-xyd.11 → 0.1.0-xyd.13

package/src/layouts/LayoutPrimary/LayoutPrimary.styles.tsx

@@ -1,341 +1,305 @@
 import {css} from "@linaria/core";
 
-const globalPageGutter = '8px';
-export const globalHeaderHeight = '50px';
-const globalHeaderWarningHeight = "0px";
-const contentTopSpace = "12px";
-
-const globalHeaderHeightWithSub = '94px';
-
-const cubicMove = "cubic-bezier(.65, 0, .35, 1)";
-const sidebarWidth = "250px";
-
+// TODO: in the futre better media queries
 const tabletBreakpoint = '1024px';
 const mobileBreakpoint = '768px';
 
-// TODO: better solution - design tokens
-export const globals = css`
-    :global() {
-        :root {
-            --xyd-navbar-height: ${globalHeaderHeight};
-            --xyd-global-page-gutter: ${globalPageGutter};
-            --xyd-sidebar-width: ${sidebarWidth};
-        }
-    }
-`;
-
 export const LayoutPrimaryHost = css`
-    width: 100%;
-    overflow-x: hidden;
-    background: #fff;
-`;
-
-export const LayoutPrimaryHeader = css`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: fixed;
-    top: ${globalHeaderWarningHeight};
-    right: ${globalPageGutter};
-    left: ${globalPageGutter};
-    height: ${globalHeaderHeight};
-    z-index: 20;
-    background: #fff;
-
-    @media (max-width: 768px) {
-        padding: 0;
-    }
-`;
-
-export const LayoutPrimaryHeaderContent = css`
-    display: flex;
-    align-items: center;
-    width: 100%;
-`;
-
-export const LayoutPrimaryHeaderSub = css`
-    flex-direction: column;
-    height: ${globalHeaderHeightWithSub};
-    transition: transform 200ms;
-`;
-
-export const LayoutPrimaryHeaderHideMain = css`
-    transform: translateY(calc(-${globalHeaderHeight} + 3px));
-`;
-
-export const LayoutPrimaryHamburgerButton = css`
-    display: none;
-
-    @media (max-width: 768px) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        border: none;
-        background: none;
-        cursor: pointer;
-        padding: 0;
-    }
-`;
+    @layer defaults {
+        width: 100%;
+        overflow-x: hidden;
+        background: var(--xyd-page-body-bgcolor);
+        display: contents;
+
+        > [part="header"] {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            right: var(--xyd-page-gutter);
+            left: var(--xyd-page-gutter);
+            height: var(--xyd-nav-height);
+            background: var(--xyd-layout-header-bgcolor);
+            z-index: 3;
+
+            @media (max-width: ${mobileBreakpoint}) {
+                padding: 0;
+            }
+        }
 
-export const LayoutPrimaryHamburgerIcon = css`
-    width: 24px;
-    height: 24px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-`;
+        &[data-hide-subheader="true"] > [part="header"] {
+            transform: translateY(calc(-1 * var(--xyd-nav-height)));
+        }
+        &[data-hide-subheader="true"] > [part="header"] > [part="header-content"] {
+            visibility: hidden;
+        }
 
-export const LayoutPrimaryHamburgerLine = css`
-    width: 100%;
-    height: 2px;
-    background: #000;
-    transition: transform 0.3s ${cubicMove};
-`;
+        &[data-subheader="true"] > [part="header"] {
+            flex-direction: column;
+            height: var(--xyd-header-total-height);
+            transition: transform 200ms;
+        }
 
-export const LayoutPrimaryHamburgerLineOpen = css`
-    &:first-child {
-        transform: translateY(11px) rotate(45deg);
-    }
-    &:nth-child(2) {
-        opacity: 0;
-    }
-    &:last-child {
-        transform: translateY(-11px) rotate(-45deg);
-    }
-`;
+        [part="header-content"] {
+            display: flex;
+            align-items: center;
+            width: 100%;
+        }
 
-export const LayoutPrimaryMain = css`
-    position: fixed;
-    display: flex;
-    top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: ${globalPageGutter};
-    overflow: hidden;
-
-    @media (max-width: ${tabletBreakpoint}) {
-        padding-top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight} + ${globalPageGutter});
-    }
-`;
+        [part="hamburger-button"] {
+            display: none;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 40px;
+                height: 40px;
+                border: none;
+                background: none;
+                cursor: pointer;
+                padding: 0;
+            }
+        }
 
-export const LayoutPrimaryMainSub = css`
-    top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
+        [part="hamburger-icon"] {
+            width: 24px;
+            height: 24px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
 
-    @media (max-width: ${tabletBreakpoint}) {
-        padding-top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight} + ${globalPageGutter});
-    }
-`;
+        [part="hamburger-line"] {
+            width: 100%;
+            height: 2px;
+            background: var(--xyd-page-body-color);
+            transition: transform 0.3s var(--xyd-cubic-bezier);
+
+            &[data-active="true"] {
+                &:first-child {
+                    transform: translateY(11px) rotate(45deg);
+                }
+
+                &:nth-child(2) {
+                    opacity: 0;
+                }
+
+                &:last-child {
+                    transform: translateY(-11px) rotate(-45deg);
+                }
+            }
+        }
 
-export const LayoutPrimaryStaticSidebar = css`
-    flex: none;
-    width: ${sidebarWidth};
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    height: 100%;
-    
-    @media (max-width: ${tabletBreakpoint}) {
-        display: none;
-    }
-`;
+        [part="main"] {
+            position: relative;
+            display: flex;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: var(--xyd-page-gutter);
+            overflow: visible;
+        }
 
-export const LayoutPrimaryMobileSidebar = css`
-    display: none;
-
-    @media (max-width: ${tabletBreakpoint}) {
-        display: flex;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: ${sidebarWidth};
-        background: #fff;
-        flex-direction: column;
-        z-index: 50;
-        transform: translateX(-100%);
-        transition: transform .3s ${cubicMove};
-        box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
-    }
-`;
+        [part="sidebar"] {
+            flex: none;
+            width: var(--xyd-sidebar-width);
+            background: var(--xyd-layout-sidebar-bgcolor);
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            height: 100%;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                display: none;
+            }
+        }
 
-export const LayoutPrimaryMobileSidebarOpen = css`
-    @media (max-width: ${tabletBreakpoint}) {
-        transform: translateX(0);
-    }
-`;
+        [part="mobile-sidebar"] {
+            display: none;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                display: flex;
+                position: fixed;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                width: var(--xyd-sidebar-width--mobile);
+                background: var(--xyd-layout-sidebar-bgcolor);
+                flex-direction: column;
+                z-index: 50;
+                transform: translateX(-100%);
+                transition: transform .3s var(--xyd-cubic-bezier);
+                box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
+            }
+
+            &[data-active="true"] {
+                @media (max-width: ${tabletBreakpoint}) {
+                    transform: translateX(0);
+                }
+            }
+        }
 
-export const LayoutPrimarySidebarContent = css`
-    flex: 1;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    height: 100%;
-`;
+        [part="mobile-sidebar-aside"] {
+            flex: 1;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+            height: 100%;
+        }
 
-export const LayoutPrimaryCloseButton = css`
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: none;
-    padding: 0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
+        [part="mobile-sidebar-close-button"] {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            width: 32px;
+            height: 32px;
+            border: none;
+            background: none;
+            padding: 0;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
 
-export const LayoutPrimarySearchInput = css`
-    width: 100%;
-    height: 40px;
-    padding: 0 12px;
-    border: 1px solid #eaeaea;
-    border-radius: 6px;
-    font-size: 14px;
-    outline: none;
-    transition: border-color 0.2s;
-
-    &:focus {
-        border-color: #666;
-    }
-`;
+        [part="mobile-sidebar-close-icon"] {
+            width: 20px;
+            height: 20px;
+            position: relative;
+
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 0;
+                width: 100%;
+                height: 2px;
+                background: var(--xyd-page-body-color--secondary);
+                transform-origin: center;
+            }
+
+            &::before {
+                transform: rotate(45deg);
+            }
+
+            &::after {
+                transform: rotate(-45deg);
+            }
+        }
 
-export const LayoutPrimaryCloseIcon = css`
-    width: 20px;
-    height: 20px;
-    position: relative;
-
-    &::before,
-    &::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background: #666;
-        transform-origin: center;
-    }
+        [part="mobile-overlay"] {
+            display: none;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                display: block;
+                position: fixed;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                background: rgba(0, 0, 0, 0.6);
+                transition: opacity .3s;
+                opacity: 0;
+                pointer-events: none;
+                z-index: 40;
+                height: 100vh;
+            }
+
+            &[data-active="true"] {
+                opacity: 1;
+                pointer-events: auto;
+            }
+        }
 
-    &::before {
-        transform: rotate(45deg);
-    }
+        [part="page"] {
+            position: relative;
+            overflow: visible;
+            flex: 1;
+            background: var(--xyd-page-body-bgcolor);
+            min-width: 0;
+            height: 100%;
+        }
 
-    &::after {
-        transform: rotate(-45deg);
-    }
-`;
+        [part="page-scroll"] {
+            overflow-y: visible;
+            height: 100%;
+            -webkit-overflow-scrolling: touch;
+            padding: 0 48px;
 
-export const LayoutPrimaryOverlay = css`
-    display: none;
-
-    @media (max-width: ${tabletBreakpoint}) {
-        display: block;
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: rgba(0, 0, 0, 0.6);
-        transition: opacity .3s;
-        opacity: 0;
-        pointer-events: none;
-        z-index: 40;
-        height: 100vh;
-    }
-`;
+            @media (max-width: ${tabletBreakpoint}) {
+                padding: 0 32px;
+            }
 
-export const LayoutPrimaryOverlayVisible = css`
-    opacity: 1;
-    pointer-events: auto;
-`;
+            @media (max-width: ${mobileBreakpoint}) {
+                padding: 0 24px;
+            }
+        }
 
-export const LayoutPrimaryPageHost = css`
-    position: relative;
-    flex: 1;
-    background: #fff;
-    overflow: hidden;
-    min-width: 0;
-    height: 100%;
-`;
+        [part="page-container"] {
+            max-width: var(--xyd-layout-width-medium);
+            margin: 0 auto;
+            padding: 0 var(--xyd-page-gutter);
+            height: 100%;
+        }
 
-export const LayoutPrimaryPageScroll = css`
-    overflow-y: auto;
-    height: 100%;
-    -webkit-overflow-scrolling: touch;
-    padding: 0 48px;
+        &[data-layout="wide"] [part="page-container"] {
+            max-width: var(--xyd-layout-width-large);
+        }
 
-    @media (max-width: ${tabletBreakpoint}) {
-        padding: 0 32px;
-    }
+        [part="page-article-container"] {
+            display: flex;
+            gap: 48px;
+            padding: 48px 0;
+            min-height: 100%;
 
-    @media (max-width: ${mobileBreakpoint}) {
-        padding: 0 24px;
-    }
-`;
+            @media (max-width: ${tabletBreakpoint}) {
+                gap: 32px;
+            }
 
-export const LayoutPrimaryPageContainer = css`
-    max-width: 1000px;
-    margin: 0 auto;
-    padding: 0 ${globalPageGutter};
-`;
+            @media (max-width: ${mobileBreakpoint}) {
+                flex-direction: column;
+                padding: 24px 0;
+                gap: 24px;
+            }
 
-export const LayoutPrimaryPageContainerLarge = css`
-    max-width: 1200px;
-`;
+        }
 
-export const LayoutPrimaryPageArticleContainer = css`
-    display: flex;
-    gap: 48px;
-    padding: 48px 0;
-    min-height: 100%;
+        [part="page-article"] {
+            flex: 1;
+            min-width: 0;
+        }
 
-    @media (max-width: ${tabletBreakpoint}) {
-        gap: 32px;
-    }
+        [part="page-article-content"] {
+            width: 100%;
+        }
 
-    @media (max-width: ${mobileBreakpoint}) {
-        flex-direction: column;
-        padding: 24px 0;
-        gap: 24px;
+        [part="page-article-nav"] {
+            display: flex;
+            flex: none;
+            flex-direction: column;
+            gap: 16px;
+            width: var(--xyd-layout-nav-width-medium);
+            position: sticky;
+            top: var(--xyd-header-total-height);
+            height: fit-content;
+            max-height: 100vh;
+            overflow-y: auto;
+            padding-right: 24px;
+            padding-top: var(--xyd-content-space);
+
+            @media (max-width: ${tabletBreakpoint}) {
+                width: var(--xyd-layout-nav-width-small);
+                padding-right: 16px;
+            }
+
+            @media (max-width: ${mobileBreakpoint}) {
+                display: none;
+            }
+        }
     }
 `;
 
-export const LayoutPrimaryArticleHost = css`
-    flex: 1;
-    min-width: 0;
-`;
-
-export const LayoutPrimaryArticleContent = css`
-    width: 100%;
-`;
-
-export const LayoutPrimaryArticleNav = css`
-    flex: none;
-    width: 256px;
-    position: sticky;
-    top: 0;
-    height: fit-content;
-    max-height: 100vh;
-    overflow-y: auto;
-    padding-right: 24px;
-    padding-top: ${contentTopSpace};
-
-    @media (max-width: ${tabletBreakpoint}) {
-        width: 200px;
-        padding-right: 16px;
-    }
-
-    @media (max-width: ${mobileBreakpoint}) {
-        width: 100%;
-        position: static;
-        max-height: none;
-        padding-right: 0;
-    }
-`;