From 5108cb31ac610bcdb2831ea545cd71ed2b2bdbcc Mon Sep 17 00:00:00 2001 From: MNZhu Date: Fri, 24 Feb 2023 17:22:25 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat(modal):=20=E5=A2=9E=E5=8A=A0=E5=8F=8D?= =?UTF-8?q?=E9=A6=88=E5=BC=B9=E7=AA=97modal=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/modal/index.js | 28 +++ src/modal/index.less | 516 +++++++++++++++++++++++++++++++++++++++++++ src/modal/vars.less | 28 +++ 3 files changed, 572 insertions(+) create mode 100644 src/modal/index.js create mode 100644 src/modal/index.less create mode 100644 src/modal/vars.less diff --git a/src/modal/index.js b/src/modal/index.js new file mode 100644 index 0000000..d829ec6 --- /dev/null +++ b/src/modal/index.js @@ -0,0 +1,28 @@ +/** + * Copyright (c) 2022 - present TinyVue Authors. + * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. + * + * Use of this source code is governed by an MIT-style license. + * + * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, + * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR + * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. + * + */ + +export default { + "tiny-mobile-modal-text-font-size": "14px", + "tiny-mobile-modal-header-font-size": "16px", + "tiny-mobile-modal-text-color": "#191919", + "tiny-mobile-modal-alert-font-size": "22px", + "tiny-mobile-modal-box-background-color": "#fff", + "tiny-mobile-modal-box-shadow": "0 8px 40px 0 rgba(0, 0, 0, 0.2)", + "tiny-mobile-modal-close-btn-top": "13px", + "tiny-mobile-modal-close-btn-scale": "scale(1, 1)", + "tiny-mobile-modal-close-btn-padding-horizontal-vertical": 0, + "tiny-mobile-modal-close-btn-background-color-hover": "#fff", + "tiny-mobile-modal-btn-width": "112px", + "tiny-mobile-modal-single-btn-width": "144px", + "tiny-mobile-modal-btn-height": "36px", + "tiny-mobile-modal-cancel-btn-bg-color": "#f5f5f5", +}; diff --git a/src/modal/index.less b/src/modal/index.less new file mode 100644 index 0000000..b0fdbd7 --- /dev/null +++ b/src/modal/index.less @@ -0,0 +1,516 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +@import '../custom.less'; +@import './vars.less'; + + +@modal-prefix-cls: ~'@{css-prefix}mobile-modal'; + +@button-default-prefix-cls: ~'@{css-prefix}mobile-button--default'; +@button-prefix-cls: ~'@{css-prefix}mobile-button'; +@button-default-prefix-cls: ~'@{css-prefix}mobile-button--default'; +@button-prefix-cls: ~'@{css-prefix}mobile-button'; + +.@{modal-prefix-cls}{ + .component-css-vars-modal(); +} + +.@{modal-prefix-cls} { + &__wrapper { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + font-size: var(--ti-mobile-modal-text-font-size); + color: var(--ti-mobile-modal-text-color); + transition: top 0.4s; + + &.active { + display: block; + } + + &.is__visible { + &.is__mask { + &:before { + background-color: rgba(0, 0, 0, 0.3); + } + } + + &.type__message { + .@{modal-prefix-cls}__box { + transform: translateY(0); + } + } + + &:not(.type__message) { + .@{modal-prefix-cls}__box:not(.is__drag) { + top: 15vh; + transition: top 0s ease-in, opacity 0.4s ease-in; + } + } + + .@{modal-prefix-cls}__box { + opacity: 1; + visibility: visible; + } + } + + &:not(.lock__view) { + pointer-events: none; + } + + &.lock__scroll { + overflow: hidden; + } + + &:not(.lock__scroll) { + overflow: auto; + } + + &:not(.type__message) { + .@{modal-prefix-cls}__text { + font-size: var(--ti-mobile-modal-text-font-size); + color: var(--ti-mobile-common-color-text-secondary); + line-height: 1.5; + } + } + + &.lock__view, + &.is__mask { + &:before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + pointer-events: auto; + } + } + + &.is__animat { + &.is__mask { + &:before { + transition: background-color, 0.2s, ease-in-out; + } + } + + &.type__message { + .@{modal-prefix-cls}__box { + &:not(.is__drag) { + transition: all, 0.2s, ease-out; + } + } + } + } + + &.size__small, + &.size__mini { + font-size: var(--ti-mobile-modal-text-font-size); + + .@{modal-prefix-cls}__box { + padding: 6px 0; + } + + .@{modal-prefix-cls}__body { + padding: 4px 14px 10px 14px; + } + + .@{modal-prefix-cls}__footer { + padding: 4px 14px 8px 14px; + } + + .@{modal-prefix-cls}__header { + font-size: var(--ti-mobile-modal-header-font-size); + padding: 6px 30px 8px 14px; + } + + .@{modal-prefix-cls}__zoom-btn, + .@{modal-prefix-cls}__close-btn { + font-size: var(--ti-mobile-modal-header-font-size); + top: 10px; + } + } + + &.type__message, + &.type__alert, + &.type__confirm { + .@{modal-prefix-cls}__body { + white-space: normal; + word-break: break-word; + } + } + + &.type__message { + text-align: center; + + .@{modal-prefix-cls}__box { + display: inline-block; + padding: 24px; + margin-top: 0; + width: auto; + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1); + transform: translateY(-10%); + + .@{modal-prefix-cls}__body { + &:after { + content: ''; + display: block; + clear: both; + height: 0; + overflow: hidden; + visibility: hidden; + } + } + + .@{modal-prefix-cls}__content { + max-width: 800px; + float: left; + } + } + + .@{modal-prefix-cls}__status-wrapper { + font-size: var(--ti-mobile-modal-small-btn-font-size); + padding-right: 10px; + } + } + + &.type__modal, + &.type__alert, + &.type__confirm { + .@{modal-prefix-cls}__box { + display: flex; + flex-direction: column; + position: absolute; + left: 50%; + top: 0; + box-shadow: var(--ti-mobile-modal-box-shadow); + border: 1px solid var(--ti-mobile-modal-border-color); + + .@{modal-prefix-cls}__header { + cursor: move; + } + } + } + + &.type__modal { + .@{modal-prefix-cls}__body { + overflow: auto; + + .@{modal-prefix-cls}__content { + overflow: auto; + } + } + } + + &.type__alert, + &.type__confirm { + .@{modal-prefix-cls}__status-wrapper { + font-size: var(--ti-mobile-modal-alert-font-size); + padding: 0 10px 0 2px; + } + } + + &.is__maximize { + .@{modal-prefix-cls}__box { + .@{modal-prefix-cls}__header { + cursor: default; + } + } + + .@{modal-prefix-cls}__resize { + .wl-resize, + .wr-resize, + .swst-resize, + .sest-resize, + .st-resize, + .swlb-resize, + .selb-resize, + .sb-resize { + display: none; + } + } + } + } + + &__box { + width: 90%; + background-color: var(--ti-mobile-modal-box-bg-color); + border-radius: 16px; + font-size: var(--ti-mobile-modal-header-font-size); + box-shadow: var(--ti-mobile-modal-box-shadow); + text-align: left; + pointer-events: auto; + visibility: hidden; + opacity: 0; + padding-top: 12px; + + + &.is__drag { + cursor: move; + + .@{modal-prefix-cls}__body, + .@{modal-prefix-cls}__footer { + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + .@{modal-prefix-cls}__body { + overflow: hidden; + + .@{modal-prefix-cls}__content { + overflow: hidden; + } + } + } + } + + &__status-wrapper { + flex-shrink: 0; + display: flex; + align-items: center; + } + + &__status-icon { + font-style: normal; + } + + &__content { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + flex-grow: 1; + } + + &__header, + &__body, + &__footer { + position: relative; + } + + &__body { + display: flex; + flex-grow: 1; + padding: 20px 44px 28px 44px; + } + + &__header { + flex-shrink: 0; + color: var(--ti-mobile-modal-text-color); + font-size: var(--ti-mobile-modal-header-font-size); + display: flex; + align-items: center; + justify-content: center; + font-weight: 500; + border-bottom: none; + padding: 20px 44px 0px 44px; + user-select: none; + } + + &__zoom-btn, + &__close-btn { + font-size: var(--ti-mobile-modal-header-font-size); + position: absolute; + right: 24px; + top: var(--ti-mobile-modal-close-btn-top); + z-index: 1; + fill: var(--ti-mobile-modal-text-color); + transform: var(--ti-mobile-modal-close-btn-scale); + cursor: pointer; + padding: var(--ti-mobile-modal-close-btn-padding-horizontal-vertical); + border-radius: 4px; + + &:hover { + fill: var(--ti-mobile-modal-text-color); + background-color:var(--ti-mobile-modal-close-btn-bg-color-hover) + } + } + + &__zoom-btn { + right: 44px; + border-color: #c0c4cc; + + &:hover { + border-color: #606266; + } + } + + &__footer { + flex-shrink: 0; + text-align: center; + padding-bottom: 32px; + + .@{button-prefix-cls}{ + border-radius: 18px; + width: var(--ti-mobile-modal-btn-width); + height: var(--ti-mobile-modal-btn-height); + line-height: var(--ti-mobile-modal-btn-height); + + &__single { + width: var(--ti-mobile-modal-single-btn-width); + } + } + .@{button-default-prefix-cls}{ + display: inline-block; + margin-right: 16px; + background-color: var(--ti-mobile-modal-cancel-btn-bg-color, #f5f5f5); + border: none; + color: var(--ti-mobile-modal-text-color); + } + } + + &__resize { + @SpaceSize: 8px; + + .wl-resize, + .wr-resize, + .swst-resize, + .sest-resize, + .st-resize, + .swlb-resize, + .selb-resize, + .sb-resize { + position: absolute; + z-index: 100; + } + + .wl-resize, + .wr-resize { + width: @SpaceSize; + height: 100%; + top: 0; + cursor: w-resize; + } + + .wl-resize { + left: -@SpaceSize / 2 + 1; + } + + .wr-resize { + right: -@SpaceSize / 2 + 1; + } + + .swst-resize, + .sest-resize, + .swlb-resize, + .selb-resize { + width: @SpaceSize + 2; + height: @SpaceSize + 2; + z-index: 101; + } + + .swst-resize, + .sest-resize { + top: -@SpaceSize; + } + + .swlb-resize, + .selb-resize { + bottom: -@SpaceSize; + } + + .sest-resize, + .swlb-resize { + cursor: sw-resize; + } + + .swst-resize, + .selb-resize { + cursor: se-resize; + } + + .swst-resize, + .swlb-resize { + left: -@SpaceSize; + } + + .sest-resize, + .selb-resize { + right: -@SpaceSize; + } + + .st-resize, + .sb-resize { + width: 100%; + height: @SpaceSize; + left: 0; + cursor: s-resize; + } + + .st-resize { + top: -@SpaceSize / 2 + 1; + } + + .sb-resize { + bottom: -@SpaceSize / 2 + 1; + } + } +} + +@keyframes modal-fade-in { + 0% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } + + 100% { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes modal-fade-out { + 0% { + transform: translate3d(0, 0, 0); + opacity: 1; + } + + 100% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } +} + +@keyframes modal-fade-in { + 0% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } + + 100% { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes modal-fade-out { + 0% { + transform: translate3d(0, 0, 0); + opacity: 1; + } + + 100% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } +} \ No newline at end of file diff --git a/src/modal/vars.less b/src/modal/vars.less new file mode 100644 index 0000000..f5a0b00 --- /dev/null +++ b/src/modal/vars.less @@ -0,0 +1,28 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +.component-css-vars-modal() { + --ti-mobile-modal-text-font-size: 14px; + --ti-mobile-modal-header-font-size: 16px; + --ti-mobile-modal-text-color: var(--ti-mobile-common-color-text-primary, #191919); + --ti-mobile-modal-alert-font-size: 22px; + --ti-mobile-modal-box-bg-color: #fff; + --ti-mobile-modal-box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.2); + --ti-mobile-modal-close-btn-top: 13px; + --ti-mobile-modal-close-btn-scale: scale(1, 1); + --ti-mobile-modal-close-btn-padding-horizontal-vertical: 0; + --ti-mobile-modal-close-btn-bg-color-hover: #fff; + --ti-mobile-modal-btn-width: 112px; + --ti-mobile-modal-single-btn-width: 144px; + --ti-mobile-modal-btn-height: 36px; + --ti-mobile-modal-cancel-btn-bg-color: #f5f5f5; +} From cd8073acecf30b829798014930567f7e26a598a9 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Mon, 27 Feb 2023 10:01:25 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix(modal):=20css=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E5=91=BD=E5=90=8D=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/modal/index.less | 2 +- src/modal/vars.less | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/modal/index.less b/src/modal/index.less index b0fdbd7..39c48c7 100644 --- a/src/modal/index.less +++ b/src/modal/index.less @@ -337,7 +337,7 @@ fill: var(--ti-mobile-modal-text-color); transform: var(--ti-mobile-modal-close-btn-scale); cursor: pointer; - padding: var(--ti-mobile-modal-close-btn-padding-horizontal-vertical); + padding: 0; border-radius: 4px; &:hover { diff --git a/src/modal/vars.less b/src/modal/vars.less index f5a0b00..4538421 100644 --- a/src/modal/vars.less +++ b/src/modal/vars.less @@ -19,7 +19,6 @@ --ti-mobile-modal-box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.2); --ti-mobile-modal-close-btn-top: 13px; --ti-mobile-modal-close-btn-scale: scale(1, 1); - --ti-mobile-modal-close-btn-padding-horizontal-vertical: 0; --ti-mobile-modal-close-btn-bg-color-hover: #fff; --ti-mobile-modal-btn-width: 112px; --ti-mobile-modal-single-btn-width: 144px; From 8f53a6a216b445ce477a5a6a3a534b4d8dfae74a Mon Sep 17 00:00:00 2001 From: MNZhu Date: Mon, 27 Feb 2023 10:01:56 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix(modal):=20css=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E5=91=BD=E5=90=8D=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/modal/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/modal/index.js b/src/modal/index.js index d829ec6..db42014 100644 --- a/src/modal/index.js +++ b/src/modal/index.js @@ -19,7 +19,6 @@ export default { "tiny-mobile-modal-box-shadow": "0 8px 40px 0 rgba(0, 0, 0, 0.2)", "tiny-mobile-modal-close-btn-top": "13px", "tiny-mobile-modal-close-btn-scale": "scale(1, 1)", - "tiny-mobile-modal-close-btn-padding-horizontal-vertical": 0, "tiny-mobile-modal-close-btn-background-color-hover": "#fff", "tiny-mobile-modal-btn-width": "112px", "tiny-mobile-modal-single-btn-width": "144px", From 178781f08dbb8f3d06671fd95b8f86c2bc8b77be Mon Sep 17 00:00:00 2001 From: MNZhu Date: Mon, 27 Feb 2023 14:42:45 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix(modal):=20=E5=8D=95=E5=BC=95=E5=8F=B7?= =?UTF-8?q?=E5=8F=98=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/modal/index.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/modal/index.js b/src/modal/index.js index db42014..50023c1 100644 --- a/src/modal/index.js +++ b/src/modal/index.js @@ -11,17 +11,17 @@ */ export default { - "tiny-mobile-modal-text-font-size": "14px", - "tiny-mobile-modal-header-font-size": "16px", - "tiny-mobile-modal-text-color": "#191919", - "tiny-mobile-modal-alert-font-size": "22px", - "tiny-mobile-modal-box-background-color": "#fff", - "tiny-mobile-modal-box-shadow": "0 8px 40px 0 rgba(0, 0, 0, 0.2)", - "tiny-mobile-modal-close-btn-top": "13px", - "tiny-mobile-modal-close-btn-scale": "scale(1, 1)", - "tiny-mobile-modal-close-btn-background-color-hover": "#fff", - "tiny-mobile-modal-btn-width": "112px", - "tiny-mobile-modal-single-btn-width": "144px", - "tiny-mobile-modal-btn-height": "36px", - "tiny-mobile-modal-cancel-btn-bg-color": "#f5f5f5", -}; + 'tiny-mobile-modal-text-font-size': '14px', + 'tiny-mobile-modal-header-font-size': '16px', + 'tiny-mobile-modal-text-color': '#191919', + 'tiny-mobile-modal-alert-font-size': '22px', + 'tiny-mobile-modal-box-background-color': '#fff', + 'tiny-mobile-modal-box-shadow': '0 8px 40px 0 rgba(0, 0, 0, 0.2)', + 'tiny-mobile-modal-close-btn-top': '13px', + 'tiny-mobile-modal-close-btn-scale': 'scale(1, 1)', + 'tiny-mobile-modal-close-btn-background-color-hover': '#fff', + 'tiny-mobile-modal-btn-width': '112px', + 'tiny-mobile-modal-single-btn-width': '144px', + 'tiny-mobile-modal-btn-height': '36px', + 'tiny-mobile-modal-cancel-btn-bg-color': '#f5f5f5' +} From 50d11cbd9cd0f1fbd601a55189dcfd4d99b7d8c4 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Mon, 27 Feb 2023 15:08:44 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix(modal):=20css=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=A7=84=E8=8C=83=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/base/basic-var.less | 11 ++++++----- src/modal/index.js | 32 ++++++++++++++++---------------- src/modal/vars.less | 6 +++--- 3 files changed, 25 insertions(+), 24 deletions(-) diff --git a/src/base/basic-var.less b/src/base/basic-var.less index 8194bc8..56c175b 100644 --- a/src/base/basic-var.less +++ b/src/base/basic-var.less @@ -77,19 +77,20 @@ --ti-mobile-common-color-link-dark: var(--ti-mobile-base-color-common-2); /* 文本_链接__深色*/ --ti-mobile-common-color-link-highlight: var(--ti-mobile-base-color-brand-1); /* 文本_链接_高亮色*/ --ti-mobile-common-color-link-gray: var(--ti-mobile-base-color-common-13); /* 文本_链接_灰色加强*/ - --ti-mobile-common-color-link-white: var( --ti-mobile-base-color-common-12); /* 文本_链接_白色*/ + --ti-mobile-common-color-link-white: var(--ti-mobile-base-color-common-12); /* 文本_链接_白色*/ /* 线颜色*/ --ti-mobile-common-color-line-hightlight: var(--ti-mobile-base-color-brand-1); /* 高亮_描边色*/ - --ti-mobile-common-color-line-dark: var( --ti-mobile-base-color-common-9); /* 深_描边色*/ - --ti-mobile-common-color-line-light: var( --ti-mobile-base-color-common-10); /* 浅_描边色*/ + --ti-mobile-common-color-line-dark: var(--ti-mobile-base-color-common-9); /* 深_描边色*/ + --ti-mobile-common-color-line-light: var(--ti-mobile-base-color-common-10); /* 浅_描边色*/ /* 蒙层色*/ - --ti-mobile-common-color-mask-light: rgba(0,0,0,0.5); /* 蒙层_相对浅*/ - --ti-mobile-common-color-mask-dark: rgba(0,0,0,0.75); /* 蒙层_相对深*/ + --ti-mobile-common-color-mask-light: rgba(0, 0, 0, 0.5); /* 蒙层_相对浅*/ + --ti-mobile-common-color-mask-dark: rgba(0, 0, 0, 0.75); /* 蒙层_相对深*/ /* 蒙层色*/ --ti-mobile-common-bg-color-white: var(--ti-mobile-base-color-bg-3); /* 背景_白*/ --ti-mobile-common-bg-color-main: var(--ti-mobile-base-color-brand-1); /* 背景_蓝*/ --ti-mobile-common-bg-color-light: var(--ti-mobile-base-color-bg-2); /* 背景_浅灰*/ + --ti-mobile-common-bg-color-dark-gray: var(--ti-mobile-base-color-bg-1); /* 背景_深灰*/ } diff --git a/src/modal/index.js b/src/modal/index.js index 50023c1..37e0888 100644 --- a/src/modal/index.js +++ b/src/modal/index.js @@ -1,6 +1,6 @@ /** - * Copyright (c) 2022 - present TinyVue Authors. - * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. + * Copyright (c 2022 - present TinyVue Authors. + * Copyright (c 2022 - present Huawei Cloud Computing Technologies Co., Ltd. * * Use of this source code is governed by an MIT-style license. * @@ -11,17 +11,17 @@ */ export default { - 'tiny-mobile-modal-text-font-size': '14px', - 'tiny-mobile-modal-header-font-size': '16px', - 'tiny-mobile-modal-text-color': '#191919', - 'tiny-mobile-modal-alert-font-size': '22px', - 'tiny-mobile-modal-box-background-color': '#fff', - 'tiny-mobile-modal-box-shadow': '0 8px 40px 0 rgba(0, 0, 0, 0.2)', - 'tiny-mobile-modal-close-btn-top': '13px', - 'tiny-mobile-modal-close-btn-scale': 'scale(1, 1)', - 'tiny-mobile-modal-close-btn-background-color-hover': '#fff', - 'tiny-mobile-modal-btn-width': '112px', - 'tiny-mobile-modal-single-btn-width': '144px', - 'tiny-mobile-modal-btn-height': '36px', - 'tiny-mobile-modal-cancel-btn-bg-color': '#f5f5f5' -} + "tiny--mobile-modal-text-font-size": "14px", + "tiny--mobile-modal-header-font-size": "16px", + "tiny--mobile-modal-text-color": "#191919", + "tiny--mobile-modal-alert-font-size": "22px", + "tiny--mobile-modal-box-bg-color": "#fff", + "tiny--mobile-modal-box-shadow": "0 8px 40px 0 rgba(0, 0, 0, 0.2)", + "tiny--mobile-modal-close-btn-top": "13px", + "tiny--mobile-modal-close-btn-scale": "scale(1, 1)", + "tiny--mobile-modal-close-btn-bg-color-hover": "#fff", + "tiny--mobile-modal-btn-width": "112px", + "tiny--mobile-modal-single-btn-width": "144px", + "tiny--mobile-modal-btn-height": "36px", + "tiny--mobile-modal-cancel-btn-bg-color": "#f5f5f5", +}; diff --git a/src/modal/vars.less b/src/modal/vars.less index 4538421..e5fdb5e 100644 --- a/src/modal/vars.less +++ b/src/modal/vars.less @@ -15,13 +15,13 @@ --ti-mobile-modal-header-font-size: 16px; --ti-mobile-modal-text-color: var(--ti-mobile-common-color-text-primary, #191919); --ti-mobile-modal-alert-font-size: 22px; - --ti-mobile-modal-box-bg-color: #fff; + --ti-mobile-modal-box-bg-color: var(--ti-mobile-common-bg-color-white, #fff); --ti-mobile-modal-box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.2); --ti-mobile-modal-close-btn-top: 13px; --ti-mobile-modal-close-btn-scale: scale(1, 1); - --ti-mobile-modal-close-btn-bg-color-hover: #fff; + --ti-mobile-modal-close-btn-bg-color-hover: var(--ti-mobile-common-bg-color-white, #fff); --ti-mobile-modal-btn-width: 112px; --ti-mobile-modal-single-btn-width: 144px; --ti-mobile-modal-btn-height: 36px; - --ti-mobile-modal-cancel-btn-bg-color: #f5f5f5; + --ti-mobile-modal-cancel-btn-bg-color: var(--ti-mobile-common-bg-color-dark-gray, #f5f5f5); }