mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat: add less vars of border-radius & opacity (#4596)
This commit is contained in:
parent
852314430b
commit
89c2022c37
@ -14,7 +14,7 @@
|
||||
min-width: 0; // hack for flex ellipsis
|
||||
|
||||
&:active {
|
||||
opacity: .7;
|
||||
opacity: @active-opacity;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
|
@ -95,7 +95,7 @@
|
||||
font-size: @popup-close-icon-size;
|
||||
|
||||
&:active {
|
||||
opacity: .6;
|
||||
opacity: @active-opacity;
|
||||
}
|
||||
|
||||
&--top-left {
|
||||
|
@ -11,7 +11,7 @@
|
||||
flex: 1;
|
||||
padding-left: @padding-xs;
|
||||
background-color: @search-background-color;
|
||||
border-radius: 2px;
|
||||
border-radius: @border-radius-sm;
|
||||
|
||||
&--round {
|
||||
border-radius: @search-input-height / 2;
|
||||
|
@ -35,7 +35,7 @@
|
||||
margin: @padding-sm 0;
|
||||
overflow: hidden;
|
||||
background: @background-color;
|
||||
border-radius: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
@ -141,7 +141,7 @@
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
border-radius: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@ -159,7 +159,7 @@
|
||||
height: 24px;
|
||||
margin: 4px 0 4px 4px;
|
||||
object-fit: cover;
|
||||
border-radius: 2px;
|
||||
border-radius: @border-radius-sm;
|
||||
}
|
||||
|
||||
&-name {
|
||||
@ -255,7 +255,7 @@
|
||||
height: 64px;
|
||||
margin-right: @padding-xs;
|
||||
background: @sku-item-background-color;
|
||||
border-radius: 2px;
|
||||
border-radius: @border-radius-sm;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
@ -15,6 +15,8 @@
|
||||
// Component Colors
|
||||
@text-color: #323233;
|
||||
@active-color: #f2f3f5;
|
||||
@active-opacity: .7;
|
||||
@disabled-opacity: .5;
|
||||
@background-color: #f8f8f8;
|
||||
@background-color-light: #fafafa;
|
||||
|
||||
@ -40,6 +42,8 @@
|
||||
// Border
|
||||
@border-color: #ebedf0;
|
||||
@border-width-base: 1px;
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-sm: 2px;
|
||||
|
||||
// ActionSheet
|
||||
@action-sheet-max-height: 90%;
|
||||
@ -107,11 +111,11 @@
|
||||
@button-warning-color: @white;
|
||||
@button-warning-background-color: @orange;
|
||||
@button-warning-border-color: @orange;
|
||||
@button-border-width: 1px;
|
||||
@button-border-radius: 2px;
|
||||
@button-border-width: @border-width-base;
|
||||
@button-border-radius: @border-radius-sm;
|
||||
@button-round-border-radius: 10em;
|
||||
@button-plain-background-color: @white;
|
||||
@button-disabled-opacity: .5;
|
||||
@button-disabled-opacity: @disabled-opacity;
|
||||
|
||||
// Card
|
||||
@card-padding: @padding-xs @padding-md;
|
||||
@ -207,7 +211,7 @@
|
||||
@coupon-content-padding: @padding-lg 0 0 @padding-md;
|
||||
@coupon-background-color: @white;
|
||||
@coupon-active-background-color: @active-color;
|
||||
@coupon-border-radius: 4px;
|
||||
@coupon-border-radius: @border-radius-base;
|
||||
@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
|
||||
@coupon-head-width: 85px;
|
||||
@coupon-amount-color: @red;
|
||||
@ -235,7 +239,7 @@
|
||||
@dialog-width: 85%;
|
||||
@dialog-font-size: @font-size-lg;
|
||||
@dialog-transition: @animation-duration-base;
|
||||
@dialog-border-radius: 4px;
|
||||
@dialog-border-radius: @border-radius-base;
|
||||
@dialog-background-color: @white;
|
||||
@dialog-header-font-weight: @font-weight-bold;
|
||||
@dialog-header-line-height: 24px;
|
||||
@ -322,7 +326,7 @@
|
||||
@info-padding: 0 3px;
|
||||
@info-font-size: @font-size-sm;
|
||||
@info-font-weight: @font-weight-bold;
|
||||
@info-border-width: 1px;
|
||||
@info-border-width: @border-width-base;
|
||||
@info-background-color: @red;
|
||||
@info-dot-color: @red;
|
||||
@info-dot-size: 8px;
|
||||
@ -409,7 +413,7 @@
|
||||
@pagination-item-disabled-background-color: @background-color;
|
||||
@pagination-background-color: @white;
|
||||
@pagination-desc-color: @gray-darker;
|
||||
@pagination-disabled-opacity: 0.6;
|
||||
@pagination-disabled-opacity: @disabled-opacity;
|
||||
|
||||
// Panel
|
||||
@panel-background-color: @white;
|
||||
@ -515,7 +519,7 @@
|
||||
// Slider
|
||||
@slider-active-background-color: @blue;
|
||||
@slider-inactive-background-color: @gray-light;
|
||||
@slider-disabled-opacity: .3;
|
||||
@slider-disabled-opacity: @disabled-opacity;
|
||||
@slider-button-width: 20px;
|
||||
@slider-button-height: 20px;
|
||||
@slider-button-border-radius: 50%;
|
||||
@ -552,7 +556,7 @@
|
||||
@stepper-input-text-color: @text-color;
|
||||
@stepper-input-disabled-text-color: @gray;
|
||||
@stepper-input-disabled-background-color: @active-color;
|
||||
@stepper-border-radius: 4px;
|
||||
@stepper-border-radius: @border-radius-base;
|
||||
|
||||
// SubmitBar
|
||||
@submit-bar-height: 50px;
|
||||
@ -589,8 +593,8 @@
|
||||
@switch-background-color: @white;
|
||||
@switch-on-background-color: @blue;
|
||||
@switch-transition-duration: @animation-duration-base;
|
||||
@switch-disabled-opacity: .4;
|
||||
@switch-border: 1px solid rgba(0, 0, 0, .1);
|
||||
@switch-disabled-opacity: @disabled-opacity;
|
||||
@switch-border: @border-width-base solid rgba(0, 0, 0, .1);
|
||||
|
||||
// SwitchCell
|
||||
@switch-cell-padding-top: @cell-vertical-padding - 1px;
|
||||
@ -644,7 +648,7 @@
|
||||
@toast-font-size: @font-size-md;
|
||||
@toast-text-color: @white;
|
||||
@toast-line-height: 20px;
|
||||
@toast-border-radius: 4px;
|
||||
@toast-border-radius: @border-radius-base;
|
||||
@toast-background-color: rgba(@text-color, .88);
|
||||
@toast-icon-size: 40px;
|
||||
@toast-text-min-width: 96px;
|
||||
|
@ -79,7 +79,7 @@
|
||||
height: @tabs-card-height;
|
||||
margin: 0 @padding-md;
|
||||
border: @border-width-base solid @tabs-default-color;
|
||||
border-radius: 2px;
|
||||
border-radius: @border-radius-sm;
|
||||
|
||||
.van-tab {
|
||||
color: @tabs-default-color;
|
||||
|
Loading…
x
Reference in New Issue
Block a user