framework7/components/picker/picker.css

Full featured mobile HTML framework for building iOS & Android apps

: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}.ios{--f7-picker-column-font-size:20px;--f7-picker-item-selected-text-color:#000;--f7-picker-item-selected-bg-color:#00000012;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:#00000073}.ios .dark,.ios.dark{--f7-picker-item-selected-text-color:#fff;--f7-picker-item-selected-bg-color:#ffffff1a;--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:#ffffff8c}.md{--f7-picker-column-font-size:20px}.md,.md .dark,.md [class*=color-]{--f7-picker-item-selected-text-color:var(--f7-md-on-surface);--f7-picker-item-text-color:var(--f7-md-on-surface-variant);--f7-picker-divider-text-color:var(--f7-md-on-surface);--f7-picker-item-selected-border-color:var(--f7-md-outline)}.picker{height:var(--f7-picker-height);width:100%}.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:none;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-columns{display:flex;font-size:var(--f7-picker-column-font-size);height:100%;justify-content:center;overflow:hidden;padding:0;position:relative;text-align:right;--f7-picker-mask-bg-color:#0000}.popover .picker-columns{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.picker-columns:after,.picker-columns:before{content:"";height:20%;left:0;pointer-events:none;position:absolute;width:100%;z-index:100}.page .picker-columns{--f7-picker-mask-bg-color:var(--f7-page-bg-color)}.block-strong .picker-columns{--f7-picker-mask-bg-color:var(--f7-block-strong-bg-color)}.picker-sheet .picker-columns{--f7-picker-mask-bg-color:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover .picker-columns{--f7-picker-mask-bg-color:var(--f7-popover-bg-color)}.picker-columns:before{background-image:linear-gradient(to bottom,var(--f7-picker-mask-bg-color),#0000);top:0}.picker-columns:after{background-image:linear-gradient(to top,var(--f7-picker-mask-bg-color),#0000);bottom:0}.picker-column{max-height:100%;position:relative;z-index:10}.picker-column.picker-column-first.picker-column-last{width: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{align-items:center;color:var(--f7-picker-divider-text-color);display:flex}.picker-items{box-sizing:border-box;height:100%;overflow:auto;padding:var(--f7-picker-scroll-padding,0) 0;scroll-snap-type:y mandatory;scrollbar-color:#0000;scrollbar-width:none}.picker-items::-webkit-scrollbar{appearance:none;background:#0000;display:none;opacity:0;width:0}.picker-items::-webkit-scrollbar-track{background:#0000;box-shadow:none}.picker-items::-webkit-scrollbar-thumb{background-color:initial;border-radius:9999px;outline:none;position:relative}.picker-item{box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;height:var(--f7-picker-item-height);left:0;line-height:var(--f7-picker-item-height);overflow:hidden;position:relative;scroll-snap-align:center;text-overflow:ellipsis;top:0;white-space:nowrap;width:100%}.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:translateZ(0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{box-sizing:border-box;height:var(--f7-picker-item-height);margin-top:calc(var(--f7-picker-item-height)*-1/2);pointer-events:none;position:absolute;top:50%}.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{overflow:visible;perspective:1200px}.picker-3d .picker-item>span{backface-visibility:hidden;box-sizing:border-box;display:block;max-width:100%;overflow:hidden;position:relative;text-overflow:ellipsis;transform-origin:center center -100px;transform-style:preserve-3d}.ios .picker-center-highlight{background-color:var(--f7-picker-item-selected-bg-color);border-radius:16px;left:16px;right:16px}.popover .ios .picker-center-highlight{left:8px;right:8px}.ios .picker-popover .toolbar{position:absolute}.md .picker-popover .toolbar:before{display:none!important}.md .picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.md .picker-center-highlight{border-bottom:1px solid var(--f7-md-outline);border-top:1px solid var(--f7-md-outline);left:0;right:0}