test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

style: Dialog 对话框组件变量配置化 (#6324)

Browse Source 
* style: Dialog 对话框组件变量配置化

* style: 迁移Dialog对话框组件变量properties.scss=>component.scss

---------

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>
This commit is contained in:
徐佳豪 2023-03-08 20:39:22 +08:00 committed by hongyang03
parent 77a9817b52
commit 785ce176d7
3 changed files with 64 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/amis-ui/scss/_components.scss
View File

@ -1764,6 +1764,57 @@
--InputRange-clearIcon-color: var(--colors-neutral-text-4);
--InputRange-clearIcon-hoverColor: var(--colors-brand-5);
// 对话框
--dialog-default-border-width: var(--sizes-size-0);
--dialog-default-border-radius: var(--sizes-size-4);
--dialog-default-padding-y: var(--sizes-base-12);
--dialog-header-height: var(--sizes-size-1);
--dialog-header-color: var(--colors-neutral-text-2);
--dialog-header-fontSize: var(--fonts-size-7);
--dialog-header-fontWeight: var(--fonts-weight-5);
--dialog-footer-height: var(--sizes-size-1);
--dialog-footer-margin-left: var(--sizes-size-5);
--dialog-size-sm-width: 21.875rem;
--dialog-size-normal-width: 31.25rem;
--dialog-size-lg-width: 68.75rem;
--dialog-size-xl-width: 90%;
--Modal-bg: var(--background);
--Modal-body--noHeader-paddingTop: var(--gap-base);
--Modal-body-borderBottom: var(--borders-style-1) solid
var(--colors-neutral-line-10);
--Modal-body-borderTop: var(--borders-style-1) solid
var(--colors-neutral-line-10);
--Modal-body-paddingX: var(--sizes-size-0);
--Modal-body-paddingY: var(--sizes-base-12);
--Modal-close-color: var(--text--muted-color);
--Modal-close-width: #{px2rem(16px)};
--Modal-content-borderColor: var(--borderColor);
--Modal-content-borderRadius: var(--borders-radius-4);
--Modal-content-borderWidth: var(--borders-width-1);
--Modal-content-minHeight: #{px2rem(193px)};
--Modal-content-startMarginTop: #{px2rem(60px)};
--Modal-content-stepMarginTop: #{px2rem(30px)};
--Modal-footer-button-width: #{px2rem(72px)};
--Modal-footer-marginX: var(--sizes-size-0);
--Modal-footer-marginY: var(--sizes-size-0);
--Modal-footer-padding: var(--sizes-size-0);
--Modal-header-bg: var(--colors-neutral-fill-11);
--Modal-header-height: #{px2rem(40px)};
--Modal-header-paddingX: var(--sizes-size-0);
--Modal-header-paddingY: var(--sizes-size-0);
--Modal-overlay-bg: rgba(0, 0, 0, 0.7);
--Modal-title-color: var(--colors-neutral-text-2);
--Modal-title-fontSize: var(--fonts-size-7);
--Modal-title-fontWeight: var(--fonts-weight-5);
--Modal-title-lineHeight: var(--lineHeightBase);
--Modal-widthBase: #{px2rem(500px)};
--Modal-widthLg: #{px2rem(1100px)};
--Modal-widthMd: #{px2rem(800px)};
--Modal-widthSm: #{px2rem(350px)};
--Modal-widthXl: 90%;
--Model-close-onHover-color: var(--text-color);
// 评分
--Rating-star-margin: var(--sizes-size-5);
--Rating-star-size: var(--sizes-base-12);

36
packages/amis-ui/scss/_properties.scss
View File

@ -617,42 +617,6 @@ $remFactor: 16px;
--Log-color: #f1f1f1;
--Log-line--onHover-bg: #444;
--Modal-bg: var(--background);
--Modal-body--noHeader-paddingTop: var(--gap-base);
--Modal-body-borderBottom: var(--borders-style-1) solid
var(--colors-neutral-line-10);
--Modal-body-borderTop: var(--borders-style-1) solid
var(--colors-neutral-line-10);
--Modal-body-paddingX: var(--sizes-size-0);
--Modal-body-paddingY: var(--sizes-base-12);
--Modal-close-color: var(--text--muted-color);
--Modal-close-width: #{px2rem(16px)};
--Modal-content-borderColor: var(--borderColor);
--Modal-content-borderRadius: var(--borders-radius-4);
--Modal-content-borderWidth: var(--borders-width-1);
--Modal-content-minHeight: #{px2rem(193px)};
--Modal-content-startMarginTop: #{px2rem(60px)};
--Modal-content-stepMarginTop: #{px2rem(30px)};
--Modal-footer-button-width: #{px2rem(72px)};
--Modal-footer-marginX: var(--sizes-size-0);
--Modal-footer-marginY: var(--sizes-size-0);
--Modal-footer-padding: var(--sizes-size-0);
--Modal-header-bg: var(--colors-neutral-fill-11);
--Modal-header-height: #{px2rem(40px)};
--Modal-header-paddingX: var(--sizes-size-0);
--Modal-header-paddingY: var(--sizes-size-0);
--Modal-overlay-bg: rgba(0, 0, 0, 0.7);
--Modal-title-color: var(--colors-neutral-text-2);
--Modal-title-fontSize: var(--fonts-size-7);
--Modal-title-fontWeight: var(--fonts-weight-5);
--Modal-title-lineHeight: var(--lineHeightBase);
--Modal-widthBase: #{px2rem(500px)};
--Modal-widthLg: #{px2rem(1100px)};
--Modal-widthMd: #{px2rem(800px)};
--Modal-widthSm: #{px2rem(350px)};
--Modal-widthXl: 90%;
--Model-close-onHover-color: var(--text-color);
--Nav-item-bg: transparent;
--Nav-item-borderRadius: var(--borders-radius-1);
--Nav-item-color: var(--text-color);

23
packages/amis-ui/scss/components/_modal.scss
View File

@ -45,10 +45,10 @@
margin-right: auto;
margin-top: var(--Modal-content-startMarginTop);
margin-bottom: var(--gap-md);
padding: var(--Modal-body-paddingY) var(--Modal-body-paddingX);
padding: var(--dialog-default-padding-y) var(--Modal-body-paddingX);
border: var(--Modal-content-borderWidth) solid
var(--Modal-content-borderColor);
border-radius: var(--Modal-content-borderRadius);
border-radius: var(--dialog-default-border-radius);
&.in,
&.out {
@ -96,9 +96,10 @@
}
&-title {
font-size: var(--Modal-title-fontSize);
color: var(--Modal-title-color);
font-weight: var(--Modal-title-fontWeight);
font-size: var(--dialog-header-fontSize);
color: var(--dialog-header-color);
font-weight: var(--dialog-header-fontWeight);
height: var(--dialog-header-height);
}
&-close {
@ -147,6 +148,7 @@
&-footer {
// @include clearfix();
height: var(--dialog-footer-height);
display: flex;
align-items: center;
justify-content: flex-end;
@ -158,7 +160,7 @@
.#{$ns}Button {
min-width: var(--Modal-footer-button-width);
margin-left: var(--gap-sm);
margin-left: var(--dialog-footer-margin-left);
}
}
}
@ -177,11 +179,12 @@
@include media-breakpoint-up(sm) {
.#{$ns}Modal-content {
max-width: var(--Modal-widthBase);
max-width: var(--dialog-size-normal-width);
border-width: var(--dialog-default-border-width);
}
.#{$ns}Modal--sm .#{$ns}Modal-content {
max-width: var(--Modal-widthSm);
max-width: var(--dialog-size-sm-width);
}
.#{$ns}Modal--base .#{$ns}Modal-content {
@ -193,11 +196,11 @@
}
.#{$ns}Modal--lg .#{$ns}Modal-content {
max-width: var(--Modal-widthLg);
max-width: var(--dialog-size-lg-width);
}
.#{$ns}Modal--xl .#{$ns}Modal-content {
max-width: var(--Modal-widthXl);
max-width: var(--dialog-size-xl-width);
}
}