| 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;  }}
 |