UNPKG

@ionic/core

Version:
108 lines (95 loc) 2.26 kB
.picker-col { display: flex; position: relative; flex: 1; justify-content: center; height: 100%; box-sizing: content-box; contain: content; } .picker-opts { position: relative; flex: 1; max-width: 100%; } .picker-opt { left: 0; top: 0; display: block; position: absolute; width: 100%; border: 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; contain: strict; overflow: hidden; will-change: transform; } :host-context([dir=rtl]) .picker-opt { right: 0; } .picker-opt.picker-opt-disabled { pointer-events: none; } .picker-opt-disabled { opacity: 0; } .picker-opts-left { justify-content: flex-start; } :host-context([dir=rtl]) .picker-opts-left { justify-content: flex-end; } .picker-opts-right { justify-content: flex-end; } :host-context([dir=rtl]) .picker-opts-right { justify-content: flex-start; } .picker-opt:active, .picker-opt:focus { outline: none; } .picker-prefix { position: relative; flex: 1; text-align: end; white-space: nowrap; } .picker-suffix { position: relative; flex: 1; text-align: start; white-space: nowrap; } .picker-col { padding-left: 4px; padding-right: 4px; padding-top: 0; padding-bottom: 0; transform-style: preserve-3d; } @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { .picker-col { padding-left: unset; padding-right: unset; -webkit-padding-start: 4px; padding-inline-start: 4px; -webkit-padding-end: 4px; padding-inline-end: 4px; } } .picker-prefix, .picker-suffix, .picker-opts { top: 77px; transform-style: preserve-3d; color: inherit; font-size: 20px; line-height: 42px; pointer-events: none; } .picker-opt { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; transform-origin: center center; height: 46px; transform-style: preserve-3d; transition-timing-function: ease-out; background: transparent; color: inherit; font-size: 20px; line-height: 42px; backface-visibility: hidden; pointer-events: auto; } :host-context([dir=rtl]) .picker-opt { transform-origin: calc(100% - center) center; }