framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 4.25 kB
CSS
:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-item-selected-text-color:#000}:root .dark,:root.dark{--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-item-selected-text-color:#fff}.ios{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:rgba(0, 0, 0, 0.87);--f7-picker-item-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-picker-item-text-color:rgba(255, 255, 255, 0.54);--f7-picker-divider-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-picker-column-font-size:20px;--f7-picker-item-text-color:#888;--f7-picker-divider-text-color:#000}.aurora .dark,.aurora.dark{--f7-picker-divider-text-color:#fff}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.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);font-size:var(--f7-picker-column-font-size)}.picker-column{position:relative;max-height:100%}.picker-column.picker-column-first:before,.picker-column.picker-column-last:after{height:100%;width:100vw;position:absolute;content:'';top:0}.picker-column.picker-column-first:before{right:100%}.picker-column.picker-column-last:after{left:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scrollbar-width:none;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px}.picker-items::-webkit-scrollbar{display:none;opacity:0}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;left:16px;right:16px;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .picker-center-highlight{left:8px;right:8px}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}