ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-21 11:17:41 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

[new feature] NumberKeyboard add custom theme (#472)

Browse Source
This commit is contained in:
neverland
2017-12-22 16:29:21 +08:00
committed by GitHub
parent 57abc04346
commit 9e6b663145
7 changed files with 259 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
packages/vant-css/src/number-keyboard.css
View File

@@ -1,5 +1,7 @@
@import "./common/var.css";
$van-number-keyboard-key-height: 54px;
.van-number-keyboard {
left: 0;
bottom: 0;
@@ -10,13 +12,16 @@
animation-timing-function: ease-out;
&__title {
font-weight: 400;
text-align: center;
color: $gray-dark;
font-size: 12px;
height: 30px;
font-size: 14px;
line-height: 30px;
text-align: center;
position: relative;
color: $gray-darker;
}
&__body {
box-sizing: border-box;
}
&__close {
@@ -31,36 +36,70 @@
}
}
i {
width: calc(100%/3);
height: 54px;
font-size: 24px;
line-height: 54px;
font-style: normal;
text-align: center;
display: inline-block;
vertical-align: middle;
&__sidebar {
right: 0;
bottom: 0;
width: 25%;
position: absolute;
height: calc($van-number-keyboard-key-height * 4);
}
&--custom {
.van-number-keyboard__body {
padding-right: 25%;
}
}
}
.van-key {
width: calc(100%/3);
font-size: 24px;
font-style: normal;
text-align: center;
display: inline-block;
vertical-align: middle;
height: $van-number-keyboard-key-height;
line-height: $van-number-keyboard-key-height;
&::after {
border-width: 1px 1px 0 0;
}
&--middle {
width: calc(200%/3);
}
&--big {
width: 100%;
height: calc($van-number-keyboard-key-height * 2);
line-height: calc($van-number-keyboard-key-height * 2);
}
&--green {
font-size: 20px;
color: $white;
background-color: $green;
&.van-key--active {
background-color: #308305;
}
&::after {
border-top-width: 1px;
}
&:not(:nth-of-type(3n))::after {
border-right-width: 1px;
}
&:nth-of-type(10),
&:nth-of-type(12) {
background-color: #F3F3F6;
border-color: $green;
}
}
&__delete {
&--delete {
font-size: 0;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAeCAMAAABg6AyVAAAAbFBMVEUAAAAfHiIdHB4eHR8dHR4eHB4dHB4dHR8gICIdHB4dHB4dHB4dHB8eHh8hISEeHR8fHB8fHR8fHR8fHx8eHiArKyszMzMeHB8eHB8fHR8eHiAeHh4dHB4vLjDY2Nn////b29zKysq9vb28vLzkfBRpAAAAHHRSTlMAK/PW+I/llBv77N1kSCPwWlFAOTMGBb28hHlu08g5sgAAAMlJREFUOMuV1MsWgiAQgGHQyOx+s+sgYO//jnnMGIdDDfwbN99CYEDQFiVEKkolPUG7gl9VTWC31NKuDbVz+Fc1tRJtPDmxS2BS3p5ZC+XXnnbAVoz2WEBCH7uZAalzGoa06whGiznT6sG2xgX4QO2Aej1+KN7XBKL2FvGaMtTWBhbQhtoaYzVQrHKwuGf8hhAPSF5g3xPSt45sCHcouNWx436FGA+RHyQcD35EcUj54U8ff4WYvVi1zLjelUh/OG6XjOeLWv5hfAOI+HLwwOAqhAAAAABJRU5ErkJggg==") no-repeat center center;
background-size: auto 15px;
}
i&--active {
background-color: $active-color!important;
&--gray {
background-color: #F3F3F6;
}
&--active {
background-color: $active-color;
}
}