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

feat(style): add component css variables

Browse Source
This commit is contained in:
chenjiahan
2021-06-12 15:52:22 +08:00
committed by neverland
parent dafea4e1e8
commit fe1cba97b7
73 changed files with 1702 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/button/index.less
+82 -40
View File
@@ -1,16 +1,53 @@
@import './var.less';
:root {
--van-button-mini-height: @button-mini-height;
--van-button-mini-padding: @button-mini-padding;
--van-button-mini-font-size: @button-mini-font-size;
--van-button-small-height: @button-small-height;
--van-button-small-padding: @button-small-padding;
--van-button-small-font-size: @button-small-font-size;
--van-button-normal-padding: @button-normal-padding;
--van-button-normal-font-size: @button-normal-font-size;
--van-button-large-height: @button-large-height;
--van-button-default-height: @button-default-height;
--van-button-default-line-height: @button-default-line-height;
--van-button-default-font-size: @button-default-font-size;
--van-button-default-color: @button-default-color;
--van-button-default-background-color: @button-default-background-color;
--van-button-default-border-color: @button-default-border-color;
--van-button-primary-color: @button-primary-color;
--van-button-primary-background-color: @button-primary-background-color;
--van-button-primary-border-color: @button-primary-border-color;
--van-button-success-color: @button-success-color;
--van-button-success-background-color: @button-success-background-color;
--van-button-success-border-color: @button-success-border-color;
--van-button-danger-color: @button-danger-color;
--van-button-danger-background-color: @button-danger-background-color;
--van-button-danger-border-color: @button-danger-border-color;
--van-button-warning-color: @button-warning-color;
--van-button-warning-background-color: @button-warning-background-color;
--van-button-warning-border-color: @button-warning-border-color;
--van-button-border-width: @button-border-width;
--van-button-border-radius: @button-border-radius;
--van-button-round-border-radius: @button-round-border-radius;
--van-button-plain-background-color: @button-plain-background-color;
--van-button-disabled-opacity: @button-disabled-opacity;
--van-button-icon-size: @button-icon-size;
--van-button-loading-icon-size: @button-loading-icon-size;
}
.van-button {
position: relative;
display: inline-block;
box-sizing: border-box;
height: @button-default-height;
height: var(--van-button-default-height);
margin: 0;
padding: 0;
font-size: @button-default-font-size;
line-height: @button-default-line-height;
font-size: var(--van-button-default-font-size);
line-height: var(--van-button-default-line-height);
text-align: center;
border-radius: @button-border-radius;
border-radius: var(--van-button-border-radius);
cursor: pointer;
transition: opacity @animation-duration-fast;
-webkit-appearance: none;
@@ -42,69 +79,74 @@
}
&--default {
color: @button-default-color;
background-color: @button-default-background-color;
border: @button-border-width solid @button-default-border-color;
color: var(--van-button-default-color);
background-color: var(--van-button-default-background-color);
border: var(--van-button-border-width) solid
var(--van-button-default-border-color);
}
&--primary {
color: @button-primary-color;
background-color: @button-primary-background-color;
border: @button-border-width solid @button-primary-border-color;
color: var(--van-button-primary-color);
background-color: var(--van-button-primary-background-color);
border: var(--van-button-border-width) solid
var(--van-button-primary-border-color);
}
&--success {
color: @button-success-color;
background-color: @button-success-background-color;
border: @button-border-width solid @button-success-border-color;
color: var(--van-button-success-color);
background-color: var(--van-button-success-background-color);
border: var(--van-button-border-width) solid
var(--van-button-success-border-color);
}
&--danger {
color: @button-danger-color;
background-color: @button-danger-background-color;
border: @button-border-width solid @button-danger-border-color;
color: var(--van-button-danger-color);
background-color: var(--van-button-danger-background-color);
border: var(--van-button-border-width) solid
var(--van-button-danger-border-color);
}
&--warning {
color: @button-warning-color;
background-color: @button-warning-background-color;
border: @button-border-width solid @button-warning-border-color;
color: var(--van-button-warning-color);
background-color: var(--van-button-warning-background-color);
border: var(--van-button-border-width) solid
var(--van-button-warning-border-color);
}
&--plain {
background-color: @button-plain-background-color;
background-color: var(--van-button-plain-background-color);
&.van-button--primary {
color: @button-primary-background-color;
color: var(--van-button-primary-background-color);
}
&.van-button--success {
color: @button-success-background-color;
color: var(--van-button-success-background-color);
}
&.van-button--danger {
color: @button-danger-background-color;
color: var(--van-button-danger-background-color);
}
&.van-button--warning {
color: @button-warning-background-color;
color: var(--van-button-warning-background-color);
}
}
&--large {
width: 100%;
height: @button-large-height;
height: var(--van-button-large-height);
}
&--normal {
padding: @button-normal-padding;
font-size: @button-normal-font-size;
padding: var(--van-button-normal-padding);
font-size: var(--van-button-normal-font-size);
}
&--small {
height: @button-small-height;
padding: @button-small-padding;
font-size: @button-small-font-size;
height: var(--van-button-small-height);
padding: var(--van-button-small-padding);
font-size: var(--van-button-small-font-size);
}
&__loading {
@@ -113,15 +155,15 @@
.van-loading__spinner {
color: currentColor;
width: @button-loading-icon-size;
height: @button-loading-icon-size;
width: var(--van-button-loading-icon-size);
height: var(--van-button-loading-icon-size);
}
}
&--mini {
height: @button-mini-height;
padding: @button-mini-padding;
font-size: @button-mini-font-size;
height: var(--van-button-mini-height);
padding: var(--van-button-mini-padding);
font-size: var(--van-button-mini-font-size);
& + .van-button--mini {
margin-left: @padding-base;
@@ -135,7 +177,7 @@
&--disabled {
cursor: not-allowed;
opacity: @button-disabled-opacity;
opacity: var(--van-button-disabled-opacity);
}
&--loading {
@@ -143,7 +185,7 @@
}
&--round {
border-radius: @button-round-border-radius;
border-radius: var(--van-button-round-border-radius);
}
&--square {
@@ -166,7 +208,7 @@
}
&__icon {
font-size: @button-icon-size;
font-size: var(--van-button-icon-size);
line-height: inherit;
}
@@ -182,11 +224,11 @@
&::after {
border-color: inherit;
border-radius: @button-border-radius * 2;
border-radius: calc(var(--van-button-border-radius) * 2);
}
&.van-button--round::after {
border-radius: @button-round-border-radius;
border-radius: var(--van-button-round-border-radius);
}
&.van-button--square::after {