UNPKG

@ionic/core

Version:
137 lines (135 loc) 4.39 kB
/** * 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 --color: Color of the card title */ display: block; position: relative; color: var(--color); } :host(.ion-color) { color: var(--ion-color-base); } /** * 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 { --color: var(--ion-text-color, #000); margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }