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

[improvement] PasswordInput: add less vars

Browse Source
This commit is contained in:
陈嘉涵 2019-05-16 17:35:25 +08:00
parent 75e1ea6b3a
commit 4305c5cfdf
2 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/password-input/index.less
View File

@ -2,7 +2,7 @@
.van-password-input { .van-password-input {
position: relative; position: relative;
margin: 0 15px; margin: @password-input-margin;
user-select: none; user-select: none;
&:focus { &:focus {
@ -12,45 +12,45 @@
&__info, &__info,
&__error-info { &__error-info {
margin-top: 15px; margin-top: 15px;
font-size: 14px; font-size: @password-input-info-font-size;
text-align: center; text-align: center;
} }
&__info { &__info {
color: @gray-dark; color: @password-input-info-color;
} }
&__error-info { &__error-info {
color: @red; color: @password-input-error-info-color;
} }
&__security { &__security {
display: flex; display: flex;
width: 100%; width: 100%;
height: 50px; height: @password-input-height;
&::after { &::after {
border-radius: 6px; border-radius: @password-input-border-radius;
} }
li { li {
position: relative; position: relative;
flex: 1; flex: 1;
height: 100%; height: 100%;
font-size: 20px; font-size: @password-input-font-size;
line-height: 50px; line-height: @password-input-height;
text-align: center; text-align: center;
background-color: @white; background-color: @password-input-background-color;
} }
i { i {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 10px; width: @password-input-dot-size;
height: 10px; height: @password-input-dot-size;
margin: -5px 0 0 -5px; margin: -(@password-input-dot-size / 2) 0 0 -(@password-input-dot-size / 2);
background-color: @black; background-color: @password-input-dot-color;
border-radius: 100%; border-radius: 100%;
visibility: hidden; visibility: hidden;
} }

12
packages/style/var.less
View File

@ -334,6 +334,18 @@
@panel-header-value-color: @red; @panel-header-value-color: @red;
@panel-footer-padding: 10px 15px; @panel-footer-padding: 10px 15px;
// PasswordInput
@password-input-height: 50px;
@password-input-margin: 0 15px;
@password-input-font-size: 20px;
@password-input-border-radius: 6px;
@password-input-background-color: @white;
@password-input-info-color: @gray-dark;
@password-input-info-font-size: 14px;
@password-input-error-info-color: @red;
@password-input-dot-size: 10px;
@password-input-dot-color: @black;
// Radio // Radio
@radio-size: 20px; @radio-size: 20px;
@radio-border-color: @gray-light; @radio-border-color: @gray-light;