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

12
packages/style/var.less
View File

@ -334,6 +334,18 @@
@panel-header-value-color: @red;
@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-size: 20px;
@radio-border-color: @gray-light;