@ionic/core
Version:
Base components for Ionic
366 lines (348 loc) • 11.9 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;
* }
* }
*/
/**
* 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;
* }
* }
*/
/**
* 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;
* }
* }
*/
/**
* 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 {
position: absolute;
width: fit-content;
height: fit-content;
z-index: 999;
}
:host(.fab-horizontal-center) {
left: 0px;
right: 0px;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
}
:host(.fab-horizontal-start) {
/* stylelint-disable */
left: calc(10px + var(--ion-safe-area-left, 0px));
/* stylelint-enable */
}
:host-context([dir=rtl]):host(.fab-horizontal-start), :host-context([dir=rtl]).fab-horizontal-start {
right: calc(10px + var(--ion-safe-area-right, 0px));
left: unset;
}
@supports selector(:dir(rtl)) {
:host(.fab-horizontal-start:dir(rtl)) {
right: calc(10px + var(--ion-safe-area-right, 0px));
left: unset;
}
}
:host(.fab-horizontal-end) {
/* stylelint-disable */
right: calc(10px + var(--ion-safe-area-right, 0px));
/* stylelint-enable */
}
:host-context([dir=rtl]):host(.fab-horizontal-end), :host-context([dir=rtl]).fab-horizontal-end {
left: calc(10px + var(--ion-safe-area-left, 0px));
right: unset;
}
@supports selector(:dir(rtl)) {
:host(.fab-horizontal-end:dir(rtl)) {
left: calc(10px + var(--ion-safe-area-left, 0px));
right: unset;
}
}
:host(.fab-vertical-top) {
top: 10px;
}
/**
* Reset the top value since edge
* styles use margin-top.
*/
:host(.fab-vertical-top.fab-edge) {
top: 0;
}
/**
* We need to adjust the parent FAB button up by half
* its height so that half of it sits on the header. As a result,
* we target the slotted ion-fab-button instead of targeting the host.
*/
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button) {
margin-top: -50%;
}
/**
* The small FAB button adds top and bottom margin. We need to account for
* that margin when we adjust the FAB button for edge styles since we
* are overriding the margin-top value below.
*/
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
margin-top: calc((-100% + 16px) / 2);
}
/**
* Since we are adjusting the FAB button we also need
* to adjust the sibling ion-fab-list otherwise there will be
* a gap between the parent FAB button and the associated list.
*/
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
margin-top: -50%;
}
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
margin-top: calc(50% + 10px);
}
:host(.fab-vertical-bottom) {
bottom: 10px;
}
/**
* Reset the bottom value since edge
* styles use margin-bottom.
*/
:host(.fab-vertical-bottom.fab-edge) {
bottom: 0;
}
/**
* We need to adjust the parent FAB button down by half
* its height so that half of it sits on the footer. As a result,
* we target the slotted ion-fab-button instead of targeting the host.
*/
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button) {
margin-bottom: -50%;
}
/**
* The small FAB button adds top and bottom margin. We need to account for
* that margin when we adjust the FAB button for edge styles since we
* are overriding the margin-bottom value below.
*/
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
margin-bottom: calc((-100% + 16px) / 2);
}
/**
* Since we are adjusting the FAB button we also need
* to adjust the sibling ion-fab-list otherwise there will be
* a gap between the parent FAB button and the associated list.
*/
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
margin-bottom: -50%;
}
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
margin-bottom: calc(50% + 10px);
}
:host(.fab-vertical-center) {
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
}