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

feat: Radio, Rate, Search, Sidebar, Slider, Step, Stepper 组件样式调整 (#2260)

Browse Source
This commit is contained in:
Lindy 2019-11-10 10:37:11 +08:00 committed by neverland
parent 7d7074339a
commit 22b230de6f
7 changed files with 111 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/common/style/var.less
View File

@ -315,6 +315,7 @@
// Rate
@rate-horizontal-padding: 2px;
@rate-icon-size: 20px;
// Switch
@switch-width: 2em;
@ -331,6 +332,56 @@
// Search
@search-background-color: #f7f8fA;
@search-padding: 10px @padding-sm;
@search-input-height: 34px;
@search-label-padding: 0 5px;
@search-label-color: @text-color;
@search-label-font-size: @font-size-md;
@search-left-icon-color: @gray-dark;
@search-action-padding: 0 @padding-xs;
@search-action-text-color: @text-color;
@search-action-font-size: @font-size-md;
// Sidebar
@sidebar-width: 85px;
// SidebarItem
@sidebar-font-size: @font-size-md;
@sidebar-line-height: 20px;
@sidebar-text-color: @text-color;
@sidebar-disabled-text-color: @gray;
@sidebar-padding: 20px @padding-sm 20px @padding-xs;
@sidebar-active-color: @active-color;
@sidebar-background-color: @background-color-light;
@sidebar-selected-font-weight: @font-weight-bold;
@sidebar-selected-text-color: @text-color;
@sidebar-selected-border-color: @red;
@sidebar-selected-background-color: @white;
// Slider
@slider-active-background-color: @blue;
@slider-inactive-background-color: @gray-light;
@slider-disabled-opacity: @disabled-opacity;
@slider-button-width: 24px;
@slider-button-height: 24px;
@slider-button-border-radius: 50%;
@slider-button-background-color: @white;
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
// Step
@step-text-color: @gray-dark;
@step-process-text-color: @text-color;
@step-font-size: @font-size-md;
@step-line-color: @border-color;
@step-finish-line-color: @green;
@step-finish-text-color: @text-color;
@step-icon-size: 12px;
@step-circle-size: 5px;
@step-circle-color: @gray-dark;
@step-horizontal-title-font-size: @font-size-sm;
// Steps
@steps-background-color: @white;
// Sidebar
@sidebar-width: 85px;
@ -351,9 +402,16 @@
// Stepper
@stepper-active-color: #e8e8e8;
@stepper-background-color: @active-color;
@stepper-button-icon-color: @text-color;
@stepper-button-disabled-color: #f7f8fa;
@stepper-input-disabled-color: @active-color;
@stepper-border-radius: 4px;
@stepper-button-disabled-icon-color: @gray;
@stepper-input-width: 32px;
@stepper-input-height: 28px;
@stepper-input-font-size: @font-size-md;
@stepper-input-text-color: @text-color;
@stepper-input-disabled-text-color: @gray;
@stepper-input-disabled-background-color: @active-color;
@stepper-border-radius: @border-radius-md;
// SubmitBar
@submit-bar-height: 50px;

2
packages/radio/index.less
View File

@ -20,6 +20,7 @@
text-align: center;
transition-property: color, border-color, background-color;
.theme(border, '1px solid @radio-border-color');
.theme(font-size, '@radio-size');
.theme(transition-duration, '@radio-transition-duration');
&--round {
@ -46,6 +47,7 @@
word-wrap: break-word;
.theme(margin-left, '@radio-label-margin');
.theme(color, '@radio-label-color');
.theme(line-height, '@radio-size');
&--left {
float: left;

1
packages/rate/index.less
View File

@ -13,6 +13,7 @@
&__icon {
display: block;
height: 1em;
.theme(font-size, '@rate-icon-size');
&--half {
position: absolute;

26
packages/search/index.less
View File

@ -5,32 +5,32 @@
display: flex;
align-items: center;
box-sizing: border-box;
padding: 10px 16px;
.theme(padding, '@search-padding');
&__content {
display: flex;
flex: 1;
padding-left: 10px;
border-radius: 2px;
.theme(padding-left, '@padding-xs');
.theme(border-radius, '@border-radius-sm');
.theme(background-color, '@search-background-color');
&--round {
border-radius: 17px;
.theme(border-radius, 'calc(@search-input-height / 2)');
}
}
&__label {
padding: 0 5px;
font-size: 14px;
line-height: 34px;
.theme(color, '@text-color');
.theme(padding, '@search-label-padding');
.theme(font-size, '@search-label-font-size');
.theme(line-height, '@search-input-height');
.theme(color, '@search-label-color');
}
&__field {
flex: 1;
&__left-icon {
.theme(color, '@gray-dark');
.theme(color, '@search-left-icon-color');
}
}
@ -39,10 +39,10 @@
}
&__action {
padding: 0 10px;
font-size: 14px;
line-height: 34px;
.theme(color, '@text-color');
.theme(padding, '@search-action-padding');
.theme(font-size, '@search-action-font-size');
.theme(line-height, '@search-input-height');
.theme(color, '@search-action-text-color');
&--hover {
.theme(background-color, '@active-color');

18
packages/slider/index.less
View File

@ -3,8 +3,8 @@
.van-slider {
position: relative;
border-radius: 999px;
.theme(background-color, '@gray-light');
.theme(border-radius, '@border-radius-max');
.theme(background-color, '@slider-inactive-background-color');
// use pseudo element to expand click area
&::before {
@ -20,15 +20,15 @@
position: relative;
border-radius: inherit;
.theme(transition, 'width @animation-duration-fast');
.theme(background-color, '@blue');
.theme(background-color, '@slider-active-background-color');
}
&__button {
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
.theme(background-color, '@white');
width: @slider-button-width;
height: @slider-button-height;
border-radius: @slider-button-border-radius;
box-shadow: @slider-button-box-shadow;
.theme(background-color, '@slider-button-background-color');
&-wrapper {
position: absolute;
@ -39,6 +39,6 @@
}
&--disabled {
opacity: 0.3;
opacity: @slider-disabled-opacity;
}
}

21
packages/stepper/index.less
View File

@ -9,13 +9,14 @@
position: relative;
display: inline-block;
box-sizing: border-box;
width: 28px;
height: 28px;
margin: 1px;
padding: 5px;
vertical-align: middle;
border: 0;
.theme(background-color, '@stepper-background-color');
.theme(color, '@stepper-button-icon-color');
.theme(width, '@stepper-input-height');
.theme(height, '@stepper-input-height');
.theme(padding, '@padding-base');
&::before {
width: 9px;
@ -44,11 +45,12 @@
}
&--disabled {
.theme(color, '@stepper-button-disabled-icon-color');
.theme(background-color, '@stepper-button-disabled-color');
&::before,
&::after {
.theme(background-color, '@gray');
.theme(background-color, '@stepper-button-disabled-color');
}
}
@ -72,8 +74,6 @@
&__input {
display: inline-block;
box-sizing: border-box;
width: 32px;
height: 28px;
// 覆盖 common style 中 input 的 min-height: 1.4rem;
// 避免 button-size 对 input 设置的 height 不生效
min-height: 0;
@ -86,12 +86,15 @@
border-width: 1px 0;
border-radius: 0;
-webkit-appearance: none;
.theme(color, '@text-color');
.theme(font-size, '@stepper-input-font-size');
.theme(color, '@stepper-input-text-color');
.theme(background-color, '@stepper-background-color');
.theme(width, '@stepper-input-width');
.theme(height, '@stepper-input-height');
&--disabled {
.theme(color, '@gray');
.theme(background-color, '@stepper-input-disabled-color');
.theme(color, '@stepper-input-disabled-text-color');
.theme(background-color, '@stepper-input-disabled-background-color');
}
}
}

29
packages/steps/index.less
View File

@ -3,7 +3,7 @@
.van-steps {
overflow: hidden;
.theme(background-color, '@white');
.theme(background-color, '@steps-background-color');
&--horizontal {
padding: 10px;
@ -27,18 +27,18 @@
.van-step {
position: relative;
flex: 1;
font-size: 14px;
.theme(color, '@gray-dark');
.theme(font-size, '@step-font-size');
.theme(color, '@step-text-color');
&--finish {
.theme(color, '@text-color');
.theme(color, '@step-finish-text-color');
}
&__circle {
width: 5px;
height: 5px;
border-radius: 50%;
.theme(background-color, '@gray-dark');
.theme(width, '@step-circle-size');
.theme(height, '@step-circle-size');
.theme(background-color, '@step-circle-color');
}
&--horizontal {
@ -76,15 +76,15 @@
position: absolute;
bottom: 6px;
z-index: 1;
padding: 0 8px;
transform: translate3d(-50%, 50%, 0);
.theme(background-color, '@white');
.theme(padding, '0 @padding-xs');
}
.van-step__title {
display: inline-block;
font-size: 12px;
transform: translate3d(-50%, 0, 0);
.theme(font-size, '@step-horizontal-title-font-size');
}
.van-step__line {
@ -94,23 +94,22 @@
left: 0;
height: 1px;
transform: translate3d(0, 50%, 0);
.theme(background-color, '@border-color');
.theme(background-color, '@step-line-color');
}
&.van-step--process {
.theme(color, '@text-color');
.theme(color, '@step-process-text-color');
.van-step__icon {
display: block;
font-size: 12px;
line-height: 1;
.theme(font-size, '@step-icon-size');
}
}
}
&--vertical {
padding: 10px 10px 10px 0;
font-size: 14px;
line-height: 18px;
&::after {
@ -145,8 +144,8 @@
}
.van-step__icon {
font-size: 12px;
line-height: 1;
.theme(font-size, '@step-icon-size');
}
.van-step__line {
@ -154,7 +153,7 @@
width: 1px;
height: 100%;
transform: translate3d(-50%, 0, 0);
.theme(background-color, '@border-color');
.theme(background-color, '@step-line-color');
}
}
}