framework7/components/picker/picker.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Picker === */
.picker {
  width: 100%;
  height: 260px;
  &.picker-inline, .popover & {
    height: 200px;
  }
  @media (orientation: landscape) and (max-height: 415px) {
    &:not(.picker-inline) {
      height: 200px;
    }
  }
}
.picker-popover {
  width: 280px;
}
.picker-columns {
  display: flex;
  overflow: hidden;
  justify-content: center;
  padding: 0;
  text-align: right;
  height: 100%;
  position: relative;
  -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
}
.picker-column {
  position: relative;
  max-height: 100%;
  &.picker-column-first:before, &.picker-column-last:after {
    height: 100%;
    width: 100vw;
    position: absolute;
    content: '';
    top: 0;
  }
  &.picker-column-first:before {
    .ltr({
      right: 100%;
    });
    .rtl({
      left: 100%;
    });
  }
  &.picker-column-last:after {
    .ltr({
      left: 100%;
    });
    .rtl({
      right: 100%;
    });
  }
  &.picker-column-left {
    text-align: left;
  }
  &.picker-column-center {
    text-align: center;
  }
  &.picker-column-right {
    text-align: right;
  }
  &.picker-column-divider {
    display: flex;
    align-items: center;
  }
}
.picker-items {
  transition: 300ms;
  transition-timing-function: ease-out;
}
.picker-item {
  height: 36px;
  line-height: 36px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  transition: 300ms;
  span {
    padding: 0 10px;
  }
  .picker-column-absolute &{
    position: absolute;
  }
  &.picker-item-far {
    pointer-events: none;
  }
  &.picker-item-selected {
    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;
  pointer-events: none;
}
.picker-3d {
  .picker-columns {
    overflow: hidden;
    perspective: 1200px;
  }
  .picker-column, .picker-items, .picker-item {
    transform-style: preserve-3d;
  }
  .picker-column {
    overflow: visible;
  }
  .picker-item {
    transform-origin: center center -110px;
    backface-visibility: hidden;
    transition-timing-function: ease-out;
  }
}

& when (@includeIosTheme) {
  @import url('./picker-ios.less');
}
& when (@includeMdTheme) {
  @import url('./picker-md.less');
}