react-miui 0.0.1 → 0.3.0

package/esm/global.scss

@@ -1,15 +1,18 @@
-// Font-size ratio: 1,6 (666?)
-// Border ratio: 2,6666
-// Dimensions ratio: 3
-
 // @TODO prefix variable names
 :root {
+    --ratio-dimensions: 3;
+    --ratio-border:     2.666666;
+    --ratio-font:       1.666666;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;
 
     --active-bg: #d3d3d3;
     --inactive-bg: #d3d3d3; // used
 
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+
     --icon: #636363;
     --border: #d5d5d5;
     --button-border: #bababa;
@@ -18,17 +21,35 @@
     --header-bg: #efeff0;
     --header-text: #484848;
 
-    --toolbar--border: #ababab;
-    --toolbar--bg: #f8f8f8;
+    --toolbar-border: #ababab;
+    --toolbar-bg: #f8f8f8;
 
-    --color1: #00aeeb;
-    --color2: #9d6ee5;
-    --color3: #00c293;
-    --color4: #ff5290;
-    --color5: #ff7259;
-    --color6: #4083f7;
+    // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
+    --blue1: #038bf4;
+    --orange1: #ff7200;
+    --orange1-darker: #cc5b00;
+    --purple1: #7357e8;
+    --green1: #3ec234;
+    --green1-darker: #38af2f;
+    --pink1: #ff388f;
+    --red1: #ea2700;
+
+    --grey1: #737373;
+
+    --focus-color: #dcaf00;
 }
 
-*:focus { // @TODO take care of focus
+*:focus {
     outline: none!important;
 }
+
+*:focus-visible:focus-visible {
+    outline: none!important;
+    border-color: var(--focus-color);
+    background-color: var(--focus-bg-set);
+}
+
+
+body {
+    font-size: 15px;
+}

package/esm/index.d.ts

@@ -1,2 +1,9 @@
-export * from "./components/form/Checkbox";
+export * from "./components/form/Checkbox.js";
+export * from "./components/icons/Icon.js";
+export * from "./components/layout/header/Header.js";
+export * from "./components/layout/header/StickyHeader.js";
+export * from "./components/layout/list/List.js";
+export * from "./components/layout/list/Item.js";
+export * from "./components/ui/button/Button.js";
+export * from "./components/ui/directionPad/Pad.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAE9C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/esm/index.js

@@ -1,2 +1,9 @@
-export * from "./components/form/Checkbox";
+export * from "./components/form/Checkbox.js";
+export * from "./components/icons/Icon.js";
+export * from "./components/layout/header/Header.js";
+export * from "./components/layout/header/StickyHeader.js";
+export * from "./components/layout/list/List.js";
+export * from "./components/layout/list/Item.js";
+export * from "./components/ui/button/Button.js";
+export * from "./components/ui/directionPad/Pad.js";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAE9C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/esm/pages/_app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_app.d.ts","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,KAAK,6BAA8B,QAAQ,gBAEhD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"_app.d.ts","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,KAAK,6BAA8B,QAAQ,gBAOhD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/pages/_app.js

@@ -1,6 +1,10 @@
 import React from "react";
+import Head from "next/head";
 import "../global.scss";
 import "../demo-global.scss";
-const MyApp = ({ Component, pageProps }) => (React.createElement(Component, { ...pageProps }));
+const MyApp = ({ Component, pageProps }) => (React.createElement(React.Fragment, null,
+    React.createElement(Head, null,
+        React.createElement("title", null, "MIUI in React")),
+    React.createElement(Component, { ...pageProps })));
 export default MyApp;
 //# sourceMappingURL=_app.js.map

package/esm/pages/_app.js.map

@@ -1 +1 @@
-{"version":3,"file":"_app.js","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAY,EAAE,EAAE,CAAC,CAClD,oBAAC,SAAS,OAAK,SAAS,GAAI,CAC/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"_app.js","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,WAAW,CAAC;AAG7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAY,EAAE,EAAE,CAAC,CAClD;IACI,oBAAC,IAAI;QACD,mDAA4B,CACzB;IACP,oBAAC,SAAS,OAAK,SAAS,GAAI,CAC7B,CACN,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/pages/react-miui.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const ReactMiuiPage: () => JSX.Element;
+export default ReactMiuiPage;
+//# sourceMappingURL=react-miui.d.ts.map

package/esm/pages/react-miui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-miui.d.ts","sourceRoot":"","sources":["../../src/pages/react-miui.tsx"],"names":[],"mappings":";AAEA,QAAA,MAAM,aAAa,mBAOlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/pages/react-miui.js

@@ -0,0 +1,6 @@
+import React from "react";
+const ReactMiuiPage = () => {
+    return (React.createElement("div", null, "Hi. This is an example page to demonstrate application level routing."));
+};
+export default ReactMiuiPage;
+//# sourceMappingURL=react-miui.js.map

package/esm/pages/react-miui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-miui.js","sourceRoot":"","sources":["../../src/pages/react-miui.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,EAAE;IAEvB,OAAO,CACH,yGAEM,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/types.d.ts

@@ -0,0 +1,4 @@
+import type React from "react";
+declare type AnyComponent = React.ComponentClass | React.FC | React.VFC;
+export type { AnyComponent, };
+//# sourceMappingURL=types.d.ts.map

package/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,aAAK,YAAY,GAAG,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC;AAEhE,YAAY,EACR,YAAY,GACf,CAAC"}

package/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.0.1",
+  "version": "0.3.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -14,7 +14,8 @@
     "lint:fix": "yarn lint --fix",
     "prepack": "yarn compile",
     "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
-    "start:dev": "next dev"
+    "start:dev": "next dev",
+    "deploy:dev": "next build && next export && netlify deploy --dir out"
   },
   "exports": {
     "./global.scss": "./src/global.scss",
@@ -33,7 +34,8 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
-    "@dzek69/eslint-config-base": "^2.0.0",
+    "@dzek69/eslint-config-base": "^2.1.0",
+    "@dzek69/eslint-config-react": "^1.2.2",
     "@dzek69/eslint-config-typescript": "^0.4.0",
     "@types/jest": "^26.0.23",
     "@types/react": "^17.0.4",
@@ -42,14 +44,14 @@
     "@typescript-eslint/parser": "^4.11.1",
     "babel-plugin-module-extension": "^0.1.3",
     "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^7.14.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.24.0",
     "fast-glob": "^3.2.7",
     "fs-extra": "^9.0.1",
     "husky": "^4.3.0",
     "jest": "^27.0.6",
     "must": "^0.13.4",
-    "next": "^11.1.0",
-    "nodemon": "^2.0.6",
+    "next": "^11.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.2.4",
@@ -69,7 +71,7 @@
     }
   },
   "libraryTemplate": {
-    "version": "3.3.1",
+    "version": "3.4.0",
     "language": "typescript",
     "fixDefaultForCommonJS": true,
     "jsx": true

package/src/components/form/Checkbox.module.scss

@@ -3,24 +3,31 @@
         width: 0;
         height: 0;
         transform: scale(0);
+        margin: 0;
+        vertical-align: middle;
 
         + span {
             border-radius: 100px;
             background: var(--inactive-bg);
-            width: 24px;
-            height: 24px;
+            width: 18px;
+            height: 18px;
             display: inline-flex;
             justify-content: center;
             align-items: center;
+            vertical-align: middle;
 
             svg {
-                width: 12px;
-                height: 12px;
+                width: 9px;
+                height: 9px;
                 fill: white;
             }
+
+            + span {
+                vertical-align: middle;
+            }
         }
 
-        &:focus {
+        &:focus-visible {
             + span {
                 box-shadow: 0 0 5px black;
             }
@@ -34,7 +41,7 @@
         }
 
         + span + span:not(:empty) {
-            margin-left: 1em;
+            margin-left: 0.5em;
         }
     }
 }

package/src/components/form/Toggle.module.scss

@@ -0,0 +1,46 @@
+.container {
+    --ratio-dimensions: 2.5;
+
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: 100px;
+    position: relative;
+    line-height: 0;
+    width: calc(110px / var(--ratio-dimensions));
+    height: calc(62px / var(--ratio-dimensions));
+    padding-left: calc(8px / var(--ratio-dimensions));
+    box-sizing: border-box;
+
+    input {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+
+        &:not(:checked) + .toggle {
+            transform: translateX(0);
+            background: var(--toggle-handle-bg);
+            border-color: var(--toggle-handle-border);
+        }
+
+        &[data-undetermined=true] + .toggle {
+            transform: translateX(calc(24px / var(--ratio-dimensions)));
+            background: var(--toggle-handle-border);
+            border-color: var(--toggle-handle-border);
+        }
+    }
+}
+
+.toggle {
+    box-sizing: border-box;
+    border-radius: 100px;
+    display: inline-block;
+    width: calc(44px / var(--ratio-dimensions));
+    height: calc(44px / var(--ratio-dimensions));
+    border: calc(1px / var(--ratio-border)) solid var(--orange1-darker);
+    background: var(--orange1);
+    transition: transform 200ms, background-color 200ms, border-color 200ms;
+    transform: translateX(calc(48px / var(--ratio-dimensions)));
+}

package/src/components/form/Toggle.tsx

@@ -0,0 +1,33 @@
+import type { ChangeEvent } from "react";
+import React, { useCallback } from "react";
+
+import styles from "./Toggle.module.scss";
+
+interface Props {
+    onChange: (newState: boolean) => void;
+    state: boolean | null;
+}
+
+const Toggle: React.VFC<Props> = (props) => {
+    const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        if (props.state == null) {
+            return;
+        }
+        props.onChange(e.target.checked);
+    }, [props.onChange, props.state]);
+
+    return (
+        <label className={styles.container}>
+            <input
+                type={"checkbox"}
+                checked={Boolean(props.state)}
+                data-undetermined={props.state == null}
+                readOnly={props.state == null}
+                onChange={handleChange}
+            />
+            <div className={styles.toggle} />
+        </label>
+    );
+};
+
+export { Toggle };

package/src/components/icons/Back.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Back: React.VFC<Props> = (props) => {
+    return (
+        <svg width={"9"} height={"16"} viewBox={"0 0 9 16"} xmlns={"http://www.w3.org/2000/svg"} className={props.className}>
+            <path fill={"currentColor"} d={"M8.05.1L0 7.95l8.05 7.85v.05q.15.15.4.15t.4-.15q.15-.2.15-.4 0-.25-.15-.4V15H8.8L1.65 7.95l7.2-7Q9 .75 9 .55q0-.25-.2-.4Q8.65 0 8.4 0q-.2 0-.35.1"} />
+        </svg>
+    );
+};
+
+export { Back };

package/src/components/icons/Checkmark.tsx

@@ -7,11 +7,14 @@ interface Props {
 const Checkmark: React.FC<Props> = (props) => {
     return (
         <svg
-            xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 45.701 45.7"
+            xmlns={"http://www.w3.org/2000/svg"}
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 45.701 45.7"}
             className={props.className}
         >
             <path
-                d="M20.687 38.332a5.308 5.308 0 01-7.505 0L1.554 26.704A5.306 5.306 0 119.059 19.2l6.928 6.927a1.344 1.344 0 001.896 0L36.642 7.368a5.308 5.308 0 017.505 7.504l-23.46 23.46z"
+                d={"M20.687 38.332a5.308 5.308 0 01-7.505 0L1.554 26.704A5.306 5.306 0 119.059 19.2l6.928 6.927a1.344 1.344 0 001.896 0L36.642 7.368a5.308 5.308 0 017.505 7.504l-23.46 23.46z"}
             />
         </svg>
 

package/src/components/icons/Icon.tsx

@@ -0,0 +1,30 @@
+import type { AnyComponent } from "../../types";
+
+import React from "react";
+import { Checkmark } from "./Checkmark";
+import { Back } from "./Back";
+
+enum ICON {
+    checkmark = "checkmark",
+    back = "back",
+}
+
+interface Props {
+    name: ICON;
+    className?: string;
+}
+
+const iconsMap = new Map<ICON, AnyComponent>([
+    [ICON.checkmark, Checkmark],
+    [ICON.back, Back],
+]);
+
+const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {
+    const C = iconsMap.get(iconName);
+    if (!C) {
+        throw new TypeError("Unknown icon: " + iconName);
+    }
+    return <C {...props} />;
+};
+
+export { Icon, ICON };

package/src/components/layout/header/Header.module.scss

@@ -0,0 +1,89 @@
+.header {
+    --border-color: var(--header-border);
+    --background-color: var(--header-bg);
+    background: var(--background-color);
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    font-weight: bold;
+    box-sizing: border-box;
+    color: var(--header-text);
+}
+
+.header--toolbar {
+    --border-color: var(--toolbar-border);
+    --background-color: var(--toolbar-bg);
+}
+
+.header--top, .header--bottom {
+    padding: 0 16.666px;
+    min-height: 44px;
+}
+.header--left, .header--right {
+    padding: 16.666px 0;
+    min-width: 44px;
+    flex-direction: column;
+
+    > .contents {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+.header--top {
+    border-bottom: 0.37px solid var(--border-color);
+}
+.header--bottom {
+    border-top: 0.37px solid var(--border-color);
+    order: 2;
+}
+.header--left {
+    border-right: 0.37px solid var(--border-color);
+}
+.header--right {
+    border-left: 0.37px solid var(--border-color);
+    order: 2;
+}
+
+.contents {
+    flex: 1;
+    display: flex;
+}
+
+.header--center > .contents {
+    justify-content: center;
+}
+
+.header--top, .header--bottom {
+    .before {
+        margin-right: calc(50px / var(--ratio-dimensions));
+    }
+
+    .after {
+        margin-left: calc(50px / var(--ratio-dimensions));
+    }
+
+    .actions {
+        margin: calc(56px / var(--ratio-dimensions)) 0;
+    }
+}
+
+.header--left, .header--right {
+    .before {
+        margin-bottom: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .after {
+        margin-top: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .actions {
+        margin: 0 calc(56px / var(--ratio-dimensions));
+    }
+}
+
+.before, .after {
+    display: flex;
+}

package/src/components/layout/header/Header.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import classnames from "classnames";
+import type { ReactNode } from "react";
+
+import styles from "./Header.module.scss";
+import { Action } from "../../ui/action/Action";
+import { EqualActions } from "../../ui/action/EqualActions";
+
+interface Props {
+    center?: boolean;
+    variant?: "toolbar";
+    /**
+     * This indicates just how the borders are drawn and how content is aligned, not the actual position on the screen.
+     * To set up position on the screen you need to properly style parent element.
+     */
+    position?: "top" | "left" | "right" | "bottom"; // @TODO disallow left/right if not inside StickyHeader?
+    className?: string;
+    before?: ReactNode;
+    after?: ReactNode;
+}
+
+// eslint-disable-next-line max-statements
+const Header: React.FC<Props> = (props) => {
+    const { center, children, variant, position = "top" } = props;
+
+    let justActions = false;
+    if (position === "top" || position === "bottom") {
+        const chld = React.Children.toArray(props.children);
+        justActions = chld.every(c => {
+            return c && typeof c === "object" && "type" in c && c.type === Action;
+        });
+    }
+
+    const cls = classnames(styles.header, {
+        [styles["header--center"]]: center,
+        [styles["header--toolbar"]]: variant === "toolbar",
+    }, styles[`header--${position}`], props.className);
+
+    let contents = children;
+    if (justActions) {
+        contents = <EqualActions className={styles.actions}>{contents}</EqualActions>;
+    }
+
+    let before: ReactNode;
+    if (props.before != null) {
+        before = <div className={styles.before}>{props.before}</div>;
+    }
+
+    let after: ReactNode;
+    if (props.after != null) {
+        after = <div className={styles.after}>{props.after}</div>;
+    }
+
+    return (
+        <div className={cls}>
+            {before}
+            <div className={styles.contents}>
+                {contents}
+            </div>
+            {after}
+        </div>
+    );
+};
+
+export { Header };

package/src/components/layout/header/HeaderIconAction.module.scss

@@ -0,0 +1,22 @@
+.btn, .a {
+    padding: 7px;
+    background: none;
+    border-radius: 666px;
+    display: inline-block;
+    border: calc(2px / var(--ratio-border)) solid transparent;
+    color: var(--header-text);
+
+    &:hover {
+        background: #00000022;
+    }
+    &:active {
+        background: #00000011;
+        color: currentColor;
+    }
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+}

package/src/components/layout/header/HeaderIconAction.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import type { ICON } from "../../icons/Icon";
+import { Icon } from "../../icons/Icon";
+import styles from "./HeaderIconAction.module.scss";
+
+interface LinkProps { // @TODO extract? - same on list item
+    href: string;
+}
+
+interface Props {
+    icon?: ICON | Exclude<ReactNode, string>;
+    onClick?: () => void;
+    href?: string;
+    to?: string;
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    label?: ReactNode;
+    // if className ever goes here make sure that `a` gets classnames merged
+}
+
+const HeaderIconAction: React.VFC<Props> = (props) => {
+    const { icon, label, href, to, Link, ...restProps } = props;
+
+    let content: ReactNode = icon;
+    if (typeof icon === "string") {
+        content = <Icon className={styles.icon} name={icon as ICON} />;
+    }
+
+    if (to) {
+        if (!Link) {
+            throw new TypeError("`to` prop given without `Link` component");
+        }
+
+        return <Link href={to} {...restProps}><a className={styles.a}>{content}</a></Link>;
+    }
+
+    if (href) {
+        return <a href={href} className={styles.a} {...restProps}>{content}</a>;
+    }
+
+    return (
+        <button className={styles.btn} onClick={props.onClick}>
+            {content}
+        </button>
+    );
+};
+
+export { HeaderIconAction };

package/src/components/layout/header/StickyHeader.module.scss

@@ -0,0 +1,18 @@
+.stickyHeader {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &__content {
+        flex: 1;
+        overflow: auto;
+
+        &--bottom, &--right {
+            order: 1;
+        }
+    }
+}
+
+.stickyHeader--left, .stickyHeader--right {
+    flex-direction: row;
+}