@fjyueke/arco-mcp 1.0.1 → 1.0.2

package/metaData/components/tabs/style.md

@@ -0,0 +1,436 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-tabs {
+    display: flex;
+    overflow: hidden;
+    .use-var(color, font-color);
+
+    &-top {
+        flex-direction: column;
+    }
+
+    &-bottom {
+        flex-direction: column-reverse;
+    }
+
+    &-top,
+    &-bottom {
+        &.full-screen {
+            height: 100%;
+        }
+    }
+
+    &-left,
+    &-right {
+        height: 100%;
+    }
+
+    &-left {
+        flex-direction: row;
+    }
+
+    &-right {
+        flex-direction: row-reverse;
+    }
+}
+
+.@{prefix}-tab-cell-container {
+
+    &-wrap {
+        flex: 0 0 auto;
+        position: relative;
+        .use-var(background, tabs-tab-bar-background);
+
+        &.horizontal {
+            .use-var(width, tabs-tab-bar-width);
+            height: 100%;
+        }
+
+        &.vertical {
+            .use-var(height, tabs-tab-bar-height);
+            width: 100%;
+
+            &.type-card {
+                .use-var(height, tabs-tab-bar-card-height);
+            }
+
+            &.type-tag,
+            &.type-tag-divide {
+                .use-var(height, tabs-tab-bar-tag-height);
+            }
+        }
+    }
+
+    &-inner {
+        width: inherit;
+        height: inherit;
+        overflow: hidden;
+
+        &.has-divider {
+
+            &.pos-top {
+                .hairline-var(line-color, bottom);
+            }
+
+            &.pos-bottom {
+                .hairline-var(line-color, top);
+            }
+
+            &.pos-left {
+                .hairline-var(line-color, right);
+            }
+
+            &.pos-right {
+                .hairline-var(line-color, left);
+            }
+        }
+
+        &.fixed {
+            position: fixed;
+            left: 0;
+            width: 100%;
+            z-index: @fixed-z-index;
+            background: inherit;
+
+            &.pos-top {
+                top: 0;
+            }
+
+            &.pos-bottom {
+                bottom: 0;
+            }
+        }
+
+        &.type-tag,
+        &.type-tag-divide {
+
+            &.vertical {
+                .use-var(padding, tabs-tab-bar-tag-vertical-padding, "", 0);
+            }
+        }
+    }
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    visibility: hidden;
+    width: inherit;
+    height: inherit;
+
+    &.horizontal {
+        flex-direction: column;
+    }
+
+    &.vertical {
+
+        &.arrange-start,
+        &.overflow {
+            justify-content: flex-start;
+        }
+
+        &.arrange-center:not(.overflow) {
+            justify-content: center;
+        }
+
+        &.arrange-end:not(.overflow) {
+            justify-content: flex-end;
+        }
+
+        .fake-padding {
+            height: 100%;
+            flex: 0 0 auto;
+        }
+    }
+
+    &.shown {
+        visibility: visible;
+    }
+
+    &.type-line,
+    &.type-tag {
+        overflow: scroll;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        &.vertical {
+            box-sizing: content-box;
+            .use-var(padding-bottom, scroller-buffer);
+        }
+    }
+
+    &.type-card {
+        .use-var(border, tabs-tab-bar-card-color, 1PX solid);
+        .use-var(border-radius, tabs-tab-bar-card-border-radius);
+    }
+
+    &.type-tag,
+    &.type-tag-divide {
+
+        &.vertical {
+            height: 100%;
+        }
+    }
+}
+
+.@{prefix}-tab-cell-underline {
+    // ios 奇葩机型 用will-change会有下拉刷新不同步问题
+    // 不提升合成层又会有残影问题 因此用translateZ来提升
+    @keyframes caterpillarX {
+
+        0% {
+            transform: scaleX(1) translateZ(0);
+        }
+
+        50% {
+            transform: scaleX(2) translateZ(0);
+        }
+
+        100% {
+            transform: scaleX(1) translateZ(0);
+        }
+    }
+    @keyframes caterpillarY {
+
+        0% {
+            transform: scaleY(1) translateZ(0);
+        }
+
+        50% {
+            transform: scaleY(2) translateZ(0);
+        }
+
+        100% {
+            transform: scaleY(1) translateZ(0);
+        }
+    }
+    position: absolute;
+    z-index: 1;
+    transform: translateZ(0);
+    transition-property: all;
+    transition-timing-function: cubic-bezier(.445, .05, .55, .95);
+    overflow: visible;
+    opacity: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.show {
+        opacity: 1;
+    }
+
+    .pos-top &,
+    .pos-bottom & {
+        left: 0;
+        .use-var(width, tabs-underline-size);
+        .use-var(height, tabs-underline-thick);
+    }
+
+    .pos-top & {
+        bottom: 0;
+    }
+
+    .pos-top.type-line & {
+        .use-var(bottom, scroller-buffer);
+    }
+
+    .pos-bottom & {
+        top: 0;
+    }
+
+    .pos-left &,
+    .pos-right & {
+        top: 0;
+        .use-var(height, tabs-underline-size);
+        .use-var(width, tabs-underline-thick);
+    }
+
+    .pos-left & {
+        left: 0;
+    }
+
+    .pos-right & {
+        right: 0;
+    }
+
+    &-inner {
+        flex: 0 0 auto;
+        width: 100%;
+        height: 100%;
+        transition: inherit;
+        .use-var(border-radius, tabs-underline-border-radius);
+        .use-var(background-color, tabs-underline-color);
+
+        &.caterpillar {
+
+            &:not(.custom-animate) {
+
+                &.vertical {
+                    animation-name: caterpillarX;
+                }
+
+                &.horizontal {
+                    animation-name: caterpillarY;
+                }
+            }
+            // fix: js计算部分以linear计算，这里对齐避免抖动
+            animation-timing-function: linear;
+        }
+    }
+}
+
+.@{prefix}-tab-cell {
+    .use-var(font-size, tabs-tab-bar-font-size);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    text-align: center;
+
+    &.no-shrink {
+        flex-shrink: 0;
+    }
+
+    &.vertical {
+        height: 100%;
+
+        &.line,
+        &.tag {
+            display: inline-flex;
+            vertical-align: middle;
+        }
+
+        &.line-divide,
+        &.card,
+        &.tag-divide {
+            flex: 1;
+        }
+
+        &:not(.custom) {
+
+            &.line:not(.last) {
+                .use-var-with-rtl(margin-right, tabs-tab-bar-line-gutter);
+            }
+
+            &.line,
+            &.line-divide {
+
+                &.active {
+                    .text-medium();
+                    .use-var(color, tabs-tab-bar-line-active-color);
+                }
+            }
+
+            &.card {
+                .use-var(color, tabs-tab-bar-card-color);
+
+                &.active {
+                    .use-var(background, tabs-tab-bar-card-color);
+                    .use-var(color, tabs-tab-bar-card-text-color);
+                    .text-medium();
+                }
+
+                &:not(:last-child) {
+                    .use-var-with-rtl(border-right, tabs-tab-bar-card-color, 1PX solid);
+                }
+
+                &:first-of-type {
+                    .use-var-with-rtl(border-top-left-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-bottom-left-radius, tabs-tab-bar-card-border-radius);
+                }
+
+                &:last-of-type {
+                    .use-var-with-rtl(border-top-right-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-bottom-right-radius, tabs-tab-bar-card-border-radius);
+                }
+            }
+
+            &.card,
+            &.tag-divide {
+
+                &.android {
+                    .rem(padding-top, 2);
+                }
+            }
+
+            &.tag,
+            &.tag-divide {
+                .use-var(padding, tabs-tab-bar-tag-padding);
+                .rem(border-radius, 100);
+                .use-var(background, tabs-tab-bar-tag-background);
+                .use-var(color, tabs-tab-bar-tag-text-color);
+
+                &:not(.last) {
+                    .use-var-with-rtl(margin-right, tabs-tab-bar-tag-gutter);
+                }
+
+                &.active {
+                    .use-var(background, tabs-tab-bar-tag-active-background);
+                    .use-var(color, tabs-tab-bar-tag-active-text-color);
+                    .text-medium();
+                }
+            }
+        }
+    }
+
+    &.horizontal {
+        .use-var(height, tabs-tab-bar-horizontal-height);
+
+        &.active {
+            .text-medium();
+            .use-var(color, tabs-tab-bar-line-active-color);
+        }
+    }
+}
+
+.@{prefix}-tab-pane-container {
+
+    &.mode-swipe {
+        display: flex;
+        align-items: flex-start;
+        transition-property: all;
+        transition-timing-function: ease-out;
+    }
+
+    &.mode-swipe-energy-saving {
+        position: relative;
+        overflow: hidden;
+    }
+
+    &.full-screen {
+        flex: 1;
+        overflow: hidden;
+    }
+
+    &.horizontal {
+        flex: 1;
+        flex-direction: column;
+    }
+
+    &.mode-scroll-horizontal {
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+}
+
+.@{prefix}-tab-pane {
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+
+    .mode-scroll-horizontal & {
+        width: auto;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    &.mode-swipe.full-screen {
+        height: 100%;
+    }
+}
+
+.@{prefix}-tab-pane-extra {
+    position: absolute;
+}

package/metaData/components/tag/style.md

@@ -0,0 +1,133 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-tag {
+    display: inline-flex;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    box-sizing: border-box;
+    border: none;
+    .use-var(border-radius, tag-border-radius);
+    .use-var(font-size, tag-font-size);
+    border-width: 1PX;
+    border-style: solid;
+
+    &.size-small {
+        .use-var(height, tag-small-size-height);
+        .use-var(padding, tag-small-size-padding, 0);
+
+        .tag-text {
+            transform: scale(.8333);
+            .rem(margin-left, -2);
+            .rem(margin-right, -2);
+        }
+    }
+
+    &.size-medium {
+        .use-var(height, tag-medium-size-height);
+        .use-var(padding, tag-medium-size-padding, 0);
+    }
+
+    &.size-large {
+        .use-var(height, tag-large-size-height);
+        .use-var(padding, tag-large-size-padding, 0);
+    }
+
+    &.filleted {
+        .use-var(padding, tag-filleted-padding, 0);
+        border-radius: 100px;
+    }
+
+    &.half-border:not(&-solid) {
+
+        &:not(.filleted) {
+            .onepx-border(all, inherit, @tag-border-radius, 1PX, inherit);
+            // bugfix: 一些情况border-style会和border-width合并为border属性
+            // border-style: inherit时合并后为 border: 1PX inherit 语法有问题 这里复写一下
+
+            &::after {
+                border: inherit;
+                border-width: 1PX;
+            }
+        }
+
+        &.filleted {
+            .onepx-border(all, inherit, 100px, 1PX, inherit);
+
+            &::after {
+                border: inherit;
+                border-width: 1PX;
+            }
+        }
+    }
+
+    .tag-text {
+        vertical-align: middle;
+        font-size: inherit;
+    }
+    .@{prefix}-icon:not(.tag-close-icon) {
+        vertical-align: middle;
+        .use-var-with-rtl(margin-right, tag-icon-margin-right);
+        .use-var(font-size, tag-icon-font-size);
+    }
+
+    .tag-close-wrap {
+        font-size: 0;
+    }
+
+    .tag-close-icon {
+        vertical-align: middle;
+        .use-var-with-rtl(margin-left, tag-icon-close-margin-left);
+        .use-var(font-size, tag-icon-font-size);
+    }
+
+    &.android {
+
+        .tag-text {
+            .rem(padding-top, 1);
+        }
+    }
+
+    &&-primary {
+        .use-var(color, tag-primary-color);
+        .use-var(background, tag-primary-background-color);
+        .use-var(border-color, tag-primary-border-color);
+    }
+
+    &&-hollow {
+        .use-var(color, tag-hollow-color);
+        background: transparent;
+        .use-var(border-color, tag-hollow-border-color);
+    }
+
+    &&-solid {
+        .use-var(color, tag-solid-color);
+        .use-var(background, tag-solid-background-color);
+        border-width: 0;
+    }
+}
+
+.@{prefix}-tag-list {
+    margin-bottom: -1 * @tag-list-vertical-gutter;
+    .@{prefix}-tag {
+        vertical-align: top;
+
+        &:not(:last-child) {
+            .use-var-with-rtl(margin-right, tag-list-horizontal-gutter);
+        }
+        .use-var(margin-bottom, tag-list-vertical-gutter);
+    }
+
+    .tag-list-add-wrap {
+        font-size: 0;
+        display: inline-block;
+    }
+
+    .tag-list-add {
+        .use-var(margin-bottom, tag-list-vertical-gutter);
+        .use-var(border-color, tag-list-add-border-color);
+        .use-var(background, tag-list-add-background);
+        .use-var(color, tag-list-add-color);
+    }
+}

package/metaData/components/textarea/style.md

@@ -0,0 +1,37 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-textarea {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    resize: none;
+    .use-var(font-size, textarea-font-size);
+    .use-var(line-height, textarea-line-height);
+    .use-var(caret-color, input-caret-color);
+
+    &::placeholder {
+        .use-var(color, input-placeholder-color);
+    }
+
+    &.fake-textarea {
+        position: fixed;
+        bottom: 100%;
+        left: 0;
+        visibility: hidden;
+    }
+}
+
+.@{prefix}-input-container {
+
+    .statistic-text {
+        position: absolute;
+        .rem(bottom, 16);
+        .rem(right, 16);
+        .use-var(font-size, textarea-statistic-font-size);
+        .use-var(color, textarea-statistic-color);
+
+        &.exceed {
+            .use-var(color, danger-color);
+        }
+    }
+}

package/metaData/components/toast/style.md

@@ -0,0 +1,93 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-toast {
+
+    &-wrapper {
+        .full-screen();
+        z-index: @full-screen-z-index + 1;
+        display: flex;
+        justify-content: center;
+        .use-var(padding, toast-safe-padding);
+
+        &.no-event {
+            pointer-events: none;
+        }
+
+        &.from-center {
+            align-items: center;
+        }
+
+        &.from-top {
+            align-items: flex-start;
+            .use-var(padding-top, toast-from-top-position);
+        }
+
+        &.from-bottom {
+            align-items: flex-end;
+            .use-var(padding-bottom, toast-from-bottom-position);
+        }
+    }
+
+    &-inner {
+        .use-var(background, toast-background);
+        .use-var(color, toast-text-color);
+        .use-var(font-size, toast-font-size);
+        .use-var(line-height, toast-line-height);
+        .use-var(border-radius, toast-border-radius);
+        flex-direction: column;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: initial;
+
+        &.horizontal {
+            flex-direction: row;
+            .use-var(padding, toast-horizontal-padding);
+            .@{prefix}-icon {
+                flex: 0 0 auto;
+                .use-var(font-size, toast-horizontal-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-left, toast-horizontal-icon-content-gutter);
+            }
+        }
+
+        &.vertical {
+            .use-var(padding, toast-vertical-padding);
+            .@{prefix}-icon {
+                .use-var(font-size, toast-vertical-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-top, toast-vertical-icon-content-gutter);
+            }
+        }
+        .@{prefix}-loading {
+            .set-loading-color-var(mask-content-color);
+
+            &.arc .arc-bg {
+                .use-var(stroke, toast-loading-arc-background-color);
+            }
+        }
+    }
+
+    &-loading-wrapper {
+        display: flex;
+        position: relative;
+    }
+
+    &-loading-inner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        .use-var(font-size, toast-loading-inner-font-size);
+    }
+
+    &-content {
+        width: 100%;
+        text-align: center;
+        white-space: pre-line;
+    }
+}

package/metaData/components/transition/style.md

@@ -0,0 +1,28 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-fade {
+
+    &-enter {
+        opacity: 0;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        transition-property: opacity;
+        .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+    }
+
+    &-exit {
+        opacity: 1;
+    }
+
+    &-exit-active {
+        opacity: 0;
+        transition-property: opacity;
+        .use-transition-var(builtin-transition-fade-exit-duration, transition-fade-duration);
+    }
+
+    &-exit-done {
+        display: none;
+    }
+}