@ionic/core
Version:
Base components for Ionic
287 lines (274 loc) • 8.42 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 picker
* @prop --background-rgb: Background of the picker in rgb format
*
* @prop --border-radius: Border radius of the picker
* @prop --border-color: Border color of the picker
* @prop --border-width: Border width of the picker
* @prop --border-style: Border style of the picker
*
* @prop --min-width: Minimum width of the picker
* @prop --width: Width of the picker
* @prop --max-width: Maximum width of the picker
*
* @prop --min-height: Minimum height of the picker
* @prop --height: Height of the picker
* @prop --max-height: Maximum height of the picker
*
* @prop --backdrop-opacity: Opacity of the backdrop
*/
--border-radius: 0;
--border-style: solid;
--min-width: auto;
--width: 100%;
--max-width: 500px;
--min-height: auto;
--max-height: auto;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
top: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
outline: none;
font-family: var(--ion-font-family, inherit);
contain: strict;
user-select: none;
z-index: 1001;
}
:host {
inset-inline-start: 0;
}
:host(.overlay-hidden) {
display: none;
}
.picker-wrapper {
border-radius: var(--border-radius);
left: 0;
right: 0;
bottom: 0;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
margin-top: auto;
margin-bottom: auto;
transform: translate3d(0, 100%, 0);
display: flex;
position: absolute;
flex-direction: column;
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);
border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--border-color);
background: var(--background);
contain: strict;
overflow: hidden;
z-index: 10;
}
.picker-toolbar {
width: 100%;
background: transparent;
contain: strict;
z-index: 1;
}
.picker-button {
border: 0;
font-family: inherit;
}
.picker-button:active, .picker-button:focus {
outline: none;
}
.picker-columns {
display: flex;
position: relative;
justify-content: center;
margin-bottom: var(--ion-safe-area-bottom, 0);
contain: strict;
overflow: hidden;
}
.picker-above-highlight,
.picker-below-highlight {
display: none;
pointer-events: none;
}
/**
* 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-background-color, #fff);
--border-width: 0.55px 0 0;
--border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
--height: 260px;
--backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
color: var(--ion-item-color, var(--ion-text-color, #000));
}
.picker-toolbar {
display: flex;
justify-content: flex-end;
height: 44px;
}
.picker-button,
.picker-button.ion-activated {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
-webkit-padding-start: 1.1em;
padding-inline-start: 1.1em;
-webkit-padding-end: 1.1em;
padding-inline-end: 1.1em;
padding-top: 0;
padding-bottom: 0;
height: 44px;
background: transparent;
color: var(--ion-color-primary, #0054e9);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
box-shadow: none;
}
.picker-columns {
height: 216px;
perspective: 1800px;
}
.picker-above-highlight {
top: 0;
transform: translate3d(0, 0, 90px);
position: absolute;
width: 100%;
height: 81px;
border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
background: linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);
z-index: 10;
}
.picker-above-highlight {
inset-inline-start: 0;
}
.picker-below-highlight {
top: 115px;
transform: translate3d(0, 0, 90px);
position: absolute;
width: 100%;
height: 119px;
border-top: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
background: linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);
z-index: 11;
}
.picker-below-highlight {
inset-inline-start: 0;
}