@fjyueke/arco-mcp 1.0.1 → 1.0.2

package/metaData/components/dialog/style.md

@@ -0,0 +1,271 @@
+@import "../../../style/mixin.less";
+
+@keyframes fade-scale-on {
+
+    0% {
+        opacity: 0; transform: scale(.5); }
+
+    100% {
+        opacity: 1; transform: scale(1); }
+}
+
+@keyframes fade-scale-off {
+
+    0% {
+        opacity: 1; transform: scale(1); }
+
+    100% {
+        opacity: 0; transform: scale(.5); }
+}
+
+.@{prefix}-fade-scale-enter-active {
+    animation: fade-scale-on cubic-bezier(.2, 1.23, .25, 1) forwards;
+    animation-duration: var(--builtin-transition-fade-scale-enter-duration, .45s);
+}
+
+.@{prefix}-fade-scale-exit-active {
+    animation: fade-scale-off cubic-bezier(.48, .04, .52, .96) forwards;
+    animation-duration: var(--builtin-transition-fade-scale-exit-duration, .15s);
+}
+
+.@{prefix}-dialog {
+
+    &-mask,
+    &-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    &-mask {
+        z-index: @full-screen-z-index;
+        .use-var(background, dialog-mask-background);
+    }
+
+    &-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: @full-screen-z-index + 1;
+        pointer-events: none;
+    }
+
+    &-content {
+        position: relative;
+        .use-var(width, dialog-content-width);
+        pointer-events: visible;
+
+        &.android {
+            .use-var(width, dialog-content-android-width);
+        }
+    }
+
+    &-container.pre-mount &-content,
+    &-container[class*="-exit-done"] &-content {
+        pointer-events: none;
+    }
+
+    &-part {
+        .use-var(background, dialog-content-background);
+
+        &.android {
+
+            &:first-of-type {
+                .use-var(border-top-left-radius, dialog-content-android-border-radius);
+                .use-var(border-top-right-radius, dialog-content-android-border-radius);
+            }
+
+            &:last-of-type {
+                .use-var(border-bottom-left-radius, dialog-content-android-border-radius);
+                .use-var(border-bottom-right-radius, dialog-content-android-border-radius);
+            }
+        }
+
+        &.ios {
+
+            &:first-of-type {
+                .use-var(border-top-left-radius, dialog-content-border-radius);
+                .use-var(border-top-right-radius, dialog-content-border-radius);
+            }
+
+            &:last-of-type {
+                .use-var(border-bottom-left-radius, dialog-content-border-radius);
+                .use-var(border-bottom-right-radius, dialog-content-border-radius);
+            }
+        }
+    }
+
+    &-header {
+        position: relative;
+
+        &.ios {
+            text-align: center;
+            .use-var(padding-top, dialog-ios-vertical-padding);
+            .use-var(padding-left, dialog-ios-horizontal-padding);
+            .use-var(padding-right, dialog-ios-horizontal-padding);
+            .use-var(font-size, dialog-header-ios-font-size);
+            .use-var(line-height, dialog-header-ios-line-height);
+            .text-medium();
+
+            &.only-title {
+                .use-var(padding-bottom, dialog-ios-vertical-padding);
+            }
+        }
+
+        &.android {
+            .use-var(color, dialog-header-android-color);
+        }
+    }
+
+    &-body {
+
+        &.ios {
+            .use-var(padding-top, dialog-ios-header-body-gutter);
+            .use-var(padding-left, dialog-ios-horizontal-padding);
+            .use-var(padding-right, dialog-ios-horizontal-padding);
+            .use-var(padding-bottom, dialog-ios-vertical-padding);
+            .use-var(color, dialog-body-ios-color);
+            .use-var(font-size, dialog-body-ios-font-size);
+            .use-var(line-height, dialog-body-ios-line-height);
+
+            &.sub-title {
+                .use-var(padding-top, dialog-ios-vertical-padding);
+            }
+        }
+
+        &.android {
+            .use-var(padding-top, dialog-android-header-body-gutter);
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(color, dialog-body-android-color);
+            .use-var(font-size, dialog-body-android-font-size);
+            .use-var(line-height, dialog-body-android-line-height);
+        }
+    }
+
+    &-header,
+    &-body {
+
+        &.left {
+            .set-value-with-rtl(text-align, left);
+        }
+
+        &.center {
+            text-align: center;
+        }
+
+        &.right {
+            .set-value-with-rtl(text-align, right);
+        }
+    }
+
+    &-header,
+    &-body.sub-title {
+
+        &.android {
+            .use-var(padding-top, dialog-android-vertical-padding);
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(font-size, dialog-header-android-font-size);
+            .use-var(line-height, dialog-header-android-line-height);
+        }
+
+        &.ios {
+            .use-var(color, dialog-header-ios-color);
+        }
+    }
+
+    &-footer {
+        display: flex;
+        align-items: center;
+
+        &.android {
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(padding-top, dialog-android-body-footer-gutter);
+            .use-var(padding-bottom, dialog-android-vertical-padding);
+            justify-content: flex-end;
+            .set-value-with-rtl(text-align, right);
+
+            .dialog-footer-button {
+                .use-var(color, dialog-footer-android-color);
+                .use-var(font-size, dialog-footer-android-font-size);
+                .use-var(line-height, dialog-footer-android-line-height);
+
+                &:not(:last-child) {
+                    .use-var-with-rtl(margin-right, dialog-footer-android-button-gutter);
+                }
+            }
+        }
+
+        &.ios {
+            overflow: hidden;
+
+            .dialog-footer-button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .use-var(height, dialog-footer-ios-height);
+                .use-var(font-size, dialog-footer-ios-font-size);
+                .use-var(color, dialog-footer-ios-color);
+            }
+
+            &:not(.collapsed):not(.type-button) {
+                .onepx-border-var(top, line-color);
+
+                .dialog-footer-button {
+                    flex: 1;
+
+                    &:not(:last-child) {
+                        .onepx-border-var(right, line-color);
+
+                        [dir='rtl'] & {
+                            .onepx-border-var(left, line-color);
+                            &::after {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.collapsed {
+                flex-direction: column;
+
+                .dialog-footer-button {
+                    width: 100%;
+                    .onepx-border-var(top, line-color);
+                }
+            }
+
+            &.type-button {
+                flex-direction: column;
+                .use-var(padding-left, dialog-ios-horizontal-padding);
+                .use-var(padding-right, dialog-ios-horizontal-padding);
+                .use-var(padding-bottom, dialog-ios-vertical-padding);
+
+                .dialog-footer-button {
+                    width: 100%;
+                    .use-var(border-radius, dialog-button-footer-border-radius);
+                    .use-var(height, dialog-button-footer-height);
+
+                    &:first-child {
+                        .use-var(color, dialog-button-footer-primary-color);
+                        .use-var(background, dialog-button-footer-primary-background);
+                    }
+
+                    &:not(:first-child) {
+                        .use-var(color, dialog-button-footer-color);
+                        .use-var(margin-top, dialog-button-footer-gutter);
+                    }
+
+                    &:last-child {
+                        .rem(margin-bottom, -7);
+                    }
+                }
+            }
+        }
+    }
+}

package/metaData/components/divider/style.md

@@ -0,0 +1,68 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .use-var(padding, divider-padding, '', 0);
+    .use-var(border-color, divider-line-color);
+    border-width: 0;
+    border-style: solid;
+
+    &::before,
+    &::after {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: inherit;
+        border-width: 0;
+        border-color: inherit;
+        border-style: inherit;
+        .use-var(border-top-width, divider-line-thickness);
+    }
+
+    &::before {
+        content: '';
+    }
+
+    &--hairline {
+        &::before,
+        &::after {
+            @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+                transform: scaleY(0.5);
+            }
+
+            @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+                transform: scaleY(0.33333333);
+            }
+        }
+    }
+
+    &--with-text {
+        .use-var(font-size, divider-content-font-size);
+        .use-var(color, divider-content-font-color);
+
+        &::before {
+            .use-var-with-rtl(margin-right, divider-content-padding);
+        }
+
+        &::after {
+            content: '';
+            .use-var-with-rtl(margin-left, divider-content-padding);
+        }
+    }
+
+    &--with-width {
+        &::before,
+        &::after {
+            flex-shrink: 0;
+            flex-grow: 0;
+        }
+    }
+
+    &--text-left::before {
+        .use-var(max-width, divider-left-width);
+    }
+    &--text-right::after {
+        .use-var(max-width, divider-right-width);
+    }
+}

package/metaData/components/dropdown/style.md

@@ -0,0 +1,108 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-dropdown {
+    position: fixed;
+    overflow: hidden;
+    left: 0;
+    right: 0;
+    z-index: @full-screen-z-index;
+
+    &-options {
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: @full-screen-z-index + 1;
+        will-change: transform;
+
+        .drop-up & {
+            bottom: 0;
+        }
+        .use-var(background-color, dropdown-options-background-color);
+
+        &-container {
+            height: auto;
+        }
+
+        &-wrap {
+            &.use-column {
+                display: flex;
+                flex-wrap: wrap;
+                .use-var(padding, dropdown-multi-rows-options-container-padding);
+                .use-var(margin, dropdown-multi-rows-options-container-margin);
+            }
+        }
+
+        &-item {
+            .use-var(padding, dropdown-options-item-padding);
+            .use-var(font-size, dropdown-options-item-font-size);
+            .use-var(line-height, dropdown-options-item-line-height);
+            .use-var(color, dropdown-options-item-color);
+            .set-value-with-rtl(text-align, left);
+            position: relative;
+
+            &.selected {
+                .use-var(color, dropdown-options-item-selected-color);
+            }
+
+            &.selected &-icon {
+                .use-var(color, dropdown-options-item-selected-color);
+            }
+
+            &.disabled {
+                .use-var(color, dropdown-options-item-disabled-color);
+            }
+
+            &-icon {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                .use-var-with-rtl(right, dropdown-options-item-icon-right);
+                color: transparent;
+            }
+        }
+
+        &-item-fake-col,
+        &-item-col {
+            flex: 1;
+            .use-var(margin-right, dropdown-multi-rows-options-gutter);
+            .use-var(margin-bottom, dropdown-multi-rows-options-gutter);
+            .use-var(padding, dropdown-multi-rows-options-item-padding);
+        }
+
+        &-item-col {
+            text-align: center;
+            .use-var(font-size, dropdown-multi-rows-options-item-font-size);
+            .use-var(line-height, dropdown-multi-rows-options-item-line-height);
+            .use-var(color, dropdown-multi-rows-options-item-color);
+            .use-var(border-radius, dropdown-multi-rows-options-item-border-radius);
+            .use-var(background, dropdown-multi-rows-options-item-background);
+
+            &.selected {
+                .use-var(color, dropdown-multi-rows-options-item-selected-color);
+                .use-var(background, dropdown-multi-rows-options-item-selected-background);
+            }
+
+            &.disabled {
+                .use-var(color, dropdown-options-item-disabled-color);
+            }
+        }
+
+        &-item-col &-item-icon {
+            display: none;
+        }
+    }
+
+    &-mask {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        .use-var(background-color, dropdown-mask-background-color);
+
+        &.is-show {
+            opacity: 1;
+        }
+    }
+}

package/metaData/components/dropdown-menu/style.md

@@ -0,0 +1,60 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-dropdown-menu {
+    .@{prefix}-select{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .onepx-border-var(bottom, line-color);
+        &-item {
+            position: relative;
+            .use-var(padding, dropdown-menu-padding);
+            .use-var(font-size, dropdown-menu-font-size);
+            .use-var(line-height, dropdown-menu-line-height);
+            flex: 1;
+            display:flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: center;
+            .use-var(color, dropdown-menu-color);
+            &.is-disabled {
+                .use-var(color, dropdown-menu-disabled-color);
+            }
+            &.is-selected {
+                .use-var(color, dropdown-menu-selected-color);
+            }
+            &-tip {
+                display: inline-block;
+                white-space: nowrap;
+                .use-var(color, dropdown-menu-tip-color);
+                .use-var-with-rtl(padding-right, dropdown-menu-tip-padding-right);
+            }
+            &-label {
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: center;
+                &-text {
+                    flex: auto;
+                    display: inline-block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    .use-var(max-width, dropdown-menu-label-max-width);
+                    text-overflow: ellipsis;
+                }
+            }
+            &-icon {
+                flex: none;
+                .use-var(color, dropdown-menu-icon-color);
+                .use-var(width, dropdown-menu-icon-size);
+                .use-var(height, dropdown-menu-icon-size);
+                .use-var-with-rtl(margin-left, dropdown-menu-icon-margin-left);
+                transform: rotate(0deg);
+                transition: transform .2s cubic-bezier(.34, .69, .1, 1);
+                &.is-show {
+                    .use-var(color, dropdown-menu-icon-selected-color);
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+}

package/metaData/components/ellipsis/style.md

@@ -0,0 +1,31 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-ellipsis {
+    .use-var(font-size, ellipsis-default-text-size);
+
+    &-native.ellipsis,
+    &-js-content-initial {
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        -webkit-box-orient: vertical;
+        position: relative;
+    }
+
+    &-native-ellipsis-node {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        .use-var(background, ellipsis-float-ellipsis-node-background);
+        .use-var(padding-left, ellipsis-float-ellipsis-node-padding-left);
+    }
+
+    &-js-content-text-pre {
+        white-space: pre-line;
+    }
+    
+    &-js-content-ellipsis {
+        display: none;
+    }
+}

package/metaData/components/form/style.md

@@ -0,0 +1,105 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-form {
+    &-item {
+        display: flex;
+        align-items: flex-start;
+        border-top-width: 1px;
+        border-top-style: solid;
+        .use-var(border-top-color, form-item-border-divider-color);
+
+        &:first-child {
+            border: none;
+        }
+    }
+
+    &-label-item {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: flex-start;
+        .use-var(font-size, form-item-label-item-font-size);
+        .use-var(line-height, form-item-label-item-line-height);
+        .use-var(color, form-item-label-item-color);
+        .use-var-with-rtl(padding-right, form-item-label-item-gutter);
+        .use-var(width, form-item-label-item-width);
+
+        &-required-asterisk {
+            position: absolute;
+            .set-prop-with-rtl(left, -0.6em);
+            top: 0;
+
+            .use-var(font-size, form-item-label-item-font-size);
+            .use-var(line-height, form-item-label-item-line-height);
+            .use-var(color, form-item-label-item-required-asterisk-color);
+        }
+        .disabled & {
+            .use-var(color, input-disabled-color);
+        }
+    }
+    &-item-control {
+        padding: 16px 0;
+        .@{prefix}-input-wrap, .@{prefix}-input {
+            padding: 0;
+        }
+
+        .@{prefix}-input-wrap.textarea {
+            padding: 0;
+        }
+
+        &-wrapper {
+            width: 100%;
+            flex: 1;
+            position: relative;
+            .@{prefix}-input-wrap.single-line {
+                .use-var(height, input-text-line-height);
+            }
+        }
+    }
+    &-item-message {
+        .rem(font-size, 12);
+        .use-var(color, form-item-label-item-required-asterisk-color);
+        .rem(margin-top, -5);
+        svg,
+        span {
+            vertical-align: middle;
+        }
+
+        svg {
+            .rem-with-rtl(margin-right, 4);
+        }
+        margin-bottom: 16px;
+    }
+    &-item-error-message {
+        .use-var(color, form-item-error-message-color);
+    }
+
+    &-item-warning-message {
+        .use-var(color, form-item-warning-message-color);
+    }
+
+    &-item.@{prefix}-form-item-vertical {
+        display: block;
+        .@{prefix}-input-wrap {
+            .set-prop-with-rtl(padding-left, 0);
+        }
+        .@{prefix}-form-label-item {
+            width: auto;
+            margin-top: 16px;
+            .use-var(height, form-item-label-item-font-size);
+            .use-var( line-height, form-item-label-item-font-size);
+            &-required-asterisk {
+                .use-var(height, form-item-label-item-font-size);
+                .use-var( line-height, form-item-label-item-font-size);
+            }
+        }
+    }
+
+    &-picker-link-container {
+        .rem(font-size, 16);
+        .use-var(color, font-color);
+        &-placeholder {
+            .use-var(color, input-placeholder-color);
+        }
+    }
+}