@ionic/core
Version:
Base components for Ionic
205 lines (198 loc) • 6.31 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 loading dialog
*
* @prop --min-width: Minimum width of the loading dialog
* @prop --width: Width of the loading dialog
* @prop --max-width: Maximum width of the loading dialog
*
* @prop --min-height: Minimum height of the loading dialog
* @prop --height: Height of the loading dialog
* @prop --max-height: Maximum height of the loading dialog
*
* @prop --spinner-color: Color of the loading spinner
*
* @prop --backdrop-opacity: Opacity of the backdrop
*/
--min-width: auto;
--width: auto;
--min-height: auto;
--height: auto;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
outline: none;
font-family: var(--ion-font-family, inherit);
contain: strict;
touch-action: none;
user-select: none;
z-index: 1001;
}
:host(.overlay-hidden) {
display: none;
}
.loading-wrapper {
display: flex;
align-items: inherit;
justify-content: inherit;
width: var(--width);
min-width: var(--min-width);
max-width: var(--max-width);
height: var(--height);
min-height: var(--min-height);
max-height: var(--max-height);
background: var(--background);
opacity: 0;
z-index: 10;
}
ion-spinner {
color: var(--spinner-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-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));
--max-width: 270px;
--max-height: 90%;
--spinner-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
--backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
color: var(--ion-text-color, #000);
font-size: 0.875rem;
}
.loading-wrapper {
border-radius: 8px;
-webkit-padding-start: 34px;
padding-inline-start: 34px;
-webkit-padding-end: 34px;
padding-inline-end: 34px;
padding-top: 24px;
padding-bottom: 24px;
}
@supports (backdrop-filter: blur(0)) {
:host(.loading-translucent) .loading-wrapper {
background-color: rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);
backdrop-filter: saturate(180%) blur(20px);
}
}
.loading-content {
font-weight: bold;
}
.loading-spinner + .loading-content {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}