| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 | 
							- @import '../style/var';
 
- .van-number-keyboard {
 
-   position: fixed;
 
-   bottom: 0;
 
-   left: 0;
 
-   z-index: @number-keyboard-z-index;
 
-   width: 100%;
 
-   padding-bottom: 22px;
 
-   background-color: @number-keyboard-background-color;
 
-   user-select: none;
 
-   &--with-title {
 
-     border-radius: 20px 20px 0 0;
 
-   }
 
-   &__header {
 
-     position: relative;
 
-     display: flex;
 
-     align-items: center;
 
-     justify-content: center;
 
-     box-sizing: content-box;
 
-     height: @number-keyboard-title-height;
 
-     padding-top: 6px;
 
-     color: @number-keyboard-title-color;
 
-     font-size: @number-keyboard-title-font-size;
 
-   }
 
-   &__title {
 
-     display: inline-block;
 
-     font-weight: normal;
 
-     &-left {
 
-       position: absolute;
 
-       left: 0;
 
-     }
 
-   }
 
-   &__body {
 
-     display: flex;
 
-     padding: 6px 0 0 6px;
 
-   }
 
-   &__keys {
 
-     display: flex;
 
-     flex: 3;
 
-     flex-wrap: wrap;
 
-   }
 
-   &__close {
 
-     position: absolute;
 
-     right: 0;
 
-     height: 100%;
 
-     padding: @number-keyboard-close-padding;
 
-     color: @number-keyboard-close-color;
 
-     font-size: @number-keyboard-close-font-size;
 
-     background-color: transparent;
 
-     border: none;
 
-     cursor: pointer;
 
-     &:active {
 
-       opacity: @active-opacity;
 
-     }
 
-   }
 
-   &__sidebar {
 
-     display: flex;
 
-     flex: 1;
 
-     flex-direction: column;
 
-   }
 
-   &--unfit {
 
-     padding-bottom: 0;
 
-   }
 
- }
 
- .van-key {
 
-   display: flex;
 
-   align-items: center;
 
-   justify-content: center;
 
-   height: @number-keyboard-key-height;
 
-   font-size: @number-keyboard-key-font-size;
 
-   line-height: 1.5;
 
-   background-color: @white;
 
-   border-radius: @border-radius-lg;
 
-   cursor: pointer;
 
-   &--large {
 
-     // height: 100% can't fill flex parent on legacy safari
 
-     // see: https://stackoverflow.com/questions/33636796
 
-     position: absolute;
 
-     top: 0;
 
-     right: 6px;
 
-     bottom: 6px;
 
-     left: 0;
 
-     height: auto;
 
-   }
 
-   &--blue,
 
-   &--delete {
 
-     font-size: @number-keyboard-delete-font-size;
 
-   }
 
-   &--active {
 
-     background-color: @number-keyboard-key-active-color;
 
-   }
 
-   &--blue {
 
-     color: @number-keyboard-button-text-color;
 
-     background-color: @number-keyboard-button-background-color;
 
-     &.van-key--active {
 
-       background-color: darken(@number-keyboard-button-background-color, 10%);
 
-     }
 
-   }
 
-   &__wrapper {
 
-     position: relative;
 
-     flex: 1;
 
-     flex-basis: 33%;
 
-     box-sizing: border-box;
 
-     padding: 0 6px 6px 0;
 
-     &--wider {
 
-       flex-basis: 66%;
 
-     }
 
-   }
 
-   &__delete-icon {
 
-     width: 32px;
 
-     height: 22px;
 
-   }
 
-   &__collapse-icon {
 
-     width: 30px;
 
-     height: 24px;
 
-   }
 
-   &__loading-icon {
 
-     color: @number-keyboard-button-text-color;
 
-   }
 
- }
 
 
  |