UNPKG

@ionic/core

Version:

Base components for Ionic

101 lines (93 loc) • 2.28 kB
:host { /** * @prop --background: Background of the card * @prop --color: Color of the card */ --ion-safe-area-left: 0px; --ion-safe-area-right: 0px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: block; position: relative; background: var(--background); color: var(--color); font-family: var(--ion-font-family, inherit); overflow: hidden; } :host(.ion-color) { background: var(--ion-color-base); color: var(--ion-color-contrast); } :host(.card-disabled) { cursor: default; opacity: 0.3; pointer-events: none; } .card-native { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; text-decoration: inherit; text-indent: inherit; text-overflow: inherit; text-transform: inherit; text-align: inherit; white-space: inherit; color: inherit; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; display: block; width: 100%; min-height: var(--min-height); transition: var(--transition); border-width: var(--border-width); border-style: var(--border-style); border-color: var(--border-color); outline: none; background: inherit; } .card-native::-moz-focus-inner { border: 0; } button, a { cursor: pointer; user-select: none; -webkit-user-drag: none; } ion-ripple-effect { color: var(--ripple-color); } :host { --background: var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff))); --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666))); margin-left: 16px; margin-right: 16px; margin-top: 24px; margin-bottom: 24px; border-radius: 8px; transform: translateZ(0); transition: transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1); font-size: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { :host { margin-left: unset; margin-right: unset; -webkit-margin-start: 16px; margin-inline-start: 16px; -webkit-margin-end: 16px; margin-inline-end: 16px; } } :host(.ion-activated) { transform: scale3d(0.97, 0.97, 1); }