@king-design/intact 2.1.1 → 3.0.0-beta.1

package/components/steps/styles.ts

@@ -4,75 +4,73 @@ import {deepDefaults}  from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
-    get transition() { return theme.transition.middle },
-    get height() { return theme.default.height }, 
-    get bgColor() { return theme.color.bg }, 
-    gutter: '10px',
-    gapTop: '-2px',
-
-    // head
-    head: {
-        innerWidth: '16px',
-        get innerBorder() { return `1px solid ${theme.color.placeholder}` },
-        iconFontSize: '24px',
-        paddingRight: '10px',
-    },
+    gap: '10px',
+    get titleColor() { return theme.color.title },
+    get desColor() { return theme.color.lightBlack },
+    get markColor() { return theme.color.placeholder },
+    markBgColor: '#fff',
 
-    main: {
-        get color() { return theme.color.text }, 
-        get titlePaddingRight() { return steps.head.paddingRight },
-        contentFontSize: '12px',
+    default: {
+        get height() { return theme.default.height }, 
+        get bgColor() { return theme.color.bg },
+        get markborder() { return `1px solid ${theme.color.placeholder}` },
+        markWidth: '16px',
+        padding: '16px',
     },
 
     // done
     done: {
-       get headColor() { return theme.color.primary }, 
-       get headInnerBorderColor() { return theme.color.primary },
-       headInnerBgColor: 'transparent',
-       get mainColor() { return theme.color.primary },
-       get simpleColor() { return theme.color.text }, 
+        get markColor() { return theme.color.primary }, 
+        get markBorderColor() { return theme.color.primary },
+        markBgColor: '#fff',
+        get mainColor() { return theme.color.primary },
     },
 
     // active
     active: {
-        headColor: '#fff',
-        get headInnerBorderColor() { return theme.color.primary }, 
-        get headInnerBgColor() { return theme.color.primary },
+        markColor: '#fff',
+        get markBorderColor() { return theme.color.primary }, 
+        get markBgColor() { return theme.color.primary },
         get mainColor() { return theme.color.primary }, 
-        get simpleColor() { return theme.color.primary }, 
     },
 
     // error
     error: {
-        get headColor() { return theme.color.danger }, 
-        get headInnerBorderColor() { return theme.color.danger }, 
-        headInnerBgColor: 'transparent',
+        get markColor() { return theme.color.danger }, 
+        get markBorderColor() { return theme.color.danger }, 
+        markBgColor: '#fff',
         get mainColor() { return theme.color.danger }, 
-        get simpleColor() { return theme.color.danger }, 
     },
 
     // line
     line: {
-        bgColor: '#fff',
-        mainContentGap: '5px 0 0',
-        get tailBgColor() { return theme.color.placeholder },
-        get doneTailBgColor() { return theme.color.primary }, 
-        innerWidth: '32px',
-        innerLineHeight: '30px',
-        innerFontSize: '18px',
-        headTop: '16px',
-        titleFontSize: '14px',
-        titleGopTop: '16px',
-        iconLineHeight: '30px',
-        tailTop: '16px',
-        width: '160px',
+        get markborder() { return `2px solid ${theme.color.placeholder}` },
+        markWidth: '32px',
+        markFontSize: '18px',
+        get lineColor() { return theme.color.border},
+        lineWidth: '2px',
+        titleGap: '16px',
+        descGap: '4px',
+        contentWidth: '200px',
     },
 
     // simple
     simple: {
-        fontSize: '14px',
-        get color() { return theme.color.disabled }, 
-        headPaddingRight: '6px',
+        markWidth: '12px',
+        get markBgColor() { return theme.color.placeholder },
+        get doneMarkBgColor() { return theme.color.primary },
+        get errorMarkBgColor() { return theme.color.danger },
+    },
+
+    // vertical
+    vertical: {
+        line: {
+            minHeight: '100px',
+            padding: '16px',
+        },
+        simple: {
+            titleGap: '8px',
+        }
     }
 };
 
@@ -86,256 +84,425 @@ const stepStatus = ['done', 'active', 'error'] as const;
 export function makeStepsStyles() {
     return css`
         display: flex;
-        // default and line type
-        &.k-default,
-        &.k-line {
-            .k-step-head {
-                padding-right: ${steps.head.paddingRight};
-            }
-            .k-step-inner {
-                width: ${steps.head.innerWidth};
-                height: ${steps.head.innerWidth}; 
-                line-height: calc(${steps.head.innerWidth} - 2px);
-                border-radius: 50%;
-                text-align: center;
-                border: ${steps.head.innerBorder};
-            }
-            .k-step-icon:before {
-                line-height: calc(${steps.head.innerWidth} - 2px);
-            }
-            .k-step-main {
-                color: ${steps.main.color}; 
+
+        ${makeCommonStyles()};
+
+        &.k-default {
+            ${makeDefaultStyles()};
+        }
+            
+        &.k-line,
+        &.k-line-compact,
+        &.k-simple {
+            ${makeLineStyles()};
+        }
+
+        &.k-line-compact {
+            ${makeLineCompactStyles()};
+        }
+
+        &.k-simple {
+            ${makeSimpleStyles()};
+        }
+
+        // clickable
+        &.k-clickable {
+            .k-done {
+                cursor: pointer;
             }
+        }
+
+        ${makeVerticalStyles()};
+    `;
+}
+
+function makeDefaultStyles() {
+    const defaults = steps.default;
+
+    return css`
+        text-align: center;
+        height: ${defaults.height}; 
+        background: ${defaults.bgColor};
+
+        .k-step-wrapper {
+            ${center()};
+            height: 100%;
+            padding: 0 ${defaults.padding};
+        }
+        .k-step-mark {
+            width: ${defaults.markWidth};
+            height: ${defaults.markWidth}; 
+            margin-right: ${steps.gap};
+        }
+        .k-step-main {
+            display: flex;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        .k-step-title {
+            padding-right: ${steps.gap};
+        }
+
+        // tail
+        .k-step:last-of-type {
             .k-step-tail {
-                position: absolute;
+                display: none;
             }
-            .k-step:last-of-type {
-                .k-step-tail {
-                    display: none;
-                }
-            } 
-            // step
-            ${stepStatus.map(status => {
-                const styles = steps[status];
-                return css`
-                    .k-${status} {
-                        .k-step-inner {
-                            color: ${styles.headColor};
-                            border-color: ${styles.headInnerBorderColor} !important;
-                            background: ${styles.headInnerBgColor};
-                        }
-                        .k-step-main {
-                            color: ${styles.mainColor};
-                        }
-                    }
-                `
-            })} 
+        } 
+        &:not(.k-vertical) {
+            ${makeArrow(false)};
         }
-            
-        // default and simple type
-        &.k-simple,
-        &.k-default {
-            text-align: center;
-            height: ${steps.height}; 
-            line-height: ${steps.height}; 
+    `
+}
+
+function makeArrow(isVertical: boolean) {
+    const defaults = steps.default; 
+    const offset = `calc(-1 * (${defaults.height} / 2 + ${steps.gap}))`;
+    const size = `calc(${defaults.height} / 2 + ${steps.gap})`;
+
+    return css`
+        .k-step-tail {
+            position: absolute;
+            ${!isVertical 
+                ? `
+                    top: 0;
+                    right: ${offset};
+                    width: ${size};
+                    height: ${defaults.height};
+                `
+                : `
+                    left: 0;
+                    bottom: ${offset};
+                    height: ${size};
+                    width: ${defaults.height};
+                `
+            }
             overflow: hidden;
-            .k-step-head,
-            .k-step-main,
-            .k-step-content,
-            .k-step-inner {
-                display: inline-block;
+            z-index: 1;
+            &:after, &:before {
+                content: '';
+                border-width: calc(${defaults.height} / 2 + ${steps.gap});
+                border-style: solid;
+                border-color: transparent;
+                position: absolute;
+                ${isVertical ? 'left' : 'top'}: calc(-1 * ${steps.gap});
             }
-            .k-step {
-                white-space: nowrap;
+            &:after {
+                border-${isVertical ? 'top' : 'left'}-color: ${defaults.bgColor};
+                ${isVertical ? 'top' : 'left'}: calc(-1 * ${steps.gap});
             }
-            .k-step-wrapper {
-                overflow: hidden;
+            &:before {
+                border-${isVertical ? 'top' : 'left'}-color: #fff;
+                ${isVertical ? 'top' : 'left'}: 0;
             }
         }
-    
-        // default
-        &.k-default {
-            background: ${steps.bgColor};
-            .k-step-tail {
-                top: 0;
-                right: calc(-1 * (${steps.height} / 2 + ${steps.gutter}));
-                width: calc(${steps.height} / 2 + ${steps.gutter});
-                height: ${steps.height}; 
-                overflow: hidden;
-                z-index: 1;
-                &:after, &:before {
-                    content: '';
-                    border-width: calc(${steps.height} / 2 + ${steps.gutter});
-                    border-style: solid;
-                    border-color: transparent;
-                    position: absolute;
-                    top: calc(-1 * ${steps.gutter});
-                }
-                &:after {
-                    border-left-color: ${steps.bgColor};
-                    left: calc(-1 * ${steps.head.paddingRight});
-                }
-                &:before {
-                    border-left-color: ${steps.line.bgColor};
-                    left: 0;
-                }
+        .k-step:not(:first-of-type) {
+            padding-${isVertical ? 'top' : 'left'}: calc(${defaults.height} / 2 + ${steps.gap});
+        }
+    `
+}
+
+function makeLineStyles() {
+    const line = steps.line;
+    const top = `calc(${line.markWidth} / 2 - ${line.lineWidth} / 2)`;
+
+    return css`
+        .k-step {
+            display: flex;
+        }
+        .k-step-wrapper {
+            display: inline-block;
+            text-align: center;
+            position: relative;
+            width: ${line.contentWidth};
+        }
+        .k-step:last-of-type {
+            flex: 0 0 auto;
+        }
+        .k-step-mark {
+            border: ${line.markborder};
+            width: ${line.markWidth};
+            height: ${line.markWidth};
+            position: relative;
+            z-index: 1;
+            &, .k-icon {
+                font-size: ${line.markFontSize};
+            }
+        }
+        .k-step-main {
+            padding-top: ${line.titleGap};
+        }
+        .k-step-title {
+            font-size: 14px;
+            color: ${theme.color.text};
+        }
+        .k-step-content {
+            margin-top: ${line.descGap};
+            color: ${theme.color.placeholder};
+        }
+        
+        // draw connected line
+        .k-step-wrapper {
+            &:before,
+            &:after {
+                content: '';
+                display: block;
+                height: ${line.lineWidth};
+                background: ${line.lineColor};
+                width: 50%;
+                position: absolute;
+                top: ${top};
             }
-            .k-step-head,
-            .k-step-inner {
-                vertical-align: middle;
-                margin-top: ${steps.gapTop};
+            &:after {
+                right: 0;
             }
-            .k-step:not(:first-of-type) {
-                padding-left: calc(${steps.height} / 2 + ${steps.gutter});
+        }
+        .k-step {
+            &:first-of-type .k-step-wrapper:before,
+            &:last-of-type .k-step-wrapper:after {
+                background: transparent;
             }
         }
+        .k-step-tail {
+            flex: 1;
+            height: ${line.lineWidth};
+            background: ${line.lineColor};
+            margin-top: ${top};
+        }
         
-        // line type
-        &.k-line {
-            .k-step {
-                width: auto !important;
-                &:last-of-type {
-                    flex: 0 0 auto;
-                    .k-step-wrapper {
-                        display: flex;
-                    }
-                    .k-step-title {
-                        padding-right: 0;
-                    }
+        // status
+        .k-step {
+            &.k-done {
+                .k-step-tail,
+                &:not(:last-of-type) .k-step-wrapper:after,
+                &:not(:first-of-type) .k-step-wrapper:before {
+                    background: ${theme.color.primary};
                 }
             }
-            .k-step-head {
-                background: ${steps.line.bgColor};
-                position: relative;
-                display: flex;
-                padding: 0;
-                &:before,
-                &:after {
-                    content: '';
-                    display: block;
-                    flex: 1;
-                    height: 1px;
-                    background: ${theme.color.placeholder};
-                    top: ${steps.line.headTop};
-                    position: relative;
+            &:not(:first-of-type).k-active {
+                .k-step-wrapper:before {
+                    background: ${theme.color.primary};
                 }
             }
-            .k-step-inner {
-                width: ${steps.line.innerWidth};
-                height: ${steps.line.innerWidth};
-                line-height: ${steps.line.innerLineHeight};
-                font-size: ${steps.line.innerFontSize};
+            &.k-active .k-step-title {
+                color: ${theme.color.primary};
             }
-            .k-step-main {
-                position: relative;
-                width: ${steps.line.width};
+            &.k-error .k-step-title {
+                color: ${theme.color.danger};
             }
-            .k-step-title {
-                line-height: ${steps.head.innerWidth};
-                background: ${steps.line.bgColor};
-                font-size: ${steps.line.titleFontSize};
-                padding: 0;
-                margin-top: ${steps.line.titleGopTop};
+        }
+    `;
+}
+
+function makeLineCompactStyles() {
+    const line = steps.line;
+
+    return css`
+        .k-step-wrapper {
+            display: inline-flex;
+            text-align: left;
+            width: auto;
+            &:before, &:after {
+                display: none;
             }
-            .k-step-content {
-                margin: ${steps.line.mainContentGap};
+        }
+        .k-step-main {
+            flex: 1;
+            padding: 0 0 0 ${line.titleGap};
+        }
+        .k-step-content {
+            margin: 0;
+        }
+        .k-step-tail {
+            margin-right: ${line.titleGap};
+        }
+        .k-step-title {
+            display: flex;
+            align-items: center;
+            height: ${line.markWidth};
+            &:after {
+                content: '';
+                display: block;
+                flex: 1;
+                height: ${line.lineWidth};
+                background: ${line.lineColor};
+                margin-left: ${line.titleGap};
             }
-            .k-step-tail {
-                left: 0;
-                right: ${steps.head.paddingRight}; 
-                top: calc(${steps.head.innerWidth} / 2);
-                height: 1px;
-                background: ${steps.line.tailBgColor};
+        }
+        .k-step:last-of-type .k-step-title:after {
+            display: none;
+        }
+        // status
+        .k-step {
+            &.k-done {
+                .k-step-title:after {
+                    background: ${theme.color.primary};
+                }
             }
-            .k-step:first-of-type .k-step-head:before,
-            .k-step:last-of-type .k-step-head:after {
-                background: transparent;
+        }
+    `;
+}
+
+function makeSimpleStyles() {
+    const simple = steps.simple;
+    const top = `calc(${simple.markWidth} / 2 - ${steps.line.lineWidth} / 2)`;
+
+    return css`
+        .k-step-mark {
+            width: ${simple.markWidth};
+            height: ${simple.markWidth};
+            background: ${simple.markBgColor};
+        } 
+        .k-step-wrapper {
+            font-size: 0; // eliminate the gap
+            &:before,
+            &:after {
+                top: ${top};
             }
-            // done
-            .k-done {
-                .k-step-tail {
-                    background: ${steps.line.doneTailBgColor};
-                }
-                .k-step-head {
-                    &:before,
-                    &:after {
-                        background: ${theme.color.primary};
-                    }
+        }
+        .k-step-main {
+            font-size: ${theme.default.fontSize};
+        }
+        .k-step-tail {
+            margin-top: ${top};
+        }
+        .k-step {
+            &.k-done {
+                .k-step-mark {
+                    background: ${simple.doneMarkBgColor};
                 }
             }
-            .k-active {
-                .k-step-head {
-                    &:before {
-                        background: ${theme.color.primary};
-                    }
+            &.k-error {
+                .k-step-mark {
+                    background: ${simple.errorMarkBgColor};
                 }
             }
-            .k-step-icon:before {
-                line-height: ${steps.line.iconLineHeight};
-            }
-            .k-step-wrapper {
-                display: inline-block !important;
-                text-align: center;
-            }
-            .k-step-tail {
-                right: 0;
-                top: ${steps.line.tailTop};
-            }
         }
-    
-        // simple type
-        &.k-simple {
-            font-size: ${steps.simple.fontSize};
-            .k-step,
-            .k-step-main {
-                color: ${steps.simple.color}; 
-            }
-            .k-step-head {
-                padding-right: ${steps.simple.headPaddingRight};
-                vertical-align: top;
-            }
+    `;
+}
+
+function center(flex: 'flex' | 'inline-flex' = 'flex') {
+    return css`
+        display: ${flex};
+        align-items: center;
+        justify-content: center;
+    `;
+}
+
+export function makeCommonStyles() {
+    return css`
+        .k-step {
+            position: relative; 
+            flex: 1;
+
+            // status 
             ${stepStatus.map(status => {
                 const styles = steps[status];
                 return css`
-                    .k-${status} {
-                        .k-step-main,
-                        .k-step-inner {
-                            color: ${styles.simpleColor}; 
+                    &.k-${status} {
+                        .k-step-mark {
+                            color: ${styles.markColor};
+                            border-color: ${styles.markBorderColor};
+                            background: ${styles.markBgColor};
+                        }
+                        .k-step-main {
+                            color: ${styles.mainColor};
                         }
                     }
                 `
             })} 
         }
-    
-        // clickable
-        &.k-clickable {
-            .k-done {
-                cursor: pointer;
-            }
+        .k-step-mark {
+            ${center('inline-flex')};
+            border: ${steps.default.markborder};
+            border-radius: 50%;
+            vertical-align: top;
+            color: ${steps.markColor};
+            background: ${steps.markBgColor};
         }
     `;
 }
 
-export function makeStepStyles() {
+export function makeVerticalStyles() {
+    const verticalLine = steps.vertical.line;
+
     return css`
-        position: relative; 
-        flex: 1;
-        .k-step-icon:before {
-            font-size: ${steps.head.iconFontSize};
-        }
-        .k-step-title {
-            display: inline-block;
-            padding-right: ${steps.main.titlePaddingRight};
-            white-space: nowrap;
-        }
-        .k-step-content {
-            font-size: ${steps.main.contentFontSize};
-        }
-        .k-step-inner,
-        .k-step-main {
-            transition: all ${steps.transition};
-        }
-    `;
-}
+        &.k-vertical {
+            &.k-default {
+                height: auto;
+                width: ${steps.default.height};
+                writing-mode: vertical-rl;
+                letter-spacing: 1px;
+                .k-step-wrapper {
+                    width: 100%;
+                    padding: ${steps.default.padding} 0;
+                }
+                .k-step-mark {
+                    margin-right: 0;
+                    margin-bottom: ${steps.gap};
+                }
+                .k-step-title {
+                    padding-right: 0;
+                    padding-bottom: ${steps.gap};
+                }
 
+                ${makeArrow(true)};
+            }
 
+            &.k-line,
+            &.k-line-compact,
+            &.k-simple {
+                flex-direction: column;
+                .k-step {
+                    flex: none;
+                    min-height: ${verticalLine.minHeight};
+                }
+                .k-step-wrapper {
+                    display: flex;
+                    width: auto;
+                    text-align: left;
+                }
+                .k-step-main {
+                    flex: 1;
+                    padding: 0 0 ${verticalLine.padding} ${verticalLine.padding};
+                }
+                .k-step-title {
+                    display: flex;
+                    align-items: center;
+                    height: ${steps.line.markWidth};
+                    &:after {
+                        display: none;
+                    }
+                }
+                
+                // connected line
+                .k-step-wrapper {
+                    &:before, &:after {
+                        display: none;
+                    }
+                }
+                .k-step-tail {
+                    position: absolute;
+                    left: calc(${steps.line.markWidth} / 2 - ${steps.line.lineWidth} / 2);
+                    height: 100%;
+                    width: ${steps.line.lineWidth};
+                    background: ${steps.line.lineColor};
+                }
+                .k-step:last-of-type {
+                    .k-step-tail {
+                        display: none;
+                    }
+                }
+            }
+            &.k-simple {
+                .k-step-tail {
+                    left: calc(${steps.simple.markWidth} / 2 - ${steps.line.lineWidth} / 2);
+                }
+                .k-step-title {
+                    height: ${steps.simple.markWidth};
+                    margin-bottom: ${steps.vertical.simple.titleGap};
+                }
+            }
+        }
+    `
+}