ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 10:07:07 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

add NumberKeyboard component

Browse Source
This commit is contained in:
陈嘉涵
2017-09-08 21:06:16 +08:00
parent c221922e04
commit f0cbcc99dc
9 changed files with 466 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/vant-css/src/base.css
View File

@@ -5,4 +5,5 @@
@import "./common/var.css";
@import "./common/normalize.css";
@import "./common/hairline.css";
@import "./common/animation.css";

21
packages/vant-css/src/common/animation.css Normal file
View File

@@ -0,0 +1,21 @@
@keyframes van-slide-bottom-enter {
from {
transform: translate3d(0, 100%, 0);
}
}
@keyframes van-slide-bottom-leave {
to {
transform: translate3d(0, 100%, 0);
}
}
.van-slide-bottom {
&-enter-active {
animation: van-slide-bottom-enter .3s both ease;
}
&-leave-active {
animation: van-slide-bottom-leave .3s both ease;
}
}

1
packages/vant-css/src/index.css
View File

@@ -34,6 +34,7 @@
@import './radio.css';
@import './switch.css';
@import './uploader.css';
@import './number-keyboard.css';
/* action components */
@import './actionsheet.css';

52
packages/vant-css/src/number-keyboard.css Normal file
View File

@@ -0,0 +1,52 @@
@import "./common/var.css";
.van-number-keyboard {
left: 0;
bottom: 0;
width: 100%;
position: fixed;
user-select: none;
background-color: $white;
animation-timing-function: ease-out;
&__title {
font-weight: 400;
text-align: center;
color: $gray-dark;
font-size: 12px;
line-height: 25px;
}
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;
&::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;
}
}
&__delete {
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;
}
}