UNPKG

@ionic/angular

Version:

Angular specific wrappers for @ionic/core

203 lines (186 loc) • 5.75 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; * } * } */ /** * 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; * } * } */ .ion-no-padding { --padding-start: 0; --padding-end: 0; --padding-top: 0; --padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; } .ion-padding { --padding-start: var(--ion-padding, 16px); --padding-end: var(--ion-padding, 16px); --padding-top: var(--ion-padding, 16px); --padding-bottom: var(--ion-padding, 16px); -webkit-padding-start: var(--ion-padding, 16px); padding-inline-start: var(--ion-padding, 16px); -webkit-padding-end: var(--ion-padding, 16px); padding-inline-end: var(--ion-padding, 16px); padding-top: var(--ion-padding, 16px); padding-bottom: var(--ion-padding, 16px); } .ion-padding-top { --padding-top: var(--ion-padding, 16px); padding-top: var(--ion-padding, 16px); } .ion-padding-start { --padding-start: var(--ion-padding, 16px); -webkit-padding-start: var(--ion-padding, 16px); padding-inline-start: var(--ion-padding, 16px); } .ion-padding-end { --padding-end: var(--ion-padding, 16px); -webkit-padding-end: var(--ion-padding, 16px); padding-inline-end: var(--ion-padding, 16px); } .ion-padding-bottom { --padding-bottom: var(--ion-padding, 16px); padding-bottom: var(--ion-padding, 16px); } .ion-padding-vertical { --padding-top: var(--ion-padding, 16px); --padding-bottom: var(--ion-padding, 16px); padding-top: var(--ion-padding, 16px); padding-bottom: var(--ion-padding, 16px); } .ion-padding-horizontal { --padding-start: var(--ion-padding, 16px); --padding-end: var(--ion-padding, 16px); -webkit-padding-start: var(--ion-padding, 16px); padding-inline-start: var(--ion-padding, 16px); -webkit-padding-end: var(--ion-padding, 16px); padding-inline-end: var(--ion-padding, 16px); } .ion-no-margin { --margin-start: 0; --margin-end: 0; --margin-top: 0; --margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; } .ion-margin { --margin-start: var(--ion-margin, 16px); --margin-end: var(--ion-margin, 16px); --margin-top: var(--ion-margin, 16px); --margin-bottom: var(--ion-margin, 16px); -webkit-margin-start: var(--ion-margin, 16px); margin-inline-start: var(--ion-margin, 16px); -webkit-margin-end: var(--ion-margin, 16px); margin-inline-end: var(--ion-margin, 16px); margin-top: var(--ion-margin, 16px); margin-bottom: var(--ion-margin, 16px); } .ion-margin-top { --margin-top: var(--ion-margin, 16px); margin-top: var(--ion-margin, 16px); } .ion-margin-start { --margin-start: var(--ion-margin, 16px); -webkit-margin-start: var(--ion-margin, 16px); margin-inline-start: var(--ion-margin, 16px); } .ion-margin-end { --margin-end: var(--ion-margin, 16px); -webkit-margin-end: var(--ion-margin, 16px); margin-inline-end: var(--ion-margin, 16px); } .ion-margin-bottom { --margin-bottom: var(--ion-margin, 16px); margin-bottom: var(--ion-margin, 16px); } .ion-margin-vertical { --margin-top: var(--ion-margin, 16px); --margin-bottom: var(--ion-margin, 16px); margin-top: var(--ion-margin, 16px); margin-bottom: var(--ion-margin, 16px); } .ion-margin-horizontal { --margin-start: var(--ion-margin, 16px); --margin-end: var(--ion-margin, 16px); -webkit-margin-start: var(--ion-margin, 16px); margin-inline-start: var(--ion-margin, 16px); -webkit-margin-end: var(--ion-margin, 16px); margin-inline-end: var(--ion-margin, 16px); } /*# sourceMappingURL=padding.css.map */