feat: add less vars of border-radius & opacity (#4596)

This commit is contained in:
neverland 2019-09-27 10:36:01 +08:00 committed by GitHub
parent 852314430b
commit 89c2022c37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 24 additions and 20 deletions

View File

@ -14,7 +14,7 @@
min-width: 0; // hack for flex ellipsis
&:active {
opacity: .7;
opacity: @active-opacity;
}
&--disabled {

View File

@ -95,7 +95,7 @@
font-size: @popup-close-icon-size;
&:active {
opacity: .6;
opacity: @active-opacity;
}
&--top-left {

View File

@ -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;

View File

@ -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%;

View File

@ -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;

View File

@ -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;