UNPKG

@ionic/core

Version:
97 lines (86 loc) 2.13 kB
:host { /** * @prop --padding-top: Top padding of the select * @prop --padding-end: End padding of the select * @prop --padding-bottom: Bottom padding of the select * @prop --padding-start: Start padding of the select */ padding-left: var(--padding-start); padding-right: var(--padding-end); padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); display: flex; position: relative; font-family: var(--ion-font-family, inherit); overflow: hidden; z-index: 2; } @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { :host { padding-left: unset; padding-right: unset; -webkit-padding-start: var(--padding-start); padding-inline-start: var(--padding-start); -webkit-padding-end: var(--padding-end); padding-inline-end: var(--padding-end); } } :host(.in-item) { position: static; max-width: 45%; } :host(.select-disabled) { opacity: .4; pointer-events: none; } :host(.ion-focused) button { border: 2px solid #5e9ed6; } .select-placeholder { color: currentColor; opacity: .33; } button { left: 0; top: 0; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; position: absolute; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; appearance: none; outline: none; } :host-context([dir=rtl]) button { right: 0; } button::-moz-focus-inner { border: 0; } .select-icon { position: relative; } .select-text { flex: 1; min-width: 16px; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .select-icon-inner { left: 5px; top: 50%; margin-top: -3px; position: absolute; width: 0; height: 0; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; color: currentColor; opacity: .33; pointer-events: none; } :host-context([dir=rtl]) .select-icon-inner { right: 5px; } :host { --padding-top: 10px; --padding-end: 0; --padding-bottom: 11px; --padding-start: 16px; } .select-icon { width: 19px; height: 19px; }