feat(style): component using basic css variables

This commit is contained in:
chenjiahan
2021-06-12 15:52:22 +08:00
committed by neverland
parent aef2579a95
commit 710aebaee4
117 changed files with 707 additions and 705 deletions
+6 -6
View File
@@ -43,14 +43,14 @@
&__cancel {
display: block;
width: 100%;
padding: 14px @padding-md;
padding: 14px var(--van-padding-md);
font-size: var(--van-action-sheet-item-font-size);
background-color: var(--van-action-sheet-item-background);
border: none;
cursor: pointer;
&:active {
background-color: @active-color;
background-color: var(--van-active-color);
}
}
@@ -82,7 +82,7 @@
}
&__subname {
margin-top: @padding-xs;
margin-top: var(--van-padding-xs);
color: var(--van-action-sheet-subname-color);
font-size: var(--van-action-sheet-subname-font-size);
line-height: var(--van-action-sheet-subname-line-height);
@@ -96,7 +96,7 @@
&__header {
flex-shrink: 0;
font-weight: @font-weight-bold;
font-weight: var(--van-font-weight-bold);
font-size: var(--van-action-sheet-header-font-size);
line-height: var(--van-action-sheet-header-height);
text-align: center;
@@ -105,14 +105,14 @@
&__description {
position: relative;
flex-shrink: 0;
padding: 20px @padding-md;
padding: 20px var(--van-padding-md);
color: var(--van-action-sheet-description-color);
font-size: var(--van-action-sheet-description-font-size);
line-height: var(--van-action-sheet-description-line-height);
text-align: center;
&::after {
.hairline-bottom(@border-color, @padding-md, @padding-md);
.hairline-bottom(var(--van-border-color), var(--van-padding-md), var(--van-padding-md));
}
}
+18 -18
View File
@@ -2,23 +2,23 @@
@action-sheet-max-height: 80%;
@action-sheet-header-height: 48px;
@action-sheet-header-font-size: @font-size-lg;
@action-sheet-description-color: @gray-6;
@action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: @line-height-md;
@action-sheet-item-background: @white;
@action-sheet-item-font-size: @font-size-lg;
@action-sheet-item-line-height: @line-height-lg;
@action-sheet-item-text-color: @text-color;
@action-sheet-item-disabled-text-color: @gray-5;
@action-sheet-subname-color: @gray-6;
@action-sheet-subname-font-size: @font-size-sm;
@action-sheet-subname-line-height: @line-height-sm;
@action-sheet-header-font-size: var(--van-font-size-lg);
@action-sheet-description-color: var(--van-gray-6);
@action-sheet-description-font-size: var(--van-font-size-md);
@action-sheet-description-line-height: var(--van-line-height-md);
@action-sheet-item-background: var(--van-white);
@action-sheet-item-font-size: var(--van-font-size-lg);
@action-sheet-item-line-height: var(--van-line-height-lg);
@action-sheet-item-text-color: var(--van-text-color);
@action-sheet-item-disabled-text-color: var(--van-gray-5);
@action-sheet-subname-color: var(--van-gray-6);
@action-sheet-subname-font-size: var(--van-font-size-sm);
@action-sheet-subname-line-height: var(--van-line-height-sm);
@action-sheet-close-icon-size: 22px;
@action-sheet-close-icon-color: @gray-5;
@action-sheet-close-icon-active-color: @gray-6;
@action-sheet-close-icon-padding: 0 @padding-md;
@action-sheet-cancel-text-color: @gray-7;
@action-sheet-cancel-padding-top: @padding-xs;
@action-sheet-cancel-padding-color: @background-color;
@action-sheet-close-icon-color: var(--van-gray-5);
@action-sheet-close-icon-active-color: var(--van-gray-6);
@action-sheet-close-icon-padding: 0 var(--van-padding-md);
@action-sheet-cancel-text-color: var(--van-gray-7);
@action-sheet-cancel-padding-top: var(--van-padding-xs);
@action-sheet-cancel-padding-color: var(--van-background-color);
@action-sheet-loading-icon-size: 22px;