UNPKG

@ionic/core

Version:
105 lines (96 loc) 2.98 kB
:host { /** * @prop --background: Background of the item option * @prop --color: Color of the item option */ --background: var(--ion-color-primary, #3880ff); --color: var(--ion-color-primary-contrast, #fff); background: var(--background); color: var(--color); font-family: var(--ion-font-family, inherit); } :host(.in-list.item-options-end:last-child) { padding-right: calc(.7em + var(--ion-safe-area-right)); } @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { :host(.in-list.item-options-end:last-child) { padding-right: unset; -webkit-padding-end: calc(.7em + var(--ion-safe-area-right)); padding-inline-end: calc(.7em + var(--ion-safe-area-right)); } } :host(.in-list.item-options-start:first-child) { padding-left: calc(.7em + var(--ion-safe-area-left)); } @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { :host(.in-list.item-options-start:first-child) { padding-left: unset; -webkit-padding-start: calc(.7em + var(--ion-safe-area-left)); padding-inline-start: calc(.7em + var(--ion-safe-area-left)); } } :host(.ion-color) { background: var(--ion-color-base); color: var(--ion-color-contrast); } .button-native { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; text-decoration: inherit; text-overflow: inherit; text-transform: inherit; text-align: inherit; white-space: inherit; color: inherit; padding-left: 0.7em; padding-right: 0.7em; padding-top: 0; padding-bottom: 0; position: relative; width: 100%; height: 100%; border: 0; outline: none; background: transparent; cursor: pointer; appearance: none; } @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { .button-native { padding-left: unset; padding-right: unset; -webkit-padding-start: 0.7em; padding-inline-start: 0.7em; -webkit-padding-end: 0.7em; padding-inline-end: 0.7em; } } .button-inner { display: flex; flex-direction: column; flex-flow: row nowrap; flex-shrink: 0; align-items: center; justify-content: center; width: 100%; height: 100%; } ::slotted([slot="icon-only"]) { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; margin-left: 10px; margin-right: 10px; margin-top: 0; margin-bottom: 0; min-width: .9em; font-size: 1.8em; } @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { ::slotted([slot="icon-only"]) { margin-left: unset; margin-right: unset; -webkit-margin-start: 10px; margin-inline-start: 10px; -webkit-margin-end: 10px; margin-inline-end: 10px; } } :host(.item-option-expandable) { flex-shrink: 0; transition-duration: 0; transition-property: none; transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); } :host { font-size: 14px; font-weight: 500; text-transform: uppercase; }