123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- @import '../style/var';
- .van-picker {
- position: relative;
- background-color: @picker-background-color;
- user-select: none;
- &__toolbar {
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: @picker-toolbar-height;
- }
- &__cancel,
- &__confirm {
- height: 100%;
- padding: @picker-action-padding;
- font-size: @picker-action-font-size;
- background-color: transparent;
- border: none;
- cursor: pointer;
- &:active {
- opacity: @active-opacity;
- }
- }
- &__confirm {
- color: @picker-confirm-action-color;
- }
- &__cancel {
- color: @picker-cancel-action-color;
- }
- &__title {
- max-width: 50%;
- font-weight: @font-weight-bold;
- font-size: @picker-title-font-size;
- line-height: @picker-title-line-height;
- text-align: center;
- }
- &__columns {
- position: relative;
- display: flex;
- cursor: grab;
- }
- &__loading {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 3;
- display: flex;
- align-items: center;
- justify-content: center;
- color: @picker-loading-icon-color;
- background-color: @picker-loading-mask-color;
- }
- &__frame {
- position: absolute;
- top: 50%;
- right: @padding-md;
- left: @padding-md;
- z-index: 2;
- transform: translateY(-50%);
- pointer-events: none;
- }
- &__mask {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- width: 100%;
- height: 100%;
- background-image: linear-gradient(
- 180deg,
- hsla(0, 0%, 100%, 0.9),
- hsla(0, 0%, 100%, 0.4)
- ),
- linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
- background-repeat: no-repeat;
- background-position: top, bottom;
- // fix rendering failure during animation on safari
- transform: translateZ(0);
- pointer-events: none;
- }
- &-column {
- flex: 1;
- overflow: hidden;
- font-size: @picker-option-font-size;
- &__wrapper {
- transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
- }
- &__item {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0 @padding-base;
- color: @picker-option-text-color;
- &--disabled {
- cursor: not-allowed;
- opacity: @picker-option-disabled-opacity;
- }
- }
- }
- }
|