| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- @import '../style/var';
- .van-number-keyboard {
- left: 0;
- bottom: 0;
- width: 100%;
- position: fixed;
- user-select: none;
- background-color: @white;
- animation-timing-function: ease-out;
- &__title {
- height: 30px;
- font-size: 14px;
- line-height: 30px;
- text-align: center;
- position: relative;
- color: @gray-darker;
- &-left {
- left: 0;
- position: absolute;
- }
- }
- &__body {
- box-sizing: border-box;
- }
- &__close {
- right: 0;
- color: @blue;
- font-size: 14px;
- padding: 0 15px;
- position: absolute;
- &:active {
- background-color: @active-color;
- }
- }
- &__sidebar {
- top: 0;
- right: 0;
- width: 25%;
- position: absolute;
- height: @number-keyboard-key-height * 4;
- }
- &--custom {
- .van-number-keyboard__body {
- padding-right: 25%;
- }
- }
- &--safe-area-inset-bottom {
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
- }
- }
- .van-key {
- width: 100% / 3;
- font-size: 24px;
- font-style: normal;
- text-align: center;
- display: inline-block;
- vertical-align: middle;
- height: @number-keyboard-key-height;
- line-height: @number-keyboard-key-height;
- &::after {
- border-width: 1px 1px 0 0;
- }
- &--middle {
- width: 200% / 3;
- }
- &--big {
- width: 100%;
- height: @number-keyboard-key-height * 2;
- line-height: @number-keyboard-key-height * 2;
- }
- &--blue,
- &--delete {
- font-size: 16px;
- }
- &--blue {
- color: @white;
- background-color: @blue;
- &.van-key--active {
- background-color: @blue;
- }
- &::after {
- border-color: @blue;
- }
- }
- &--gray {
- background-color: @number-keyboard-key-background;
- }
- &--active {
- background-color: @active-color;
- }
- }
|