@fjyueke/arco-mcp 1.0.1 → 1.0.2

package/metaData/components/keyboard/style.md

@@ -0,0 +1,80 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-keyboard {
+    .use-var(background, keyboard-background);
+    .use-var(padding, keyboard-content-padding);
+    .noselect();
+
+    &-wrapper {
+        display: flex;
+    }
+
+    &-key-wrapper {
+        flex: 2 0 auto;
+    }
+
+    &-row {
+        display: flex;
+        &:not(&:nth-last-child(1)) {
+            .use-var(margin-bottom, keyboard-unified-margin);
+        }
+
+        .@{prefix}-keyboard-key {
+            &:not(&:nth-child(1)) {
+                .use-var(margin-left, keyboard-unified-margin);
+            }
+
+            &-special {
+                flex: 2.1 0 auto;
+            }
+        }
+    }
+
+    &-col {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .use-var(margin-left, keyboard-unified-margin);
+
+        .@{prefix}-keyboard-key {
+            &:not(&:nth-child(1)) {
+                .use-var(margin-top, keyboard-unified-margin);
+            }
+
+            &-confirm {
+                flex: 2.5 0 auto;
+                .use-var(background, keyboard-confirm-key-background);
+                .use-var(color, keyboard-confirm-key-color);
+                .use-var(font-size, keyboard-confirm-key-font-size);
+            }
+        }
+    }
+
+    &-key {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+
+        .use-var(font-weight, keyboard-key-font-weight);
+        .use-var(font-size, keyboard-key-font-size);
+        .use-var(line-height, keyboard-key-line-height);
+        .use-var(background, keyboard-key-background);
+        .use-var(border-radius, keyboard-key-border-radius);
+        .use-var(height, keyboard-key-height);
+        .use-var(border-radius, keyboard-key-border-radius);
+        .use-var(color, keyboard-key-color);
+
+        &:active {
+            .use-var(background, keyboard-key-active-background);
+        }
+
+        .@{prefix}-icon {
+            .use-var(font-size, keyboard-key-icon-size);
+        }
+    }
+
+    &-popup {
+      display: none;
+    }
+}

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

@@ -0,0 +1,7 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-load-more {
+    text-align: center;
+    .use-var(font-size, load-more-font-size);
+    .use-var(color, load-more-text-color);
+}

package/metaData/components/loading/style.md

@@ -0,0 +1,102 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-loading {
+    .set-loading-color-var(loading-color);
+    display: inline-block;
+    font-size: 0;
+    line-height: 0;
+    position: relative;
+    @keyframes changDeg {
+
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    &.circle,
+    &.arc,
+    &.spin {
+        animation: changDeg 1s infinite linear;
+    }
+
+    &.circle {
+
+        .loading-circle-middle {
+            stop-opacity: .5;
+        }
+
+        .loading-circle-end {
+            stop-opacity: 0;
+        }
+    }
+
+    &.dot {
+
+        .dot-cell {
+            display: inline-block;
+            .use-var(width, loading-dot-size);
+            .use-var(height, loading-dot-size);
+            .use-var(margin-left, loading-dot-gutter);
+
+            &:first-of-type {
+                margin-left: 0;
+            }
+
+            &.filleted {
+                border-radius: 50%;
+            }
+        }
+    }
+
+    &.spin {
+        .rem(height, 22);
+        .rem(width, 22);
+        position: relative;
+
+        .spin-cell {
+            position: absolute;
+            .rem(left, 10);
+            .rem(top, 1);
+            display: inline-block;
+            .rem(height, 10);
+            .rem(padding-bottom, 4);
+            overflow: hidden;
+            transform-origin: 50% bottom;
+
+            &-inner {
+                display: inline-block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 200%;
+                transform: scale(.5);
+                transform-origin: top left;
+                .rem(height, 12);
+            }
+        }
+    }
+
+    &.arc {
+
+        .arc-bg {
+            .use-var(stroke, loading-arc-background-color);
+        }
+    }
+
+    &.line {
+        width: 100%;
+
+        .loading-line-start,
+        .loading-line-end {
+            .use-var(stop-color, loading-color);
+        }
+
+        .loading-line-start {
+            stop-opacity: 0;
+        }
+    }
+}

package/metaData/components/masking/style.md

@@ -0,0 +1,30 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-masking {
+    &-mask,
+    &-content {
+        &.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
+        &[class*="-exit-done"] {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+    &-mask {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: @full-screen-z-index;
+        .use-var(background, mask-background);
+    }
+    &-content {
+        position: fixed;
+        z-index: @full-screen-z-index + 1;
+        &.at-center {
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}

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

@@ -0,0 +1,112 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-nav-bar {
+    position: relative;
+    width: 100%;
+    box-sizing: content-box;
+    .use-var(color, nav-bar-font-color);
+    .use-var(background, nav-bar-background);
+
+    &&-fixed {
+        .use-var(height, nav-bar-height);
+    }
+
+    &&-float {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: @full-screen-z-index;
+    }
+
+    &&-float:not(&-hide) &-wrapper-fixed {
+        // 部分安卓4机型在有两层fixed时会疯狂抖动，因此外层fixed时内层不再fixed
+        // 辣鸡安卓4机型在设置为absolute的时候快速回到顶部时又有残影，所以在hide状态还是fixed
+        position: absolute;
+    }
+
+    &&-hide {
+        .@{prefix}-nav-bar-title, .@{prefix}-nav-bar-right {
+            visibility: hidden;
+        }
+    }
+
+    &&-hide &-wrapper-border::after {
+        border-color: transparent;
+    }
+
+    &-wrapper {
+        background: inherit;
+        .use-var(height, nav-bar-height);
+        box-sizing: content-box;
+        width: 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        transition: all .1s linear;
+
+        &&-border {
+            .onepx-border-var(bottom, nav-bar-bottom-border-color);
+        }
+
+        &&-fixed {
+            // onepx-border mixin 会加上position relative，暗黑模式下优先级会高于这条优先级，所以加上important声明
+            position: fixed !important;
+            top: 0;
+            left: 0;
+            z-index: @fixed-z-index;
+        }
+    }
+
+    &-inner {
+        position: relative;
+        height: 100%;
+    }
+
+    &-left,
+    &-title,
+    &-right {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &-left,
+    &-right {
+        .text-overflow();
+        .use-var(font-size, nav-bar-two-sides-font-size);
+        .use-var(padding, nav-bar-two-sides-padding);
+        position: absolute;
+        top: 0;
+        height: 100%;
+        color: inherit;
+    }
+
+    &-left {
+        left: 0;
+    }
+
+    &-title {
+        .use-var(font-size, nav-bar-title-font-size);
+        .use-var(padding, nav-bar-title-padding);
+        width: 100%;
+        height: 100%;
+        color: inherit;
+        text-align: center;
+
+        &-text {
+            .use-var(font-size, nav-bar-title-text-font-size);
+            .text-overflow();
+            .noselect();
+            font-weight: bold;
+        }
+    }
+
+    &-right {
+        right: 0;
+    }
+
+    .nav-bar-back {
+        .use-var(height, nav-bar-back-icon-height);
+        font-size: 0;
+    }
+}

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

@@ -0,0 +1,124 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-notice-bar {
+    .use-var(background, notice-bar-background);
+    .use-var(color, notice-bar-color);
+    .use-var(padding, notice-bar-wrapper-padding);
+    display: flex;
+    align-items: flex-start;
+    font-size: 0;
+
+    &.no-wrap &-content-inner {
+        white-space: nowrap;
+    }
+
+    &.ellipsis &-content-inner {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &.wrapable &-content-inner {
+        .use-var(line-height, notice-bar-line-height);
+        .use-var(padding, notice-bar-vertical-padding, "", 0);
+    }
+
+    &-left-part,
+    &-right-part,
+    &-close {
+        .use-var(padding, notice-bar-vertical-padding, "", 0);
+        .use-var(font-size, notice-bar-text-font-size);
+        .@{prefix}-icon {
+            float: left;
+        }
+
+        &::after {
+            content: "";
+            display: block;
+            clear: both;
+        }
+    }
+
+    &-left-part {
+        .use-var-with-rtl(padding-right, notice-bar-horizontal-padding);
+    }
+
+    &-right-part,
+    &-close {
+        .use-var-with-rtl(padding-left, notice-bar-horizontal-padding);
+    }
+
+    &-content {
+        flex: 1;
+        overflow: hidden;
+        position: relative;
+
+        &-inner {
+            display: inline-block;
+            .use-var(font-size, notice-bar-text-font-size);
+            .use-var(line-height, notice-bar-single-line-height);
+
+            &.animate {
+                animation: marquee linear both;
+                .style-with-rtl({
+                    animation-name: marquee-reverse;
+                });
+            }
+        }
+        .@{prefix}-carousel {
+            .use-var(height, notice-bar-single-line-height);
+            white-space: normal;
+            .@{prefix}-carousel-item {
+                .use-var(font-size, notice-bar-text-font-size);
+                .use-var(line-height, notice-bar-single-line-height);
+            }
+        }
+        .@{prefix}-carousel-indicator {
+            display: none;
+        }
+    }
+    .@{prefix}-icon {
+        .use-var(font-size, notice-bar-icon-font-size);
+        .use-var(line-height, notice-bar-line-height);
+        .use-var(height, notice-bar-line-height); // for svg
+    }
+
+    &-gradient {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        z-index: 1;
+        .use-var(width, notice-bar-gradient-width);
+        .use-var(background, notice-bar-gradient-background);
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: -2PX;
+            transform: rotate(180deg);
+        }
+    }
+
+    @keyframes marquee {
+        0% {
+            transform: translate3d(0, 0, 0);
+        }
+
+        100% {
+            transform: translate3d(-100%, 0, 0);
+        }
+    }
+
+    @keyframes marquee-reverse {
+
+        0% {
+            transform: translate3d(0, 0, 0);
+        }
+
+        100% {
+            transform: translate3d(100%, 0, 0);
+        }
+    }
+}

package/metaData/components/notify/style.md

@@ -0,0 +1,40 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-notify {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    transition-property: height;
+    .use-var(color, notify-font-color);
+    .use-var(font-size, notify-font-size);
+    &-content {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        left: 0;
+        top: 0;
+        transition-property: transform;
+        .use-var(min-height, notify-min-height);
+    }
+    &-info {
+        background: transparent;
+        .use-var(color, notify-info-font-color);
+    }
+    &-success {
+        .use-var(background, notify-success-background);
+    }
+    &-error {
+        .use-var(background, notify-error-background);
+    }
+    &-warn {
+        .use-var(background, notify-warn-background);
+    }
+    &-content-transition-Y0 {
+        transform: translateY(0);
+    }
+    &-content-transition-Y100 {
+        transform: translateY(-100%);
+    }
+}

package/metaData/components/pagination/style.md

@@ -0,0 +1,105 @@
+@import '../../../style/mixin.less';
+
+
+.@{prefix}-pagination {
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .use-var(padding, pagination-padding);
+    &-prev-field, &-next-field {
+        flex: 1;
+        display: flex;
+        .use-var(color, font-color);
+    }
+    &-prev-field {
+        justify-content: flex-start;
+        &.flex-center {
+            justify-content: flex-end;
+            .use-var-with-rtl(margin-right, pagination-center-field-gutter);
+        }
+    }
+    &-next-field {
+        justify-content: flex-end;
+        &.flex-center {
+            justify-content: flex-start;
+            .use-var-with-rtl(margin-left, pagination-center-field-gutter);
+        }
+    }
+
+    &-field {
+        cursor: pointer;
+        text-align: center;
+        font-size: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        .use-var(font-size, pagination-field-font-size);
+        .use-var(line-height, pagination-field-line-height);
+        .noselect();
+        .btn-icon {
+            display: inline-flex;
+            align-items: center;
+            .style-with-rtl({
+                transform: scaleX(-1);
+            });
+            &.next {
+                transform: rotateY(180deg);
+                .style-with-rtl({
+                    transform: none;
+                });
+            }
+        }
+    }
+    &-field.button {
+        .use-var(padding, pagination-field-button-padding);
+        .use-var(border-radius, pagination-field-button-border-radius);
+        .use-var(min-height, pagination-field-button-min-height);
+        .use-var(background, pagination-field-default-background);
+        .use-var(color, pagination-field-default-text-color);
+        &.primary {
+            .use-var(background, pagination-field-primary-background);
+            .use-var(color, pagination-field-primary-text-color);
+        }
+        .btn-text {
+            .use-var(font-size, pagination-field-btn-text-font-size);
+        }
+        .btn-icon + .btn-text,
+        .btn-text + .btn-icon {
+            .use-var-with-rtl(margin-left, pagination-field-btn-icon-text-gutter);
+        }
+    }
+    &.android &-field.button {
+        .btn-text {
+            .rem(padding-top, 2);
+        }
+    }
+    &-field.text {
+        .use-var(color, pagination-field-default-text-color);
+        &.primary {
+            .use-var(color, pagination-field-text-primary-text-color);
+        }
+        &.disabled {
+            background: none;
+        }
+    }
+    &-field.disabled {
+        .use-var(background, pagination-field-disabled-background);
+        .use-var(color, pagination-field-disabled-text-color);
+    }
+
+    &-item {
+        flex: 0 0 auto;
+        text-align: center;
+        .use-var(font-size, pagination-item-font-size);
+        .use-var(line-height, pagination-item-line-height);
+        .use-var(color, pagination-item-default-text-color);
+        .active {
+            .use-var(color, pagination-item-primary-text-color);
+        }
+    }
+}
+.@{prefix}-pagination-simple {
+    justify-content: center;
+}

package/metaData/components/picker/style.md

@@ -0,0 +1,46 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-picker {
+
+    .@{prefix}-popup-content {
+        .use-var(box-shadow, picker-wrapper-shadow);
+        .use-var(border-top-left-radius, picker-wrapper-border-radius);
+        .use-var(border-top-right-radius, picker-wrapper-border-radius);
+    }
+
+    &-header {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .use-var(background-color, picker-header-background);
+        .use-var(height, picker-header-height);
+        .use-var(border-top-left-radius, picker-wrapper-border-radius);
+        .use-var(border-top-right-radius, picker-wrapper-border-radius);
+
+        &-title {
+            flex: 1;
+            text-align: center;
+            .use-var(font-size, picker-title-font-size);
+            .use-var(padding, picker-title-padding);
+            .use-var(color, font-color);
+            .text-overflow();
+        }
+
+        &-btn {
+            position: absolute;
+            .use-var(font-size, picker-button-font-size);
+            .use-var(padding, picker-button-padding);
+
+            &.left {
+                .set-prop-with-rtl(left, 0);
+                .use-var(color, picker-left-btn-color);
+            }
+
+            &.right {
+                .set-prop-with-rtl(right, 0);
+                .use-var(color, picker-right-btn-color);
+            }
+        }
+    }
+}