@pi0/framework7/src/_less-old/ios/picker.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Columns Picker === */
.picker-columns {
    width: 100%;
    height: 260px;
    z-index: 11500;
    &.picker-modal-inline, .popover & {
        height: 200px;
    }
    @media (orientation: landscape) and (max-height: 415px) {
        &:not(.picker-modal-inline) {
            height: 200px;
        }
    }
}
.popover.popover-picker-columns {
    width: 280px;
}
.picker-items {
    .flexbox();
    .justify-content(center);
    padding: 0;
    text-align: right;
    font-size: 24px;
    -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
    -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
}
.picker-items-col {
    overflow: hidden;
    position: relative;
    max-height: 100%;

    &.picker-items-col-left {
        text-align: left;
    }
    &.picker-items-col-center {
        text-align: center;
    }
    &.picker-items-col-right {
        text-align: right;
    }
    &.picker-items-col-divider {
        color:#000;
        .flexbox();
        .align-items(center);
    }
}
.picker-items-col-wrapper {
    .transition(300ms);
    
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.picker-item {
    height: 36px;
    line-height: 36px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    color:#707274;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    span {
        padding: 0 10px;
    }
    .transition(300ms);
    .picker-items-col-absolute &{
        position: absolute;
    }
    &.picker-item-far {
        pointer-events: none;
    }
    &.picker-selected {
        color: #000;
        .transform(translate3d(0,0,0) rotateX(0deg));
    }
}
.picker-center-highlight {
    height: 36px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    margin-top: -18px;
    .hairline(top, #a8abb0);
    .hairline(bottom, #a8abb0);
    pointer-events: none;
}
// 3D Picker
.picker-3d {
    .picker-items {
        overflow: hidden;
        -webkit-perspective: 1200px;
        perspective: 1200px;
    }
    .picker-items-col, .picker-items-col-wrapper, .picker-item {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .picker-items-col {
        overflow: visible;
    }
    .picker-item {
        -webkit-transform-origin: center center -110px;
        transform-origin: center center -110px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
}