blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/dropdown-menu/index.less
View File

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

2
src/popup/index.less
View File

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

2
src/search/index.less
View File

@ -11,7 +11,7 @@
flex: 1; flex: 1;
padding-left: @padding-xs; padding-left: @padding-xs;
background-color: @search-background-color; background-color: @search-background-color;
border-radius: 2px; border-radius: @border-radius-sm;
&--round { &--round {
border-radius: @search-input-height / 2; border-radius: @search-input-height / 2;

8
src/sku/index.less
View File

@ -35,7 +35,7 @@
margin: @padding-sm 0; margin: @padding-sm 0;
overflow: hidden; overflow: hidden;
background: @background-color; background: @background-color;
border-radius: 4px; border-radius: @border-radius-base;
img { img {
position: absolute; position: absolute;
@ -141,7 +141,7 @@
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
vertical-align: middle; vertical-align: middle;
border-radius: 4px; border-radius: @border-radius-base;
&::before { &::before {
position: absolute; position: absolute;
@ -159,7 +159,7 @@
height: 24px; height: 24px;
margin: 4px 0 4px 4px; margin: 4px 0 4px 4px;
object-fit: cover; object-fit: cover;
border-radius: 2px; border-radius: @border-radius-sm;
} }
&-name { &-name {
@ -255,7 +255,7 @@
height: 64px; height: 64px;
margin-right: @padding-xs; margin-right: @padding-xs;
background: @sku-item-background-color; background: @sku-item-background-color;
border-radius: 2px; border-radius: @border-radius-sm;
img { img {
width: 100%; width: 100%;

28
src/style/var.less
View File

@ -15,6 +15,8 @@
// Component Colors // Component Colors
@text-color: #323233; @text-color: #323233;
@active-color: #f2f3f5; @active-color: #f2f3f5;
@active-opacity: .7;
@disabled-opacity: .5;
@background-color: #f8f8f8; @background-color: #f8f8f8;
@background-color-light: #fafafa; @background-color-light: #fafafa;
@ -40,6 +42,8 @@
// Border // Border
@border-color: #ebedf0; @border-color: #ebedf0;
@border-width-base: 1px; @border-width-base: 1px;
@border-radius-base: 4px;
@border-radius-sm: 2px;
// ActionSheet // ActionSheet
@action-sheet-max-height: 90%; @action-sheet-max-height: 90%;
@ -107,11 +111,11 @@
@button-warning-color: @white; @button-warning-color: @white;
@button-warning-background-color: @orange; @button-warning-background-color: @orange;
@button-warning-border-color: @orange; @button-warning-border-color: @orange;
@button-border-width: 1px; @button-border-width: @border-width-base;
@button-border-radius: 2px; @button-border-radius: @border-radius-sm;
@button-round-border-radius: 10em; @button-round-border-radius: 10em;
@button-plain-background-color: @white; @button-plain-background-color: @white;
@button-disabled-opacity: .5; @button-disabled-opacity: @disabled-opacity;
// Card // Card
@card-padding: @padding-xs @padding-md; @card-padding: @padding-xs @padding-md;
@ -207,7 +211,7 @@
@coupon-content-padding: @padding-lg 0 0 @padding-md; @coupon-content-padding: @padding-lg 0 0 @padding-md;
@coupon-background-color: @white; @coupon-background-color: @white;
@coupon-active-background-color: @active-color; @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-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
@coupon-head-width: 85px; @coupon-head-width: 85px;
@coupon-amount-color: @red; @coupon-amount-color: @red;
@ -235,7 +239,7 @@
@dialog-width: 85%; @dialog-width: 85%;
@dialog-font-size: @font-size-lg; @dialog-font-size: @font-size-lg;
@dialog-transition: @animation-duration-base; @dialog-transition: @animation-duration-base;
@dialog-border-radius: 4px; @dialog-border-radius: @border-radius-base;
@dialog-background-color: @white; @dialog-background-color: @white;
@dialog-header-font-weight: @font-weight-bold; @dialog-header-font-weight: @font-weight-bold;
@dialog-header-line-height: 24px; @dialog-header-line-height: 24px;
@ -322,7 +326,7 @@
@info-padding: 0 3px; @info-padding: 0 3px;
@info-font-size: @font-size-sm; @info-font-size: @font-size-sm;
@info-font-weight: @font-weight-bold; @info-font-weight: @font-weight-bold;
@info-border-width: 1px; @info-border-width: @border-width-base;
@info-background-color: @red; @info-background-color: @red;
@info-dot-color: @red; @info-dot-color: @red;
@info-dot-size: 8px; @info-dot-size: 8px;
@ -409,7 +413,7 @@
@pagination-item-disabled-background-color: @background-color; @pagination-item-disabled-background-color: @background-color;
@pagination-background-color: @white; @pagination-background-color: @white;
@pagination-desc-color: @gray-darker; @pagination-desc-color: @gray-darker;
@pagination-disabled-opacity: 0.6; @pagination-disabled-opacity: @disabled-opacity;
// Panel // Panel
@panel-background-color: @white; @panel-background-color: @white;
@ -515,7 +519,7 @@
// Slider // Slider
@slider-active-background-color: @blue; @slider-active-background-color: @blue;
@slider-inactive-background-color: @gray-light; @slider-inactive-background-color: @gray-light;
@slider-disabled-opacity: .3; @slider-disabled-opacity: @disabled-opacity;
@slider-button-width: 20px; @slider-button-width: 20px;
@slider-button-height: 20px; @slider-button-height: 20px;
@slider-button-border-radius: 50%; @slider-button-border-radius: 50%;
@ -552,7 +556,7 @@
@stepper-input-text-color: @text-color; @stepper-input-text-color: @text-color;
@stepper-input-disabled-text-color: @gray; @stepper-input-disabled-text-color: @gray;
@stepper-input-disabled-background-color: @active-color; @stepper-input-disabled-background-color: @active-color;
@stepper-border-radius: 4px; @stepper-border-radius: @border-radius-base;
// SubmitBar // SubmitBar
@submit-bar-height: 50px; @submit-bar-height: 50px;
@ -589,8 +593,8 @@
@switch-background-color: @white; @switch-background-color: @white;
@switch-on-background-color: @blue; @switch-on-background-color: @blue;
@switch-transition-duration: @animation-duration-base; @switch-transition-duration: @animation-duration-base;
@switch-disabled-opacity: .4; @switch-disabled-opacity: @disabled-opacity;
@switch-border: 1px solid rgba(0, 0, 0, .1); @switch-border: @border-width-base solid rgba(0, 0, 0, .1);
// SwitchCell // SwitchCell
@switch-cell-padding-top: @cell-vertical-padding - 1px; @switch-cell-padding-top: @cell-vertical-padding - 1px;
@ -644,7 +648,7 @@
@toast-font-size: @font-size-md; @toast-font-size: @font-size-md;
@toast-text-color: @white; @toast-text-color: @white;
@toast-line-height: 20px; @toast-line-height: 20px;
@toast-border-radius: 4px; @toast-border-radius: @border-radius-base;
@toast-background-color: rgba(@text-color, .88); @toast-background-color: rgba(@text-color, .88);
@toast-icon-size: 40px; @toast-icon-size: 40px;
@toast-text-min-width: 96px; @toast-text-min-width: 96px;

2
src/tabs/index.less
View File

@ -79,7 +79,7 @@
height: @tabs-card-height; height: @tabs-card-height;
margin: 0 @padding-md; margin: 0 @padding-md;
border: @border-width-base solid @tabs-default-color; border: @border-width-base solid @tabs-default-color;
border-radius: 2px; border-radius: @border-radius-sm;
.van-tab { .van-tab {
color: @tabs-default-color; color: @tabs-default-color;