@ionic/core
Version:
Base components for Ionic
274 lines (257 loc) • 7.62 kB
CSS
/**
* 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.
*/
.action-sheet-button-label-has-rich-content,
.alert-radio-label-has-rich-content,
.alert-checkbox-label-has-rich-content,
.select-option-label-has-rich-content {
display: flex;
align-items: center;
gap: 16px;
}
/**
* Outer label container has rich content
* (start, content, description, end) that needs the
* label to span the available row width.
*/
.action-sheet-button-label-has-rich-content,
.alert-radio-label-has-rich-content,
.alert-checkbox-label-has-rich-content,
.select-option-content {
flex: 1;
}
.action-sheet-button-label-text,
.alert-checkbox-label-text,
.alert-radio-label-text,
.select-option-label-text {
display: flex;
align-items: center;
gap: 12px;
}
.select-option-start,
.select-option-end {
display: flex;
align-items: center;
gap: 8px;
}
.select-option-description {
padding-left: 0;
padding-right: 0;
padding-top: 5px;
padding-bottom: 0;
display: block;
color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
font-size: 0.75rem;
}
/**
* Non-rich labels are plain text and should ellipsize when they
* overflow the row. Rich-content labels switch to flex so the
* start / content / end pieces can lay out side-by-side and wrap.
*/
.select-option-label:not(.select-option-label-has-rich-content) {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.select-option-label-has-rich-content {
display: flex;
align-items: center;
}
ion-radio.select-option-has-rich-content::part(label),
ion-checkbox.select-option-has-rich-content::part(label),
.select-option-content {
flex: 1;
/**
* Let rich content wrap instead of inheriting the label part's
* single-line truncation, so arbitrary slotted elements render
* without clipping.
*/
white-space: normal;
}
/**
* Cap slotted children so they can't stretch the option
* row out of proportion, keeping rows visually uniform
* regardless of the content.
*/
.select-option-start > ion-avatar,
.select-option-end > ion-avatar {
width: 40px;
height: 40px;
}
.select-option-start > ion-icon,
.select-option-end > ion-icon {
font-size: 24px;
}
.select-option-start > ion-img,
.select-option-start > img,
.select-option-start > svg,
.select-option-start > ion-thumbnail,
.select-option-end > ion-img,
.select-option-end > img,
.select-option-end > svg,
.select-option-end > ion-thumbnail {
width: 56px;
height: 56px;
}
.select-option-start > video,
.select-option-end > video {
width: 114px;
height: 56px;
}
:host {
height: 100%;
}
/**
* 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;
* }
* }
*/
ion-list ion-radio::part(container) {
display: none;
}
ion-list ion-radio::part(label) {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
ion-item {
--inner-border-width: 0;
}
.item-radio-checked {
--background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
--background-focused: var(--ion-color-primary, #0054e9);
--background-focused-opacity: 0.2;
--background-hover: var(--ion-color-primary, #0054e9);
--background-hover-opacity: 0.12;
}
.item-checkbox-checked {
--background-activated: var(--ion-item-color, var(--ion-text-color, #000));
--background-focused: var(--ion-item-color, var(--ion-text-color, #000));
--background-hover: var(--ion-item-color, var(--ion-text-color, #000));
--color: var(--ion-color-primary, #0054e9);
}