@fjyueke/arco-mcp 1.0.1 → 1.0.2

package/metaData/components/steps/style.md

@@ -0,0 +1,304 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-steps {
+    display: flex;
+    .use-var(padding, steps-padding);
+
+    &.reverse-order {
+        flex-direction: row-reverse;
+    }
+
+    &-item {
+        position: relative;
+        display: flex;
+        flex: 1;
+
+        &.horizontal {
+            flex-direction: column;
+        }
+
+        &-align-center {
+            align-items: center;
+        }
+
+        &-align-start {
+            align-items: flex-start;
+        }
+
+        &-align-center.vertical {
+            .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            visibility: hidden;
+        }
+
+        &:first-child &-tail::after,
+        &:last-child &-tail::before {
+            .reverse-order & {
+                visibility: hidden;
+            }
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            .reverse-order & {
+                visibility: visible;
+            }
+        }
+
+        &-tail {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .horizontal & {
+                width: 100%;
+                .use-var(height, steps-icon-height);
+
+                &::before,
+                &::after {
+                    .use-var(height, steps-tail-standard-size);
+                }
+
+                &-align-start {
+                    .use-var-with-rtl(left, steps-tail-horizontal-left);
+                    .use-var(padding, steps-tail-horizontal-padding);
+
+                    &::after {
+                        content: '';
+                        width: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: '';
+                        width: 50%;
+                    }
+                    &::before {
+                        .use-var-with-rtl(margin-right, steps-tail-horizontal-gutter);
+                        .use-var-with-rtl(border-top-right-radius, steps-tail-border-radius);
+                        .use-var-with-rtl(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var-with-rtl(margin-left, steps-tail-horizontal-gutter);
+                        .use-var-with-rtl(border-top-left-radius, steps-tail-border-radius);
+                        .use-var-with-rtl(border-bottom-left-radius, steps-tail-border-radius);
+                    }
+                }
+            }
+
+            .vertical & {
+                height: 100%;
+                .use-var(width, steps-icon-width);
+                flex-direction: column;
+
+                &::before,
+                &::after {
+                    .use-var(width, steps-tail-standard-size);
+                }
+
+                &-align-start {
+                    .use-var(top, steps-tail-vertical-top);
+                    .use-var(padding, steps-tail-vertical-padding);
+
+                    &::after {
+                        content: '';
+                        height: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: '';
+                        height: 50%;
+                    }
+                    &::before {
+                        .use-var(margin-bottom, steps-tail-vertical-gutter);
+                        .use-var(border-bottom-left-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var(margin-top, steps-tail-vertical-gutter);
+                        .use-var(border-top-left-radius, steps-tail-border-radius);
+                        .use-var(border-top-right-radius, steps-tail-border-radius);
+                    }
+                }
+            }
+
+            &::after,
+            &::before {
+                display: inline-block;
+                .use-var(background, steps-tail-standard-background);
+            }
+
+            &-status-finish::before,
+            &-status-finish::after,
+            &-align-center&-status-process::before,
+            &-align-center&-status-error::before {
+                .use-var(background, steps-tail-finish-background);
+            }
+
+            &-status-finish::before,
+            &-status-process::after,
+            &-align-center&-status-error::after {
+                .reverse-order & {
+                    .use-var(background, steps-tail-finish-background);
+                }
+            }
+            &-status-process::before,
+            &-align-center&-status-error::before {
+                .reverse-order & {
+                    .use-var(background, steps-tail-standard-background);
+                }
+            }
+        }
+
+        &-custom-icon,
+        &-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            .use-var(width, steps-icon-width);
+            .use-var(height, steps-icon-height);
+        }
+
+        &-icon {
+            border-radius: 50%;
+
+            .number.finish & {
+                .use-var(background, steps-finish-icon-num-background);
+            }
+
+            .number.process & {
+                .use-var(background, steps-process-icon-num-background);
+            }
+
+            .number.wait & {
+                .use-var(background, steps-wait-icon-num-background);
+            }
+
+            .number.error & {
+                .use-var(background, steps-error-icon-num-background);
+            }
+
+            svg {
+                .use-var(font-size, steps-icon-svg-standard-font-size);
+
+                .finish & {
+                    .use-var(color, steps-finish-icon-svg-color);
+                }
+
+                .error & {
+                    .use-var(color, steps-error-icon-svg-color);
+                    .use-var(font-size, steps-error-icon-svg-font-size);
+                }
+            }
+
+            &-num {
+                .use-var(font-size, steps-icon-num-font-size);
+                .use-var(line-height, steps-icon-num-line-height);
+                .use-var(color, steps-icon-num-color);
+                .text-medium();
+
+                .process & {
+                    .use-var(color, steps-process-icon-num-color);
+                }
+            }
+
+            &-dot {
+                position: relative;
+                display: inline-block;
+                .use-var(width, steps-dot-width);
+                .use-var(height, steps-dot-height);
+                border-radius: 50%;
+                .use-var(border-width, steps-dot-border-width);
+                border-style: solid;
+
+                .finish & {
+                    .use-var(border-color, steps-finish-dot-border-color);
+                }
+
+                .wait & {
+                    .use-var(border-color, steps-wait-dot-border-color);
+                }
+
+                .process & {
+                    border: none;
+                    .use-var(background, steps-process-dot-background);
+                }
+            }
+        }
+
+        &-content {
+            .horizontal & {
+                .use-var(margin-top, steps-horizontal-content-margin-top);
+                &-align-center {
+                    text-align: center;
+                }
+            }
+
+            .vertical & {
+                .use-var-with-rtl(margin-left, steps-vertical-content-margin-left);
+                flex: 1;
+
+                &-align-start {
+                    .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+                }
+            }
+        }
+
+        &-title {
+            .use-var(font-size, steps-title-font-size);
+            .use-var(line-height, steps-title-line-height);
+
+            .finish & {
+                .use-var(color, steps-finish-title-color);
+            }
+
+            .error & {
+                .use-var(color, steps-error-title-color);
+            }
+
+            .process & {
+                .use-var(color, steps-process-title-color);
+                font-weight: 500;
+            }
+
+            .wait & {
+                .use-var(color, steps-wait-title-color);
+            }
+        }
+
+        &-description {
+            .use-var(font-size, steps-description-font-size);
+            .use-var(line-height, steps-description-line-height);
+            .use-var(color, steps-description-color);
+
+            .wait & {
+                .use-var(color, steps-wait-description-color);
+            }
+
+            .vertical & {
+                .use-var(margin-top, steps-description-margin-top);
+            }
+        }
+    }
+
+    &.vertical {
+        &.reverse-order {
+            flex-direction: column-reverse;
+        }
+
+        flex-direction: column;
+        .use-var(padding-bottom, steps-vertical-padding-bottom);
+        .use-var-with-rtl(padding-left, steps-vertical-padding-left);
+    }
+}

package/metaData/components/sticky/style.md

@@ -0,0 +1,5 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-sticky {
+
+}

package/metaData/components/swipe-action/style.md

@@ -0,0 +1,89 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-swipe-action {
+    position: relative;
+    transition: transform 0s;
+    .use-var(font-size,swipe-action-text-font-size);
+
+    &, &-menu {
+        &.action-open {
+            .use-var(transition-timing-function, swipe-action-open-transition);
+        }
+        &.action-close {
+            .use-var(transition-timing-function, swipe-action-close-transition);
+        }
+    }
+
+    &-content {
+        width: 100%;
+    }
+
+    &-menu {
+        display: flex;
+        position: absolute;
+        height: 100%;
+        overflow: visible;
+        flex-wrap: nowrap;
+        top: 0;
+        transition: width 0s;
+
+        &-left {
+            right: 100%;
+        }
+
+        &-right {
+            left: 100%;
+        }
+        &-action {
+            &-left {
+                &::after {
+                    right: 100%;
+                    margin-right: -1PX;
+                }
+            }
+            &-right {
+                &::after {
+                    left: 100%;
+                    margin-left: -1PX;
+                }
+            }
+            &-info {
+                height: 100%;
+                .use-var(padding, swipe-action-info-padding);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                &-container {
+                    position: relative;
+                    &.open-style-layer {
+                        position: absolute;
+                        height: 100%;
+                    }
+                    &::after {
+                        content: " ";
+                        position: absolute;
+                        top: 0;
+                        height: 100%;
+                        .use-var(width, swipe-action-info-bounce-buffer);
+                        background: inherit;
+                    }
+                }
+
+                &-text {
+                    white-space: nowrap;
+                    .use-var(font-size,swipe-action-text-font-size);
+                    .use-var(line-height,swipe-action-text-line-height);
+                    .use-var(color, swipe-action-text-color);
+                }
+
+                &-icon {
+                    .use-var(margin-right,swipe-action-icon-margin-right);
+                    .use-var(height, swipe-action-icon-height);
+                    .use-var(width, swipe-action-icon-width);
+                    .use-var(color, swipe-action-text-color);
+                }
+            }
+        }
+    }
+}

package/metaData/components/swipe-load/style.md

@@ -0,0 +1,29 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-swipe-load {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+
+    .@{prefix}-list-area {
+        position: relative;
+        width: 100%;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .@{prefix}-loading-area {
+        .use-var(background-color, swipe-load-label-background);
+        margin-top: 0;
+        .use-var(border-radius, swipe-load-label-border-radius);
+
+        .@{prefix}-loading-label {
+            .use-var-with-rtl(margin-left, swipe-load-label-text-margin-left);
+            .use-var(width, swipe-load-label-text-width);
+            .use-var(color, swipe-load-label-text-color);
+            .use-var(font-size, swipe-load-label-text-font-size);
+        }
+    }
+}

package/metaData/components/switch/style.md

@@ -0,0 +1,158 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-switch {
+    position: relative;
+    display: inline-block;
+    .use-var(transition, switch-inner-transition);
+    @keyframes changDeg {
+
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    &.type-android {
+        .use-var(width, switch-android-width);
+        .use-var(height, switch-android-height);
+        .use-var(padding, switch-android-padding);
+        padding-bottom: 0;
+        .use-var(background-color, switch-android-background);
+
+        &.fully {
+            .use-var(border-radius, switch-android-fully-border-radius);
+        }
+
+        &.semi {
+            .use-var(border-radius, switch-android-semi-border-radius);
+        }
+
+        &.checked {
+            .use-var(background-color, switch-android-checked-background);
+            .@{prefix}-switch-text {
+                .set-prop-with-rtl(right, auto);
+                .use-var-with-rtl(left, switch-android-text-gap-size);
+            }
+            .@{prefix}-switch-inner {
+                .use-var(transform, switch-android-checked-inner-transform);
+                .style-with-rtl({
+                    .use-var(transform, switch-android-checked-inner-transform, "rotate(180deg)");
+                });
+            }
+        }
+        .@{prefix}-switch-inner {
+            .use-var(width, switch-android-inner-diameter-size);
+            .use-var(height, switch-android-inner-diameter-size);
+            .use-var(box-shadow, switch-android-inner-box-shadow);
+            .style-with-rtl({
+                transform: rotate(180deg);
+            });
+        }
+
+        &.disabled {
+
+            &.checked {
+                .use-var(background-color, switch-android-disabled-checked-background);
+            }
+
+            &:not(.checked) {
+                .use-var(background-color, switch-android-disabled-background);
+            }
+        }
+        .@{prefix}-switch-text {
+            .use-var(font-size, switch-android-text-font-size);
+            .use-var-with-rtl(right, switch-android-text-gap-size);
+        }
+    }
+
+    &.type-ios {
+        .use-var(width, switch-ios-width);
+        .use-var(height, switch-ios-height);
+        .use-var(padding, switch-ios-padding);
+        padding-bottom: 0;
+        .use-var(background-color, switch-ios-background);
+
+        &.fully {
+            .use-var(border-radius, switch-ios-fully-border-radius);
+        }
+
+        &.semi {
+            .use-var(border-radius, switch-ios-semi-border-radius);
+        }
+
+        &.checked {
+            .use-var(background-color, switch-ios-checked-background);
+            .@{prefix}-switch-text {
+                .set-prop-with-rtl(right, auto);
+                .use-var-with-rtl(left, switch-ios-text-gap-size);
+            }
+            .@{prefix}-switch-inner {
+                .use-var(transform, switch-ios-checked-inner-transform);
+                .use-var(box-shadow, switch-ios-inner-box-shadow);
+                .style-with-rtl({
+                    .use-var(transform, switch-ios-checked-inner-transform, "rotate(180deg)");
+                });
+            }
+        }
+
+        &.disabled.checked {
+            .use-var(opacity, switch-ios-disabled-checked-opacity);
+        }
+        .@{prefix}-switch-text {
+            .use-var(font-size, switch-ios-text-font-size);
+            .use-var-with-rtl(right, switch-ios-text-gap-size);
+        }
+        .@{prefix}-switch-inner {
+            .use-var(width, switch-ios-inner-diameter-size);
+            .use-var(height, switch-ios-inner-diameter-size);
+            .onepx-border-var(all, switch-ios-inner-border-color, 50%);
+            .style-with-rtl({
+                transform: rotate(180deg);
+            });
+        }
+
+        &.disabled {
+
+            &.checked {
+                .use-var(background-color, switch-ios-disabled-checked-background);
+            }
+
+            &:not(.checked) {
+                .use-var(background-color, switch-ios-disabled-background);
+            }
+        }
+    }
+
+    &-text {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        .use-var(color, switch-text-color);
+    }
+
+    &.checked &-text {
+        .use-var(color, switch-text-checked-color);
+    }
+
+    &-inner {
+        position: relative;
+        .set-prop-with-rtl(left, 0);
+        top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(background-color, switch-inner-background);
+        .use-var(transition, switch-inner-transition);
+
+        .fully & {
+            .use-var(border-radius, switch-inner-fully-border-radius);
+        }
+
+        .semi & {
+            .use-var(border-radius, switch-inner-semi-border-radius);
+        }
+    }
+}

package/metaData/components/tab-bar/style.md

@@ -0,0 +1,57 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-tab-bar {
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    align-items: stretch;
+    overflow: hidden;
+    .use-var(font-size, tab-bar-font-size);
+    .use-var(min-height, tab-bar-height);
+    &-fixed{
+        position: fixed;
+        bottom: 0;
+    }
+
+    &-item{
+        display: flex;
+        flex: 1 1;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        .use-var(color,tab-bar-color);
+        &-title{
+           color: inherit;
+           .use-var(line-height, tab-bar-title-line-height);
+           .use-var(font-size,tab-bar-font-size);
+           .use-var(margin,tab-bar-title-margin);
+        }
+        &-children{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        &-only-title{
+            .use-var(line-height, tab-bar-only-title-line-height);
+            .use-var(font-size, tab-bar-only-title-font-size);
+            margin: 0;
+        }
+        &-active{
+            .use-var(color, tab-bar-active-color);
+        }
+        .@{prefix}-extra-wrap{
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .use-var(font-size, tab-bar-icon-size);
+            color: inherit;
+        }
+        .@{prefix}-tab-bar-item-icon{
+            display: flex;
+            .use-var(font-size, tab-bar-icon-size);
+            color: inherit;
+            .use-var(margin, tab-bar-item-icon-margin);
+        }
+    }
+}