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

style: progress & image & images组件主题变量替换 (#6446)

Browse Source 
Co-authored-by: xujiahao01 <xujiahao01@baidu.com>
This commit is contained in:
徐佳豪 2023-03-23 10:36:57 +08:00 committed by hongyang03
parent 0d9a512d55
commit 33526bdd3d
5 changed files with 63 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1731,6 +1731,20 @@
--InputRange-clearIcon-color: var(--colors-neutral-text-4);
--InputRange-clearIcon-hoverColor: var(--colors-brand-5);
// 进度条
--Progress-line-bg: var(--colors-neutral-fill-8);
--Progress-line-theme-color: var(--colors-brand-5);
--Progress-line-color: var(--colors-neutral-text-2);
--Progress-line-fontSize: var(--fonts-size-8);
--Progress-circle-bg: var(--colors-neutral-fill-8);
--Progress-circle-theme-color: red;
--Progress-circle-color: var(--colors-neutral-text-2);
--Progress-circle-fontSize: var(--fonts-size-8);
--Progress-borderRadius: var(--borderRadius);
--Progress-animate-backgroundColor: #fff;
--Progress-bar-backgroundColor: var(--colors-neutral-fill-8);
// 对话框
--dialog-default-border-width: var(--sizes-size-0);
--dialog-default-border-radius: var(--sizes-size-4);
@ -3256,6 +3270,29 @@
--Spinner-width: var(--spinner-size-size);
--Spinner-color: var(--spinner-base-color);
// Image
--image-image-normal-paddingTop: var(--sizes-size-3);
--image-image-normal-paddingBottom: var(--sizes-size-3);
--image-image-normal-paddingLeft: var(--sizes-size-3);
--image-image-normal-paddingRight: var(--sizes-size-3);
--image-image-normal-color: var(--colors-neutral-text-2);
--image-image-normal-fontSize: var(--fonts-size-7);
--image-image-description-color: var(--colors-neutral-text-2);
--image-image-description-fontSize: var(--fonts-size-8);
--image-images-item-marginTop: var(--sizes-size-3);
--image-images-item-marginBottom: var(--sizes-size-3);
--image-images-item-marginLeft: var(--sizes-size-3);
--image-images-item-marginRight: var(--sizes-size-3);
--image-images-item-size: 3rem;
--image-images-item-color: var(--colors-neutral-text-5);
--image-images-preview-radius: var(--sizes-size-3);
--image-images-preview-bgColor: var(--colors-neutral-text-11);
--image-images-preview-paddingTop: var(--sizes-size-3);
--image-images-preview-paddingBottom: var(--sizes-size-3);
--image-images-preview-paddingLeft: var(--sizes-size-9);
--image-images-preview-paddingRight: var(--sizes-size-9);
--Tag-base-fontSize: var(--fonts-size-8);
--Tag-base-fontWeight: var(--fonts-weight-6);
--Tag-base-height: var(--sizes-base-12);

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

@ -694,7 +694,6 @@ $remFactor: 16px;
--Remark-onHover-iconColor: var(--colors-neutral-text-11);
--Remark-width: var(--sizes-size-9);
--Sparkline-line-color: var(--info);
--Sparkline-area-color: #{rgba($info, 0.1)};
@ -901,10 +900,6 @@ $remFactor: 16px;
--AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0;
--AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)};
--Progress-borderRadius: var(--borderRadius);
--Progress-animate-backgroundColor: #fff;
--Progress-bar-backgroundColor: #d3d9e6;
--ColumnToggler-backgroundColor: var(--colors-neutral-fill-11);
--ColumnToggler-borderRadius: #{px2rem(4px)};
--ColumnToggler-lineHeight: #{px2rem(24px)};

15
packages/amis-ui/scss/components/_image-gallery.scss
View File

@ -66,15 +66,15 @@
&-prevBtn,
&-nextBtn {
> svg {
width: px2rem(48px);
height: px2rem(48px);
width: var(--image-images-item-size);
height: var(--image-images-item-size);
}
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #999;
color: var(--image-images-item-color);
text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
&:hover {
@ -206,11 +206,14 @@
}
.#{$ns}ImageGallery-toolbar {
background-color: var(--white);
border-radius: px2rem(4px);
background-color: var(--image-images-preview-bgColor);
border-radius: var(--image-images-preview-radius);
display: flex;
align-items: flex-start;
padding: px2rem(4px) px2rem(16px);
padding: var(--image-images-preview-paddingTop)
var(--image-images-preview-paddingRight)
var(--image-images-preview-paddingBottom)
var(--image-images-preview-paddingLeft);
position: absolute;
bottom: px2rem(20px);
left: 50%;

16
packages/amis-ui/scss/components/_images.scss
View File

@ -7,7 +7,9 @@
&-item {
display: flex;
margin: var(--gap-xs);
margin: var(--image-images-item-marginTop)
var(--image-images-item-marginRight) var(--image-images-item-marginBottom)
var(--image-images-item-marginLeft);
}
}
@ -16,7 +18,10 @@
&--thumb {
display: inline-block;
padding: var(--gap-xs);
padding: var(--image-image-normal-paddingTop)
var(--image-image-normal-paddingRight)
var(--image-image-normal-paddingBottom)
var(--image-image-normal-paddingLeft);
}
&-thumbWrap {
@ -132,12 +137,13 @@
}
&-caption {
font-size: var(--fontSizeSm);
font-size: var(--image-image-description-fontSize);
color: var(--image-image-description-color);
}
&-title {
font-size: var(--fontSizeBase);
color: var(--text--loud-color);
font-size: var(--image-image-normal-fontSize);
color: var(--image-image-normal-color);
}
&-overlay {

8
packages/amis-ui/scss/components/_progress.scss
View File

@ -22,7 +22,7 @@
&-inter {
height: 100%;
background-color: var(--Progress-bar-backgroundColor);
background-color: var(--Progress-line-bg);
overflow: hidden;
border-radius: var(--Progress-borderRadius);
}
@ -34,6 +34,8 @@
white-space: nowrap;
text-align: left;
word-break: normal;
color: var(--Progress-line-color);
font-size: var(--Progress-line-fontSize);
.icon {
font-size: 15px;
}
@ -43,7 +45,7 @@
float: left;
width: 0;
height: 8px;
background: var(--primary);
background: var(--Progress-line-theme-color);
transition: width var(--animation-duration) ease;
border-radius: var(--Progress-borderRadius);
@ -97,6 +99,8 @@
white-space: normal;
text-align: center;
transform: translate(-50%, -50%);
color: var(--Progress-circle-color);
font-size: var(--Progress-circle-fontSize);
.icon {
font-size: 1.2em;
}