@ionic/core
Version:
Base components for Ionic
105 lines (96 loc) • 2.98 kB
CSS
: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; }