framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 3.99 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 .theme-dark,:root.theme-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 .theme-dark,.ios.theme-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 .theme-dark,.md.theme-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 .theme-dark,.aurora.theme-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{left:100%}.picker-column.picker-column-last:after{right: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{transition:.3s;transition-timing-function:ease-out}.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;transition:.3s;color:var(--f7-picker-item-text-color);cursor:pointer}.picker-item span{padding:0 10px}.picker-column-absolute .picker-item{position:absolute}.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-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;perspective:1200px}.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{transform-origin:center center -110px;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-timing-function:ease-out}