alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(style): component using basic css variables

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/button/index.less
+5 -5
View File
@@ -49,7 +49,7 @@
text-align: center;
border-radius: var(--van-button-border-radius);
cursor: pointer;
transition: opacity @animation-duration-fast;
transition: opacity var(--van-animation-duration-fast);
-webkit-appearance: none;
&::before {
@@ -58,9 +58,9 @@
left: 50%;
width: 100%;
height: 100%;
background-color: @black;
background-color: var(--van-black);
border: inherit;
border-color: @black;
border-color: var(--van-black);
border-radius: inherit; /* inherit parent's border radius */
transform: translate(-50%, -50%);
opacity: 0;
@@ -166,7 +166,7 @@
font-size: var(--van-button-mini-font-size);
& + .van-button--mini {
margin-left: @padding-base;
margin-left: var(--van-padding-base);
}
}
@@ -216,7 +216,7 @@
&__loading + &__text,
&__text + &__icon,
&__text + &__loading {
margin-left: @padding-base;
margin-left: var(--van-padding-base);
}
&--hairline {
src/button/var.less
+26 -26
View File
@@ -1,36 +1,36 @@
@import '../style/var.less';
@button-mini-height: 24px;
@button-mini-padding: 0 @padding-base;
@button-mini-font-size: @font-size-xs;
@button-mini-padding: 0 var(--van-padding-base);
@button-mini-font-size: var(--van-font-size-xs);
@button-small-height: 32px;
@button-small-padding: 0 @padding-xs;
@button-small-font-size: @font-size-sm;
@button-small-padding: 0 var(--van-padding-xs);
@button-small-font-size: var(--van-font-size-sm);
@button-normal-padding: 0 15px;
@button-normal-font-size: @font-size-md;
@button-normal-font-size: var(--van-font-size-md);
@button-large-height: 50px;
@button-default-height: 44px;
@button-default-line-height: 1.2;
@button-default-font-size: @font-size-lg;
@button-default-color: @text-color;
@button-default-background-color: @white;
@button-default-border-color: @border-color;
@button-primary-color: @white;
@button-primary-background-color: @blue;
@button-primary-border-color: @blue;
@button-success-color: @white;
@button-success-background-color: @green;
@button-success-border-color: @green;
@button-danger-color: @white;
@button-danger-background-color: @red;
@button-danger-border-color: @red;
@button-warning-color: @white;
@button-warning-background-color: @orange;
@button-warning-border-color: @orange;
@button-border-width: @border-width-base;
@button-border-radius: @border-radius-sm;
@button-round-border-radius: @border-radius-max;
@button-plain-background-color: @white;
@button-disabled-opacity: @disabled-opacity;
@button-default-font-size: var(--van-font-size-lg);
@button-default-color: var(--van-text-color);
@button-default-background-color: var(--van-white);
@button-default-border-color: var(--van-border-color);
@button-primary-color: var(--van-white);
@button-primary-background-color: var(--van-blue);
@button-primary-border-color: var(--van-blue);
@button-success-color: var(--van-white);
@button-success-background-color: var(--van-green);
@button-success-border-color: var(--van-green);
@button-danger-color: var(--van-white);
@button-danger-background-color: var(--van-red);
@button-danger-border-color: var(--van-red);
@button-warning-color: var(--van-white);
@button-warning-background-color: var(--van-orange);
@button-warning-border-color: var(--van-orange);
@button-border-width: var(--van-border-width-base);
@button-border-radius: var(--van-border-radius-sm);
@button-round-border-radius: var(--van-border-radius-max);
@button-plain-background-color: var(--van-white);
@button-disabled-opacity: var(--van-disabled-opacity);
@button-icon-size: 1.2em;
@button-loading-icon-size: 20px;