UNPKG

@ionic/angular

Version:

Angular specific wrappers for @ionic/core

294 lines (256 loc) • 6.1 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-float-left { float: left !important; } .ion-float-right { float: right !important; } .ion-float-start { float: left !important; } :host-context([dir=rtl]) .ion-float-start { float: right !important; } [dir=rtl] .ion-float-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-start:dir(rtl) { float: right !important; } } .ion-float-end { float: right !important; } :host-context([dir=rtl]) .ion-float-end { float: left !important; } [dir=rtl] .ion-float-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-end:dir(rtl) { float: left !important; } } @media (min-width: 576px) { .ion-float-sm-left { float: left !important; } .ion-float-sm-right { float: right !important; } .ion-float-sm-start { float: left !important; } :host-context([dir=rtl]) .ion-float-sm-start { float: right !important; } [dir=rtl] .ion-float-sm-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-sm-start:dir(rtl) { float: right !important; } } .ion-float-sm-end { float: right !important; } :host-context([dir=rtl]) .ion-float-sm-end { float: left !important; } [dir=rtl] .ion-float-sm-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-sm-end:dir(rtl) { float: left !important; } } } @media (min-width: 768px) { .ion-float-md-left { float: left !important; } .ion-float-md-right { float: right !important; } .ion-float-md-start { float: left !important; } :host-context([dir=rtl]) .ion-float-md-start { float: right !important; } [dir=rtl] .ion-float-md-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-md-start:dir(rtl) { float: right !important; } } .ion-float-md-end { float: right !important; } :host-context([dir=rtl]) .ion-float-md-end { float: left !important; } [dir=rtl] .ion-float-md-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-md-end:dir(rtl) { float: left !important; } } } @media (min-width: 992px) { .ion-float-lg-left { float: left !important; } .ion-float-lg-right { float: right !important; } .ion-float-lg-start { float: left !important; } :host-context([dir=rtl]) .ion-float-lg-start { float: right !important; } [dir=rtl] .ion-float-lg-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-lg-start:dir(rtl) { float: right !important; } } .ion-float-lg-end { float: right !important; } :host-context([dir=rtl]) .ion-float-lg-end { float: left !important; } [dir=rtl] .ion-float-lg-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-lg-end:dir(rtl) { float: left !important; } } } @media (min-width: 1200px) { .ion-float-xl-left { float: left !important; } .ion-float-xl-right { float: right !important; } .ion-float-xl-start { float: left !important; } :host-context([dir=rtl]) .ion-float-xl-start { float: right !important; } [dir=rtl] .ion-float-xl-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-xl-start:dir(rtl) { float: right !important; } } .ion-float-xl-end { float: right !important; } :host-context([dir=rtl]) .ion-float-xl-end { float: left !important; } [dir=rtl] .ion-float-xl-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-xl-end:dir(rtl) { float: left !important; } } } /*# sourceMappingURL=float-elements.css.map */