feat(style): component using basic css variables
This commit is contained in:
@@ -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
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user