@ionic/core
Version:
Base components for Ionic
203 lines (195 loc) • 6.07 kB
CSS
/**
* Convert a font size to a dynamic font size.
* Fonts that participate in Dynamic Type should use
* dynamic font sizes.
* @param size - The initial font size including the unit (i.e. px or pt)
* @param unit (optional) - The unit to convert to. Use this if you want to
* convert to a unit other than $baselineUnit.
*/
/**
* Convert a font size to a dynamic font size but impose
* a maximum font size.
* @param size - The initial font size including the unit (i.e. px or pt)
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
* convert to a unit other than $baselineUnit.
*/
/**
* Convert a font size to a dynamic font size but impose
* a minimum font size.
* @param size - The initial font size including the unit (i.e. px or pt)
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
* convert to a unit other than $baselineUnit.
*/
/**
* Convert a font size to a dynamic font size but impose
* maximum and minimum font sizes.
* @param size - The initial font size including the unit (i.e. px or pt)
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
* convert to a unit other than $baselineUnit.
*/
/**
* A heuristic that applies CSS to tablet
* viewports.
*
* Usage:
* @include tablet-viewport() {
* :host {
* background-color: green;
* }
* }
*/
/**
* A heuristic that applies CSS to mobile
* viewports (i.e. phones, not tablets).
*
* Usage:
* @include mobile-viewport() {
* :host {
* background-color: blue;
* }
* }
*/
: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);
contain: content;
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);
}
/**
* Convert a font size to a dynamic font size.
* Fonts that participate in Dynamic Type should use
* dynamic font sizes.
* @param size - The initial font size including the unit (i.e. px or pt)
* @param unit (optional) - The unit to convert to. Use this if you want to
* convert to a unit other than $baselineUnit.
*/
/**
* Convert a font size to a dynamic font size but impose
* a maximum font size.
* @param size - The initial font size including the unit (i.e. px or pt)
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
* convert to a unit other than $baselineUnit.
*/
/**
* Convert a font size to a dynamic font size but impose
* a minimum font size.
* @param size - The initial font size including the unit (i.e. px or pt)
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
* convert to a unit other than $baselineUnit.
*/
/**
* Convert a font size to a dynamic font size but impose
* maximum and minimum font sizes.
* @param size - The initial font size including the unit (i.e. px or pt)
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
* convert to a unit other than $baselineUnit.
*/
/**
* A heuristic that applies CSS to tablet
* viewports.
*
* Usage:
* @include tablet-viewport() {
* :host {
* background-color: green;
* }
* }
*/
/**
* A heuristic that applies CSS to mobile
* viewports (i.e. phones, not tablets).
*
* Usage:
* @include mobile-viewport() {
* :host {
* background-color: blue;
* }
* }
*/
: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, var(--ion-text-color-step-400, #666666))));
-webkit-margin-start: 16px;
margin-inline-start: 16px;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
margin-top: 24px;
margin-bottom: 24px;
border-radius: 8px;
transition: transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);
font-size: 0.875rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
:host(.ion-activated) {
transform: scale3d(0.97, 0.97, 1);
}