@xyd-js/components 0.1.0-xyd.6 → 0.1.0-xyd.8

package/src/content/Subtitle/Subtitle.tsx

@@ -1,21 +1,12 @@
 import React from "react"
-import {css} from "@linaria/core";
-
-const $subitlte = {
-    host: css`
-        margin-top: -18px;
-        font-size: 18px;
-        color: #7051d4;
-        font-weight: 300;
-    `
-}
+import * as cn from "./Subtitle.styles";
 
 export interface SubtitleProps {
     children: React.ReactNode
 }
 
 export function Subtitle({children}: SubtitleProps) {
-    return <div className={$subitlte.host}>
+    return <div className={cn.Host}>
         {children}
     </div>
 }

package/src/layouts/Layout.styles.tsx

@@ -1,11 +1,11 @@
 import {css} from "@linaria/core";
 
 const globalPageGutter = '8px';
-export const globalHeaderHeight = '46px';
+export const globalHeaderHeight = '40px';
 const globalHeaderWarningHeight = "0px";
 const contentTopSpace = "12px";
 
-const globalHeaderHeightWithSub = '90px';
+const globalHeaderHeightWithSub = '94px';
 
 const cubicMove = "cubic-bezier(.65, 0, .35, 1)";
 const sidebarWidth = "210px";
@@ -20,132 +20,136 @@ export const globals = css`
     }
 `;
 
-export const $layout = {
-    host: css`
-        width: 100%;
-    `,
-    header: css`
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        position: fixed;
-        top: ${globalHeaderWarningHeight};
-        right: ${globalPageGutter};
-        left: ${globalPageGutter};
-
-        height: ${globalHeaderHeight};
-    `,
-    header$$sub: css`
-        flex-direction: column;
-        height: ${globalHeaderHeightWithSub};
-        transition: transform 200ms;
-    `,
-    header$$hideMain: css`
-        transform: translateY(calc(-${globalHeaderHeight} + 3px));
-    `,
-    main: css`
-        position: fixed;
-        top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
-        bottom: ${globalPageGutter};
-        left: ${globalPageGutter};
-        right: ${globalPageGutter};
-    }`,
-    main$$sub: css`
-        top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
-        transition: top 200ms;
-    `,
-    sidebar: css`
-        flex-direction: column;
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        z-index: 101;
-        width: ${sidebarWidth};
-        border: 0;
-        padding: ${contentTopSpace} 0 0;
-        overflow: visible;
-        background: none;
-        border-radius: 0;
-        opacity: 1;
-        visibility: visible;
-        transition: opacity .3s ${cubicMove};
-    `,
-}
-
-export const $page = {
-    host: css`
-        position: absolute;
-        top: ${contentTopSpace};
-        right: 0;
-        bottom: 0;
-        z-index: 201;
-        background: #fff;
-
-        //border-radius: 8px;
-        //border: 1px solid #ececf1;
-
-        overflow: hidden;
-        transition: opacity .3s ${cubicMove};
-
-        left: ${sidebarWidth};
-    `,
-    scroll: css`
-        //position: absolute;
-        //top: 0;
-        //right: 0;
-        //bottom: 0;
-        //left: 0;
-        //overflow: auto;
-
-        overflow: scroll;
-        height: 100%;
-        
-    `,
-    container: css`
-        padding: 0;
-        width: 100%;
-        //position: relative; TODO: unset if during client render?
-        min-height: 100%;
-
-        max-width: 100%;
-        margin: 0 auto;
-        font-size: 15px;
-        line-height: 24px;
-    `,
-    articleContainer: css`
-        width: 980px;
-        padding: 40px 56px;
-        padding-top: 20px;
-        max-width: 100%;
-        margin: 0 auto;
-    `,
-    articleContainer$$fullWidth: css`
-        width: 1200px;
-    `,
-
-}
-
-export const $article = {
-    host: css`
-        display: flex;
-        gap: 30px;
-        width: 100%;
-        align-items: flex-start;;
-    `,
-    content: css`
-        flex: 1 1 0;
-        overflow: hidden;
-    `,
-    nav: css`
-        position: sticky;
-        top: 30px;
-        width: 180px;
-        margin-top: 0;
-        margin-left: 50px;
-        padding-left: 16px;
-        flex: none;
-    `
-}
+export const LayoutHost = css`
+    width: 100%;
+`;
+
+export const LayoutHeader = css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    position: fixed;
+    top: ${globalHeaderWarningHeight};
+    right: ${globalPageGutter};
+    left: ${globalPageGutter};
+
+    height: ${globalHeaderHeight};
+`;
+
+export const LayoutHeaderSub = css`
+    flex-direction: column;
+    height: ${globalHeaderHeightWithSub};
+    transition: transform 200ms;
+`;
+
+export const LayoutHeaderHideMain = css`
+    transform: translateY(calc(-${globalHeaderHeight} + 3px));
+`;
+
+export const LayoutMain = css`
+    position: fixed;
+    top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
+    bottom: ${globalPageGutter};
+    left: ${globalPageGutter};
+    right: ${globalPageGutter};
+}`;
+
+export const LayoutMainSub = css`
+    top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
+    transition: top 200ms;
+`;
+
+export const LayoutSidebar = css`
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 101;
+    width: ${sidebarWidth};
+    border: 0;
+    padding: ${contentTopSpace} 0 0;
+    overflow: visible;
+    background: none;
+    border-radius: 0;
+    opacity: 1;
+    visibility: visible;
+    transition: opacity .3s ${cubicMove};
+`;
+
+export const PageHost = css`
+    position: absolute;
+    top: ${contentTopSpace};
+    right: 0;
+    bottom: 0;
+    z-index: 201;
+    background: #fff;
+
+    //border-radius: 8px;
+    //border: 1px solid #ececf1;
+
+    overflow: hidden;
+    transition: opacity .3s ${cubicMove};
+
+    left: ${sidebarWidth};
+`;
+
+export const PageScroll = css`
+    //position: absolute;
+    //top: 0;
+    //right: 0;
+    //bottom: 0;
+    //left: 0;
+    //overflow: auto;
+
+    overflow: scroll;
+    height: 100%;
+`;
+
+export const PageContainer = css`
+    padding: 0;
+    width: 100%;
+    //position: relative; TODO: unset if during client render?
+    min-height: 100%;
+
+    max-width: 100%;
+    margin: 0 auto;
+    font-size: 15px;
+    line-height: 24px;
+`;
+
+export const PageArticleContainer = css`
+    width: 980px;
+    padding: 40px 56px;
+    padding-top: 20px;
+    max-width: 100%;
+    margin: 0 auto;
+`;
+
+export const PageArticleContainerFullWidth = css`
+    width: 1200px;
+`;
+
+export const ArticleHost = css`
+    display: flex;
+    gap: 30px;
+    width: 100%;
+    align-items: flex-start;;
+`;
+
+export const ArticleContent = css`
+    flex: 1 1 0;
+    overflow: hidden;
+`;
+
+export const ArticleNav = css`
+    position: sticky;
+    top: 30px;
+    width: 180px;
+    margin-top: 0;
+    margin-left: 50px;
+    padding-left: 16px;
+    flex: none;
+`;

package/src/layouts/Layout.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react"
 
-import {$layout, $page, $article, globalHeaderHeight} from "./Layout.styles"
+import * as cn from "./Layout.styles"
 
 export interface LayoutProps {
     header: React.ReactNode;
@@ -21,7 +21,7 @@ export function Layout(props: LayoutProps) {
             return
         }
 
-        const checkpoint = parseInt(globalHeaderHeight, 10) / 2
+        const checkpoint = parseInt(cn.globalHeaderHeight, 10) / 2
         const diff = scrollTop - controlScrollPos
         const reversePosDiff = Math.abs(scrollTop - controlScrollPos)
 
@@ -61,44 +61,42 @@ export function Layout(props: LayoutProps) {
             return
         }
 
-        document.querySelector(`.${$page.scroll}`)?.addEventListener("scroll", onScroll)
-        document.querySelector(`.${$page.scroll}`)?.addEventListener("scrollend", onScrollFinish)
+        document.querySelector(`.${cn.PageScroll}`)?.addEventListener("scroll", onScroll)
+        document.querySelector(`.${cn.PageScroll}`)?.addEventListener("scrollend", onScrollFinish)
 
         return () => {
-            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scroll", onScroll)
-            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scrollend", onScrollFinish)
+            document.querySelector(`.${cn.PageScroll}`)?.removeEventListener("scroll", onScroll)
+            document.querySelector(`.${cn.PageScroll}`)?.removeEventListener("scrollend", onScrollFinish)
         }
     }, []);
 
-    return <div className={$layout.host}>
+    return <div className={cn.LayoutHost}>
         <Layout.Header className={`
-            ${props.subheader && $layout.header$$sub}
-            ${hideMainHeader && $layout.header$$hideMain}
+            ${props.subheader && cn.LayoutHeaderSub}
+            ${hideMainHeader && cn.LayoutHeaderHideMain}
         `}>
             {props.header}
         </Layout.Header>
         <main className={`
-            ${$layout.main}
-            ${!hideMainHeader && props.subheader && $layout.main$$sub}
+            ${cn.LayoutMain}
+            ${!hideMainHeader && props.subheader && cn.LayoutMainSub}
         `}>
-            <aside className={$layout.sidebar}>
+            <aside className={cn.LayoutSidebar}>
                 {props.aside}
             </aside>
-            <div className={$page.host}>
-                <div className={$page.scroll}>
-                    <div className={$page.container}>
+            <div className={cn.PageHost}>
+                <div className={cn.PageScroll}>
+                    <div className={cn.PageContainer}>
                         <div className={`
-                            ${$page.articleContainer}
-                            ${props.kind == "fullwidth" && $page.articleContainer$$fullWidth}
+                            ${cn.PageArticleContainer}
+                            ${props.kind == "fullwidth" && cn.PageArticleContainerFullWidth}
                         `}>
-                            <article className={$article.host}>
-                                <section className={$article.content}>
+                            <article className={cn.ArticleHost}>
+                                <section className={cn.ArticleContent}>
                                     {props.content}
                                 </section>
                                 {
-                                    props.contentNav && <nav className={`
-                                    ${$article.nav}
-                                `}>
+                                    props.contentNav && <nav className={cn.ArticleNav}>
                                         {props.contentNav}
                                     </nav>
                                 }
@@ -113,7 +111,7 @@ export function Layout(props: LayoutProps) {
 
 Layout.Header = function LayoutHeader({className, children}: { className?: string, children: React.ReactNode }) {
     return <header className={`
-            ${$layout.header}
+            ${cn.LayoutHeader}
             ${className}
         `}>
         {children}